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

Written by

FixTechToday

in

In the fast-paced world of cryptocurrency, staying informed about the latest market trends is crucial. Keeping track of fluctuating prices can be a challenge, especially if you’re juggling multiple digital assets. Wouldn’t it be handy to have a simple, real-time tool that displays the current prices of your favorite cryptocurrencies? In this guide, we’ll build just that: a straightforward React cryptocurrency price tracker. This project will not only introduce you to fundamental React concepts, such as state management and API interactions, but it will also equip you with the skills to create dynamic and interactive web applications.

Why Build a Cryptocurrency Price Tracker?

Creating a cryptocurrency price tracker offers several benefits, especially for those new to React. First, it’s a practical project that addresses a real-world need. You’ll gain hands-on experience by fetching data from an external API, updating the user interface in real-time, and managing application state. Second, it’s a great learning opportunity. You’ll solidify your understanding of React components, state, and lifecycle methods, all while building something useful. Finally, it’s a relatively small project, making it perfect for beginners who want to dive into React without feeling overwhelmed.

Prerequisites

Before we begin, ensure you have the following:

  • A basic understanding of HTML, CSS, and JavaScript.
  • Node.js and npm (Node Package Manager) installed on your system.
  • A code editor (e.g., VS Code, Sublime Text).

Step-by-Step Guide

1. Setting Up the React Project

Let’s start by creating a new React application using Create React App. Open your terminal and run the following command:

npx create-react-app crypto-tracker
cd crypto-tracker

This command creates a new React project named “crypto-tracker” and navigates you into the project directory. Next, start the development server:

npm start

This will open your React app in your default web browser, usually at http://localhost:3000.

2. Project Structure and Initial Setup

Inside your “crypto-tracker” directory, you’ll find a standard React project structure. We’ll be working primarily in the “src” folder. Let’s clean up the default files to get started.

Delete the following files:

  • src/App.css
  • src/App.test.js
  • src/index.css
  • src/logo.svg
  • src/App.js

Then, create the following files:

  • src/components/CryptoPrice.js
  • src/App.js

Now, let’s modify src/App.js to be the entry point of our application:

import React from 'react';
import CryptoPrice from './components/CryptoPrice';

function App() {
  return (
    <div className="App">
      <CryptoPrice cryptoCurrency="bitcoin" />
      <CryptoPrice cryptoCurrency="ethereum" />
      <CryptoPrice cryptoCurrency="litecoin" />
    </div>
  );
}

export default App;

This sets up the basic structure of our app, importing the CryptoPrice component and rendering it multiple times for different cryptocurrencies. We will create the CryptoPrice component in the next step.

3. Creating the CryptoPrice Component

The CryptoPrice component will be responsible for fetching and displaying the price of a specific cryptocurrency. Open src/components/CryptoPrice.js and add the following code:

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

function CryptoPrice({ cryptoCurrency }) {
  const [price, setPrice] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(
          `https://api.coingecko.com/api/v3/simple/price?ids=${cryptoCurrency}&vs_currencies=usd`
        );
        const data = await response.json();
        setPrice(data[cryptoCurrency].usd);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData();

    const intervalId = setInterval(fetchData, 5000);
    return () => clearInterval(intervalId);
  }, [cryptoCurrency]);

  return (
    <div>
      <h3>{cryptoCurrency.toUpperCase()}:</h3>
      <p>{price ? `$${price.toFixed(2)}` : 'Loading...'}</p>
    </div>
  );
}

export default CryptoPrice;

Let’s break down this code:

  • We import useState and useEffect from React.
  • We define a functional component CryptoPrice that accepts a cryptoCurrency prop.
  • We use useState to create a state variable price, initialized to null.
  • We use useEffect to fetch data from the CoinGecko API when the component mounts and whenever the cryptoCurrency prop changes.
  • Inside useEffect, we define an asynchronous function fetchData to fetch the price data.
  • We use the Fetch API to make a GET request to the CoinGecko API.
  • We parse the JSON response and update the price state using setPrice.
  • We set up an interval using setInterval to fetch updated prices every 5 seconds.
  • We return a cleanup function from useEffect that clears the interval when the component unmounts.
  • We render the cryptocurrency name and the price (or ‘Loading…’ if the price is not yet available).

This component fetches the real-time price of a cryptocurrency from the CoinGecko API and displays it on the screen. The useEffect hook with an empty dependency array ensures that the price is fetched when the component mounts, and the interval refreshes the price every five seconds.

4. Styling the Application (Optional)

While the focus of this tutorial is on the core functionality, you can enhance the user experience by adding some basic styling. Create a file named src/App.css and add the following CSS:

.App {
  font-family: sans-serif;
  text-align: center;
  margin-top: 50px;
}

h3 {
  margin-bottom: 5px;
}

