Build a Simple Next.js Interactive Web-Based Cryptocurrency Price Tracker

Written by

javascriptdebugged

in

In the fast-paced world of cryptocurrency, staying informed about price fluctuations is crucial. Manually checking prices on various exchanges can be time-consuming and inefficient. This tutorial will guide you through building a simple, interactive cryptocurrency price tracker using Next.js, allowing you to monitor the prices of your favorite cryptocurrencies in real-time. This project will not only teach you the fundamentals of Next.js but also introduce you to fetching data from APIs, handling user input, and creating a dynamic user interface.

Why Build a Cryptocurrency Price Tracker?

A cryptocurrency price tracker offers several benefits:

  • Real-time Data: Get up-to-the-minute price information, enabling informed trading decisions.
  • Customization: Track the cryptocurrencies that matter most to you.
  • User-Friendly Interface: Easily visualize price changes and trends.
  • Educational: Learn about APIs, data fetching, and front-end development.

This project is perfect for beginners and intermediate developers looking to expand their skills in Next.js and understand how to integrate external data into their applications. By the end of this tutorial, you’ll have a functional price tracker and a solid understanding of the core concepts involved.

Prerequisites

Before we begin, make sure you have the following:

  • Node.js and npm (or yarn): Installed on your computer.
  • A basic understanding of JavaScript and React.
  • A code editor (e.g., VS Code, Sublime Text).
  • Familiarity with the command line.

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 cryptocurrency-tracker
cd cryptocurrency-tracker

This command creates a new Next.js project named “cryptocurrency-tracker” and navigates you into the project directory. Next.js sets up all the necessary files and configurations for you.

Installing Dependencies

We’ll need a few dependencies for this project:

  • Axios: For making API requests to fetch cryptocurrency data.
  • React-chartjs-2: For creating charts to visualize price trends.

Install these dependencies using npm or yarn:

npm install axios react-chartjs-2 chart.js
# or
yarn add axios react-chartjs-2 chart.js

Fetching Cryptocurrency Data from an API

We’ll use a free API to get cryptocurrency prices. There are several options available; for this tutorial, we’ll use CoinGecko. Sign up for a free API key (if required) and find their API documentation to understand how to fetch data. Another great option is CoinMarketCap, but you may need to register and obtain an API key.

