Building a Real-Time Stablecoin Technical Indicator Dashboard: My 3-Week Journey from Concept to Production

# websocket_manager.py - This took me 3 days to get right
import asyncio
import websockets
import json
from fastapi import FastAPI, WebSocket
from typing import Dict, List
import redis

class StablecoinDataManager:
    def __init__(self):
        self.redis_client = redis.Redis(host='localhost', port=6379, db=0)
        self.active_connections: List[WebSocket] = []
        self.stablecoins = ['USDC', 'USDT', 'DAI', 'FRAX', 'TUSD']
        
    async def connect_exchange_feeds(self):
        """I learned the hard way that you need separate connections for each exchange"""
        exchanges = {
            'coinbase': 'wss://ws-feed.pro.coinbase.com',
            'binance': 'wss://stream.binance.com:9443/ws',
            'kraken': 'wss://ws.kraken.com'
        }
        
        tasks = []
        for exchange, url in exchanges.items():
            tasks.append(self.handle_exchange_connection(exchange, url))
            
        await asyncio.gather(*tasks)
    
    async def handle_exchange_connection(self, exchange: str, url: str):
        """This function saved me from rate limiting nightmares"""
        try:
            async with websockets.connect(url) as websocket:
                # Subscribe to ticker data for all stablecoins
                subscription = {
                    "method": "SUBSCRIBE",
                    "params": [f"{coin.lower()}usdt@ticker" for coin in self.stablecoins],
                    "id": 1
                }
                await websocket.send(json.dumps(subscription))
                
                async for message in websocket:
                    await self.process_market_data(exchange, json.loads(message))
                    
        except Exception as e:
            print(f"Exchange {exchange} connection failed: {e}")
            # Reconnect after 5 seconds - this prevents cascade failures
            await asyncio.sleep(5)
            await self.handle_exchange_connection(exchange, url)

# The FastAPI setup that actually works in production
app = FastAPI()
data_manager = StablecoinDataManager()

@app.websocket("/ws")
async def websocket_endpoint(websocket: WebSocket):
    await websocket.accept()
    data_manager.active_connections.append(websocket)
    try:
        while True:
            # Keep connection alive and send data
            market_data = data_manager.get_latest_indicators()
            await websocket.send_text(json.dumps(market_data))
            await asyncio.sleep(1)  # 1-second updates work perfectly
    except:
        data_manager.active_connections.remove(websocket)

# indicators.py - My custom indicator calculations
import numpy as np
import pandas as pd
from collections import deque

class StablecoinIndicators:
    def __init__(self, window_size=100):
        self.window_size = window_size
        self.price_data = deque(maxlen=window_size)
        self.volume_data = deque(maxlen=window_size)
        
    def add_data_point(self, price: float, volume: float):
        """I update indicators with each new tick - this was the breakthrough"""
        self.price_data.append(price)
        self.volume_data.append(volume)
        
        return {
            'rsi': self.calculate_rsi(),
            'bollinger_bands': self.calculate_bollinger_bands(),
            'volume_profile': self.calculate_volume_profile(),
            'price_deviation': self.calculate_price_deviation(),
            'momentum': self.calculate_momentum(),
            'support_resistance': self.find_support_resistance()
        }
    
    def calculate_rsi(self, period=14):
        """RSI is crucial for stablecoins - it shows when they're oversold/overbought"""
        if len(self.price_data) < period + 1:
            return 50  # Neutral value
            
        prices = np.array(list(self.price_data))
        deltas = np.diff(prices)
        
        gains = np.where(deltas > 0, deltas, 0)
        losses = np.where(deltas < 0, -deltas, 0)
        
        avg_gain = np.mean(gains[-period:])
        avg_loss = np.mean(losses[-period:])
        
        if avg_loss == 0:
            return 100
        
        rs = avg_gain / avg_loss
        rsi = 100 - (100 / (1 + rs))
        return rsi
    
    def calculate_price_deviation(self):
        """This tells you how far a stablecoin is from its $1.00 peg"""
        if not self.price_data:
            return 0
            
        current_price = self.price_data[-1]
        deviation = ((current_price - 1.0) / 1.0) * 100
        return deviation
    
    def calculate_bollinger_bands(self, period=20, std_dev=2):
        """Bollinger Bands on stablecoins show extreme depegging events"""
        if len(self.price_data) < period:
            return {'upper': 1.01, 'middle': 1.00, 'lower': 0.99}
        
        prices = np.array(list(self.price_data)[-period:])
        middle = np.mean(prices)
        std = np.std(prices)
        
        return {
            'upper': middle + (std_dev * std),
            'middle': middle,
            'lower': middle - (std_dev * std)
        }

