Build a Next.js Interactive Web-Based Cryptocurrency Price Chart

In the fast-paced world of cryptocurrency, staying informed about price fluctuations is crucial. Whether you’re a seasoned trader or just starting, having real-time access to price data can make a significant difference. In this tutorial, we’ll build an interactive web-based cryptocurrency price chart using Next.js. This project will not only teach you the fundamentals of Next.js but also introduce you to fetching and displaying real-time data from an API. By the end, you’ll have a functional, visually appealing chart that tracks the price of your favorite cryptocurrencies.

Why Build a Cryptocurrency Price Chart?

Cryptocurrency price charts provide valuable insights into market trends. They allow you to visualize price movements over time, identify patterns, and make informed decisions. Building your own chart offers several benefits:

• Educational: You’ll learn how to fetch data from APIs, process it, and render it dynamically in a React application.
• Customizable: You can tailor the chart to display the cryptocurrencies and timeframes that interest you most.
• Practical: It’s a useful tool for tracking your investments and staying up-to-date with market changes.

Prerequisites

Before we begin, make sure you have the following installed:

• Node.js and npm: This is essential for running JavaScript code and managing project dependencies.
• A code editor: (e.g., VS Code, Sublime Text) to write and edit your code.
• Basic knowledge of JavaScript and React: Familiarity with these technologies will be helpful, but we’ll explain the key concepts as we go.

Setting Up the 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-price-chart

This command creates a new Next.js project named “crypto-price-chart”. Navigate into the project directory:

cd crypto-price-chart

Now, let’s install the necessary dependencies. We’ll need a library to fetch data from the API (like `axios` or `node-fetch`) and a charting library (like `chart.js` or `recharts`) to visualize the data. For this tutorial, we’ll use `axios` for fetching data and `chart.js` for charting.

npm install axios chart.js react-chartjs-2

Fetching Cryptocurrency Data

We’ll use a public API to fetch cryptocurrency price data. There are many free APIs available; for this tutorial, we’ll use the CoinGecko API. You’ll need to sign up for a free API key (if required by the API you choose). Let’s create a new file called `api.js` in the `utils` directory (create the `utils` directory if it doesn’t exist) to handle API calls. This will help keep our code organized.

// utils/api.js
import axios from 'axios';

const API_URL = 'https://api.coingecko.com/api/v3';

export const getCryptoPrices = async (coinId, days = 7) => {
  try {
    const response = await axios.get(
      `${API_URL}/coins/${coinId}/market_chart?vs_currency=usd&days=${days}`
    );
    return response.data;
  } catch (error) {
    console.error('Error fetching crypto prices:', error);
    throw error;
  }
};

This code defines an asynchronous function `getCryptoPrices` that takes a `coinId` (e.g., “bitcoin”) and the number of `days` to fetch data for. It uses `axios` to make a GET request to the CoinGecko API. The API endpoint is constructed using template literals to include the `coinId` and `days` parameters. Error handling is included to catch and log any issues during the API call.

Creating the Chart Component

Now, let’s create a React component to display the chart. Create a new file called `CryptoChart.js` in the `components` directory (create the `components` directory if it doesn’t exist).

// components/CryptoChart.js
import React, { useState, useEffect } from 'react';
import { Line } from 'react-chartjs-2';
import { getCryptoPrices } from '../utils/api';

const CryptoChart = ({ coinId }) => {
  const [chartData, setChartData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      setIsLoading(true);
      setError(null);
      try {
        const data = await getCryptoPrices(coinId);
        const prices = data.prices.map(item => ({
          x: new Date(item[0]).toLocaleDateString(),
          y: item[1],
        }));

        setChartData({
          labels: prices.map(item => item.x),
          datasets: [
            {
              label: `${coinId.toUpperCase()} Price (USD)`,
              data: prices.map(item => item.y),
              borderColor: 'rgb(255, 99, 132)',
              fill: false,
            },
          ],
        });
      } catch (err) {
        setError(err);
      } finally {
        setIsLoading(false);
      }
    };

    fetchData();
  }, [coinId]);

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

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

  if (!chartData) {
    return <p>No data available.</p>;
  }

  const options = {
    scales: {
      yAxes: [
        {
          ticks: {
            beginAtZero: false,
          },
        },
      ],
    },
  };

  return (
    <div>
      <h2>{coinId.toUpperCase()} Price Chart</h2>
      
    </div>
  );
};

export default CryptoChart;

Let’s break down this component:

• Imports: We import `useState`, `useEffect` from React, `Line` from `react-chartjs-2`, and `getCryptoPrices` from our `api.js` file.
• State variables:
• `chartData`: This state holds the data for the chart. It’s initialized to `null`.
• `isLoading`: This state indicates whether the data is still being fetched.
• `error`: This state stores any errors that occur during the API call.
• `useEffect` hook: This hook is used to fetch the data from the API when the component mounts and whenever the `coinId` prop changes.
• Inside the `useEffect` hook, the `fetchData` function is defined. It calls `getCryptoPrices` from our `api.js` file, passes the `coinId` as an argument, and then sets the `chartData` state with the fetched data after transforming it. The data is transformed to match the structure expected by `chart.js`.
• Error handling is included to catch and display any errors.
• `isLoading` state is set to `true` before fetching and to `false` after fetching (regardless of success or failure).
• Conditional rendering: The component renders different content based on the `isLoading` and `error` states. It shows a loading message while fetching data, an error message if there’s an error, and finally the chart if the data is successfully fetched.
• Chart options: The `options` object allows for customization of the chart’s appearance and behavior (e.g., y-axis configuration).
• Rendering the chart: The `Line` component from `react-chartjs-2` is used to render the chart, passing in the `chartData` and `options` props.

