Build a Next.js Interactive Cryptocurrency Converter App

Written by

FixTechToday

in

In the fast-paced world of cryptocurrency, staying informed about the latest exchange rates is crucial. Manually checking multiple websites to convert values can be time-consuming and inefficient. This is where a dedicated cryptocurrency converter app comes in handy. In this comprehensive guide, we’ll walk through building an interactive cryptocurrency converter app using Next.js, a powerful React framework known for its server-side rendering and static site generation capabilities. This project is perfect for beginners and intermediate developers looking to expand their skills in web development and API integration.

Why Build a Cryptocurrency Converter?

Creating a cryptocurrency converter app offers several advantages:

  • Real-time Data: Access live cryptocurrency prices, ensuring accurate conversions.
  • User-Friendly Interface: Provide an intuitive experience for quick and easy conversions.
  • Educational Opportunity: Learn about API integration, state management, and front-end development.
  • Practical Application: Build a tool that can be used for personal finance management or trading decisions.

This project will not only teach you the fundamentals of Next.js but also introduce you to the process of fetching data from external APIs and displaying it in a dynamic and interactive manner.

Prerequisites

Before we dive in, make sure you have the following installed:

  • Node.js and npm (or yarn): This is required to run JavaScript on your machine and manage project dependencies. You can download it from nodejs.org.
  • A Code Editor: Visual Studio Code, Sublime Text, or any other code editor of your choice.
  • Basic knowledge of JavaScript and React: Familiarity with these technologies will be helpful, but not strictly necessary. We will explain the concepts as we go.

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-converter-app

This command will create a new directory called crypto-converter-app with all the necessary files and configurations for your project. Navigate into the project directory:

cd crypto-converter-app

Now, start the development server:

npm run dev

Your Next.js app should now be running on http://localhost:3000. Open this address in your browser to see the default Next.js welcome page.

Project Structure Overview

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

  • pages/: This directory contains your Next.js pages. Each file in this directory represents a route in your application. For example, pages/index.js corresponds to the root route (/).
  • components/: This directory will hold reusable React components that make up your app’s UI.
  • styles/: This directory is where you’ll put your CSS styles. Next.js supports CSS modules, allowing you to scope your styles to individual components.
  • package.json: This file lists your project dependencies and scripts.

Fetching Cryptocurrency Data from an API

The core functionality of our app will rely on fetching cryptocurrency data from a reliable API. There are several free and paid APIs available. For this project, we’ll use the CoinGecko API, which offers a free tier with a generous rate limit. You don’t need to create an account to use the API for this project, but if you intend on using it for a production application, please refer to the API’s documentation for rate limits and other usage guidelines.

Let’s install the axios package, a popular library for making HTTP requests:

npm install axios

Now, let’s create a new file in the components directory called Converter.js. This component will handle fetching the data and displaying the conversion results. Here’s the basic structure:

// components/Converter.js
import React, { useState, useEffect } from 'react';
import axios from 'axios';

function Converter() {
  const [cryptoData, setCryptoData] = useState({});
  const [fromCurrency, setFromCurrency] = useState('bitcoin'); // Default
  const [toCurrency, setToCurrency] = useState('usd'); // Default
  const [amount, setAmount] = useState(1);
  const [convertedAmount, setConvertedAmount] = useState(null);
  const [currencies, setCurrencies] = useState([]);

  useEffect(() => {
    // Fetch list of supported currencies
    const fetchCurrencies = async () => {
      try {
        const response = await axios.get('https://api.coingecko.com/api/v3/coins/list');
        const currencyList = response.data.map(coin => ({
          id: coin.id,
          symbol: coin.symbol.toUpperCase(),
          name: coin.name
        }));
        setCurrencies(currencyList);
      } catch (error) {
        console.error('Error fetching currencies:', error);
        // Handle errors (e.g., display an error message to the user)
      }
    }

    fetchCurrencies();
  }, []);

  useEffect(() => {
    // Fetch the conversion rate and amount
    const fetchData = async () => {
      try {
        const response = await axios.get(
          `https://api.coingecko.com/api/v3/simple/price?ids=${fromCurrency}&vs_currencies=${toCurrency}`
        );

        if (response.data && response.data[fromCurrency] && response.data[fromCurrency][toCurrency]) {
          const rate = response.data[fromCurrency][toCurrency];
          const result = amount * rate;
          setConvertedAmount(result);
        } else {
          setConvertedAmount(null);
          console.error('Invalid data received from API');
        }

      } catch (error) {
        console.error('Error fetching conversion data:', error);
        setConvertedAmount(null);
        // Handle errors
      }
    };

    if (fromCurrency && toCurrency && amount > 0) {
        fetchData();
    } else {
        setConvertedAmount(null);
    }

  }, [fromCurrency, toCurrency, amount]);

  return (
    <div>
      {/* UI will go here */} 
    </div>
  );
}

export default Converter;