p {
  font-size: 1.2em;
}

Import this CSS file into src/App.js:

import './App.css';

This will apply some basic styling to the application, improving its visual appeal.

5. Testing and Running the Application

Save all the files and go back to your browser. You should see the cryptocurrency prices updating every 5 seconds. If you encounter any issues, double-check your code against the examples provided and ensure that you have followed all the steps correctly. Also, make sure your browser’s developer tools are open to check for any console errors that might provide clues to the problem.

Common Mistakes and How to Fix Them

1. CORS Errors

You might encounter CORS (Cross-Origin Resource Sharing) errors when fetching data from the API. This happens because the browser blocks requests to a different domain than the one the web page originated from. The easiest way to fix this during development is to use a proxy server. You can configure a proxy in your package.json file. Add the following line inside your package.json file, outside of the dependencies:

"proxy": "https://api.coingecko.com/api/v3/"

Now, when you make a fetch request, you can use a relative path instead of the full URL. For example, in your CryptoPrice.js, change the fetch URL to:

fetch('/simple/price?ids=${cryptoCurrency}&vs_currencies=usd')

This tells the development server to proxy the request to the CoinGecko API, bypassing the CORS restrictions.

2. Incorrect API Endpoint

Ensure that you are using the correct API endpoint and parameters. Double-check the API documentation for any updates or changes. Typos in the URL can easily lead to errors.

3. State Updates Not Working

If the price is not updating, make sure you are correctly updating the state variable using the setPrice function. Also, ensure the component re-renders when the state changes. If you are not using state correctly, the component will not update.

4. Incorrect Data Parsing

Verify that you are correctly parsing the JSON response from the API. Use console.log(data) to inspect the data structure and ensure you are accessing the correct properties. Make sure you are handling potential errors during the data parsing process.

5. Not Handling Errors

Always include error handling (try...catch blocks) in your useEffect functions to catch and handle potential errors during API requests. This will help you diagnose and fix any issues that may arise.

Key Takeaways

  • You learned how to set up a React project using Create React App.
  • You gained experience with functional components, state management using useState, and side effects using useEffect.
  • You learned how to fetch data from an external API.
  • You learned how to update the UI based on the fetched data.
  • You gained experience with handling errors and setting up an interval.

Optional: Adding More Cryptocurrencies

To add more cryptocurrencies to your price tracker, simply add more instances of the <CryptoPrice /> component in App.js, specifying the cryptoCurrency prop for each one. For example:

<CryptoPrice cryptoCurrency="bitcoin" />
<CryptoPrice cryptoCurrency="ethereum" />
<CryptoPrice cryptoCurrency="litecoin" />
<CryptoPrice cryptoCurrency="dogecoin" />

Make sure the cryptocurrency names match those used by the CoinGecko API. You can find the correct names on the CoinGecko website or in their API documentation.

Optional: Adding a Currency Converter

Extend the application further by adding a currency converter. You can allow users to input an amount and convert it to USD. You would need an additional state variable to store the input value and another API call to get the conversion rate. This is an excellent exercise for further practice!

FAQ

1. How can I deploy this application?

You can deploy your React application to platforms like Netlify, Vercel, or GitHub Pages. These platforms provide free hosting for static websites. You typically need to build your React app using npm run build and then deploy the contents of the “build” folder to the hosting platform.

2. Where can I find other cryptocurrency APIs?

Besides CoinGecko, other popular cryptocurrency APIs include CoinMarketCap, Binance API, and CryptoCompare. Each API has its own set of features, rate limits, and authentication requirements. Explore the documentation of each API to find the one that best suits your needs.

3. Can I customize the appearance of the price tracker?

Yes, you can customize the appearance of the price tracker by modifying the CSS. You can change the font, colors, layout, and other visual elements to create a unique design.

4. How do I handle API rate limits?

Most APIs have rate limits to prevent abuse. To handle rate limits, you can implement techniques such as:

  • Caching API responses to reduce the number of requests.
  • Implementing exponential backoff with retries if the API request fails due to rate limits.
  • Using API keys (if provided) to increase the rate limit.

5. How can I add more features to the app?

You can add features such as historical price charts, portfolio tracking, and alerts. Consider using libraries like Chart.js for charts and local storage for portfolio data.

Building a cryptocurrency price tracker is a great way to learn and practice React. You’ve covered the basics of fetching data, updating the UI, and managing state. By adding more features and experimenting with different APIs, you can expand your skills and create a powerful tool that helps you stay on top of the crypto market. This project serves as a solid foundation for more complex React applications. With each line of code, you’re not just building an application; you’re building your expertise in the world of React development. Keep experimenting, keep learning, and keep building, and you’ll find yourself mastering the intricacies of this powerful framework, one project at a time.

More posts