Build A Simple React Cryptocurrency Price Tracker: A Beginner's Guide

In the fast-paced world of finance, staying informed about cryptocurrency prices is crucial. Whether you’re a seasoned investor or just curious about the market, tracking the fluctuating values of digital currencies can be a challenging task. Manually checking prices on multiple websites or apps can be time-consuming and inefficient. This is where a real-time cryptocurrency price tracker comes in handy. It provides an accessible and convenient way to monitor the ever-changing prices of various cryptocurrencies.

Why Build a Cryptocurrency Price Tracker?

Creating a React-based cryptocurrency price tracker offers numerous benefits:

Real-time Data: Stay updated with the latest price movements, ensuring you have the most current information at your fingertips.
Customization: Tailor the tracker to display the cryptocurrencies you’re most interested in.
Learning Opportunity: Develop your React skills by building a practical and functional application.
Portfolio Management: Track the value of your cryptocurrency holdings in one place.
API Integration: Learn how to fetch data from external APIs, a fundamental skill for web development.

Prerequisites

Before we begin, ensure you have the following:

Node.js and npm (or yarn) installed: These are essential for managing project dependencies and running the React development server.
A code editor: Such as Visual Studio Code, Sublime Text, or Atom.
Basic understanding of HTML, CSS, and JavaScript: Familiarity with these languages will help you understand the code.

Step-by-Step Guide

1. Setting Up the React Project

First, create a new React project using Create React App. Open your terminal and run the following command:

npx create-react-app cryptocurrency-tracker
cd cryptocurrency-tracker

This command creates a new directory named “cryptocurrency-tracker”, installs the necessary dependencies, and sets up a basic React application. Then, navigate into the project directory.

2. Installing Dependencies

We’ll use Axios to fetch data from the API. Install it using npm or yarn:

npm install axios
# or
yarn add axios

Axios is a popular library for making HTTP requests from your browser or Node.js. It simplifies the process of fetching data from APIs.

3. Choosing a Cryptocurrency API

There are several APIs available for fetching cryptocurrency data. For this project, we’ll use CoinGecko’s free API, which provides a wealth of information. You can sign up for a free API key (although it’s often not strictly required for basic usage) at their website: CoinGecko API. Other options include CoinMarketCap and CryptoCompare. CoinGecko offers a generous free tier with rate limits suitable for learning and small projects.

4. Creating the Cryptocurrency Price Component

Create a new component called `CryptoPrice.js` in the `src/components` directory. If the directory doesn’t exist, create it.

// src/components/CryptoPrice.js
import React, { useState, useEffect } from 'react';
import axios from 'axios';