Let’s break down the code:

  • Import Statements: We import React, useState, useEffect from ‘react’, and axios from ‘axios’.
  • State Variables:
    • cryptoData: This will store the data fetched from the API.
    • fromCurrency: Stores the cryptocurrency the user wants to convert from (e.g., bitcoin).
    • toCurrency: Stores the target currency (e.g., USD).
    • amount: Stores the amount the user wants to convert.
    • convertedAmount: Stores the result of the conversion.
    • currencies: Stores a list of supported currencies for dropdown selection.
  • useEffect Hooks:
    • First useEffect: Fetches the list of supported currencies from the CoinGecko API on component mount and updates the currencies state.
      • API Endpoint: https://api.coingecko.com/api/v3/coins/list
      • Data transformation: Map the response data to an array of objects, each containing the id, symbol and name of the currency.
    • Second useEffect: Fetches the conversion rate from the API whenever fromCurrency, toCurrency or amount changes. This hook is responsible for fetching the conversion rate and calculating the converted amount.
      • API Endpoint: https://api.coingecko.com/api/v3/simple/price?ids=${fromCurrency}&vs_currencies=${toCurrency}
      • Conditional fetching: The API call is only made if fromCurrency, toCurrency and amount have valid values.
      • Error Handling: Includes error handling to catch and log any issues during API calls.
  • Return Statement: This will render the UI. We’ll populate this later.

Building the User Interface

Now, let’s build the user interface for our cryptocurrency converter. We’ll add input fields for the amount, dropdown menus for selecting the currencies, and a display area to show the converted amount. We’ll also add some basic styling to make it look presentable. Modify the Converter.js file’s return statement to include the following:


   <div>
      <h2>Cryptocurrency Converter</h2>
      <div>
        <label>Amount:</label>
         setAmount(parseFloat(e.target.value) || 0)}
        />
      </div>
      <div>
        <label>From:</label>
         setFromCurrency(e.target.value)}
        >
          {currencies.map(currency => (
            
              {currency.symbol} - {currency.name}
            
          ))}
        
      </div>
      <div>
        <label>To:</label>
         setToCurrency(e.target.value)}
        >
          USD  {/* Example: Directly include USD */}
          {currencies.map(currency => (
            
              {currency.symbol} - {currency.name}
            
          ))}
        
      </div>
      {convertedAmount !== null && (
        <div>
          <p>Converted Amount: {convertedAmount.toFixed(2)} {toCurrency.toUpperCase()}</p>
        </div>
      )}
      {convertedAmount === null && amount > 0 && (
          <p>Loading...</p>
      )}
    </div>

Let’s break down the UI code:

  • Heading: A simple h2 tag for the title.
  • Amount Input: An input field for the user to enter the amount to convert. The onChange handler updates the amount state. The input field uses `type=”number”` to ensure a numeric keyboard is displayed on mobile devices.
  • From Currency Select: A dropdown menu for selecting the source cryptocurrency. The onChange handler updates the fromCurrency state. The dropdown is populated with options generated from the `currencies` array.
  • To Currency Select: A dropdown menu for selecting the target currency. The onChange handler updates the toCurrency state.
  • Conversion Result: A conditional rendering block that displays the converted amount if convertedAmount is not null. It also displays a “Loading…” message while the conversion is being calculated.

Integrating the Converter Component into Your Page

Now that we’ve created the Converter component, let’s integrate it into our main page (pages/index.js). Open pages/index.js and replace the existing content with the following:


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

export default function Home() {
  return (
    <div>
      
    </div>
  );
}

This imports the Converter component and renders it within the main page. Now, when you visit http://localhost:3000, you should see the cryptocurrency converter UI.

Adding Basic Styling with CSS Modules

To improve the appearance of our app, let’s add some basic styling using CSS Modules. Create a new file in the styles directory called Converter.module.css. Add the following CSS:


/* styles/Converter.module.css */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  font-family: sans-serif;
}

.inputGroup {
  margin-bottom: 10px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

input[type="number"],
select {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 200px;
  font-size: 16px;
}

p {
  font-size: 18px;
  margin-top: 10px;
}

Now, import this CSS module into your Converter.js file:


// components/Converter.js
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import styles from '../styles/Converter.module.css';

function Converter() {
  // ... (rest of the code)
  return (
    <div>
      <h2>Cryptocurrency Converter</h2>
      <div>
        <label>Amount:</label>
         setAmount(parseFloat(e.target.value) || 0)}
        />
      </div>
      <div>
        <label>From:</label>
         setFromCurrency(e.target.value)}
        >
          {currencies.map(currency => (
            
              {currency.symbol} - {currency.name}
            
          ))}
        
      </div>
      <div>
        <label>To:</label>
         setToCurrency(e.target.value)}
        >
          USD  {/* Example: Directly include USD */}
          {currencies.map(currency => (
            
              {currency.symbol} - {currency.name}
            
          ))}
        
      </div>
      {convertedAmount !== null && (
        <div>
          <p>Converted Amount: {convertedAmount.toFixed(2)} {toCurrency.toUpperCase()}</p>
        </div>
      )}
      {convertedAmount === null && amount > 0 && (
          <p>Loading...</p>
      )}
    </div>
  );
}

