DEV Community

Market Masters
Market Masters

Posted on

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

Why Build Your Own Trading Bot Dashboard

Most retail traders rely on fragmented tools. You check prices on one app, run analysis in another, and execute trades in a third. This tutorial shows how to build a unified dashboard that streams live prices, runs technical analysis, and lets you trigger bot trades, all in one place.

We'll use:

  • Python FastAPI backend with WebSocket price feeds
  • React frontend with real-time charts
  • Binance WebSocket API for live crypto data
  • TA-Lib indicators for momentum signals
  • A simple paper trading endpoint

By the end you'll have a working dashboard that updates every second.

Project Setup

Create the backend:

mkdir trading-dashboard && cd trading-dashboard
python -m venv venv && source venv/bin/activate
pip install fastapi uvicorn python-binance ta pandas
Enter fullscreen mode Exit fullscreen mode

Frontend:

npx create-react-app frontend --template typescript
cd frontend && npm install socket.io-client recharts axios
Enter fullscreen mode Exit fullscreen mode

Backend: Price Feed + Analysis

backend/main.py:

import asyncio
from fastapi import FastAPI, WebSocket
from binance.client import Client
from binance import BinanceSocketManager
import pandas as pd
import ta

app = FastAPI()
client = Client()
bsm = BinanceSocketManager(client)

@app.websocket("/ws/prices/{symbol}")
async def price_stream(websocket: WebSocket, symbol: str):
    await websocket.accept()
    socket = bsm.trade_socket(f"{symbol.upper()}USDT")
    async with socket as stream:
        while True:
            msg = await stream.recv()
            price = float(msg['p'])
            # Simple momentum signal
            df = pd.DataFrame({'close': [price]})
            rsi = ta.momentum.RSIIndicator(df['close'], window=14).rsi().iloc[-1]
            await websocket.send_json({
                "symbol": symbol,
                "price": price,
                "rsi": round(rsi, 2),
                "signal": "buy" if rsi < 30 else "sell" if rsi > 70 else "hold"
            })
Enter fullscreen mode Exit fullscreen mode

Run the server:

uvicorn backend.main:app --reload
Enter fullscreen mode Exit fullscreen mode

Frontend: Live Dashboard

frontend/src/App.tsx:

import React, { useEffect, useState } from 'react';
import { LineChart, Line, XAxis, YAxis } from 'recharts';
import { io } from 'socket.io-client';

interface PriceData {
  symbol: string;
  price: number;
  rsi: number;
  signal: string;
  time: string;
}

export default function TradingDashboard() {
  const [data, setData] = useState<PriceData[]>([]);
  const [symbol, setSymbol] = useState('btc');

  useEffect(() => {
    const socket = io(`ws://localhost:8000/ws/prices/${symbol}`);
    socket.on('message', (msg) => {
      setData(prev => [...prev.slice(-20), {
        ...msg,
        time: new Date().toLocaleTimeString()
      }]);
    });
    return () => socket.close();
  }, [symbol]);

  return (
    <div className="p-8">
      <h1 className="text-3xl font-bold mb-4">Market Masters Bot Dashboard</h1>
      <select onChange={e => setSymbol(e.target.value)} value={symbol}>
        <option value="btc">BTC</option>
        <option value="eth">ETH</option>
      </select>
      <LineChart width={800} height={300} data={data}>
        <XAxis dataKey="time" />
        <YAxis />
        <Line type="monotone" dataKey="price" stroke="#8884d8" />
      </LineChart>
      <div className="mt-4">
        {data.length > 0 && (
          <div>RSI: {data[data.length-1].rsi} | Signal: {data[data.length-1].signal}</div>
        )}
      </div>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Adding Paper Trading

Add a POST endpoint in FastAPI:

@app.post("/trade/{symbol}")
async def execute_trade(symbol: str, side: str, size: float):
    # In real life: call exchange API or paper trade engine
    return {"status": "executed", "symbol": symbol, "side": side, "size": size}
Enter fullscreen mode Exit fullscreen mode

From React, call it on a button click when signal is strong.

Deployment Notes

  • Host FastAPI on Railway or Render
  • Use React build on Vercel/Netlify
  • Add your Binance API keys via environment variables
  • Store trade history in Postgres for backtesting later

Next Steps

  • Swap in Market Masters Orion API for richer signals (Elliott Wave, liquidation data, conviction ratings)
  • Add order book depth heatmaps
  • Implement risk-based position sizing

This gives you a foundation you can run live today. The key is keeping the loop tight: price in, signal out, trade executed, feedback on screen.

Want production-grade trading intelligence without building everything from scratch?

Try Market Masters free at marketmasters.ai. Real-time screeners, AI trade setups, and portfolio tools, all in one dashboard. 30-day Premium trial, no card required.

Top comments (0)