Build a Simple Next.js Interactive Crypto Price Tracker

Written by

FixTechToday

in

In the fast-paced world of cryptocurrency, staying informed about market fluctuations is crucial. Whether you’re a seasoned investor or just starting to explore the world of digital assets, having real-time access to crypto prices is essential. This article will guide you through building a simple, yet functional, interactive Crypto Price Tracker using Next.js, a powerful React framework for building modern web applications. We’ll break down the process into easy-to-understand steps, covering everything from setting up your development environment to fetching and displaying real-time data.

Why Build a Crypto Price Tracker?

The cryptocurrency market is known for its volatility. Prices can change dramatically in a matter of minutes. A real-time crypto price tracker empowers you to:

  • Stay Informed: Keep track of the latest prices of your favorite cryptocurrencies.
  • Make Informed Decisions: Analyze price trends and make informed decisions about buying, selling, or holding.
  • Learn and Experiment: This project provides an excellent opportunity to learn about API integration, data fetching, and front-end development using Next.js.

Building this tracker will not only provide you with a practical tool but also enhance your understanding of web development concepts.

Prerequisites

Before we begin, ensure you have the following installed on your system:

  • Node.js and npm: This is essential for running JavaScript code and managing project dependencies. You can download it from nodejs.org.
  • A Code Editor: Such as Visual Studio Code, Sublime Text, or Atom.
  • Basic knowledge of JavaScript and React: Familiarity with these technologies will be helpful, but even beginners can follow along.

Setting Up Your Next.js Project

Let’s start by creating a new Next.js project. Open your terminal and run the following command:

npx create-next-app crypto-tracker

This command will create a new directory called crypto-tracker and set up a basic Next.js project structure for you. Navigate into the project directory:

cd crypto-tracker

Now, start the development server:

npm run dev

Your Next.js application should now be running locally at http://localhost:3000. Open this address in your web browser, and you should see the default Next.js welcome page.

Project Structure Overview

Before we dive into the code, let’s take a quick look at the project structure. The key files and directories we’ll be working with are:

  • pages/index.js: This is the main page of our application, where we’ll display the crypto price data.
  • styles/globals.css: This file contains global CSS styles for our application.
  • package.json: This file lists all the project dependencies and scripts.

Fetching Crypto Price Data

To get real-time crypto prices, we’ll use a cryptocurrency API. There are many APIs available, both free and paid. For this tutorial, we’ll use the CoinGecko API, which offers a free tier with a generous rate limit. You can sign up for a free API key at CoinGecko API. However, for this project, an API key is not strictly required, as we’ll be using a public endpoint.

Let’s modify pages/index.js to fetch and display the price of Bitcoin. Replace the contents of pages/index.js with the following code:

import { useState, useEffect } from 'react';

