Building a Cryptocurrency Tracker with React and Node.js

 

As cryptocurrencies gain popularity, buyers, developers, and its supporters may profit from real-time crypto price monitoring. We will use React on the front end and Node.js on the back end to make a simple but useful coin price tracker in this guide. Using a free public API, we will present live pricing in an easy-to-use interface.

 

Tools and Technologies Used

This is what we will use:

• React.js: to make the frontend live
• Node.js and Express: to handle calls from the backend
• Axios: For HTTP calls
• CoinGecko API: To get real-time cryptocurrency data, use the CoinGecko API.
• CORS: To handle calls from different requests

Setting Up the Project Structure

First, let's set up the files and requirements for the project.

mkdir crypto-tracker
cd crypto-tracker
npx create-react-app client
mkdir server
cd server
npm init -y
npm install express axios cors

After that, your directory structure should look like this:

/crypto-tracker
  ├── client/       # React app
  └── server/       # Node.js backend

Building the Backend (Node.js + Express)

In the server area, make a file called index.js and add the following code:

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

const app = express();
app.use(cors());

app.get('/api/prices', async (req, res) => {
  try {
    const response = await axios.get('https://api.coingecko.com/api/v3/coins/markets', {
      params: {
        vs_currency: 'usd',
        ids: 'bitcoin,ethereum,dogecoin',
      },
    });
   res.json(response.data);
  } catch (error) {
   res.status(500).json({ message: 'Failed to fetch data' });
  }
});

app.listen(4000, () => {
  console.log('Backend running on http://localhost:4000');
});

This small server act works as a proxy for CoinGecko's API and your front end. It gets USD price information for Bitcoin, Ethereum, and Dogecoin.

Building the Frontend (React.js)

Now go to the client directory and open App.js in the src files. Replace its content with:

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

function App() {
  const [coins, setCoins] = useState([]);

  useEffect(() => {
   axios.get('http://localhost:4000/api/prices')
      .then(response => {
       setCoins(response.data);
      })
      .catch(error => {
       console.error('Error fetching data:', error);
      });
  }, []);

  return (
    <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}>
      <h1>Crypto Price Tracker</h1>
      <table border="1" cellPadding="10">
        <thead>
          <tr>
           <th>Name</th>
           <th>Symbol</th>
           <th>Current Price (USD)</th>
           <th>24h Change (%)</th>
          </tr>
        </thead>
        <tbody>
         {coins.map(coin => (
            <tr key={coin.id}>
             <td>{coin.name}</td>
             <td>{coin.symbol.toUpperCase()}</td>
             <td>${coin.current_price.toLocaleString()}</td>
              <td style={{ color: coin.price_change_percentage_24h >= 0 ? 'green' : 'red' }}>
               {coin.price_change_percentage_24h.toFixed(2)}%
             </td>
           </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default App;

To enable HTTP requests, install Axios in your React app:

npm install axios

This section gets information about crypto-coins when the page loads and shows a styled table with the coin's name, sign, present price, and 24-hour price change.

Running Your App

Use two terminals to run both the backend and frontend:

Terminal 1 (backend):

cd server
node index.js

Terminal 2 (frontend):

cd client
npm start

Head over to http://localhost:3000 in your web browser. Get real-time prices for Bitcoin, Ethereum, and Dogecoin!

Bonus Ideas to Enhance Your Tracker

After your basic tracker works, try these ideas:

• Add a search bar so you can look up any coin code or name.
• Use Chart.js or Recharts to add price trend charts
• Refresh info automatically every 30 or 60 seconds
• Make dark mode work with a CSS change
• Use local files to save user settings

Conclusion

Excellent work! Using React and Node.js, you were able to make a real-time cryptocurrency tracker. You have made a powerful, flexible screen for tracking your favourite digital assets by linking to a free public API and showing live data.

This setup also makes it possible to build more complex projects, such as stock tracking, mobile apps, or screens for crypto news. As the world of blockchain changes, you now have the tools to change with it. Keep building and researching.