DEV Community

Market Masters
Market Masters

Posted on

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

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

Real-time price data separates serious trading tools from delayed screeners. This tutorial walks through a minimal but complete stack: a Python backend that pulls live crypto prices, a WebSocket layer for instant updates, and a React frontend that renders a live dashboard with simple trading signals.

We will use public exchange APIs, avoid paid services, and keep everything runnable locally in under 30 minutes.

Why this architecture

Most retail traders still refresh browser tabs or poll every few seconds. A WebSocket push model reduces latency to milliseconds and lowers API rate-limit pressure. Python handles the data layer reliably. React keeps the UI reactive without a heavy framework.

Backend: Python price feeder

We need a script that connects to a public exchange and broadcasts prices over WebSockets.

Install dependencies:

pip install ccxt websockets asyncio
Enter fullscreen mode Exit fullscreen mode

Core feeder script (price_feeder.py):

import ccxt
import asyncio
import json
from websockets.server import serve

exchange = ccxt.binance({'enableRateLimit': True})

async def broadcast_prices(websocket):
    while True:
        try:
            ticker = exchange.fetch_ticker('BTC/USDT')
            payload = {
                'symbol': 'BTCUSDT',
                'price': ticker['last'],
                'timestamp': ticker['timestamp']
            }
            await websocket.send(json.dumps(payload))
            await asyncio.sleep(1)
        except Exception as e:
            print(f"Error: {e}")
            await asyncio.sleep(5)

async def main():
    async with serve(broadcast_prices, "localhost", 8765):
        await asyncio.Future()  # run forever

if __name__ == "__main__":
    asyncio.run(main())
Enter fullscreen mode Exit fullscreen mode

Run it:

python price_feeder.py
Enter fullscreen mode Exit fullscreen mode

The script connects to Binance via CCXT, fetches the latest BTC/USDT price every second, and pushes it to any connected WebSocket client.

Adding a simple trading signal

A real bot needs logic. Add a basic moving-average crossover inside the same loop.
Extend the payload with a signal:

# inside the try block, after fetching ticker
prices.append(ticker['last'])
if len(prices) > 20:
    prices.pop(0)

ma_fast = sum(prices[-5:]) / 5
ma_slow = sum(prices) / len(prices)
signal = "buy" if ma_fast > ma_slow else "sell"

payload['signal'] = signal
Enter fullscreen mode Exit fullscreen mode

Store only the last 20 prices in a deque to keep memory low.

Frontend: React dashboard

Create a React app:

npx create-react-app trading-dashboard
cd trading-dashboard
npm install
Enter fullscreen mode Exit fullscreen mode

Replace App.js with a live price component:

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

function App() {
  const [price, setPrice] = useState(null);
  const [signal, setSignal] = useState(null);

  useEffect(() => {
    const ws = new WebSocket('ws://localhost:8765');
    ws.onmessage = (event) => {
      const data = JSON.parse(event.data);
      setPrice(data.price);
      setSignal(data.signal);
    };
    return () => ws.close();
  }, []);

  return (
    <div>
      <h1>BTC/USDT Live</h1>
      <p>Price: {price}</p>
      <p>Signal: {signal}</p>
    </div>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

Start the dev server:

npm start
Enter fullscreen mode Exit fullscreen mode

Open http://localhost:3000. You should see live price updates and buy/sell signals every second.

Connecting to Market Masters API (optional)

If you already hold an API key from Market Masters, swap the CCXT call for their REST endpoint to pull multi-asset data with conviction scores:

import requests
headers = {'Authorization': 'Bearer YOUR_KEY'}
r = requests.get('https://api.marketmasters.ai/v1/prices/BTC', headers=headers)
Enter fullscreen mode Exit fullscreen mode

This gives you the same real-time feed plus Elliott Wave tags and liquidation clusters without extra parsing.

Deployment notes

  • Run the Python feeder behind a reverse proxy (nginx or Caddy) with TLS.
  • Keep the React build static and serve it from the same domain.
  • Add environment variables for API keys; never commit secrets.
  • Monitor memory: the deque keeps only 20 ticks.

Takeaway

A four-file stack (one Python script, one React component, two package files) delivers live trading signals without paid SaaS. Extend the signal logic with your own indicators or plug in the Market Masters Orion endpoint for AI-assisted setups.

Start here, then layer risk management and paper trading on top.

Try the finished dashboard at marketmasters.ai or grab the full source on GitHub (link in comments). Build something that actually moves with the market.

Top comments (0)