Build A Next.js Interactive Web-Based Cryptocurrency Price Alert App

In the fast-paced world of cryptocurrency, staying informed about price fluctuations is crucial. Missing a significant price change can mean missing out on profit opportunities or incurring unexpected losses. That’s where a cryptocurrency price alert app comes in handy. This tutorial will guide you through building a dynamic, interactive web-based application using Next.js that sends you real-time price alerts for your favorite cryptocurrencies. We’ll cover everything from fetching data from a public API to setting up a notification system.

Why Build a Cryptocurrency Price Alert App?

Imagine you’re a crypto enthusiast or trader. You’re constantly checking prices, but you can’t be glued to your screen 24/7. A price alert app solves this problem by:

Providing Timely Information: Get instant notifications when prices hit your predefined thresholds.
Saving Time: Avoid manually checking prices repeatedly.
Reducing Emotional Trading: Alerts help you make informed decisions based on data, not emotions.

This tutorial will not only teach you how to build such an app but also provide you with a solid understanding of Next.js, API integrations, and state management.

Prerequisites

Before we begin, ensure you have the following:

Node.js and npm/yarn: Make sure you have Node.js and npm (or yarn) installed on your system. You can download them from nodejs.org.
Basic JavaScript Knowledge: Familiarity with JavaScript fundamentals, including variables, functions, and objects.
Text Editor or IDE: A code editor like Visual Studio Code, Sublime Text, or Atom.
API Key (Optional): Some cryptocurrency APIs require an API key for more frequent or detailed data. We’ll use a free API that doesn’t require one for this tutorial, but be prepared to sign up for one if you want to expand the app’s capabilities later.

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

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

cd crypto-alert-app

Now, start the development server:

npm run dev

This will start the development server, and you can access your app at http://localhost:3000.

Project Structure Overview

Before we dive into coding, let’s understand the basic structure of a Next.js project:

pages/: This directory contains your application’s pages. Each file in this directory becomes a route. For example, `pages/index.js` is the homepage (/).
components/: This directory is where you’ll store reusable React components.
public/: This directory holds static assets like images, fonts, and other files.
styles/: This directory is where your CSS or styling files go.

Fetching Cryptocurrency Data

We’ll use a public API to fetch cryptocurrency prices. There are several free APIs available; for this tutorial, we will use CoinGecko’s API. Let’s create a function to fetch the price data. Create a new file called `utils/api.js` in your project and add the following code:

// utils/api.js

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

export async function getCryptoPrice(coinId) {
  try {
    const response = await fetch(`${API_URL}/coins/${coinId}?localization=false&tickers=false&market_data=true&community_data=false&developer_data=false&sparkline=false`);
    const data = await response.json();
    return data.market_data.current_price.usd;
  } catch (error) {
    console.error('Error fetching price:', error);
    return null;
  }
}

This code defines an asynchronous function `getCryptoPrice` that takes a `coinId` (e.g., “bitcoin”) as an argument. It fetches data from the CoinGecko API and returns the current USD price. Error handling is included to manage potential API issues.

Creating the UI (Homepage)

Now, let’s modify the `pages/index.js` file to display the cryptocurrency price. Replace the content of `pages/index.js` with the following:

// pages/index.js
import { useState, useEffect } from 'react';
import { getCryptoPrice } from '../utils/api';

export default function Home() {
  const [bitcoinPrice, setBitcoinPrice] = useState(null);
  const [ethereumPrice, setEthereumPrice] = useState(null);
  const [alertThreshold, setAlertThreshold] = useState(10000); // Example threshold
  const [alertMessage, setAlertMessage] = useState('');

  useEffect(() => {
    const fetchPrices = async () => {
      const bitcoin = await getCryptoPrice('bitcoin');
      const ethereum = await getCryptoPrice('ethereum');
      setBitcoinPrice(bitcoin);
      setEthereumPrice(ethereum);
    };

    fetchPrices();

    const intervalId = setInterval(fetchPrices, 60000); // Refresh every minute
    return () => clearInterval(intervalId);
  }, []);

  useEffect(() => {
    if (bitcoinPrice && bitcoinPrice > alertThreshold) {
      setAlertMessage(`Bitcoin price is above ${alertThreshold}!`);
      // In a real app, you'd trigger a notification here.
    } else {
      setAlertMessage('');
    }
  }, [bitcoinPrice, alertThreshold]);

  return (
    <div style={{ padding: '20px' }}>
      <h1>Cryptocurrency Price Alert</h1>
      <p>Bitcoin Price: ${bitcoinPrice ? bitcoinPrice.toFixed(2) : 'Loading...'}</p>
      <p>Ethereum Price: ${ethereumPrice ? ethereumPrice.toFixed(2) : 'Loading...'}</p>
      <p>Alert Message: {alertMessage}</p>
      <div>
        <label htmlFor="threshold">Alert Threshold (USD): </label>
        <input
          type="number"
          id="threshold"
          value={alertThreshold}
          onChange={(e) => setAlertThreshold(parseFloat(e.target.value))}
        />
      </div>
    </div>
  );
}

