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

Written by

javascriptdebugged

in

In the rapidly evolving world of cryptocurrencies, staying informed about price fluctuations is crucial. Manually checking prices on various exchanges can be tedious and time-consuming. This tutorial will guide you through building a dynamic, interactive cryptocurrency price tracker using Next.js, a powerful React framework for building modern web applications. This project will not only teach you the fundamentals of Next.js but also introduce you to concepts like API integration, state management, and data fetching, all essential skills for any web developer.

Why Build a Cryptocurrency Price Tracker?

A cryptocurrency price tracker provides real-time or near-real-time data on the prices of various cryptocurrencies. It’s a practical application that demonstrates several key web development concepts. Here’s why it’s a great project:

  • Practical Application: You’ll create something useful that you can actually use.
  • API Integration: Learn how to fetch data from external APIs.
  • State Management: Understand how to manage and update data within your application.
  • Real-World Relevance: The cryptocurrency market is dynamic, making this a relevant and engaging project.

Prerequisites

Before you begin, ensure you have the following:

  • Node.js and npm (or yarn) installed: These are essential for running JavaScript and managing project dependencies.
  • A code editor: Visual Studio Code, Sublime Text, or any editor of your choice.
  • Basic knowledge of HTML, CSS, and JavaScript: Familiarity with these languages is necessary to understand the code.
  • A basic understanding of React: Since Next.js is built on React, some familiarity is beneficial.

Step-by-Step Guide

1. Setting Up Your Next.js Project

First, create a new Next.js project using the following command in your terminal:

npx create-next-app crypto-tracker
cd crypto-tracker

This command creates a new directory called crypto-tracker and initializes a Next.js project inside it. Navigate into the project directory using cd crypto-tracker.

2. Installing Dependencies

Next, install the necessary dependencies. For this project, we’ll need:

  • Axios: A promise-based HTTP client for making API requests.
  • react-icons: For adding icons to our application.

Run the following command in your terminal:

npm install axios react-icons

3. Project Structure and File Setup

Let’s organize our project files. Here’s a suggested structure:

crypto-tracker/
├── pages/
│   └── index.js       # Main page
├── components/
│   ├── CryptoList.js    # Component to display crypto prices
│   └── CryptoItem.js    # Component for each crypto item
├── styles/
│   └── globals.css      # Global styles
├── next.config.js    # Next.js configuration
├── package.json
└── ...

Create the necessary files and directories if they don’t already exist. The pages/index.js file will be the main page of our application. The components directory will hold our React components.

4. Fetching Cryptocurrency Data from an API

We’ll use a public API to fetch cryptocurrency prices. CoinGecko is a good option. Sign up for a free API key if needed. We’ll use the free tier for this tutorial. Here’s how to fetch data in pages/index.js:

// pages/index.js
import { useState, useEffect } from 'react';
import axios from 'axios';
import CryptoList from '../components/CryptoList';

const API_URL = 'https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=10&page=1&sparkline=false&price_change_percentage=24h';

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

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get(API_URL);
        setCryptoData(response.data);
        setLoading(false);
      } catch (err) {
        setError(err);
        setLoading(false);
      }
    };

    fetchData();
  }, []);

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

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

  return (
    <div>
      <h1>Cryptocurrency Prices</h1>
      
    </div>
  );
}

Explanation:

  • We import useState and useEffect from React and axios for making API requests.
  • We define the API_URL constant, which points to the CoinGecko API endpoint. Replace the URL with your API endpoint if you are using another API.
  • We use useState to manage the cryptoData (an array of cryptocurrency objects), loading (a boolean to indicate if data is being fetched), and error (to handle any errors during the API request).
  • The useEffect hook is used to fetch data from the API when the component mounts. The empty dependency array [] ensures that this effect runs only once.
  • Inside the useEffect, we define an asynchronous function fetchData to make the API request using axios.get().
  • If the request is successful, we update the cryptoData state with the response data and set loading to false.
  • If there is an error, we set the error state and set loading to false.
  • We conditionally render a loading message while loading is true, and an error message if there is an error.
  • Finally, we pass the cryptoData to the CryptoList component.

5. Creating the CryptoList Component

Let’s create the CryptoList component in components/CryptoList.js. This component will receive the cryptocurrency data and render a list of crypto items.

// components/CryptoList.js
import CryptoItem from './CryptoItem';

function CryptoList({ cryptoData }) {
  return (
    <div>
      {cryptoData.map((crypto) => (
        
      ))}
    </div>
  );
}

export default CryptoList;

Explanation:

  • We import the CryptoItem component.
  • The CryptoList component receives the cryptoData prop, which is an array of cryptocurrency objects.
  • We use the map function to iterate over the cryptoData array and render a CryptoItem component for each cryptocurrency. We pass the individual crypto data as a prop to the CryptoItem component.
  • The key prop is important for React to efficiently update the list.

