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

Written by

FixTechToday

in

In the fast-paced world of cryptocurrency, staying informed about market fluctuations is crucial. Prices change rapidly, and knowing the current value of your favorite digital assets can influence your investment decisions. Wouldn’t it be great to have a real-time display of cryptocurrency prices right at your fingertips? In this article, we’ll dive into building a simple, yet functional, React cryptocurrency price ticker. This project is perfect for beginners looking to enhance their React skills while gaining practical experience.

Why Build a Cryptocurrency Price Ticker?

Creating a price ticker offers several benefits:

  • Practical Learning: It provides hands-on experience with React components, state management, and API calls.
  • Real-World Application: It creates a useful tool that you can customize and integrate into other projects.
  • Skill Enhancement: It helps you understand how to fetch and display data from external sources, a common task in web development.
  • Portfolio Piece: It’s a great project to showcase your React skills to potential employers.

By the end of this tutorial, you’ll have a working cryptocurrency price ticker that displays the latest prices of selected cryptocurrencies. Let’s get started!

Prerequisites

Before we begin, make sure you have the following:

  • Node.js and npm (or yarn) installed: These are essential for managing project dependencies and running the development server.
  • A basic understanding of JavaScript and React: Familiarity with components, JSX, and state management will be helpful.
  • A code editor: Choose your favorite, such as VS Code, Sublime Text, or Atom.

Setting Up the Project

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

npx create-react-app cryptocurrency-ticker

Navigate into your project directory:

cd cryptocurrency-ticker

Now, let’s install the necessary dependencies. We’ll be using the CoinGecko API to fetch cryptocurrency prices. You can also use other APIs like CoinMarketCap or CryptoCompare. Install the `axios` library to make API requests:

npm install axios

Project Structure

Let’s outline the basic file structure for our project:

  • src/
    • App.js: The main component that will house our price ticker.
    • components/
      • CryptoPrice.js: A component to display the price of a single cryptocurrency.
    • App.css: Styles for our application.

Building the CryptoPrice Component

Create a new file named CryptoPrice.js inside the src/components folder. This component will be responsible for displaying the price of a single cryptocurrency. Here’s the code:


import React from 'react';

function CryptoPrice({ symbol, price, change }) {
  const changeClass = change > 0 ? 'positive' : 'negative';

  return (
    <div className="crypto-price">
      <span className="symbol">{symbol.toUpperCase()}</span>
      <span className="price">${price.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}</span>
      <span className={`change ${changeClass}`}>{change.toFixed(2)}%</span>
    </div>
  );
}

export default CryptoPrice;

Let’s break down this component:

  • Imports React: Necessary for creating React components.
  • Receives Props: The component receives three props: symbol (e.g., “btc”), price (e.g., 20000), and change (e.g., 2.5).
  • Calculates Change Class: Determines whether the price change is positive or negative.
  • JSX: Returns the JSX structure, displaying the cryptocurrency symbol, price, and change percentage. It also formats the price to two decimal places.

Now, let’s add some basic styling to App.css:


.crypto-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #eee;
  font-family: sans-serif;
}

.symbol {
  font-weight: bold;
  font-size: 1.2em;
  margin-right: 10px;
}

.price {
  font-size: 1.1em;
}

.change {
  padding: 5px 10px;
  border-radius: 5px;
  font-weight: bold;
}

.positive {
  color: green;
  background-color: rgba(0, 255, 0, 0.1);
}

.negative {
  color: red;
  background-color: rgba(255, 0, 0, 0.1);
}

Building the App Component (App.js)

Now, let’s modify App.js to fetch and display the cryptocurrency prices. Replace the content of src/App.js with the following code:


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

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

  const cryptoSymbols = ['bitcoin', 'ethereum', 'litecoin', 'solana', 'dogecoin']; // Add more symbols as needed

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get(
          `https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&ids=${cryptoSymbols.join('%2C')}&order=market_cap_desc&per_page=100&page=1&sparkline=false&price_change_percentage=24h`
        );
        const data = response.data.map(coin => ({
          symbol: coin.symbol,
          price: coin.current_price,
          change: coin.price_change_percentage_24h_in_currency,
        }));
        setCryptoData(data);
        setLoading(false);
      } catch (err) {
        setError(err);
        setLoading(false);
        console.error('Error fetching data:', err);
      }
    };

    fetchData();

    const intervalId = setInterval(fetchData, 60000); // Refresh data every minute

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

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

  if (error) {
    return <div className="error">Error: {error.message}</div>;
  }

  return (
    <div className="app">
      <h1>Cryptocurrency Price Ticker</h1>
      <div className="crypto-list">
        {cryptoData.map(crypto => (
          <CryptoPrice key={crypto.symbol} symbol={crypto.symbol} price={crypto.price} change={crypto.change} />
        ))}
      </div>
    </div>
  );
}

export default App;

