DEV Community

Market Masters
Market Masters

Posted on

Build a Real-Time Crypto Trading Dashboard with Python, React, and Market Masters API

Build a Real-Time Crypto Trading Dashboard with Python, React, and Market Masters API

Real-time market data separates winners from the rest. This tutorial shows you how to build a trading dashboard that pulls live crypto prices, runs simple technical analysis, and displays results in a React frontend.

We will use the Market Masters REST API for data, Python for analysis, and React for the UI.

Prerequisites

  • Python 3.10+
  • Node.js 18+
  • A free Market Masters account (get your API key from the dashboard)

Step 1: Fetch Real-Time Prices with Python

Create a file called market_data.py:

import requests
import os

API_KEY = os.getenv("MARKET_MASTERS_KEY")
BASE_URL = "https://api.marketmasters.ai/v1"

def get_prices(symbols):
    headers = {"Authorization": f"Bearer {API_KEY}"}
    params = {"symbols": ",".join(symbols), "type": "crypto"}
    resp = requests.get(f"{BASE_URL}/prices", headers=headers, params=params)
    return resp.json()

prices = get_prices(["BTCUSDT", "ETHUSDT"])
print(prices)
Enter fullscreen mode Exit fullscreen mode

This returns current bid/ask, 24h volume, and last price for each symbol.

Step 2: Add Technical Analysis

Extend the script with a simple moving average crossover:

def calculate_sma(prices, period=20):
    return sum(prices[-period:]) / period

def analyze(symbol, price_history):
    sma_20 = calculate_sma(price_history, 20)
    sma_50 = calculate_sma(price_history, 50)
    signal = "BUY" if sma_20 > sma_50 else "SELL"
    return {"symbol": symbol, "signal": signal, "sma20": sma_20, "sma50": sma_50}

# Example with mock history
history = [65000 + i * 10 for i in range(60)]
result = analyze("BTCUSDT", history)
print(result)
Enter fullscreen mode Exit fullscreen mode

Add the full indicator suite (RSI, MACD, ATR) from the Market Masters Python client if you need production-grade signals.

Step 3: Build the React Frontend

Create a React app and install the API client:

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

Then update App.js:

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

const API_BASE = 'https://api.marketmasters.ai/v1';

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

  useEffect(() => {
    const fetchData = async () => {
      const res = await axios.get(`${API_BASE}/prices`, {
        headers: { Authorization: `Bearer ${process.env.REACT_APP_MM_KEY}` },
        params: { symbols: 'BTCUSDT,ETHUSDT', type: 'crypto' }
      });
      setPrices(res.data.prices);
    };
    fetchData();
    const interval = setInterval(fetchData, 5000);
    return () => clearInterval(interval);
  }, []);

  return (
    <div className="dashboard">
      <h1>Market Masters Live</h1>
      <table>
        <thead>
          <tr><th>Symbol</th><th>Price</th><th>Signal</th></tr>
        </thead>
        <tbody>
          {prices.map(p => (
            <tr key={p.symbol}>
              <td>{p.symbol}</td>
              <td>{p.last}</td>
              <td>{p.signal || '—'}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

Run with npm start. You now have a live updating table.

Step 4: Add Alerts (Bonus)

Use the Market Masters webhook endpoint to post signals when conditions trigger:

def send_alert(signal):
    requests.post(f"{BASE_URL}/alerts", json=signal, headers=headers)
Enter fullscreen mode Exit fullscreen mode

Connect this to Telegram or email for real-time notifications.

Why This Works

The Market Masters API delivers normalized data across 2,500+ cryptocurrencies with sub-second latency. You avoid managing WebSocket connections or rate limits yourself. The same endpoints also serve equities, futures, and indices if you expand later.

Next Steps

  • Add the full Orion AI analysis endpoint for institutional-grade signals
  • Store signals in a Postgres database with SQLAlchemy
  • Deploy the React app on Vercel and the Python worker on Fly.io

CTA

Ready to ship production trading tools? Sign up at marketmasters.ai, grab your API key, and start building today. The free tier includes 5,000 calls per month.

Questions? Drop them in the comments. I read every one.

Top comments (0)