Build a Real-Time Crypto Trading Dashboard with Python, WebSockets, and React

Real-time data is the difference between catching a move and reading about it later. This tutorial walks through a minimal but complete stack: a Python WebSocket client pulling live prices, a simple signal generator, and a React frontend displaying everything.

You will end up with a dashboard that shows live Binance prices, basic momentum signals, and auto-updates without polling.

Why this stack

Binance provides a clean WebSocket API for tickers and trades. Python handles the backend connection and lightweight analysis. React keeps the UI reactive and simple to extend. No heavy frameworks, no paid data feeds.

Prerequisites

Python 3.11+
Node 20+
A Binance API key (read-only is fine for prices)

Step 1: Python price stream

Install the client library:

pip install python-binance pandas

Create price_stream.py:

import asyncio
import json
from binance import AsyncClient, BinanceSocketManager
import pandas as pd
from datetime import datetime

async def main():
    client = await AsyncClient.create()
    bm = BinanceSocketManager(client)
    ts = bm.trade_socket('BTCUSDT')

    async with ts as tscm:
        while True:
            res = await tscm.recv()
            price = float(res['p'])
            qty = float(res['q'])
            ts = datetime.fromtimestamp(res['T'] / 1000)
            print(f"{ts} | BTCUSDT {price:.2f} | {qty:.4f} BTC")

if __name__ == "__main__":
    asyncio.run(main())

Run it:

python price_stream.py

You should see a live feed of trades. Keep this running as your data source.

Step 2: Add a simple momentum signal

Extend the script to calculate a 20-trade rolling average and flag when price deviates more than 0.3%:

# inside the loop, after parsing res
prices.append(price)
if len(prices) > 20:
    prices.pop(0)
    avg = sum(prices) / len(prices)
    deviation = (price - avg) / avg * 100
    if abs(deviation) > 0.3:
        print(f"⚡ Signal: {deviation:+.2f}% from 20-trade avg")

Store the last 20 prices in a list called prices = [] before the loop. This is deliberately naive; real systems add volume weighting and multiple timeframes.

Step 3: Expose data via a tiny FastAPI endpoint

Install:

pip install fastapi uvicorn

Create server.py:

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
import asyncio
from collections import deque

app = FastAPI()
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_methods=["*"],
)

prices = deque(maxlen=50)
signals = []

@app.get("/prices")
def get_prices():
    return list(prices)

@app.get("/signals")
def get_signals():
    return signals[-10:]

# Background task would push new prices here
# For demo, seed a few values on startup
@app.on_event("startup")
async def seed():
    prices.extend([65000 + i * 10 for i in range(20)])

Run with:

uvicorn server:app --reload --port 8000

Step 4: React dashboard

npx create-vite@latest trading-dashboard --template react
cd trading-dashboard
npm install axios

Replace src/App.jsx:

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

function App() {
  const [prices, setPrices] = useState([]);
  const [signals, setSignals] = useState([]);

  useEffect(() => {
    const fetch = async () => {
      const p = await axios.get('http://localhost:8000/prices');
      const s = await axios.get('http://localhost:8000/signals');
      setPrices(p.data);
      setSignals(s.data);
    };
    fetch();
    const id = setInterval(fetch, 2000);
    return () => clearInterval(id);
  }, []);

  return (
    <div style={{ padding: 24, fontFamily: 'system-ui' }}>
      <h1>Live BTCUSDT</h1>
      <div style={{ fontSize: 48, fontWeight: 600 }}>
        {prices.length ? prices[prices.length - 1] : '...'}
      </div>

      <h2 style={{ marginTop: 32 }}>Recent Signals</h2>
      <ul>
        {signals.map((sig, i) => (
          <li key={i}>{JSON.stringify(sig)}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Start the frontend:

npm run dev

Open http://localhost:5173. You will see live price refreshes and any signals your backend emits.

Extensions worth adding next

Replace the in-memory deque with Redis or PostgreSQL for persistence
Add a second symbol (ETHUSDT) and a simple correlation view
Pipe signals into Telegram via their Bot API
Swap the naive moving average for a proper technical indicator library such as ta-lib or pandas-ta

Takeaway

A production trading system is more than these 200 lines, but the architecture (WebSocket ingestion → lightweight Python analysis → reactive frontend) scales. Start here, measure slippage and latency on your own connection, then harden.

The full source for this tutorial lives at github.com/marketmasters/trading-dashboard-demo (stub repo for the example).

Market Masters runs the same pattern at scale across 2,500+ assets with Orion, our AI that layers 45 specialized analysis tools on top of this foundation. Try the live dashboard at marketmasters.ai