Real-Time Crypto Tracker using Webhooks with React, Next.js and Node.js

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import './App.css';

function App() {
  // Track symbols and prices
  const [prices, setPrices] = useState({});
  const [newSymbol, setNewSymbol] = useState('');
  const [trackingSymbols, setTrackingSymbols] = useState(['BTC', 'ETC']);

  // Listen for new webhook events from backend and update prices accordingly.
  useEffect(() => {
    const ws = new WebSocket('ws://localhost:5000');

    ws.onmessage = (event) => {
      const data = JSON.parse(event.data);
      setPrices(data);
    };

    return () => ws.close();
  }, []);

  // Handles adding new symbols to the tracking list
  const addSymbol = () => {
    if (newSymbol && !trackingSymbols.includes(newSymbol.toUpperCase())) {
      axios.post('http://localhost:5000/add-symbol', { symbol: newSymbol })
        .then(response => {
          setTrackingSymbols(response.data.symbols);
          setNewSymbol('');
        })
        .catch(error => {
          console.error('Error adding symbol:', error.response.data.message);
        });
    }
  };

  // UI/Frontend of the page
  return (
    <div className="App">
      <header className="App-header">
        <h1>CryptoTracker</h1>
      </header>
      <main>
        <div className="symbol-input">
          <input
            type="text"
            placeholder="Enter crypto symbol (e.g., BTC)"
            value={newSymbol}
            onChange={(e) => setNewSymbol(e.target.value)}
          />
          <button onClick={addSymbol}>Add Symbol</button>
        </div>
        <div className="symbol-tracker">
          {trackingSymbols.map((symbol) => (
            <div key={symbol} className="symbol-card">
              <h2>{symbol}</h2>
              <p>{prices[symbol] ? `$${prices[symbol].toFixed(2)}` : 'Loading...'}</p>
            </div>
          ))}
        </div>
      </main>
      <footer className="App-footer">
        <p>&copy; 2024 CryptoTracker. All rights reserved.</p>
      </footer>
    </div>
  );
}

export default App;

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
}

.App {
  text-align: center;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.App-header {
  background-color: #1a1a1a;
  color: white;
  padding: 20px;
  text-align: center;
  font-size: 1.5em;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.symbol-input {
  margin: 20px auto;
  display: flex;
  justify-content: center;
}

.symbol-input input {
  padding: 10px;
  font-size: 1em;
  width: 250px;
  margin-right: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.symbol-input button {
  padding: 10px 20px;
  font-size: 1em;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.symbol-input button:hover {
  background-color: #0056b3;
}

.symbol-tracker {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 20px;
}

.symbol-card {
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 20px;
  width: 200px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}

.symbol-card h2 {
  margin: 0;
  font-size: 1.2em;
}

.symbol-card p {
  margin: 10px 0 0;
  font-size: 1.1em;
  color: #333;
}

.symbol-card:hover {
  transform: translateY(-5px);
}

.App-footer {
  background-color: #1a1a1a;
  color: white;
  padding: 10px;
  text-align: center;
  margin-top: auto;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
}

const express = require('express');
const axios = require('axios');
const WebSocket = require('ws');
const cors = require('cors');

const app = express();
app.use(cors());
const PORT = 5000;
const API_KEY = ''; // Replace with your CoinMarketCap API key
const INTERVAL = 10000; // Poll every 10 seconds

// List of cryptocurrencies to track
let symbols = ['BTC', 'ETC'];

// Create a WebSocket server
const wss = new WebSocket.Server({ noServer: true });

// Function to fetch cryptocurrency prices
const fetchPrices = async () => {
    try {
        const response = await axios.get('https://pro-api.coinmarketcap.com/v1/cryptocurrency/quotes/latest', {
            params: {
                symbol: symbols.join(','),
                convert: 'USD'
            },
            headers: {
                'X-CMC_PRO_API_KEY': API_KEY
            }
        });

        const prices = symbols.reduce((acc, symbol) => {
            acc[symbol] = response.data.data[symbol].quote.USD.price;
            return acc;
        }, {});

        return prices;
    } catch (error) {
        console.error('Error fetching data from CoinMarketCap:', error);
        return null;
    }
};

// Broadcast prices to all clients
const broadcastPrices = (prices) => {
    wss.clients.forEach(client => {
        if (client.readyState === WebSocket.OPEN) {
            client.send(JSON.stringify(prices));
        }
    });
};

// Periodically poll CoinMarketCap API and broadcast prices
setInterval(async () => {
    const prices = await fetchPrices();
    if (prices) {
        broadcastPrices(prices);
    }
}, INTERVAL);

// Handle HTTP and WebSocket connections
const server = app.listen(PORT, () => {
    console.log(`Server running on http://localhost:${PORT}`);
});

server.on('upgrade', (request, socket, head) => {
    wss.handleUpgrade(request, socket, head, (ws) => {
        wss.emit('connection', ws, request);
    });
});

// Endpoint for tracking new symbols
app.post('/add-symbol', (req, res) => {
    const { symbol } = req.body;
    if (!symbols.includes(symbol.toUpperCase())) {
        symbols.push(symbol.toUpperCase());
        res.status(200).send({ success: true, symbols });
    } else {
        res.status(400).send({ success: false, message: 'Symbol already being tracked' });
    }
});

cd frontend
npm install
npm start

cd ../backend
npm install
npm start