Build a Real-Time Crypto Tracker with CoinGecko API and React.js

Build a Real-Time Crypto Tracker with CoinGecko API and React.js

With the rise of cryptocurrency, there has been an increasing demand for real-time tracking tools that provide up-to-the-minute information on coin prices, trading volumes, and other relevant data. In this guide, we’ll show you how to build a real-time crypto tracker using CoinGecko’s API and React.js.

CoinGecko is a popular cryptocurrency data provider that offers a robust API for retrieving historical and real-time data on various coins. React.js, on the other hand, is a powerful frontend library for building user interfaces. By combining these two technologies, we can create a sleek and functional UI that displays real-time crypto data.

Step 1: Setting up CoinGecko API

Before we start building our app, we need to set up an account with CoinGecko and obtain an API key. To do this, follow these steps:

  1. Go to the CoinGecko website (https://www.coingecko.com/) and sign up for an account.
  2. Once you’ve created your account, go to the “API” tab on the left-hand menu.
  3. Click on the “Create API Key” button.
  4. In the pop-up window, select the “Realtime” plan (you can choose a different plan later if needed).
  5. Provide a name for your API key and click “Create API Key.”
  6. Copy your API key and keep it safe – you’ll need it later.

Step 2: Setting up React.js Project

Now that we have our CoinGecko API key, let’s set up our React.js project. Follow these steps:

  1. Open your terminal or command prompt and create a new folder for your project.
  2. Run the following command to create a new React.js project: 
    npx create-react-app my-crypto-tracker

    Replace “my-crypto-tracker” with your project name.

  3. Move into the new project directory by running: 
    cd my-crypto-tracker

    Step 3: Fetching Data from CoinGecko API

In this step, we’ll create a new component that fetches data from CoinGecko’s API and displays it in our UI. Create a new file called “CryptoTracker.js” in the “src” folder of your project.

Inside the “CryptoTracker.js” file, import the necessary libraries:

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

Next, create a function that fetches data from CoinGecko’s API using the fetch() method:

const fetchData = async () => {
  const apiUrl = `https://api.coingecko.com/api/v3/coins?symbol=BTC&tickers=false&market_data=true&order=desc&per_page=100`;
  const response = await fetch(apiUrl);
  const data = await response.json();
  return data;
};

This function fetches the top 100 coins by market capitalization, with their tickers disabled and market data enabled. You can adjust the API endpoint according to your needs.

Step 4: Building the UI

Now that we have our data, let’s build a simple UI to display it. In the same “CryptoTracker.js” file, create a new component called “CryptoTracker”:

function CryptoTracker() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetchData().then((response) => {
      setData(response.coins);
    });
  }, []);

  return (
    <div className="crypto-tracker">
      <h1>Crypto Tracker</h1>
      <ul>
        {data.map((coin) => (
          <li key={coin.id}>{coin.symbol} ({coin.name}) - ${coin.price_usd}</li>
        ))}
      </ul>
    </div>
  );
}

This component fetches the data using the “fetchData” function and displays it in an unordered list. The “useState” hook is used to store the data in a state variable, and the “useEffect” hook is used to fetch the data when the component mounts.

Step 5: Displaying Data in Real-Time

To display the data in real-time, we’ll use WebSockets to establish a connection with CoinGecko’s API. First, install the “ws” library by running the following command:

npm install ws

Then, create a new file called “WebSocket.js” in the “src” folder of your project:

import WebSocket from 'ws';

const socket = new WebSocket('wss://api.coingecko.com/api/v3/realtime/BTC');

socket.onmessage = (event) => {
  const data = JSON.parse(event.data);
  console.log(data);
};

This code establishes a WebSocket connection with CoinGecko’s API for real-time updates on Bitcoin (BTC). Whenever there’s an update, the “onmessage” event is triggered and the new data is logged to the console.

Step 6: Integrating WebSockets into CryptoTracker Component

Now that we have our WebSocket connection set up, let’s integrate it into our “CryptoTracker” component. In the “CryptoTracker.js” file, add the following code at the top of the file:

import WebSocket from 'ws';

Next, create a new state variable to store the WebSocket connection:

const [socket, setSocket] = useState(null);

In the “useEffect” hook, establish the WebSocket connection when the component mounts:

useEffect(() => {
  const socket = new WebSocket('wss://api.coingecko.com/api/v3/realtime/BTC');
  setSocket(socket);
}, []);

Finally, add an event listener to the “onmessage” event and update the data state when a new message is received:

socket.onmessage = (event) => {
  const data = JSON.parse(event.data);
  setData(data.coins);
};

Now, whenever there’s an update on Bitcoin’s price, the component will receive the new data in real-time and update the UI accordingly.

Step 7: Running the App

That’s it! We’ve now built a real-time crypto tracker using CoinGecko’s API and React.js. To run the app, navigate to the project directory and run:

npm start

This command starts the development server and opens your app in the browser at http://localhost:3000.

Conclusion

In this guide, we’ve learned how to build a real-time crypto tracker using CoinGecko’s API and React.js. We’ve covered setting up the CoinGecko API, creating a new React.js project, fetching data from the API, building a simple UI, and displaying the data in real-time using WebSockets.

You can expand on this project by adding more features, such as displaying multiple coins, adding charts or graphs, or even integrating with other APIs to provide additional information. With these skills, you’ll be well on your way to building your own crypto tracking app.

_config.yml