🚀 How to Build a WebSocket Tracker using Coinbase Prime API with Node.js + React

👋 Introduction

In the world of crypto trading, real-time updates are crucial — price movements, order books, and trade confirmations must be instant. That's where WebSockets shine.

In this tutorial, we’ll build a full-stack Coinbase Prime WebSocket Tracker using Node.js (TypeScript) for the backend and React for the frontend. This project is perfect if you're exploring real-time applications, authenticated WebSocket feeds, and crypto APIs.

📋 Table of Contents

1. Why Use Coinbase Prime WebSocket Feed?

2. Project Overview

3. Backend Setup (Node.js + TypeScript)

4. Coinbase Prime Authentication (HMAC SHA256)

5. Frontend Setup (React + WebSocket Client)

6. Displaying Real-time Data

7. Final Thoughts

🔗 1. Why Use Coinbase Prime WebSocket Feed?

Coinbase Prime offers an authenticated WebSocket API that gives you access to channels like:

• heartbeat – Keepalive signal

• status – Product and system status

• level2 – Real-time order book

• user – Personal order updates (authenticated)

• matches – Trade executions

Unlike Coinbase Pro, this feed is intended for institutional-grade apps. So if you're building anything real-time and crypto-focused, this is gold.

🏗️ 2. Project Overview

We’ll build:

• A backend server to authenticate and subscribe to WebSocket channels from Coinbase Prime

• A React frontend that connects to our backend via WebSocket to show real-time updates

Tech stack:

• Backend: Node.js, TypeScript, ws, crypto

• Frontend: React, WebSocket API

🛠️ 3. Backend Setup (Node.js + TypeScript)

👉 Install Dependencies

npm init -y
npm install ws dotenv crypto axios
npm install -D typescript ts-node @types/node

👉 Basic WebSocket Client

// src/websocketClient.ts
import WebSocket from 'ws';
import crypto from 'crypto';
import dotenv from 'dotenv';

dotenv.config();

const ws = new WebSocket('wss://advanced-trade-ws.coinbase.com');

const ACCESS_KEY = process.env.ACCESS_KEY!;
const SECRET_KEY = process.env.SECRET_KEY!;
const PASSPHRASE = process.env.PASSPHRASE!;
const ACCOUNT_ID = process.env.ACCOUNT_ID!;

ws.on('open', () => {
  console.log('WebSocket connected.');

  const timestamp = Math.floor(Date.now() / 1000).toString();
  const message = timestamp + 'GET' + '/users/self/verify';

  const signature = crypto
    .createHmac('sha256', SECRET_KEY)
    .update(message)
    .digest('base64');

  const subscribeMsg = {
    type: 'subscribe',
    channel: 'heartbeat',
    product_ids: ['BTC-USD'],
    api_key: ACCESS_KEY,
    timestamp,
    signature,
    passphrase: PASSPHRASE,
  };

  ws.send(JSON.stringify(subscribeMsg));
});

ws.on('message', (data) => {
  console.log('Message:', data.toString());
});

👉 Environment Variables (.env)

ACCESS_KEY=your_key
SECRET_KEY=your_secret
PASSPHRASE=your_passphrase
ACCOUNT_ID=your_account_id

---

💻 4. Frontend Setup (React + WebSocket)

👉 Basic Setup

npx create-react-app client
cd client
npm install

👉 WebSocket Component

import React, { useEffect, useState } from 'react';

export default function WebSocketFeed() {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    const socket = new WebSocket('ws://localhost:3000');

    socket.onmessage = (event) => {
      const msg = JSON.parse(event.data);
      setMessages((prev) => [...prev.slice(-50), msg]); // Keep latest 50
    };

    return () => socket.close();
  }, []);

  return (
    <div>
      <h2>🔄 Real-Time Coinbase Feed</h2>
      <ul>
        {messages.map((msg, i) => (
          <li key={i}>{JSON.stringify(msg)}</li>
        ))}
      </ul>
    </div>
  );
}

---

🌐 5. Serve Data from Backend to Frontend

You can use ws or socket.io to create a WebSocket server in Node and broadcast the data received from Coinbase to the frontend.

---

📈 6. Displaying Real-time Data

Once integrated, you’ll see:

• Heartbeat signals every second

• Real-time trade or order data

• Dynamic UI changes as events happen

Add styling with Tailwind or Chakra UI, and you’ve got a clean, responsive dashboard!

---

✅ 7. Final Thoughts

Building a real-time WebSocket tracker is a great way to:

• Understand crypto APIs

• Work with HMAC authentication

• Handle real-time data pipelines

• Enhance your portfolio with practical full-stack skills

If you're serious about becoming a Web3 or FinTech developer, this is a strong project to showcase.

---

🙌 Let’s Connect!

If you liked this, follow me on Hashnode and connect with me on LinkedIn. You can also check out more projects on my GitHub.

💬 Want the full source code? Drop a comment and I’ll share it with you!