function CryptoPrice() {
  const [cryptoData, setCryptoData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchCryptoData = async () => {
      try {
        const response = await axios.get(
          'https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&ids=bitcoin%2Cethereum%2Cbinancecoin%2Csolana&order=market_cap_desc&per_page=100&page=1&sparkline=false&locale=en'
        );
        setCryptoData(response.data);
        setLoading(false);
      } catch (err) {
        setError(err);
        setLoading(false);
        console.error('Error fetching data:', err);
      }
    };

    fetchCryptoData();

    // Refresh data every 10 seconds (adjust as needed)
    const intervalId = setInterval(fetchCryptoData, 10000);

    // Cleanup the interval on component unmount
    return () => clearInterval(intervalId);
  }, []);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <h2>Cryptocurrency Prices</h2>
      <table>
        <thead>
          <tr>
            <th>Coin</th>
            <th>Price (USD)</th>
            <th>24h Change</th>
          </tr>
        </thead>
        <tbody>
          {cryptoData.map((crypto) => (
            <tr>
              <td>
                <img src="{crypto.image}" alt="{crypto.name}" width="20" height="20" style="{{" />
                {crypto.name}
              </td>
              <td>${crypto.current_price}</td>
              <td style="{{"> 0 ? 'green' : 'red' }}>
                {crypto.price_change_percentage_24h_in_currency.toFixed(2)}%
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default CryptoPrice;

Let’s break down this code:

Import Statements: We import `React`, `useState`, `useEffect` from ‘react’, and `axios` from ‘axios’.
State Variables:
- `cryptoData`: Stores the fetched cryptocurrency data (an array of objects).
- `loading`: A boolean indicating whether the data is being fetched.
- `error`: Stores any error that occurs during the API call.
useEffect Hook: This hook is used to fetch the data when the component mounts and to refresh the data periodically.
fetchCryptoData Function:
- Uses `axios.get()` to make a GET request to the CoinGecko API. The URL is constructed to fetch data for Bitcoin, Ethereum, Binance Coin, and Solana, in USD. The `ids` parameter specifies the cryptocurrencies, and `vs_currency` sets the display currency. Other parameters control the results.
- Updates the `cryptoData` state with the fetched data using `setCryptoData()`.
- Sets `loading` to `false` when the data is fetched or an error occurs.
- Handles errors using a `try…catch` block. If an error occurs, it sets the `error` state.
Interval Setup: `setInterval(fetchCryptoData, 10000);` This sets up a timer that calls `fetchCryptoData` every 10 seconds (10000 milliseconds). This ensures the price data is updated regularly. The `clearInterval` function within the returned function ensures the interval is cleared when the component unmounts to prevent memory leaks.
Conditional Rendering:
- If `loading` is true, it displays “Loading…”.
- If `error` is not null, it displays an error message.
- If neither `loading` nor `error` is present, it renders a table displaying the cryptocurrency prices.
Rendering the Table:
- Maps over the `cryptoData` array and renders a table row (`
  `) for each cryptocurrency.
- Displays the coin’s name, current price, and 24-hour change.
- Uses inline styles to color the 24-hour change based on whether it’s positive (green) or negative (red).
Export Default: Exports the `CryptoPrice` component.

5. Integrating the Component into App.js

Open `src/App.js` and modify it to include your `CryptoPrice` component:

// src/App.js
import React from 'react';
import CryptoPrice from './components/CryptoPrice';
import './App.css'; // Import your CSS file

function App() {
  return (
    <div>
      <h1>Cryptocurrency Price Tracker</h1>
      
    </div>
  );
}

export default App;

Here’s what changed:

We imported the `CryptoPrice` component.
We added an `App` component that renders the `CryptoPrice` component.
We added an h1 tag for the title.

6. Styling (Optional but Recommended)

To make the price tracker more visually appealing, add some CSS. Create a file named `App.css` in the `src` directory (if it doesn’t already exist) and add the following styles:

/* src/App.css */
.App {
  text-align: center;
  font-family: sans-serif;
  padding: 20px;
}

h1 {
  margin-bottom: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

img {
  vertical-align: middle;
}

These styles provide basic formatting for the title, table, and table cells. You can customize them further to match your desired aesthetic.

7. Running the Application

In your terminal, run the following command to start the development server:

npm start
# or
yarn start

This will open your application in your web browser, typically at `http://localhost:3000`. You should see the cryptocurrency price tracker displaying the real-time prices of the selected cryptocurrencies.

Common Mistakes and How to Fix Them

1. CORS Errors

Problem: You might encounter Cross-Origin Resource Sharing (CORS) errors when trying to fetch data from the API. This happens because the browser’s security policy restricts web pages from making requests to a different domain than the one that served the web page. This is less common if using a proxy, but can still arise.

Solution:

Use a Proxy: The easiest solution is to use a proxy server. Create a `setupProxy.js` file in the `src` directory (if it doesn’t exist) with the following content. This assumes you are using `create-react-app` and have the `http-proxy-middleware` package installed. If the package is not installed, install it: `npm install http-proxy-middleware –save`.

// src/setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'https://api.coingecko.com/api/v3',
      changeOrigin: true,
      pathRewrite: {
        '^/api': '' // Remove '/api' from the URL
      },
    })
  );
};

In your `CryptoPrice.js` file, change the API URL to `’/api/coins/markets?vs_currency=usd&ids=bitcoin%2Cethereum%2Cbinancecoin%2Csolana&order=market_cap_desc&per_page=100&page=1&sparkline=false&locale=en’`. The proxy will forward the request to the CoinGecko API.

Server-Side Rendering (SSR): For more complex applications, consider using Server-Side Rendering (SSR) with a framework like Next.js, which allows you to fetch data on the server and avoid CORS issues.

2. Incorrect API Endpoint

Problem: The API endpoint URL is incorrect, leading to data not being fetched or an error being thrown.

Solution: Double-check the API endpoint URL in your `axios.get()` call. Make sure it matches the API documentation (e.g., CoinGecko) exactly, including the correct parameters and their values. Use the browser’s developer tools (Network tab) to inspect the API request and response to identify any errors.

3. Data Not Displaying

Problem: The data is being fetched successfully, but it’s not displaying on the screen.

Solution:

Check the State: Use `console.log(cryptoData)` inside your `useEffect` or within the `return` statement to verify that the `cryptoData` state is being populated with the correct data.
Inspect the Rendered Output: Use your browser’s developer tools (Elements tab) to inspect the HTML and ensure the data is being rendered correctly. Check for any errors in the console.
Mapping Errors: Ensure your `map()` function is correctly iterating through the `cryptoData` array and rendering the necessary elements. Check for typos in the property names used to access data.

4. API Rate Limits

Problem: You might exceed the API’s rate limits, resulting in errors or delayed data updates. Most free APIs have rate limits.