export default Converter;

We’ve added the CSS module and applied the styles using the className prop. The styles.container class is applied to the main div, and styles.inputGroup is applied to the input group divs. This will style the elements, making the UI more visually appealing.

Handling Errors

It’s important to handle potential errors when fetching data from an external API. The CoinGecko API, like any API, might be unavailable, or the data might not be in the expected format. Let’s enhance our error handling within the Converter.js component. Modify the useEffect hook responsible for fetching data to include error handling and display informative messages to the user.


  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get(
          `https://api.coingecko.com/api/v3/simple/price?ids=${fromCurrency}&vs_currencies=${toCurrency}`
        );

        if (response.data && response.data[fromCurrency] && response.data[fromCurrency][toCurrency]) {
          const rate = response.data[fromCurrency][toCurrency];
          const result = amount * rate;
          setConvertedAmount(result);
        } else {
          setConvertedAmount(null);
          console.error('Invalid data received from API');
          // Set an error message to display to the user.
          setError('Could not retrieve conversion rate. Please try again.');
        }

      } catch (error) {
        console.error('Error fetching conversion data:', error);
        setConvertedAmount(null);
        // Set an error message to display to the user.
        setError('Failed to fetch conversion data. Please check your internet connection or try again later.');
      }
    };

    if (fromCurrency && toCurrency && amount > 0) {
        fetchData();
    } else {
        setConvertedAmount(null);
    }

  }, [fromCurrency, toCurrency, amount]);

Add the following state variable to the component to store error messages:


  const [error, setError] = useState(null);

And finally, display the error message in your UI:


  {error && <p>{error}</p>}

Add the following CSS to Converter.module.css to style the error message:


.error {
  color: red;
  margin-top: 10px;
}

This will display an error message to the user if something goes wrong during the data fetching process.

Common Mistakes and How to Fix Them

Here are some common mistakes developers make when building this type of application, and how to avoid or fix them:

  • Incorrect API Endpoint: Double-check the API endpoint URL for typos or incorrect parameters. Ensure you are using the correct endpoint for retrieving the conversion rate. Refer to the API documentation.
  • Handling API Errors: Failing to handle potential API errors can lead to a broken user experience. Always include try...catch blocks and display informative error messages to the user. This ensures the user knows what went wrong and can take appropriate action.
  • Data Type Issues: Make sure you are handling data types correctly. For example, the amount entered by the user is a string, and you must convert it to a number using parseFloat() before performing calculations.
  • Rate Limiting: APIs often have rate limits. If you exceed the limit, the API will block your requests. Implement error handling to gracefully manage rate limit errors, and consider using techniques like caching or batching requests to optimize API usage.
  • Incorrect Currency Codes: Ensure the currency codes you are using are correct. Refer to the API documentation to confirm the correct codes. Using the wrong codes will result in incorrect or no data.

Optimizing for Performance

As your app grows, consider these optimization techniques:

  • Caching: Implement caching to store API responses for a specific time. This reduces the number of API calls, improving performance and potentially reducing costs. You can use a library like swr or react-query for caching.
  • Debouncing and Throttling: If the user is typing rapidly, you can debounce or throttle the onChange event on the input field to reduce the number of API calls. This prevents the app from making unnecessary API requests while the user is still typing.
  • Code Splitting: Next.js automatically splits your code into smaller chunks, but you can further optimize it by dynamically importing components that are not immediately needed.
  • Server-Side Rendering (SSR) / Static Site Generation (SSG): For better SEO and initial load times, consider using SSR or SSG to pre-render the content. This is especially useful if the currency rates don’t change frequently.

Enhancements and Next Steps

Here are some ideas to further enhance your cryptocurrency converter app:

  • Add More Currencies: Expand the list of supported currencies.
  • Currency Symbols: Display currency symbols alongside the currency codes for better readability.
  • Historical Data: Integrate historical price data to show trends.
  • Dark Mode: Implement a dark mode for a better user experience.
  • User Authentication: If you want to store user preferences, add user authentication.
  • Mobile Responsiveness: Ensure the app is responsive and looks good on all devices. Use CSS media queries or a responsive design library.

Key Takeaways

Building a cryptocurrency converter app with Next.js is a fantastic way to learn about front-end development, API integration, and state management. You’ve learned how to fetch data from an external API, display it in a user-friendly interface, and handle potential errors. By following this guide, you should now have a solid understanding of how to build interactive web applications with Next.js. Remember to always prioritize user experience, handle errors gracefully, and consider performance optimizations as your app evolves. With this knowledge, you are well-equipped to tackle more complex projects and continue your journey in web development. The skills acquired in this project are transferable to a wide range of web applications, making this a valuable learning experience.

More posts