Explanation:

Import Statements: Imports `useState` and `useEffect` from React and `getCryptoPrice` from `../utils/api`.
State Variables:
- `bitcoinPrice`: Stores the current Bitcoin price.
- `ethereumPrice`: Stores the current Ethereum price.
- `alertThreshold`: Stores the alert threshold set by the user.
- `alertMessage`: Stores the alert message to display to the user.
useEffect Hook (Fetching Prices):
- Fetches Bitcoin and Ethereum prices using `getCryptoPrice`.
- Sets the prices using `setBitcoinPrice` and `setEthereumPrice`.
- Sets up an interval to refresh the prices every minute (60000 milliseconds).
- The cleanup function `clearInterval(intervalId)` clears the interval when the component unmounts.
useEffect Hook (Alert Logic):
- Checks if the Bitcoin price exceeds the `alertThreshold`.
- If it does, sets an `alertMessage`.
- The dependency array `[bitcoinPrice, alertThreshold]` ensures this effect runs whenever the price or threshold changes.
JSX: Renders the current prices and alert message. Includes an input field for the user to set the alert threshold.

Styling (Optional)

For a better user experience, let’s add some basic styling. Create a file named `styles/Home.module.css` (or any name you prefer) and add the following CSS:

/* styles/Home.module.css */
.container {
  padding: 20px;
  font-family: sans-serif;
}

h1 {
  color: #333;
}

p {
  margin-bottom: 10px;
}

