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-liborpandas-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
SOCIAL SHARE CARD GENERATOR