Let’s break down this component:

  • Imports: Imports necessary modules, including useState, useEffect, axios, and the CryptoPrice component.
  • State Variables:
    • cryptoData: An array to store the fetched cryptocurrency data.
    • loading: A boolean to indicate whether data is being fetched.
    • error: An object to store any errors that occur during the fetch.
  • cryptoSymbols: An array containing the cryptocurrency symbols to fetch. You can easily add or remove symbols to customize your ticker.
  • useEffect Hook:
    • fetchData Function: Uses axios to make a GET request to the CoinGecko API.
    • API Endpoint: The API endpoint is constructed using template literals to include the desired cryptocurrencies. The API call fetches the current price, 24-hour change, and other relevant data.
    • Data Transformation: The fetched data is transformed to extract the symbol, current price, and 24h change and stored in the cryptoData state.
    • Error Handling: Includes a try...catch block to handle potential errors during the API request.
    • Interval: Sets up an interval using setInterval to refresh the data every 60 seconds (1 minute). The interval ID is stored to be able to clear it when the component unmounts.
    • Cleanup: The useEffect hook returns a cleanup function (clearInterval(intervalId)) to clear the interval when the component unmounts, preventing memory leaks.
  • Conditional Rendering: Displays “Loading…” while fetching data and an error message if an error occurs.
  • Mapping and Rendering CryptoPrice Components: Maps through the cryptoData array and renders a CryptoPrice component for each cryptocurrency.

Finally, add some basic styling to App.css:


.app {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
}

.crypto-list {
  margin-top: 10px;
}

.loading {
  text-align: center;
  font-style: italic;
}

.error {
  color: red;
  text-align: center;
}

Running the Application

Now, start your development server by running the following command in your terminal:

npm start

This will open your React application in your default web browser. You should see a price ticker displaying the current prices and 24-hour changes for the cryptocurrencies you selected. If you added more symbols to the cryptoSymbols array, they would also be displayed.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid them:

  • CORS Errors: If you encounter CORS (Cross-Origin Resource Sharing) errors, it means your browser is blocking requests to the CoinGecko API. This is because the API’s server and your development server are on different domains. You can fix this by:

    • Using a Proxy: A proxy server can forward requests to the API. This is a common solution during development. You can configure a proxy in your package.json file. Add the following line to your package.json file, inside the root object: "proxy": "https://api.coingecko.com/". Then, in your App.js file, you can simplify the API call to: const response = await axios.get("/api/v3/coins/markets?vs_currency=usd&ids=${cryptoSymbols.join('%2C')}&order=market_cap_desc&per_page=100&page=1&sparkline=false&price_change_percentage=24h");
    • Using a CORS Proxy: There are public CORS proxy services (use with caution, as they may not be secure).
  • Incorrect API Endpoint: Double-check the API endpoint and ensure it’s correct. Typos can easily lead to errors. Verify the API documentation for the correct URL and parameters.
  • Missing Dependencies: Make sure you’ve installed all the necessary dependencies (e.g., axios). Run npm install in your project directory if needed.
  • Uncaught Errors: Always wrap your API calls in a try...catch block to handle potential errors gracefully. Log errors to the console to help with debugging.
  • State Updates: When updating state, ensure you’re using the correct methods (e.g., setCryptoData). Incorrect state updates can cause your application to behave unexpectedly.
  • Component Re-renders: Excessive re-renders can impact performance. Avoid unnecessary re-renders by using React.memo or useMemo where appropriate. Also, make sure that the dependencies of your useEffect hook are correct.

Enhancements and Customization

Here are some ideas to enhance and customize your cryptocurrency price ticker:

  • Add More Cryptocurrencies: Expand the cryptoSymbols array in App.js to include more cryptocurrencies.
  • User Input: Allow users to input the cryptocurrency symbols they want to track.
  • Currency Conversion: Add the ability to convert prices to different currencies.
  • Real-Time Updates with WebSockets: For even more real-time updates, consider using WebSockets to get price data from a streaming API.
  • Price Alerts: Implement price alerts to notify users when the price of a cryptocurrency reaches a certain threshold.
  • Chart Integration: Integrate a charting library (e.g., Chart.js, Recharts) to display price history.
  • Dark Mode: Add a dark mode toggle for a better user experience.
  • Local Storage: Save user preferences (e.g., selected cryptocurrencies, currency) using local storage.

Summary / Key Takeaways

In this tutorial, we’ve built a functional React cryptocurrency price ticker, demonstrating how to fetch data from an API, manage state, and display information in a user-friendly way. We covered the essential steps, from setting up the project and installing dependencies to creating components and handling API requests. We also discussed common mistakes and provided solutions. This project is a great starting point for anyone looking to learn React and build real-world applications. By expanding on this foundation, you can create a highly customizable and valuable tool for tracking cryptocurrency prices. Remember to experiment with different APIs, add new features, and refine your code to improve your React skills further. The possibilities are endless, and the journey of building this simple application is a significant step toward becoming a more proficient React developer. Keep learning, keep building, and stay informed about the ever-changing world of cryptocurrencies.

More posts