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

Written by

javascriptdebugged

in

In the fast-paced world of cryptocurrency, staying informed about price fluctuations is crucial. As a beginner, you might find the technical aspects of fetching and displaying real-time data daunting. This tutorial aims to demystify the process by guiding you through building a simple, yet functional, cryptocurrency price tracker using React JS. We’ll cover everything from setting up your development environment to making API calls and displaying dynamic data. By the end, you’ll have a practical project to showcase your skills and a solid understanding of how to work with APIs in React.

Why Build a Cryptocurrency Price Tracker?

Beyond the practical application of tracking crypto prices, this project offers several learning opportunities:

  • API Integration: Learn how to fetch data from a third-party API.
  • State Management: Understand how to manage and update component state to reflect real-time data.
  • Component Composition: Practice building reusable components.
  • Data Display: Learn how to format and display data in a user-friendly manner.

This project is an excellent stepping stone for anyone looking to build more complex applications that interact with external data sources. It provides a hands-on approach to learning key React concepts.

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 your React application.
  • A basic understanding of HTML, CSS, and JavaScript: Familiarity with these languages is necessary to understand the code structure.
  • A code editor: Choose your preferred code editor (VS Code, Sublime Text, etc.).

Setting Up Your React Project

We’ll use Create React App to quickly set up our project. Open your terminal and run the following command:

npx create-react-app crypto-tracker

This command creates a new React application named “crypto-tracker.” Navigate into the project directory:

cd crypto-tracker

Now, start the development server:

npm start

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

Choosing a Cryptocurrency API

We’ll use a free cryptocurrency API to fetch real-time price data. There are several options available. For this tutorial, we will use the CoinGecko API, which offers a free tier with a generous rate limit. You can explore other options like CoinMarketCap API, but note that some may require API keys.

To use CoinGecko, you don’t need to sign up for an API key. You can directly use their API endpoints. For example, to get the current price of Bitcoin, you can use the following endpoint:

https://api.coingecko.com/api/v3/simple/price?ids=bitcoin&vs_currencies=usd

This will return a JSON object with the price of Bitcoin in USD.

Creating the CryptocurrencyPrice Component

Let’s create a new component to display the cryptocurrency price. Create a new file named CryptocurrencyPrice.js inside the src directory. Add the following code:

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

function CryptocurrencyPrice({ coinId, currency }) {
  const [price, setPrice] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchPrice() {
      try {
        const response = await fetch(
          `https://api.coingecko.com/api/v3/simple/price?ids=${coinId}&vs_currencies=${currency}`
        );
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        setPrice(data[coinId][currency]);
      } catch (err) {
        setError(err);
      } finally {
        setIsLoading(false);
      }
    }

    fetchPrice();
    const intervalId = setInterval(fetchPrice, 5000); // Refresh every 5 seconds
    return () => clearInterval(intervalId); // Cleanup on unmount
  }, [coinId, currency]);

  if (isLoading) {
    return <p>Loading...</p>;
  }

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

  return (
    <div>
      <p>Current Price: {price} {currency.toUpperCase()}</p>
    </div>
  );
}

export default CryptocurrencyPrice;

Let’s break down this code:

  • Import statements: We import useState and useEffect from React.
  • State variables: We use useState to manage three pieces of state:
    • price: Stores the current price of the cryptocurrency.
    • isLoading: A boolean to indicate whether the data is loading.
    • error: Stores any error messages.
  • useEffect hook: This hook performs the API call and updates the state.
    • The function inside useEffect is executed after the component renders.
    • fetchPrice() is an asynchronous function that fetches the data from the CoinGecko API.
    • The API endpoint includes the coinId and currency passed as props.
    • We use setInterval to refresh the price every 5 seconds.
    • The cleanup function (return () => clearInterval(intervalId)) clears the interval when the component unmounts to prevent memory leaks.
  • Conditional rendering: We render different content based on the state:
    • If isLoading is true, we display “Loading…”.
    • If there’s an error, we display the error message.
    • Otherwise, we display the current price.
  • Props: The component accepts coinId and currency as props to specify which cryptocurrency and currency to display.

Using the CryptocurrencyPrice Component

Now, let’s use the CryptocurrencyPrice component in our App.js file. Replace the default content of src/App.js with the following:

import React from 'react';
import CryptocurrencyPrice from './CryptocurrencyPrice';

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

export default App;

Here’s what this code does:

  • Import statements: We import the CryptocurrencyPrice component.
  • App component: This is the main component.
  • Rendering the CryptocurrencyPrice component: We render the CryptocurrencyPrice component twice, once for Bitcoin (coinId="bitcoin") and once for Ethereum (coinId="ethereum"), both in USD (currency="usd").

Styling the Application (Optional)

To make our app look better, let’s add some basic styling. Open src/App.css and add the following CSS:

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

.App h1 {
  margin-bottom: 20px;
}

This CSS centers the text, sets a font, and adds some padding and margins. You can customize the styles to your liking.

Running the Application

Save all the files and go back to your terminal where your React app is running. If it’s not running, start it again using npm start. You should see the cryptocurrency prices updating every 5 seconds.

Handling Errors

The code includes error handling using a try...catch block in the fetchPrice function. If the API call fails (e.g., due to network issues or API errors), the error message will be displayed. This is important for providing a good user experience.

Common Mistakes and Troubleshooting

Here are some common mistakes and how to fix them:

  • CORS errors: If you encounter CORS (Cross-Origin Resource Sharing) errors, it means the API you are trying to access doesn’t allow requests from your domain. This is less likely with CoinGecko, but if you switch APIs, ensure the API supports CORS or use a proxy server.
  • Typos in API endpoint or coinId/currency: Double-check the API endpoint and the values of coinId and currency. A typo can prevent the API from returning data.
  • Missing dependencies: Make sure you have installed all the necessary dependencies (e.g., you shouldn’t need any additional dependencies for this project, but if you do, install them using npm install [package-name]).
  • Incorrect state updates: Ensure you are correctly updating the state variables using the setPrice, setIsLoading, and setError functions.
  • Memory leaks: Always clean up the interval using clearInterval in the useEffect hook’s return function to avoid memory leaks.

Enhancements and Next Steps

Here are some ideas to enhance your cryptocurrency price tracker:

  • Add more cryptocurrencies: Allow users to select which cryptocurrencies to track.
  • Implement a currency selection: Let users choose their preferred currency (e.g., EUR, GBP).
  • Display historical data: Use a charting library to display price history.
  • Add error handling for invalid coin IDs: Handle cases where the coinId is invalid.
  • Implement a loading indicator: Improve the loading experience with a more visually appealing loading indicator (e.g., a spinner).
  • Use a state management library (e.g., Redux or Zustand): For more complex applications, consider using a state management library.

Key Takeaways

This tutorial has shown you how to build a basic cryptocurrency price tracker using React JS. You’ve learned how to:

  • Set up a React project using Create React App.
  • Fetch data from a third-party API.
  • Manage component state using useState.
  • Use useEffect to handle side effects (API calls and intervals).
  • Display data dynamically.
  • Handle errors gracefully.

FAQ

Q: How do I choose a different cryptocurrency?

A: Change the coinId prop in the CryptocurrencyPrice component. You can find the correct coinId for a cryptocurrency on the CoinGecko website or API documentation. For example, to track Ripple (XRP), you would use coinId="ripple".

Q: How do I change the currency?

A: Change the currency prop in the CryptocurrencyPrice component. For example, to display prices in EUR, use currency="eur".

Q: How often does the price update?

A: The price updates every 5 seconds, as defined by the setInterval function in the useEffect hook. You can adjust this interval as needed.

Q: Why am I seeing CORS errors?

A: CORS errors occur when the API you’re trying to access doesn’t allow requests from your domain. If you encounter this, you might need to use a proxy server or choose a different API that supports CORS.

Q: Can I deploy this application?

A: Yes, you can deploy your React application to platforms like Netlify, Vercel, or GitHub Pages. These platforms provide free hosting for static websites.

Building this simple cryptocurrency price tracker is just the beginning. The skills you’ve gained – fetching data, managing state, and using React components – are fundamental to front-end development. As you continue to build more complex applications, you’ll find these concepts invaluable. Remember to experiment, explore, and most importantly, enjoy the process of learning. The dynamic nature of the cryptocurrency market, reflected in the real-time updates of your tracker, mirrors the constant evolution of your skills as a developer. Embrace the challenge, and keep building.

More posts