React Integration

Build beautiful real-time trading dashboards with React and Vedicquant cosmic signals.

🚀 Overview

React provides excellent support for real-time SSE integration. This section covers:

• Custom SSE Hooks: Reusable React hooks for signal streams
• Real-time Components: Live signal display components
• Dashboard Implementation: Complete trading dashboard
• Mobile-Responsive Design: Works on all screen sizes

📦 Quick Start

Custom SSE Hook

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

export const useVedicquantSSE = ({ apiKey }) => {
  const [signals, setSignals] = useState([]);
  const [lastSignal, setLastSignal] = useState(null);
  const [isConnected, setIsConnected] = useState(false);
  const eventSourceRef = useRef(null);

  useEffect(() => {
    const eventSource = new EventSource(
      `https://sse.vedicquant.com/api/signals/stream?api_key=${apiKey}`
    );

    eventSource.addEventListener('signal', (event) => {
      const signal = JSON.parse(event.data);
      
      if (signal.event_type === 'new_signal') {
        setSignals(prev => [signal, ...prev.slice(0, 49)]); // Keep last 50
        setLastSignal(signal);
      }
    });

    eventSource.onopen = () => setIsConnected(true);
    eventSource.onerror = () => setIsConnected(false);

    eventSourceRef.current = eventSource;

    return () => {
      eventSource.close();
    };
  }, [apiKey]);

  return { signals, lastSignal, isConnected };
};

Signal Component

import React from 'react';
import { useVedicquantSSE } from './hooks/useVedicquantSSE';

function CosmicSignalDashboard() {
  const { signals, lastSignal, isConnected } = useVedicquantSSE({
    apiKey: 'free-week-demo123'
  });

  return (
    <div className="cosmic-dashboard">
      <header className="dashboard-header">
        <h1>🌙 Vedicquant Cosmic Signals</h1>
        <div className={`status ${isConnected ? 'connected' : 'disconnected'}`}>
          {isConnected ? '✅ Connected' : '❌ Disconnected'}
        </div>
      </header>

      {lastSignal && (
        <div className="latest-signal">
          <h2>Latest Signal</h2>
          <div className="signal-card">
            <div className="signal-header">
              <span className="symbol">{lastSignal.symbol}</span>
              <span className={`signal-type ${lastSignal.signal_type.toLowerCase()}`}>
                {lastSignal.signal_type}
              </span>
            </div>
            <div className="signal-details">
              <p><strong>Phase:</strong> {lastSignal.phase_name}</p>
              <p><strong>Strength:</strong> {lastSignal.signal_strength}</p>
              <p><strong>Entry:</strong> ${lastSignal.price_at_signal}</p>
              <p><strong>Target:</strong> ${lastSignal.target_price}</p>
              <p><strong>Stop Loss:</strong> ${lastSignal.stop_loss_price}</p>
            </div>
          </div>
        </div>
      )}

      <div className="signals-history">
        <h3>Signal History</h3>
        <div className="signals-list">
          {signals.map((signal, index) => (
            <div key={index} className="signal-item">
              <span className="symbol">{signal.symbol}</span>
              <span className="type">{signal.signal_type}</span>
              <span className="phase">{signal.phase_name}</span>
              <span className="time">
                {new Date(signal.issued_at).toLocaleTimeString()}
              </span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

export default CosmicSignalDashboard;

Basic Styling

.cosmic-dashboard {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Inter', sans-serif;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding: 20px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-radius: 15px;
  color: white;
}

.status.connected {
  color: #00ff88;
}

.status.disconnected {
  color: #ff4757;
}

.latest-signal {
  margin-bottom: 30px;
}

.signal-card {
  background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
  border-radius: 15px;
  padding: 25px;
  color: white;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.signal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.symbol {
  font-size: 1.5rem;
  font-weight: bold;
}

.signal-type.buy {
  background: #00ff88;
  color: #000;
  padding: 5px 15px;
  border-radius: 20px;
  font-weight: bold;
}

.signal-type.sell {
  background: #ff4757;
  color: #fff;
  padding: 5px 15px;
  border-radius: 20px;
  font-weight: bold;
}

.signals-list {
  display: grid;
  gap: 10px;
  max-height: 400px;
  overflow-y: auto;
}

.signal-item {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 15px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  align-items: center;
}

@media (max-width: 768px) {
  .dashboard-header {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
  
  .signal-item {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

📋 Available Examples

From your migrated documentation:

• SignalsDashboard.jsx - Complete dashboard component
• useSSE.js - Custom React hook for SSE
• README.md - Original React documentation

🎯 Features

• 🔄 Real-time Updates: Live signal streaming
• 📱 Mobile Responsive: Works on all devices
• 🔊 Sound Notifications: Audio alerts for new signals
• 📊 Signal Analytics: Performance tracking
• 🎨 Beautiful UI: Cosmic-themed design

🛡️ Best Practices

• Use useEffect cleanup to close EventSource connections
• Implement error boundaries for robust error handling
• Optimize re-renders with useMemo and useCallback
• Handle connection state properly

Ready to build cosmic trading interfaces! 🌙✨