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

pip install python-binance pandas

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())

python price_stream.py

# 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")

pip install fastapi uvicorn

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)])

uvicorn server:app --reload --port 8000

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

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;

npm run dev