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

Real-time price data separates serious traders from the rest. In this tutorial, you will build a live crypto dashboard that streams prices, calculates basic technical signals, and displays everything in a clean React frontend.

We will use Python for the backend, WebSockets for low-latency updates, and React for the UI. The code is simple enough to run locally tonight and extensible enough to power a personal trading terminal.

Why this stack

Python gives you fast access to trading libraries (ccxt, pandas, ta-lib wrappers)
WebSockets push updates instead of polling, saving bandwidth and latency
React handles dynamic price ticks without page reloads
The full stack runs on one machine and deploys easily to a VPS

Architecture

FastAPI backend exposes a WebSocket endpoint
Background task pulls prices from Binance every second via their public WebSocket
React client subscribes and renders a live table with 24h change and a simple RSI sparkline

Python backend

Install dependencies:

pip install fastapi uvicorn python-multipart websockets

Create main.py:

from fastapi import FastAPI, WebSocket
from fastapi.middleware.cors import CORSMiddleware
import asyncio
import json
import websockets

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

connected_clients = set()
price_data = {}

async def binance_listener():
    url = "wss://stream.binance.com:9443/ws/btcusdt@ticker"
    async with websockets.connect(url) as ws:
        while True:
            msg = await ws.recv()
            data = json.loads(msg)
            price_data["BTCUSDT"] = {
                "price": float(data["c"]),
                "change": float(data["P"]),
                "volume": float(data["v"]),
            }
            await broadcast()

async def broadcast():
    if connected_clients:
        message = json.dumps({"type": "price", "data": price_data})
        await asyncio.gather(*[client.send(message) for client in connected_clients])

@app.websocket("/ws")
async def websocket_endpoint(websocket: WebSocket):
    await websocket.accept()
    connected_clients.add(websocket)
    try:
        while True:
            await websocket.receive_text()  # keep-alive
    except:
        connected_clients.remove(websocket)

@app.on_event("startup")
async def startup():
    asyncio.create_task(binance_listener())

if __name__ == "__main__":
    import uvicorn
    uvicorn.run(app, host="0.0.0.0", port=8000)

Run it:

uvicorn main:app --reload

React frontend

Create a new React app and install a lightweight table library:

npx create-react-app trading-dashboard
cd trading-dashboard
npm install react-use-websocket

Replace src/App.js:

import React, { useState } from 'react';
import useWebSocket from 'react-use-websocket';

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

  const { lastMessage } = useWebSocket('ws://localhost:8000/ws', {
    onOpen: () => console.log('Connected'),
    shouldReconnect: () => true,
  });

  React.useEffect(() => {
    if (lastMessage !== null) {
      const msg = JSON.parse(lastMessage.data);
      if (msg.type === 'price') {
        setPrices(msg.data);
      }
    }
  }, [lastMessage]);

  return (
    <div style={{ padding: '2rem', fontFamily: 'system-ui' }}>
      <h1>Live Crypto Dashboard</h1>
      <table style={{ width: '100%', borderCollapse: 'collapse' }}>
        <thead>
          <tr>
            <th>Symbol</th>
            <th>Price</th>
            <th>24h Change</th>
            <th>Volume</th>
          </tr>
        </thead>
        <tbody>
          {Object.keys(prices).map((symbol) => {
            const p = prices[symbol];
            return (
              <tr key={symbol}>
                <td>{symbol}</td>
                <td>${p.price.toFixed(2)}</td>
                <td style={{ color: p.change >= 0 ? 'green' : 'red' }}>
                  {p.change.toFixed(2)}%
                </td>
                <td>{p.volume.toFixed(0)}</td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

export default App;

Start the frontend:

npm start

You should see live BTCUSDT ticks updating every second.

Adding a simple technical signal

Extend the Python backend to calculate a 14-period RSI on the incoming candles. Store the last 50 closes in a deque, then compute RSI on each update and broadcast the signal along with price. Traders care about the signal value, not just the number.

Next steps

Add multiple symbols by subscribing to a combined stream
Store ticks in PostgreSQL for backtesting
Add a one-click paper trade button that hits your broker API
Deploy both services behind Caddy with automatic TLS

Try it live

If you want production-grade real-time screeners, pattern detection, and AI-assisted trade ideas without building everything yourself, Market Masters gives you exactly that out of the box. Check it out at marketmasters.ai.

The full source for this tutorial is on GitHub (link in comments). Questions? Drop them below.

推荐订阅源

DEV Community