Here’s a basic example of how to fetch data using Axios in a Next.js component:

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

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

  useEffect(() => {
    const fetchData = async () => {
      try {
        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'
        );
        setCryptoData(response.data);
        setLoading(false);
      } catch (err) {
        setError(err);
        setLoading(false);
        console.error('Error fetching data:', err);
      }
    };

    fetchData();
  }, []);

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

  return (
    <div>
      <h1>Cryptocurrency Prices</h1>
      <ul>
        {cryptoData.map((crypto) => (
          <li>
            {crypto.name}: ${crypto.current_price}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default HomePage;

Explanation:

  • Import Statements: Import necessary modules (useState, useEffect, and Axios).
  • State Variables:
    • cryptoData: Stores the fetched cryptocurrency data.
    • loading: Indicates if data is being fetched.
    • error: Stores any errors that occur during the fetch.
  • useEffect Hook:
    • This hook runs once when the component mounts.
    • It calls the fetchData function to fetch the data.
  • fetchData Function:
    • Uses Axios to make a GET request to the CoinGecko API.
    • Updates the cryptoData state with the response.
    • Sets the loading state to false.
    • Handles errors by setting the error state and logging the error to the console.
  • Conditional Rendering:
    • Displays “Loading…” while data is being fetched.
    • Displays an error message if an error occurs.
    • Renders a list of cryptocurrency prices if data is successfully fetched.

Replace the API endpoint with the one provided by your chosen cryptocurrency data provider. Ensure that you handle potential errors gracefully and provide feedback to the user.

Displaying Data in the UI

Now, let’s display the fetched data in a user-friendly format. You can use a simple list or a more elaborate table. Here’s an example using a table:

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

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

  useEffect(() => {
    const fetchData = async () => {
      try {
        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'
        );
        setCryptoData(response.data);
        setLoading(false);
      } catch (err) {
        setError(err);
        setLoading(false);
        console.error('Error fetching data:', err);
      }
    };

    fetchData();
  }, []);

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

  return (
    <div>
      <h1>Cryptocurrency Prices</h1>
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Symbol</th>
            <th>Price (USD)</th>
          </tr>
        </thead>
        <tbody>
          {cryptoData.map((crypto) => (
            <tr>
              <td>{crypto.name}</td>
              <td>{crypto.symbol.toUpperCase()}</td>
              <td>${crypto.current_price}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default HomePage;

Explanation:

  • Table Structure: Uses standard HTML table elements (table, thead, tbody, tr, th, td) to structure the data.
  • Data Mapping: The cryptoData.map() function iterates over the fetched data and renders a table row (tr) for each cryptocurrency.
  • Data Display: Displays the cryptocurrency name, symbol (converted to uppercase), and current price in the table cells.

To improve the visual appeal, consider adding CSS styles to the table. You can use inline styles, a separate CSS file, or a CSS-in-JS solution like styled-components or Emotion.

Adding User Input and Filtering

Allowing users to search or filter cryptocurrencies can significantly enhance the user experience. Here’s how you can add a search input:

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

function HomePage() {
  const [cryptoData, setCryptoData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [searchTerm, setSearchTerm] = useState('');

  useEffect(() => {
    const fetchData = async () => {
      try {
        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'
        );
        setCryptoData(response.data);
        setLoading(false);
      } catch (err) {
        setError(err);
        setLoading(false);
        console.error('Error fetching data:', err);
      }
    };

    fetchData();
  }, []);

  const filteredCrypto = cryptoData.filter((crypto) =>
    crypto.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
    crypto.symbol.toLowerCase().includes(searchTerm.toLowerCase())
  );

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

  return (
    <div>
      <h1>Cryptocurrency Prices</h1>
       setSearchTerm(e.target.value)}
      />
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Symbol</th>
            <th>Price (USD)</th>
          </tr>
        </thead>
        <tbody>
          {filteredCrypto.map((crypto) => (
            <tr>
              <td>{crypto.name}</td>
              <td>{crypto.symbol.toUpperCase()}</td>
              <td>${crypto.current_price}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default HomePage;

Explanation:

  • searchTerm State: A new state variable, searchTerm, is added to store the user’s search input.
  • Input Field: An input field is added with the onChange event handler to update the searchTerm state as the user types.
  • Filtering Logic:
    • The filteredCrypto array is created by filtering the cryptoData array.
    • The filter condition checks if the cryptocurrency name or symbol (converted to lowercase) includes the search term (also converted to lowercase).
  • Dynamic Rendering: The table now renders the filteredCrypto array, displaying only the cryptocurrencies that match the search term.

This implementation provides a basic search functionality. You can further enhance it by adding features like debouncing the search input to reduce API calls or implementing a more advanced filtering system based on multiple criteria.

Adding Charts with React-chartjs-2

Visualizing price trends with charts can provide valuable insights. The react-chartjs-2 library makes it easy to create various chart types. Here’s an example of how to display a simple line chart for a specific cryptocurrency:

import { useState, useEffect } from 'react';
import axios from 'axios';
import { Line } from 'react-chartjs-2';
import { Chart as ChartJS } from 'chart.js/auto'; // Import ChartJS

function HomePage() {
  const [cryptoData, setCryptoData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [selectedCryptoId, setSelectedCryptoId] = useState('');
  const [chartData, setChartData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        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'
        );
        setCryptoData(response.data);
        setLoading(false);
      } catch (err) {
        setError(err);
        setLoading(false);
        console.error('Error fetching data:', err);
      }
    };

    fetchData();
  }, []);

  useEffect(() => {
    const fetchChartData = async () => {
      if (!selectedCryptoId) return;
      try {
        const response = await axios.get(
          `https://api.coingecko.com/api/v3/coins/${selectedCryptoId}/market_chart?vs_currency=usd&days=30`
        );
        const prices = response.data.prices.map(([timestamp, price]) => ({
          x: new Date(timestamp).toLocaleDateString(),
          y: price,
        }));
        setChartData({
          labels: prices.map(item => item.x),
          datasets: [
            {
              label: 'Price (USD)',
              data: prices.map(item => item.y),
              borderColor: 'rgb(255, 99, 132)',
              fill: false,
            },
          ],
        });
      } catch (err) {
        console.error('Error fetching chart data:', err);
        setChartData(null);
      }
    };

    fetchChartData();
  }, [selectedCryptoId]);

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

  return (
    <div>
      <h1>Cryptocurrency Prices</h1>
       setSelectedCryptoId(e.target.value)} value={selectedCryptoId}>
        Select a Cryptocurrency
        {cryptoData.map((crypto) => (
          {crypto.name}
        ))}
      
      {chartData && (
        
      )}
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Symbol</th>
            <th>Price (USD)</th>
          </tr>
        </thead>
        <tbody>
          {cryptoData.map((crypto) => (
            <tr>
              <td>{crypto.name}</td>
              <td>{crypto.symbol.toUpperCase()}</td>
              <td>${crypto.current_price}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default HomePage;

Explanation:

  • Import Chart Components: Import the Line chart component from react-chartjs-2 and ChartJS from ‘chart.js/auto’.
  • Chart Data State: Add a new state variable, chartData, to store the data for the chart.
  • Selected Crypto State: Add a new state variable, selectedCryptoId, to store the ID of the selected cryptocurrency for the chart.
  • Fetching Chart Data:
    • An additional useEffect hook fetches historical price data from the CoinGecko API based on the selectedCryptoId.
    • The fetched data is transformed into a format suitable for react-chartjs-2.
    • The chartData state is updated with the processed data.
  • Rendering the Chart: The Line chart component is rendered conditionally based on the chartData state.
  • Selection Dropdown: A select dropdown is added to choose the cryptocurrency for which to display the chart.

This example demonstrates a basic line chart. You can customize the chart further by adding axes labels, titles, tooltips, and other features available in react-chartjs-2.

Handling Errors and Edge Cases

Robust error handling is essential for any application that fetches data from external sources. Consider the following:

  • API Errors: Handle potential errors from the API, such as network issues, rate limits, or invalid responses. Display user-friendly error messages and provide options for retrying the request.
  • Data Validation: Validate the data received from the API to ensure it’s in the expected format. Handle missing or unexpected data gracefully.
  • Loading States: Use loading indicators to provide feedback to the user while data is being fetched.
  • Edge Cases: Consider edge cases like empty responses, invalid user input, and unexpected API behavior.

Here’s an example of error handling in the data fetching function:

try {
  const response = await axios.get(API_ENDPOINT);
  if (response.status !== 200) {
    throw new Error(`API request failed with status ${response.status}`);
  }
  const data = response.data;
  // Validate data here
  if (!data || data.length === 0) {
    throw new Error('No data received from API');
  }
  setCryptoData(data);
  setLoading(false);
} catch (error) {
  setError(error);
  setLoading(false);
  console.error('Error fetching data:', error);
}

By implementing proper error handling, you can create a more reliable and user-friendly cryptocurrency price tracker.

Styling and Enhancements

While the functionality is important, a well-designed UI enhances the user experience. Consider the following:

  • CSS Frameworks: Use a CSS framework like Tailwind CSS, Bootstrap, or Material-UI to streamline styling.
  • Responsive Design: Ensure your application looks good on different screen sizes by using responsive design techniques.
  • Themes: Implement light and dark themes for a more personalized experience.
  • Animations: Add subtle animations to enhance the user interface.
  • Real-time Updates: Implement real-time updates using WebSockets or Server-Sent Events (SSE) to provide live price data.

Here’s an example using Tailwind CSS for basic styling:

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

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

  useEffect(() => {
    const fetchData = async () => {
      try {
        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'
        );
        setCryptoData(response.data);
        setLoading(false);
      } catch (err) {
        setError(err);
        setLoading(false);
        console.error('Error fetching data:', err);
      }
    };

    fetchData();
  }, []);

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

  return (
    <div>
      <h1>Cryptocurrency Prices</h1>
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Symbol</th>
            <th>Price (USD)</th>
          </tr>
        </thead>
        <tbody>
          {cryptoData.map((crypto) => (
            <tr>
              <td>{crypto.name}</td>
              <td>{crypto.symbol}</td>
              <td>${crypto.current_price}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default HomePage;

This example demonstrates how to apply basic styling using Tailwind CSS classes. You can customize the appearance of your application further by adding more styles and implementing responsive design.

Deploying Your Application

Once you’ve built your cryptocurrency price tracker, you’ll want to deploy it so others can use it. Next.js offers several deployment options, including:

  • Vercel: The easiest way to deploy a Next.js application. Vercel is the platform created by the creators of Next.js and offers seamless deployment and scaling.
  • Netlify: Another popular platform for deploying web applications, offering similar features to Vercel.
  • Other Platforms: You can also deploy your application to platforms like AWS, Google Cloud, or Azure.

To deploy to Vercel, simply push your code to a Git repository (e.g., GitHub, GitLab, or Bitbucket) and connect your repository to Vercel. Vercel will automatically build and deploy your application. The deployment process is usually straightforward and takes only a few minutes.

Common Mistakes and How to Fix Them

Here are some common mistakes developers encounter when building a cryptocurrency price tracker and how to fix them:

  • Incorrect API Endpoint: Double-check the API endpoint and ensure it’s correct. Typos or incorrect URLs are common causes of errors.
  • CORS Issues: If you encounter CORS (Cross-Origin Resource Sharing) errors, configure your API to allow requests from your domain or use a proxy server.
  • Rate Limiting: APIs often have rate limits. Implement error handling to handle rate limit errors and consider adding delays or caching to avoid exceeding the limits.
  • Data Parsing Errors: Ensure you correctly parse the data received from the API. Check the API documentation for the expected data format.
  • State Management Issues: Incorrectly managing state can lead to unexpected behavior. Use the correct state variables and update them appropriately.

Key Takeaways

This tutorial has covered the essential steps for building a cryptocurrency price tracker with Next.js:

  • Setting up a Next.js project.
  • Fetching data from an API using Axios.
  • Displaying data in a user-friendly format.
  • Adding user input and filtering.
  • Visualizing data with charts using react-chartjs-2.
  • Handling errors and edge cases.
  • Styling and enhancing the UI.
  • Deploying the application.

FAQ

Here are some frequently asked questions about building a cryptocurrency price tracker:

  1. Q: Where can I find a free cryptocurrency API?

    A: CoinGecko and CoinMarketCap offer free APIs for fetching cryptocurrency data. However, you may need to register and obtain an API key.

  2. Q: How can I handle API rate limits?

    A: Implement error handling to handle rate limit errors and consider adding delays or caching to avoid exceeding the limits.

  3. Q: How can I add real-time updates to my price tracker?

    A: You can use WebSockets or Server-Sent Events (SSE) to receive real-time price updates from the API.

  4. Q: How do I deploy my Next.js application?

    A: You can deploy your Next.js application to platforms like Vercel or Netlify, which provide simple deployment processes.

Building a cryptocurrency price tracker is a rewarding project that combines front-end development with data fetching and visualization. The skills gained from this project can be applied to many other web development projects. Remember to always prioritize user experience, robust error handling, and security. By following the steps outlined in this tutorial, you can create a functional and informative price tracker to stay updated on the ever-changing cryptocurrency market. With a solid foundation in Next.js and the ability to work with APIs, you’re well-equipped to tackle more complex projects in the future.

More posts