Solution:

Implement Error Handling: In your `fetchCryptoData` function, handle potential rate limit errors (e.g., HTTP status code 429) gracefully. Display an appropriate message to the user.
Reduce API Calls: Optimize your code to reduce the number of API calls. For example, you can increase the refresh interval (e.g., to 30 seconds or 1 minute) if real-time updates aren’t critical.
Caching: Consider caching the API responses locally to reduce the number of requests.
Use a Paid API (Optional): If you need more frequent updates or a larger data set, consider using a paid API that offers higher rate limits.

5. Component Not Re-rendering

Problem: The component doesn’t re-render when the data changes, so the displayed prices don’t update.

Solution:

Check State Updates: Ensure you are correctly updating the state using `setCryptoData(newData)` within the `useEffect` hook. Verify that `newData` actually contains the new data.
Dependencies Array: In the `useEffect` hook, if you’re using dependencies, make sure they are correctly specified in the dependency array (the second argument of `useEffect`). If the dependency array is empty `[]`, the effect runs only once when the component mounts. If the array includes a variable, the effect runs whenever that variable changes. In this case, there are no dependencies.
Immutability: When updating state with complex objects or arrays, ensure you are not directly mutating the state. Instead, create a new object or array with the updated values. For example, use the spread operator (`…`) to create a new array.

Key Takeaways

React Fundamentals: This project reinforces fundamental React concepts such as state management (`useState`), side effects (`useEffect`), component structure, and rendering lists.
API Integration: You’ve learned how to fetch data from an external API using `axios`, a crucial skill for web development.
Real-Time Data: You’ve built an application that displays real-time data, providing a practical example of how to work with dynamic content.
Error Handling: The project includes basic error handling, a critical aspect of building robust applications.
Component Reusability: The `CryptoPrice` component can be easily reused in other parts of your application or in different projects.

FAQ

1. Can I add more cryptocurrencies to track?

Yes! Modify the `ids` parameter in the API URL within the `fetchCryptoData` function to include the IDs of the cryptocurrencies you want to track. You can find the IDs on the CoinGecko website or API documentation. Remember to update the table headers if you add more columns.

2. How can I improve the performance of the tracker?

Consider these optimizations:

Debouncing or Throttling: If the API allows, implement debouncing or throttling for the data fetching to reduce unnecessary requests.
Caching: Implement caching to store API responses and reduce the number of API calls.
Optimized Rendering: Use techniques like memoization (e.g., `React.memo`) to prevent unnecessary re-renders of the component.

3. How can I add a dark mode toggle?

To add a dark mode toggle:

Create a Context: Use React Context to manage the dark mode state.
Create a Toggle Component: Create a button or switch component that updates the dark mode state.
Apply Styles: Use CSS variables or styled-components to apply different styles based on the dark mode state.

4. How can I deploy this application?

You can deploy your React application to platforms like:

Netlify: Easy to deploy static sites.
Vercel: Similar to Netlify, with excellent performance.
GitHub Pages: Free hosting for static sites.
AWS Amplify: For more complex deployments and scaling.
Firebase Hosting: Google’s hosting service.

5. Where can I find more information about the CoinGecko API?

Visit the official CoinGecko API documentation: CoinGecko API Documentation. This documentation provides detailed information about the API endpoints, parameters, and rate limits.

Building a cryptocurrency price tracker is a great project for learning React and practicing your web development skills. You can expand upon this foundation to add features like historical price charts, portfolio tracking, and more. This project is a starting point, and the possibilities are endless. Keep experimenting, keep learning, and enjoy the journey of becoming a proficient React developer.

Build a Simple React Cryptocurrency Price Tracker: A Beginner’s Guide

Why Build a Cryptocurrency Price Tracker?

Prerequisites

Step-by-Step Guide

1. Setting Up the React Project

2. Installing Dependencies

3. Choosing a Cryptocurrency API

4. Creating the Cryptocurrency Price Component

5. Integrating the Component into App.js

6. Styling (Optional but Recommended)

7. Running the Application

Common Mistakes and How to Fix Them

1. CORS Errors

2. Incorrect API Endpoint

3. Data Not Displaying

4. API Rate Limits

5. Component Not Re-rendering

Key Takeaways

FAQ

1. Can I add more cryptocurrencies to track?

2. How can I improve the performance of the tracker?

3. How can I add a dark mode toggle?

4. How can I deploy this application?

5. Where can I find more information about the CoinGecko API?

More posts

Build a Simple Next.js Interactive Survey App: A Beginner’s Guide

Build a Simple Next.js Interactive Code Snippet Sharing App

Build a Simple Next.js Interactive File Uploader App

Build a Simple Next.js Interactive Credit Card Validator