// StablecoinChart.jsx - The component that took me longest to perfect
import React, { useState, useEffect, useRef } from 'react';
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js';
import { Line } from 'react-chartjs-2';

ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);

const StablecoinChart = ({ stablecoin, wsData }) => {
  const [chartData, setChartData] = useState({
    labels: [],
    datasets: []
  });
  const [indicators, setIndicators] = useState({});
  const wsRef = useRef(null);
  
  useEffect(() => {
    // WebSocket connection that actually stays connected
    wsRef.current = new WebSocket('ws://localhost:8000/ws');
    
    wsRef.current.onmessage = (event) => {
      const data = JSON.parse(event.data);
      updateChartData(data);
      setIndicators(data.indicators);
    };
    
    wsRef.current.onerror = (error) => {
      console.error('WebSocket error:', error);
      // Auto-reconnect logic that saved me from manual restarts
      setTimeout(() => {
        wsRef.current = new WebSocket('ws://localhost:8000/ws');
      }, 5000);
    };
    
    return () => {
      wsRef.current?.close();
    };
  }, []);
  
  const updateChartData = (newData) => {
    setChartData(prevData => {
      const maxDataPoints = 100; // Keep last 100 points for performance
      const newLabels = [...prevData.labels, new Date().toLocaleTimeString()];
      const newPrices = [...(prevData.datasets[0]?.data || []), newData.price];
      
      // Trim data to prevent memory leaks - learned this the hard way
      if (newLabels.length > maxDataPoints) {
        newLabels.shift();
        newPrices.shift();
      }
      
      return {
        labels: newLabels,
        datasets: [
          {
            label: `${stablecoin} Price`,
            data: newPrices,
            borderColor: getColorForDeviation(newData.price),
            backgroundColor: 'rgba(75, 192, 192, 0.2)',
            tension: 0.1,
          },
          // RSI overlay - this was my secret weapon
          {
            label: 'RSI (scaled)',
            data: newLabels.map((_, index) => {
              const rsiData = newData.indicators?.rsi;
              return rsiData ? (rsiData / 100) + 0.98 : null; // Scale RSI to chart
            }),
            borderColor: 'rgba(255, 99, 132, 0.8)',
            borderDash: [5, 5],
            pointRadius: 0,
          }
        ]
      };
    });
  };
  
  const getColorForDeviation = (price) => {
    const deviation = Math.abs(price - 1.0);
    if (deviation > 0.05) return 'rgba(255, 0, 0, 0.8)'; // Red for major depeg
    if (deviation > 0.02) return 'rgba(255, 165, 0, 0.8)'; // Orange for minor depeg
    return 'rgba(75, 192, 192, 0.8)'; // Green for stable
  };
  
  const chartOptions = {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      legend: {
        position: 'top',
      },
      title: {
        display: true,
        text: `${stablecoin} Real-Time Analysis`,
      },
    },
    scales: {
      y: {
        beginAtZero: false,
        min: 0.95,
        max: 1.05, // Focus on the critical range around $1
      },
    },
    animation: {
      duration: 0 // Disable animations for real-time data
    }
  };
  
  return (
    <div className="chart-container" style={{ height: '400px' }}>
      <Line data={chartData} options={chartOptions} />
      <IndicatorPanel indicators={indicators} stablecoin={stablecoin} />
    </div>
  );
};

// The indicator panel that shows trading signals in real-time
const IndicatorPanel = ({ indicators, stablecoin }) => {
  const getSignalColor = (value, type) => {
    switch(type) {
      case 'rsi':
        if (value < 30) return '#ff4444'; // Oversold - potential buy
        if (value > 70) return '#44ff44'; // Overbought - potential sell
        return '#ffaa44'; // Neutral
      case 'deviation':
        if (Math.abs(value) > 3) return '#ff4444'; // Major depeg
        if (Math.abs(value) > 1) return '#ffaa44'; // Minor depeg
        return '#44ff44'; // Stable
      default:
        return '#888888';
    }
  };
  
  return (
    <div className="indicator-panel">
      <div className="indicator-row">
        <span>RSI:</span>
        <span style={{ color: getSignalColor(indicators.rsi, 'rsi') }}>
          {indicators.rsi?.toFixed(2) || 'Loading...'}
        </span>
      </div>
      <div className="indicator-row">
        <span>Price Deviation:</span>
        <span style={{ color: getSignalColor(indicators.price_deviation, 'deviation') }}>
          {indicators.price_deviation?.toFixed(3)}%
        </span>
      </div>
      <div className="indicator-row">
        <span>Signal:</span>
        <span className={`signal ${getTradeSignal(indicators)}`}>
          {getTradeSignal(indicators).toUpperCase()}
        </span>
      </div>
    </div>
  );
};