input {
  padding: 8px;
  margin-top: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

Then, import and apply these styles in `pages/index.js`:

// pages/index.js
import styles from '../styles/Home.module.css';

// ... inside the return statement:
<div className={styles.container}> ... </div>

Adding Notifications (Important!)

The current implementation only displays an alert message on the screen. To make it a true alert app, you need to add a notification system. This is where you can use web notifications, email, or even SMS. Here’s how to implement web notifications using the `Notification` API (most modern browsers support this):

First, modify `pages/index.js` to include notification functionality:

// pages/index.js
import { useState, useEffect } from 'react';
import { getCryptoPrice } from '../utils/api';

export default function Home() {
  const [bitcoinPrice, setBitcoinPrice] = useState(null);
  const [ethereumPrice, setEthereumPrice] = useState(null);
  const [alertThreshold, setAlertThreshold] = useState(10000);
  const [alertMessage, setAlertMessage] = useState('');

  useEffect(() => {
    const fetchPrices = async () => {
      const bitcoin = await getCryptoPrice('bitcoin');
      const ethereum = await getCryptoPrice('ethereum');
      setBitcoinPrice(bitcoin);
      setEthereumPrice(ethereum);
    };

    fetchPrices();

    const intervalId = setInterval(fetchPrices, 60000); // Refresh every minute
    return () => clearInterval(intervalId);
  }, []);

  useEffect(() => {
    if (bitcoinPrice && bitcoinPrice > alertThreshold) {
      setAlertMessage(`Bitcoin price is above ${alertThreshold}!`);

      // Check if the Notification API is supported
      if ('Notification' in window) {
        // Request permission if not granted
        if (Notification.permission === 'granted') {
          // Show the notification
          new Notification("Crypto Alert", {
            body: `Bitcoin price is above ${alertThreshold}!`,
          });
        } else if (Notification.permission !== 'denied') {
          // Request permission
          Notification.requestPermission().then(function (permission) {
            if (permission === 'granted') {
              new Notification("Crypto Alert", {
                body: `Bitcoin price is above ${alertThreshold}!`,
              });
            }
          });
        }
      }
    } else {
      setAlertMessage('');
    }
  }, [bitcoinPrice, alertThreshold]);

  return (
    <div style={{ padding: '20px' }}>
      <h1>Cryptocurrency Price Alert</h1>
      <p>Bitcoin Price: ${bitcoinPrice ? bitcoinPrice.toFixed(2) : 'Loading...'}</p>
      <p>Ethereum Price: ${ethereumPrice ? ethereumPrice.toFixed(2) : 'Loading...'}</p>
      <p>Alert Message: {alertMessage}</p>
      <div>
        <label htmlFor="threshold">Alert Threshold (USD): </label>
        <input
          type="number"
          id="threshold"
          value={alertThreshold}
          onChange={(e) => setAlertThreshold(parseFloat(e.target.value))}
        />
      </div>
    </div>
  );
}

Key changes:

Notification API Check: The code checks if the browser supports the `Notification` API.
Permission Handling: It checks if the user has already granted permission. If not, it requests permission using `Notification.requestPermission()`.
Notification Creation: If permission is granted, it creates a new notification using `new Notification()`.

To test this, you’ll need to run the app in a browser that supports notifications (most modern browsers do). The first time you visit the page, the browser will ask for permission to show notifications. Grant permission, and you should see the notifications when the price threshold is exceeded. Note that notifications may be blocked by your browser settings, so check those if you don’t receive them.

Adding More Cryptocurrencies

To extend the app to monitor more cryptocurrencies, you can:

Add State Variables: Create state variables for each cryptocurrency you want to track (e.g., `litecoinPrice`, `dogecoinPrice`).
Modify `getCryptoPrice`: You could modify the `getCryptoPrice` function to accept an array of coin IDs or use a more efficient API call if the API supports fetching multiple coins at once.
Update the UI: Add more UI elements to display the prices and alert settings for each cryptocurrency.
Consider API Rate Limits: Be mindful of API rate limits, especially if you’re tracking many cryptocurrencies. You might need to implement request throttling or use an API key.

Here’s an example of how you might modify `pages/index.js` to track Litecoin, adding the necessary state and UI elements:

// pages/index.js
import { useState, useEffect } from 'react';
import { getCryptoPrice } from '../utils/api';

export default function Home() {
  const [bitcoinPrice, setBitcoinPrice] = useState(null);
  const [ethereumPrice, setEthereumPrice] = useState(null);
  const [litecoinPrice, setLitecoinPrice] = useState(null); // New state
  const [alertThreshold, setAlertThreshold] = useState(10000);
  const [alertMessage, setAlertMessage] = useState('');

  useEffect(() => {
    const fetchPrices = async () => {
      const bitcoin = await getCryptoPrice('bitcoin');
      const ethereum = await getCryptoPrice('ethereum');
      const litecoin = await getCryptoPrice('litecoin'); // Fetch Litecoin
      setBitcoinPrice(bitcoin);
      setEthereumPrice(ethereum);
      setLitecoinPrice(litecoin); // Set Litecoin price
    };

    fetchPrices();

    const intervalId = setInterval(fetchPrices, 60000); // Refresh every minute
    return () => clearInterval(intervalId);
  }, []);

  useEffect(() => {
    if (bitcoinPrice && bitcoinPrice > alertThreshold) {
      setAlertMessage(`Bitcoin price is above ${alertThreshold}!`);

      if ('Notification' in window && Notification.permission === 'granted') {
        new Notification("Crypto Alert", {
          body: `Bitcoin price is above ${alertThreshold}!`,
        });
      }
    } else {
      setAlertMessage('');
    }
  }, [bitcoinPrice, alertThreshold]);

  useEffect(() => {
    if (litecoinPrice && litecoinPrice > alertThreshold / 10) {
        // Example: Adjust the threshold for Litecoin.
        setAlertMessage(`Litecoin price is above ${(alertThreshold / 10).toFixed(2)}!`);
        if ('Notification' in window && Notification.permission === 'granted') {
            new Notification("Crypto Alert", {
                body: `Litecoin price is above ${(alertThreshold / 10).toFixed(2)}!`,
            });
        }
    } 
  }, [litecoinPrice, alertThreshold]);

  return (
    <div style={{ padding: '20px' }}>
      <h1>Cryptocurrency Price Alert</h1>
      <p>Bitcoin Price: ${bitcoinPrice ? bitcoinPrice.toFixed(2) : 'Loading...'}</p>
      <p>Ethereum Price: ${ethereumPrice ? ethereumPrice.toFixed(2) : 'Loading...'}</p>
      <p>Litecoin Price: ${litecoinPrice ? litecoinPrice.toFixed(2) : 'Loading...'}</p>
      <p>Alert Message: {alertMessage}</p>
      <div>
        <label htmlFor="threshold">Alert Threshold (USD): </label>
        <input
          type="number"
          id="threshold"
          value={alertThreshold}
          onChange={(e) => setAlertThreshold(parseFloat(e.target.value))}
        />
      </div>
    </div>
  );
}

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid them:

Incorrect API URLs: Double-check the API URL for typos. The API might change its endpoints, so regularly verify the URL.
CORS Issues: If you encounter CORS (Cross-Origin Resource Sharing) errors, it means the API doesn’t allow your app to fetch data from its domain. You can often fix this by using a proxy server or configuring CORS headers on your server (if you have one). In development, you might be able to use a browser extension that disables CORS, but this is not recommended for production.
Uncaught Errors: Always use `try…catch` blocks when making API calls to handle potential errors gracefully. Log the errors to the console or use a dedicated error tracking service.
State Updates: Ensure you’re updating state variables correctly using the `set…` functions provided by `useState`. Incorrect state updates can lead to unexpected behavior and UI issues.
Infinite Loops: Be careful with `useEffect` hooks. If you’re not careful with your dependencies, you can create infinite loops. Always include the correct dependencies in the dependency array.
Notification Permissions: Make sure you handle notification permissions properly. If the user denies permission, gracefully degrade the experience or provide clear instructions on how to enable notifications.

Key Takeaways

Next.js Fundamentals: You’ve learned how to set up a Next.js project, create pages, and use components.
API Integration: You’ve learned how to fetch data from an external API and use it in your application.
State Management: You’ve learned how to manage state using the `useState` hook.
Web Notifications: You’ve learned how to implement web notifications to alert users about important events.

FAQ

Can I use a different API? Yes, you can use any cryptocurrency API. Just modify the `API_URL` and the data extraction logic in the `getCryptoPrice` function.
How can I deploy this app? You can deploy your Next.js app to platforms like Vercel, Netlify, or AWS.
How can I add more advanced features? You can add features like user authentication, more detailed price charts, historical data, and more sophisticated alert settings.
What if the API has rate limits? Implement rate limiting on your client-side, or consider using a backend service to handle API requests and cache the data.

Building a cryptocurrency price alert app with Next.js is a practical project that combines front-end development with real-world data integration. The skills you’ve learned, from API calls and state management to user notifications, are valuable for any web developer. This project can be a starting point for more complex applications. You can extend it to include more cryptocurrencies, add user authentication, and create more sophisticated alert triggers. The possibilities are vast, and the knowledge gained is transferable to numerous other projects. This project gives you a solid foundation for building interactive, data-driven web applications.

” ,
“aigenerated_tags”: “Next.js, Cryptocurrency, React, API, Web Development, Tutorial, Price Alerts

Build a Next.js Interactive Web-Based Cryptocurrency Price Alert App

Why Build a Cryptocurrency Price Alert App?

Prerequisites

Setting Up the Next.js Project

Project Structure Overview

Fetching Cryptocurrency Data

Creating the UI (Homepage)

Styling (Optional)

Adding Notifications (Important!)

Adding More Cryptocurrencies

Common Mistakes and How to Fix Them

Key Takeaways

FAQ

More posts

Build a Simple Node.js Interactive Web-Based URL Analyzer

Build a Node.js Interactive Web-Based Simple Code Review Tool

Build a Node.js Interactive Web-Based Simple Code Diff Tool

Build a Node.js Interactive Web-Based Simple Code Playground