function HomePage() {
  const [bitcoinPrice, setBitcoinPrice] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchBitcoinPrice() {
      try {
        const response = await fetch('https://api.coingecko.com/api/v3/simple/price?ids=bitcoin&vs_currencies=usd');
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        setBitcoinPrice(data.bitcoin.usd);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    }

    fetchBitcoinPrice();

    // Refresh data every 10 seconds
    const intervalId = setInterval(fetchBitcoinPrice, 10000);

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

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

  return (
    <div>
      <p>Bitcoin Price: ${bitcoinPrice}</p>
    </div>
  );
}

export default HomePage;

Let’s break down this code:

  • Import Statements: We import useState and useEffect from React.
  • State Variables:
    • bitcoinPrice: Stores the current Bitcoin price.
    • loading: Indicates whether the data is still being fetched.
    • error: Stores any error that occurs during the fetching process.
  • useEffect Hook: This hook runs after the component renders.
  • fetchBitcoinPrice Function:
    • Fetches data from the CoinGecko API.
    • Parses the JSON response.
    • Updates the bitcoinPrice state variable.
    • Handles potential errors.
  • Error Handling: Displays an error message if something goes wrong.
  • Loading State: Displays “Loading…” while the data is being fetched.
  • Displaying the Price: Renders the Bitcoin price on the page.
  • Interval: The setInterval function refreshes the data every 10 seconds. The clearInterval in the return statement of the useEffect hook ensures that the interval is cleared when the component unmounts, preventing memory leaks.

Save the file and refresh your browser. You should now see the real-time Bitcoin price displayed on the page. You can also inspect the browser’s console to see if there are any errors. If you encounter any problems, double-check your code against the example above.

Styling Your Crypto Price Tracker

Let’s add some basic styling to make the tracker more visually appealing. Open styles/globals.css and add the following CSS rules:

body {
  font-family: sans-serif;
  margin: 20px;
  background-color: #f4f4f4;
}

div {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

p {
  font-size: 1.2rem;
  margin-bottom: 10px;
}

This CSS will apply some basic styling to the body, the main div element, and the paragraph tags. Save the file and refresh your browser to see the changes.

Adding More Cryptocurrencies

Currently, our tracker only displays the price of Bitcoin. Let’s extend it to include other cryptocurrencies. We’ll modify the code to fetch prices for multiple coins and display them in a list.

First, modify the API call in fetchBitcoinPrice to fetch prices for multiple coins. We can specify the cryptocurrency IDs in the API URL. Replace the API call inside the useEffect hook with the following:

const response = await fetch('https://api.coingecko.com/api/v3/simple/price?ids=bitcoin%2Cethereum%2Clitecoin&vs_currencies=usd');

This API call will fetch the prices of Bitcoin, Ethereum, and Litecoin. Now, we need to update our state and rendering logic to handle multiple cryptocurrencies. Modify the useState hook to store an object where the keys are the cryptocurrency symbols (e.g., “bitcoin”, “ethereum”) and the values are their respective prices:

const [cryptoPrices, setCryptoPrices] = useState({});

Next, update the data processing inside the fetchBitcoinPrice function to update this new state variable. Modify the data processing inside the useEffect hook with the following:

const data = await response.json();
setCryptoPrices(data);

Now, modify the return statement to display the prices for all of the cryptocurrencies we are fetching:


  return (
    <div>
      {Object.keys(cryptoPrices).map((coin) => (
        <p>
          {coin.charAt(0).toUpperCase() + coin.slice(1)} Price: ${cryptoPrices[coin].usd}
        </p>
      ))}
    </div>
  );

Now the page will render a list of the cryptocurrencies and their corresponding prices. Save the file and refresh your browser. You should now see the prices of Bitcoin, Ethereum, and Litecoin displayed.

Adding Error Handling and Loading Indicators

We’ve already implemented basic error handling and loading indicators, but let’s make them more robust. Instead of a simple “Loading…” message, let’s create a more visually appealing loading indicator.

You can use a simple CSS animation for a loading spinner. Add the following CSS to your styles/globals.css:


.loader {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: #3498db;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 1s linear infinite;
  margin: 20px auto;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

Now, let’s modify the pages/index.js file to use this loader and display a more informative error message. Replace the loading and error handling sections of your code with the following:


  if (loading) return <div></div>;
  if (error) return <p>Error: Could not fetch crypto prices. Please try again later.</p>;

Save the file and refresh your browser. You should now see a loading spinner while the data is being fetched and a more descriptive error message if there’s a problem.

Adding a Search Feature (Optional)

To make the tracker more user-friendly, let’s add a search feature. This will allow users to search for specific cryptocurrencies.

First, we’ll need to add an input field to our UI. Add the following code snippet before the display of the crypto prices in your pages/index.js file:


  const [searchQuery, setSearchQuery] = useState('');

  const handleSearchChange = (event) => {
    setSearchQuery(event.target.value);
  };

  return (
    <div>
      
      {/* ... rest of the code ... */}

We’ve added an input field and a handleSearchChange function to update the searchQuery state variable whenever the user types something in the input field. Now, we need to filter the crypto prices based on the search query. Modify the rendering of the crypto prices to filter based on the search query. Replace the following line:

{Object.keys(cryptoPrices).map((coin) => (

with:

{Object.keys(cryptoPrices)
        .filter((coin) => coin.toLowerCase().includes(searchQuery.toLowerCase()))
        .map((coin) => (

This code filters the list of cryptocurrencies based on the search query, displaying only those coins whose symbols (e.g., “bitcoin”, “ethereum”) contain the search term. Save the file and refresh your browser. You should now be able to type in the search box and filter the list of displayed cryptocurrencies.

Common Mistakes and Troubleshooting

Here are some common mistakes and how to fix them:

  • CORS Errors: If you’re getting CORS (Cross-Origin Resource Sharing) errors, it means your browser is blocking the request to the API. This is because the API server and your Next.js application are on different domains. To fix this, you can:
    • Use a proxy server: You can set up a proxy server on your own domain to forward requests to the API.
    • Use a CORS proxy: There are public CORS proxies available that you can use, but be cautious as they might have rate limits or security concerns.
  • Incorrect API Endpoint: Double-check the API endpoint URL to ensure it’s correct. Typos can easily cause errors.
  • Rate Limiting: Some APIs have rate limits, meaning they limit the number of requests you can make within a certain time period. If you exceed the rate limit, you’ll get an error. You can either wait until the rate limit resets or, if the API provides it, use an API key.
  • Incorrect Data Parsing: Make sure you’re parsing the API response correctly. Use your browser’s developer tools (Network tab) to inspect the API response and verify the data structure.
  • Typos in Code: Carefully review your code for any typos, especially in variable names, function names, and API endpoint URLs.

Key Takeaways and Best Practices

  • Use State Management: Use the useState hook to manage the data fetched from the API and update the UI accordingly.
  • Error Handling: Implement proper error handling to catch and display any errors that occur during the API request.
  • Loading Indicators: Show a loading indicator while the data is being fetched to provide a better user experience.
  • API Rate Limits: Be mindful of API rate limits and implement strategies to handle them (e.g., using an API key, caching data).
  • Code Organization: Keep your code organized and modular. Consider creating separate components for different parts of your UI.
  • Performance Optimization: Optimize your code for performance, especially when dealing with real-time data. Consider techniques like memoization and debouncing.

Summary/Key Takeaways

In this tutorial, we’ve successfully built a simple, interactive Crypto Price Tracker using Next.js. We’ve covered the basics of setting up a Next.js project, fetching data from a cryptocurrency API, displaying the data in a user-friendly format, and implementing essential features like error handling and loading indicators. You’ve also learned how to add more cryptocurrencies and incorporate a search feature. By following these steps and understanding the underlying concepts, you can adapt this project to fetch and display data from various APIs, making it a valuable tool for monitoring cryptocurrencies and expanding your front-end development skills. Remember to always prioritize user experience by providing clear feedback through loading indicators and informative error messages. This project serves as a solid foundation for further exploration into more advanced features, such as charting, historical data analysis, and user authentication.

More posts