// AlertManager.jsx - My solution to alert fatigue
import React, { useState, useEffect } from 'react';

const AlertManager = ({ indicators, stablecoin }) => {
  const [alerts, setAlerts] = useState([]);
  const [alertHistory, setAlertHistory] = useState(new Map());
  
  useEffect(() => {
    checkAlertConditions(indicators);
  }, [indicators]);
  
  const checkAlertConditions = (data) => {
    const now = Date.now();
    const cooldownPeriod = 300000; // 5 minutes between similar alerts
    
    // Major depeg alert
    if (Math.abs(data.price_deviation) > 2) {
      const alertKey = `depeg_${stablecoin}`;
      const lastAlert = alertHistory.get(alertKey);
      
      if (!lastAlert || (now - lastAlert) > cooldownPeriod) {
        createAlert({
          type: 'CRITICAL',
          message: `${stablecoin} depegged by ${data.price_deviation.toFixed(2)}%`,
          action: data.price_deviation > 0 ? 'CONSIDER_SELL' : 'CONSIDER_BUY',
          timestamp: now
        });
        
        alertHistory.set(alertKey, now);
        setAlertHistory(new Map(alertHistory));
      }
    }
    
    // RSI extreme alert
    if (data.rsi < 25 || data.rsi > 75) {
      const alertKey = `rsi_${stablecoin}`;
      const lastAlert = alertHistory.get(alertKey);
      
      if (!lastAlert || (now - lastAlert) > cooldownPeriod) {
        createAlert({
          type: 'WARNING',
          message: `${stablecoin} RSI at ${data.rsi.toFixed(2)} - ${data.rsi < 25 ? 'Oversold' : 'Overbought'}`,
          action: data.rsi < 25 ? 'POTENTIAL_BUY' : 'POTENTIAL_SELL',
          timestamp: now
        });
        
        alertHistory.set(alertKey, now);
        setAlertHistory(new Map(alertHistory));
      }
    }
  };
  
  const createAlert = (alertData) => {
    // Browser notification for critical alerts
    if (alertData.type === 'CRITICAL' && Notification.permission === 'granted') {
      new Notification(`${alertData.message}`, {
        icon: '/favicon.ico',
        body: `Suggested action: ${alertData.action}`
      });
    }
    
    setAlerts(prev => [alertData, ...prev.slice(0, 49)]); // Keep last 50 alerts
  };
  
  return (
    <div className="alert-panel">
      <h3>Trading Alerts</h3>
      {alerts.length === 0 ? (
        <p>No active alerts - markets are stable</p>
      ) : (
        alerts.map((alert, index) => (
          <div key={index} className={`alert alert-${alert.type.toLowerCase()}`}>
            <div className="alert-header">
              <span className="alert-type">{alert.type}</span>
              <span className="alert-time">
                {new Date(alert.timestamp).toLocaleTimeString()}
              </span>
            </div>
            <div className="alert-message">{alert.message}</div>
            <div className="alert-action">Suggested: {alert.action}</div>
          </div>
        ))
      )}
    </div>
  );
};

# Dockerfile.backend - Optimized for production load
FROM python:3.11-slim

WORKDIR /app

# Install system dependencies
RUN apt-get update && apt-get install -y \
    gcc \
    && rm -rf /var/lib/apt/lists/*

# Install Python dependencies
COPY requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt

COPY . .

# This configuration handles 50+ concurrent connections
CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8000", "--workers", "4"]

# docker-compose.yml - The setup that's been running stable for 4 months
version: '3.8'

services:
  backend:
    build: .
    ports:
      - "8000:8000"
    environment:
      - REDIS_URL=redis://redis:6379
      - DATABASE_URL=postgresql://user:password@postgres:5432/stablecoin_db
    depends_on:
      - redis
      - postgres
    restart: unless-stopped
    
  frontend:
    build:
      context: ./frontend
      dockerfile: Dockerfile
    ports:
      - "3000:3000"
    depends_on:
      - backend
    restart: unless-stopped
    
  redis:
    image: redis:7-alpine
    ports:
      - "6379:6379"
    restart: unless-stopped
    
  postgres:
    image: postgres:15
    environment:
      POSTGRES_DB: stablecoin_db
      POSTGRES_USER: user
      POSTGRES_PASSWORD: password
    volumes:
      - postgres_data:/var/lib/postgresql/data
    restart: unless-stopped

volumes:
  postgres_data: