Build a Simple React JS Interactive Web-Based Cryptocurrency Price Tracker: A Beginner’s Guide

Written by

javascriptdebugged

in

In the fast-paced world of digital finance, keeping track of cryptocurrency prices is crucial for anyone interested in investing, trading, or simply staying informed. Manually checking prices on various websites can be time-consuming and inefficient. This is where a real-time cryptocurrency price tracker comes in handy. In this tutorial, we will build a simple, interactive, web-based cryptocurrency price tracker using React JS. This project will not only provide you with a practical tool but also teach you fundamental React concepts in a clear and engaging manner.

Why Build a Cryptocurrency Price Tracker?

Building a cryptocurrency price tracker is an excellent way to learn React. It involves fetching data from an API, updating the UI dynamically, and handling user interactions. This project covers key React concepts such as:

  • Component-Based Architecture: Breaking down the application into reusable components.
  • State Management: Storing and updating data to reflect changes in the UI.
  • Fetching Data from APIs: Retrieving real-time cryptocurrency data.
  • Conditional Rendering: Displaying different content based on data conditions.
  • User Interaction: Allowing users to select cryptocurrencies and view their prices.

By the end of this tutorial, you’ll have a functional cryptocurrency price tracker and a solid understanding of these core React principles. This project is ideal for beginners and intermediate developers looking to enhance their React skills.

Prerequisites

Before we begin, make sure you have the following:

  • Node.js and npm (or yarn) installed: You’ll need Node.js and npm (Node Package Manager) or yarn to manage project dependencies. Download and install them from the official Node.js website.
  • A Code Editor: A code editor like Visual Studio Code, Sublime Text, or Atom.
  • Basic Understanding of JavaScript: Familiarity with JavaScript fundamentals, including variables, functions, and objects.
  • A Cryptocurrency API Key (Optional): While not strictly required for the basic functionality, using a free API key from a service like CoinGecko or CoinMarketCap will allow you to fetch real-time data. We will use a free API for this tutorial.

Step-by-Step Guide

Step 1: Setting Up the React Project

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

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

This command creates a new React application named “cryptocurrency-tracker.” Navigate into the project directory using the cd command.

Step 2: Install Dependencies

We’ll need to install a few dependencies for our project. We’ll use Axios to fetch data from the API. Run the following command in your project directory:

npm install axios

This command installs Axios, a popular library for making HTTP requests in JavaScript.

Step 3: Project Structure

Let’s briefly discuss our project structure. Inside the `src` folder, we’ll create the following components:

  • App.js: The main component that manages the overall application structure.
  • CryptoList.js: Displays the list of cryptocurrencies and their prices.
  • CryptoItem.js: Represents an individual cryptocurrency item.

Step 4: Creating the CryptoItem Component (CryptoItem.js)

Create a file named `CryptoItem.js` inside the `src` directory. This component will display the price of a single cryptocurrency.

// src/CryptoItem.js
import React from 'react';

function CryptoItem({ symbol, name, price, change }) {
  const priceChangeStyle = {
    color: change > 0 ? 'green' : 'red',
  };

  return (
    <div className="crypto-item">
      <span>{name} ({symbol.toUpperCase()})</span>
      <span>${price.toFixed(2)}</span>
      <span style={priceChangeStyle}>{change.toFixed(2)}%</span>
    </div>
  );
}

export default CryptoItem;

In this code:

  • We import React.
  • The `CryptoItem` component receives props: `symbol`, `name`, `price`, and `change`.
  • We define a style object `priceChangeStyle` to change the text color based on the price change (green for positive, red for negative).
  • We render the cryptocurrency name, symbol, price, and the percentage change.

Step 5: Creating the CryptoList Component (CryptoList.js)

Create a file named `CryptoList.js` inside the `src` directory. This component will fetch and display the list of cryptocurrencies.


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

function CryptoList() {
  const [cryptos, setCryptos] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchCryptos = async () => {
      try {
        // Replace with your API endpoint
        const response = await axios.get('https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=10&page=1&sparkline=false&locale=en');
        setCryptos(response.data);
        setLoading(false);
      } catch (error) {
        console.error('Error fetching crypto data:', error);
        setLoading(false);
      }
    };

    fetchCryptos();
  }, []);

  if (loading) {
    return <div>Loading...</div>;
  }

  return (
    <div className="crypto-list">
      {cryptos.map((crypto) => (
        <CryptoItem
          key={crypto.id}
          symbol={crypto.symbol}
          name={crypto.name}
          price={crypto.current_price}
          change={crypto.price_change_percentage_24h}
        />
      ))}
    </div>
  );
}

export default CryptoList;

In this code:

  • We import React, `useState`, `useEffect`, axios, and `CryptoItem`.
  • We use `useState` to manage the `cryptos` state (an array of cryptocurrency data) and the `loading` state (to indicate if data is being fetched).
  • The `useEffect` hook is used to fetch data from the API when the component mounts.
  • We use `axios.get` to fetch data from the CoinGecko API. Replace the placeholder with your API endpoint.
  • We map through the `cryptos` array and render a `CryptoItem` component for each cryptocurrency.
  • We handle a loading state while fetching data.

Step 6: Creating the App Component (App.js)

Modify the `src/App.js` file to integrate the `CryptoList` component.


// src/App.js
import React from 'react';
import CryptoList from './CryptoList';
import './App.css'; // Import your stylesheet

function App() {
  return (
    <div className="app">
      <h1>Cryptocurrency Price Tracker</h1>
      <CryptoList />
    </div>
  );
}

export default App;

In this code:

  • We import `CryptoList` and the `App.css` file.
  • We render the `CryptoList` component.

Step 7: Styling the Application (App.css)

Create a file named `App.css` in the `src` directory to style your application. Here’s a basic styling example:


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

.crypto-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}

.crypto-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 300px;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.crypto-item span:nth-child(2) {
  font-weight: bold;
}

Step 8: Running the Application

Start the development server using the following command in your terminal:

npm start

This command will open the application in your default web browser (usually at `http://localhost:3000`). You should see a list of cryptocurrencies with their prices and percentage changes.

Common Mistakes and How to Fix Them

1. CORS Errors

Problem: You might encounter CORS (Cross-Origin Resource Sharing) errors when fetching data from the API. This happens because your frontend (running on `localhost:3000`) is trying to access a resource from a different domain (the API). The browser blocks this by default for security reasons.

Solution:

  • Use a Proxy: If you’re developing locally, you can use a proxy server to forward requests to the API. This way, your frontend talks to your proxy, which then talks to the API, avoiding the CORS issue. Create a `proxy.conf.json` file in your project root with the following content:
{
  "/api": {
    "target": "https://api.coingecko.com",
    "changeOrigin": true,
    "pathRewrite": {
      "^/api": ""
    }
  }
}

Then, in your `package.json`, add the following line to the “proxy” field (or create it if it doesn’t exist):

"proxy": "http://localhost:3000",

And change your API call in `CryptoList.js` to:

const response = await axios.get('/api/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=10&page=1&sparkline=false&locale=en');
  • API Supports CORS: Some APIs have CORS enabled. If the API you are using supports CORS, it will allow requests from your domain.

2. API Rate Limits

Problem: APIs often have rate limits, meaning they restrict the number of requests you can make in a certain time period. Exceeding the rate limit will cause your API calls to fail.

Solution:

  • Implement Error Handling: In your `fetchCryptos` function, catch any errors that occur during the API call and display an appropriate message to the user.
  • Implement Rate Limiting Logic: If you are making frequent calls, consider implementing your own rate limiting logic (e.g., using `setTimeout` to space out requests).
  • Use API Keys: Some APIs require API keys, which may come with higher rate limits.

3. Incorrect API Endpoint

Problem: The API endpoint URL might be incorrect, leading to data not being fetched.

Solution:

  • Double-Check the URL: Carefully review the API documentation to ensure you are using the correct endpoint.
  • Test the Endpoint: Try accessing the API endpoint directly in your browser or using a tool like Postman to verify that it returns the expected data.

4. Unhandled Errors in the UI

Problem: Errors during data fetching or rendering can lead to a broken or incomplete UI.

Solution:

  • Implement Error Handling: Wrap your `fetchCryptos` function in a `try…catch` block to handle errors. Display an error message to the user if an error occurs.
  • Handle Empty Data: Check if the data returned from the API is empty or in an unexpected format. Display a message or handle the empty state gracefully.
  • Use Conditional Rendering: Use conditional rendering to show loading indicators or error messages while data is being fetched.

Enhancements and Next Steps

This is a basic cryptocurrency price tracker. Here are some ideas for enhancing it:

  • Add Search Functionality: Allow users to search for specific cryptocurrencies.
  • Implement Real-Time Updates: Use WebSockets or Server-Sent Events (SSE) to receive real-time updates from the API.
  • Add Currency Conversion: Allow users to convert prices to different currencies.
  • Implement User Preferences: Allow users to customize the list of cryptocurrencies displayed.
  • Add Charts: Integrate a charting library (like Chart.js or Recharts) to display price history.
  • Improve UI/UX: Enhance the styling and user experience with more interactive elements.

Summary/Key Takeaways

In this tutorial, we’ve built a functional cryptocurrency price tracker using React JS. You’ve learned how to set up a React project, fetch data from an API, manage state, and render dynamic content. This project provides a solid foundation for understanding core React concepts and building more complex web applications. Remember to consider error handling, rate limits, and user experience when developing your applications. By following this guide, you should now have a good understanding of how to build a simple application that interacts with an API and displays dynamic data.

FAQ

Q1: How do I choose which API to use?

A1: When choosing an API, consider the following:

  • Data Availability: Does the API provide the data you need (e.g., cryptocurrency prices, historical data)?
  • Rate Limits: Are the rate limits sufficient for your use case?
  • Cost: Is the API free or paid? If paid, does it fit your budget?
  • Documentation: Is the documentation clear and easy to understand?

Q2: How can I handle API rate limits?

A2: Strategies for handling API rate limits include:

  • Implementing Error Handling: Catch and handle errors when rate limits are exceeded.
  • Caching Data: Cache API responses to reduce the number of requests.
  • Implementing Throttling/Debouncing: Limit the frequency of API calls.
  • Using API Keys: Some APIs offer higher rate limits with an API key.

Q3: How can I style my React components?

A3: There are several ways to style React components:

  • Inline Styles: Use the `style` attribute directly on the HTML elements.
  • CSS Files: Create separate CSS files and import them into your components.
  • CSS Modules: Use CSS Modules to scope your styles to specific components.
  • CSS-in-JS Libraries: Use libraries like Styled Components or Emotion to write CSS directly in your JavaScript.

Q4: How do I deploy my React application?

A4: You can deploy your React application to various platforms, including:

  • Netlify: A popular platform for deploying static sites and single-page applications.
  • Vercel: Similar to Netlify, offering easy deployment and hosting.
  • GitHub Pages: A free hosting service provided by GitHub.
  • AWS, Google Cloud, Azure: Cloud platforms that offer hosting services.

Each platform has its own deployment process; refer to the platform’s documentation for specific instructions.

Q5: What are some good resources for learning React?

A5: Here are some great resources:

  • React Official Documentation: The official React documentation is the best place to start.
  • FreeCodeCamp: Offers excellent free React tutorials and courses.
  • Scrimba: Provides interactive React coding tutorials.
  • Udemy/Coursera/edX: Offer comprehensive React courses by expert instructors.
  • React Community: Engage with the React community on platforms like Stack Overflow, Reddit, and Discord.

Building a cryptocurrency price tracker is more than just a coding exercise; it’s a gateway to understanding how real-time data can be dynamically displayed in a web application. The skills you’ve gained in fetching data, managing state, and creating interactive components are transferable and valuable in a wide range of web development projects. Embrace the opportunity to experiment with the code, try out the enhancements suggested, and further refine your understanding of React JS. This project serves as a stepping stone to building more sophisticated and dynamic web applications, and your journey into the world of React is just beginning.

More posts