6. Creating the CryptoItem Component

Now, let’s create the CryptoItem component in components/CryptoItem.js. This component will display the details of each cryptocurrency.

// components/CryptoItem.js
import React from 'react';
import { FaBitcoin, FaEthereum, FaTiktok } from 'react-icons/fa'; // Example icons

function CryptoItem({ crypto }) {
  // Determine icon based on crypto symbol (example)
  let CryptoIcon;
  switch (crypto.symbol.toUpperCase()) {
    case 'BTC':
      CryptoIcon = FaBitcoin;
      break;
    case 'ETH':
      CryptoIcon = FaEthereum;
      break;
    default:
      CryptoIcon = FaTiktok;  // Default icon
  }

  return (
    <div style="{{">
      <div style="{{">
         {/* Use the icon */} 
        <h3>{crypto.name} ({crypto.symbol.toUpperCase()})</h3>
      </div>
      <p><b>Price:</b> ${crypto.current_price.toLocaleString()}</p>
      <p><b>24h Change:</b> <span style="{{"> 0 ? 'green' : 'red' }}>{crypto.price_change_percentage_24h.toFixed(2)}%</span></p>
    </div>
  );
}

export default CryptoItem;

Explanation:

  • We import the necessary icons from react-icons.
  • The CryptoItem component receives a crypto prop, which represents a single cryptocurrency object.
  • We use a switch statement to determine the appropriate icon based on the cryptocurrency symbol.
  • We render the cryptocurrency name, symbol, current price, and 24-hour price change.
  • The 24-hour price change is displayed in green if positive and red if negative.
  • We use inline styles for basic styling. For a more complex application, use a CSS-in-JS solution (like styled-components) or a CSS file.

7. Styling the Application

For this tutorial, we will use basic inline styles. However, for larger projects, it’s best to use CSS modules, styled-components, or a CSS framework like Tailwind CSS.

Here’s an example of how you can add some basic styles in styles/globals.css:

/* styles/globals.css */
body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
}

h1 {
  text-align: center;
  padding: 20px 0;
  background-color: #333;
  color: white;
  margin: 0;
}

Import this CSS file into your pages/_app.js file to apply the styles globally:

// pages/_app.js
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return ;
}

export default MyApp;

8. Running the Application

To run your application, use the following command in your terminal:

npm run dev

This will start the development server, and you can view your price tracker in your browser at http://localhost:3000.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid or fix them:

  • CORS Errors: If you encounter CORS (Cross-Origin Resource Sharing) errors, it means the API you are trying to access doesn’t allow requests from your domain. This is a security feature of web browsers. You can often resolve this by using a proxy server. There are several free and paid proxy services available. Alternatively, if you control the API, you can configure it to allow requests from your domain.
  • Incorrect API Endpoint: Double-check the API endpoint URL. Typos or incorrect parameters can prevent data from loading.
  • Data Not Rendering: Ensure that the data you are fetching from the API is in the correct format and that you are accessing the correct properties of the data in your components. Use console.log(crypto) inside your CryptoItem component to inspect the data.
  • Missing Dependencies: Make sure you have installed all the required dependencies (e.g., Axios, react-icons).
  • State Management Errors: When updating state with useState, make sure you are not directly mutating the state. Instead, create a new array or object and update the state with the new value.

Enhancements and Next Steps

Once you have a working price tracker, consider these enhancements:

  • Add Search Functionality: Allow users to search for specific cryptocurrencies.
  • Implement Sorting: Enable sorting of the cryptocurrency list by price, market capitalization, or 24-hour change.
  • Add Pagination: If you are displaying a large number of cryptocurrencies, implement pagination to improve performance.
  • Improve Styling: Use a CSS framework or CSS modules to create a more polished look.
  • Add More Data: Display additional information about each cryptocurrency, such as trading volume, circulating supply, and more.
  • Real-time Updates: Implement WebSockets or Server-Sent Events (SSE) to receive real-time updates from the API.
  • Error Handling: Implement more robust error handling and display user-friendly error messages.

Key Takeaways

This tutorial provides a solid foundation for building a cryptocurrency price tracker with Next.js. You’ve learned how to fetch data from an API, manage state, and create reusable components. This project helps to consolidate your understanding of React and Next.js, and provides a starting point for more complex web applications. Remember to always validate and sanitize user inputs and outputs. Keep your code clean, well-commented, and easy to read. Regularly review and refactor your code to maintain its quality.

With the knowledge gained from this tutorial, you can explore more advanced features and build more sophisticated web applications. The possibilities are endless. Keep experimenting, keep learning, and keep building. The world of web development is constantly evolving, so continuous learning is essential. Consider contributing to open-source projects or building your own personal projects to further develop your skills and expand your portfolio. Practice is key, and the more you code, the better you will become. Embrace the challenges, and celebrate your successes. Your journey as a web developer has just begun.

More posts