Integrating the Chart into Your Page

Now, let’s integrate the `CryptoChart` component into your main page. Open the `pages/index.js` file and modify it as follows:

// pages/index.js
import CryptoChart from '../components/CryptoChart';

export default function Home() {
  return (
    <div>
      <h1>Cryptocurrency Price Chart</h1>
      
    </div>
  );
}

In this code:

• We import the `CryptoChart` component.
• We render the `CryptoChart` component and pass the `coinId` prop to specify which cryptocurrency to display (in this case, “bitcoin”).

Running the Application

To run your application, open your terminal, navigate to your project directory, and run the following command:

npm run dev

This will start the development server, and you can view your chart by opening your browser and going to `http://localhost:3000`. You should see an interactive chart displaying the price of Bitcoin.

Adding More Cryptocurrencies and Customization

To display charts for other cryptocurrencies, you can modify the `coinId` prop passed to the `CryptoChart` component. For example, to display Ethereum, you would change the `coinId` to “ethereum”:

<CryptoChart coinId="ethereum" />

You can also add a dropdown or input field to allow the user to select the cryptocurrency they want to view. Here’s how you can modify the `pages/index.js` to allow the user to select the cryptocurrency:

// pages/index.js
import { useState } from 'react';
import CryptoChart from '../components/CryptoChart';

const coinOptions = [
  { value: 'bitcoin', label: 'Bitcoin' },
  { value: 'ethereum', label: 'Ethereum' },
  { value: 'litecoin', label: 'Litecoin' },
];

export default function Home() {
  const [selectedCoin, setSelectedCoin] = useState('bitcoin');

  const handleCoinChange = (event) => {
    setSelectedCoin(event.target.value);
  };

  return (
    <div>
      <h1>Cryptocurrency Price Chart</h1>
      <label>Select Cryptocurrency:</label>
      
        {coinOptions.map((option) => (
          
            {option.label}
          
        ))}
      
      
    </div>
  );
}

In this code, we’ve added the following:

• Imported `useState`.
• Created an array `coinOptions` to store the available cryptocurrency options.
• Added a `selectedCoin` state to track the currently selected cryptocurrency, initialized to “bitcoin”.
• Created a `handleCoinChange` function to update the `selectedCoin` state when the user selects a different cryptocurrency from the dropdown.
• Added a “ element to allow the user to choose a cryptocurrency. The `onChange` event calls `handleCoinChange`, and the `value` is bound to the `selectedCoin` state.
• Passed the `selectedCoin` state as the `coinId` prop to the `CryptoChart` component.

You can further customize the chart by adding features like:

• Date range selection: Allow users to specify the time period (e.g., 7 days, 30 days, 1 year).
• Currency selection: Allow users to view prices in different currencies (e.g., USD, EUR, GBP). You’ll need to modify your API calls to support this.
• Additional indicators: Add moving averages, volume data, or other technical indicators.
• Styling: Customize the chart’s appearance with CSS.

Common Mistakes and Troubleshooting

Here are some common mistakes and how to fix them:

• API Key Issues: If your API key is invalid or you haven’t signed up for an API key, the API calls will fail. Double-check your API key and ensure it’s correctly configured.
• CORS Errors: If you encounter CORS (Cross-Origin Resource Sharing) errors, it means the API is blocking requests from your domain. You may need to configure CORS on your server-side or use a proxy server to bypass this restriction.
• Data Transformation Errors: Incorrect data transformation can lead to the chart not displaying correctly. Carefully examine the data structure returned by the API and ensure you’re mapping the correct values to the chart’s `labels` and `datasets`. Make sure the date format is correct for the charting library.
• Chart Library Configuration: Ensure that you have correctly installed the charting library and that you’re using the correct components and options. Refer to the library’s documentation for guidance.
• Missing Dependencies: Make sure you have installed all the required dependencies (e.g., `axios`, `chart.js`, `react-chartjs-2`). Check your `package.json` file to confirm.

Summary/Key Takeaways

This tutorial has walked you through building a functional cryptocurrency price chart using Next.js. You’ve learned how to fetch data from an API, process it, and display it in an interactive chart. You’ve also gained experience with essential Next.js concepts, including:

• Setting up a Next.js project.
• Fetching data from an API using `axios`.
• Creating React components.
• Using the `useEffect` hook for data fetching.
• Using a charting library (`react-chartjs-2`).
• Handling state and conditional rendering.

By building this project, you’ve gained practical experience with front-end development and learned how to visualize real-time data. Remember to experiment with different cryptocurrencies, timeframes, and chart customizations to enhance your understanding and create a chart that meets your specific needs.

FAQ

1. Can I use a different API? Yes, you can use any API that provides cryptocurrency price data. You’ll need to adjust the API endpoint and data transformation logic accordingly.
2. How can I deploy this application? You can deploy your Next.js application to platforms like Vercel, Netlify, or AWS. These platforms offer easy deployment processes. You may need to configure environment variables for your API key.
3. How can I add more features to the chart? You can add features like different chart types, technical indicators, and user authentication. Refer to the documentation of your chosen charting library for more customization options.
4. What if the API I’m using has rate limits? If the API has rate limits, you should implement strategies like caching, request throttling, and pagination to avoid exceeding the limits.
5. How do I handle different currencies? To handle different currencies, you’ll need to modify your API calls to specify the desired currency. You may also need to implement currency conversion logic if the API returns prices in a single currency.

Building this cryptocurrency price chart is just the beginning. The skills you’ve learned can be applied to a wide range of web development projects, from data visualization to real-time dashboards. As you continue to explore Next.js and React, you’ll discover even more ways to create dynamic and engaging user interfaces. Keep practicing, experimenting, and building, and you’ll become proficient in front-end development in no time.