Build a Next.js Interactive Web-Based Cryptocurrency News Dashboard

Written by

javascriptdebugged

in

In the fast-paced world of cryptocurrencies, staying informed is critical. The market fluctuates constantly, and having real-time data at your fingertips can make all the difference. Imagine a single, dynamic dashboard where you can track the prices of your favorite cryptocurrencies, read the latest news, and analyze market trends – all in one place. This tutorial will guide you through building precisely that: a dynamic cryptocurrency news dashboard using Next.js.

Why Build a Cryptocurrency News Dashboard?

The cryptocurrency market is notoriously volatile. Prices can change dramatically within minutes, influenced by news, market sentiment, and global events. A well-designed dashboard provides several key benefits:

  • Real-time Data: Access live cryptocurrency prices, enabling informed trading decisions.
  • News Aggregation: Stay updated with the latest news from various sources, helping you understand market drivers.
  • Portfolio Tracking: Monitor the performance of your cryptocurrency holdings.
  • Customization: Tailor the dashboard to your specific needs, focusing on the cryptocurrencies you care about.

This project is perfect for beginners and intermediate developers looking to deepen their understanding of Next.js, API integrations, and front-end development best practices. By the end of this tutorial, you’ll have a fully functional dashboard that you can customize and expand upon.

Prerequisites

Before we begin, ensure you have the following:

  • Node.js and npm (or yarn): Installed on your system.
  • A Code Editor: Such as Visual Studio Code, Sublime Text, or Atom.
  • Basic Understanding of JavaScript and React: Familiarity with these technologies will be helpful.

Step-by-Step Guide

1. Setting Up the Next.js Project

First, let’s create a new Next.js project. Open your terminal and run the following command:

npx create-next-app crypto-news-dashboard

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

cd crypto-news-dashboard

Now, start the development server:

npm run dev

Open your browser and go to `http://localhost:3000`. You should see the default Next.js welcome page.

2. Installing Dependencies

We’ll need a few libraries to build our dashboard. Install them using npm:

npm install axios react-chartjs-2 chart.js

Here’s what these libraries do:

  • axios: For making API requests to fetch cryptocurrency data and news.
  • react-chartjs-2: A React wrapper for Chart.js, allowing us to create charts easily.
  • chart.js: The charting library itself.

3. Fetching Cryptocurrency Data

We’ll use a cryptocurrency API to fetch real-time data. There are many free and paid APIs available. For this tutorial, we will use a free API. You may need to create an account and obtain an API key, depending on the API you choose. For example purposes, let’s assume we’re using an API that provides data in the following format:

[
  {
    "symbol": "BTC",
    "price": 60000,
    "change": 0.02,
    "name": "Bitcoin"
  },
  {
    "symbol": "ETH",
    "price": 4000,
    "change": -0.01,
    "name": "Ethereum"
  }
]

Create a new file called `pages/api/crypto.js` in your project. This file will handle fetching the data from the API. Replace the placeholder URL with the actual API endpoint you are using. Make sure to handle errors gracefully.

// pages/api/crypto.js
import axios from 'axios';

export default async function handler(req, res) {
  try {
    const response = await axios.get('YOUR_CRYPTO_API_ENDPOINT'); // Replace with your API endpoint
    const data = response.data;
    res.status(200).json(data);
  } catch (error) {
    console.error('Error fetching crypto data:', error);
    res.status(500).json({ error: 'Failed to fetch data' });
  }
}

This code fetches data from the API and returns it as a JSON response. We use `axios` to make the API request and handle any potential errors. The `handler` function is a Next.js API route that responds to requests made to `/api/crypto`.

4. Displaying Cryptocurrency Prices

Now, let’s display the cryptocurrency prices on our dashboard. Modify `pages/index.js` to fetch and display the data.

// pages/index.js
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('/api/crypto');
        setCryptoData(response.data);
        setLoading(false);
      } catch (err) {
        console.error('Error fetching data:', err);
        setError('Failed to fetch data');
        setLoading(false);
      }
    };

    fetchData();

    // Refresh data every 10 seconds
    const intervalId = setInterval(fetchData, 10000);
    return () => clearInterval(intervalId);
  }, []);

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

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

  return (
    <div>
      <h1>Cryptocurrency Prices</h1>
      {cryptoData.map((crypto) => (
        <div>
          <h2>{crypto.name} ({crypto.symbol})</h2>
          <p>Price: ${crypto.price.toLocaleString()}</p>
          <p>Change: {crypto.change.toFixed(2)}%</p>
        </div>
      ))}
    </div>
  );
}

export default HomePage;

In this code:

  • We use the `useState` hook to manage the `cryptoData`, `loading`, and `error` states.
  • The `useEffect` hook fetches data from the `/api/crypto` endpoint when the component mounts and refreshes every 10 seconds.
  • We display a loading message while the data is being fetched.
  • If there’s an error, we display an error message.
  • We map through the `cryptoData` array and display the cryptocurrency name, symbol, price, and change. We use `toLocaleString()` to format the price for better readability and `toFixed(2)` to format the percentage change.

5. Adding a Price Chart

To visualize price trends, let’s add a chart using `react-chartjs-2`. First, install the chart.js library if you haven’t already: `npm install chart.js`.

Next, create a new component called `components/PriceChart.js`:

// components/PriceChart.js
import { Line } from 'react-chartjs-2';
import { Chart as ChartJS } from 'chart.js/auto'

function PriceChart({ chartData, title }) {
  const options = {
    responsive: true,
    plugins: {
      title: {
        display: true,
        text: title,
      },
    },
    scales: {
      y: {
        beginAtZero: false,
      },
    },
  };

  return ;
}

export default PriceChart;

This component takes `chartData` and a `title` as props and renders a line chart. The `options` object configures the chart’s appearance.

Now, modify `pages/index.js` to fetch and display historical price data. This will require another API, for example, a free API that provides historical data. Let’s assume the historical data API returns data in the following format:

{
    "prices": [
        [1678886400000, 60000],
        [1678972800000, 61000],
        [1679059200000, 62000]
    ]
}

The array contains timestamp and price pairs.


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

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

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('/api/crypto');
        setCryptoData(response.data);
        setLoading(false);
      } catch (err) {
        console.error('Error fetching data:', err);
        setError('Failed to fetch data');
        setLoading(false);
      }
    };

    fetchData();

    // Refresh data every 10 seconds
    const intervalId = setInterval(fetchData, 10000);
    return () => clearInterval(intervalId);
  }, []);

  useEffect(() => {
    const fetchChartData = async (symbol) => {
      try {
        const response = await axios.get(`/api/historical?symbol=${symbol}`); // Replace with your API endpoint and symbol
        const prices = response.data.prices.map(item => item[1]);
        const timestamps = response.data.prices.map(item => new Date(item[0]).toLocaleDateString());

        setChartData({
          labels: timestamps,
          datasets: [
            {
              label: `${symbol} Price`,
              data: prices,
              borderColor: 'rgb(255, 99, 132)',
              backgroundColor: 'rgba(255, 99, 132, 0.5)',
            },
          ],
        });
      } catch (error) {
        console.error('Error fetching chart data:', error);
        setError('Failed to fetch chart data');
      }
    };

    if (cryptoData.length > 0) {
      fetchChartData(cryptoData[0].symbol); // Fetch chart data for the first cryptocurrency
    }
  }, [cryptoData]);

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

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

  return (
    <div>
      <h1>Cryptocurrency Prices</h1>
      {cryptoData.map((crypto) => (
        <div>
          <h2>{crypto.name} ({crypto.symbol})</h2>
          <p>Price: ${crypto.price.toLocaleString()}</p>
          <p>Change: {crypto.change.toFixed(2)}%</p>
        </div>
      ))}
      {chartData.datasets && }
    </div>
  );
}

export default HomePage;

Here, we added these changes:

  • We added a `chartData` state variable to hold the chart data.
  • We added a new `useEffect` hook to fetch historical data. This hook is dependent on `cryptoData`, so it runs when `cryptoData` changes.
  • We added a new API route `/api/historical` to fetch historical data. This will need to be implemented.
  • We pass the chart data and the title to the `PriceChart` component.

Now, let’s create the `/api/historical` route. Create the file `pages/api/historical.js`:


// pages/api/historical.js
import axios from 'axios';

export default async function handler(req, res) {
  const { symbol } = req.query;
  try {
    const response = await axios.get(`YOUR_HISTORICAL_DATA_API_ENDPOINT?symbol=${symbol}`); // Replace with your API endpoint
    res.status(200).json(response.data);
  } catch (error) {
    console.error('Error fetching historical data:', error);
    res.status(500).json({ error: 'Failed to fetch historical data' });
  }
}

Remember to replace `YOUR_HISTORICAL_DATA_API_ENDPOINT` with the actual API endpoint for historical data. The API should accept a `symbol` query parameter.

6. Adding News Integration

To integrate news, we can use a news API. For example purposes, we’ll assume a news API that provides data in the following format:


[
  {
    "title": "Bitcoin Price Surges",
    "description": "Bitcoin hits a new high...",
    "url": "https://example.com/bitcoin-news",
  },
  {
    "title": "Ethereum Upgrade Announced",
    "description": "Ethereum's upcoming upgrade...",
    "url": "https://example.com/ethereum-news",
  },
]

Create a new API route `pages/api/news.js`:


// pages/api/news.js
import axios from 'axios';

export default async function handler(req, res) {
  try {
    const response = await axios.get('YOUR_NEWS_API_ENDPOINT'); // Replace with your API endpoint
    const data = response.data;
    res.status(200).json(data);
  } catch (error) {
    console.error('Error fetching news data:', error);
    res.status(500).json({ error: 'Failed to fetch news' });
  }
}

Modify `pages/index.js` to fetch and display the news.


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

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

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('/api/crypto');
        setCryptoData(response.data);
        setLoading(false);
      } catch (err) {
        console.error('Error fetching data:', err);
        setError('Failed to fetch data');
        setLoading(false);
      }
    };

    fetchData();

    // Refresh data every 10 seconds
    const intervalId = setInterval(fetchData, 10000);
    return () => clearInterval(intervalId);
  }, []);

  useEffect(() => {
    const fetchNews = async () => {
      try {
        const response = await axios.get('/api/news');
        setNewsData(response.data);
      } catch (err) {
        console.error('Error fetching news:', err);
        setError('Failed to fetch news');
      }
    };
    fetchNews();
  }, []);

  useEffect(() => {
    const fetchChartData = async (symbol) => {
      try {
        const response = await axios.get(`/api/historical?symbol=${symbol}`); // Replace with your API endpoint and symbol
        const prices = response.data.prices.map(item => item[1]);
        const timestamps = response.data.prices.map(item => new Date(item[0]).toLocaleDateString());

        setChartData({
          labels: timestamps,
          datasets: [
            {
              label: `${symbol} Price`,
              data: prices,
              borderColor: 'rgb(255, 99, 132)',
              backgroundColor: 'rgba(255, 99, 132, 0.5)',
            },
          ],
        });
      } catch (error) {
        console.error('Error fetching chart data:', error);
        setError('Failed to fetch chart data');
      }
    };

    if (cryptoData.length > 0) {
      fetchChartData(cryptoData[0].symbol); // Fetch chart data for the first cryptocurrency
    }
  }, [cryptoData]);

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

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

  return (
    <div>
      <h1>Cryptocurrency Prices</h1>
      {cryptoData.map((crypto) => (
        <div>
          <h2>{crypto.name} ({crypto.symbol})</h2>
          <p>Price: ${crypto.price.toLocaleString()}</p>
          <p>Change: {crypto.change.toFixed(2)}%</p>
        </div>
      ))}
      {chartData.datasets && }
      <h2>Cryptocurrency News</h2>
      {newsData.map((newsItem) => (
        <div>
          <h3>{newsItem.title}</h3>
          <p>{newsItem.description}</p>
          <a href="{newsItem.url}" target="_blank" rel="noopener noreferrer">Read more</a>
        </div>
      ))}
    </div>
  );
}

export default HomePage;

We’ve added these changes:

  • Added `newsData` state.
  • Added a `useEffect` hook to fetch news data from the `/api/news` endpoint.
  • Displayed the news articles, including the title, description, and a link to the full article.

7. Styling and Customization

To improve the look and feel of your dashboard, you can add styling using CSS. Next.js supports various styling options, including:

  • CSS Modules: Create CSS files with the `.module.css` extension, and import them into your components.
  • Styled Components: Use JavaScript to write CSS with the `styled-components` library.
  • Tailwind CSS: Use a utility-first CSS framework like Tailwind CSS for rapid styling.

For example, to use CSS Modules, create a file called `styles/Home.module.css` and add some styles:

/* styles/Home.module.css */
.container {
  padding: 2rem;
}

.cryptoItem {
  border: 1px solid #ccc;
  padding: 1rem;
  margin-bottom: 1rem;
}

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


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

return (
  <div>
    <h1>Cryptocurrency Prices</h1>
    {cryptoData.map((crypto) => (
      <div>
        <h2>{crypto.name} ({crypto.symbol})</h2>
        <p>Price: ${crypto.price.toLocaleString()}</p>
        <p>Change: {crypto.change.toFixed(2)}%</p>
      </div>
    ))}
    {/* ... other content */}
  </div>
);

You can customize the layout, colors, and fonts to match your preferences. Consider adding:

  • A header with the dashboard title.
  • A navigation bar.
  • A footer.
  • More detailed information about each cryptocurrency.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid them:

  • Incorrect API Endpoints: Double-check the API endpoints and ensure they are correct. Use a tool like Postman or Insomnia to test the API requests before integrating them into your Next.js application.
  • CORS Errors: If you encounter CORS (Cross-Origin Resource Sharing) errors, you may need to configure your API to allow requests from your Next.js application’s origin. This often involves setting the `Access-Control-Allow-Origin` header in your API responses. If you are using a third-party API, consult their documentation for CORS setup.
  • Data Fetching Errors: Always handle potential errors when fetching data. Use `try…catch` blocks to catch errors and display informative error messages to the user.
  • Incorrect Data Formatting: Make sure the data you are receiving from the API is formatted correctly before displaying it. Use `console.log()` to inspect the data and ensure it matches your expectations.
  • Unnecessary Re-renders: Optimize your components to prevent unnecessary re-renders. Use `React.memo` for functional components and memoize expensive computations.

Summary / Key Takeaways

In this tutorial, we’ve built a dynamic cryptocurrency news dashboard using Next.js. We covered the following key concepts:

  • Setting up a Next.js project.
  • Fetching data from APIs using `axios`.
  • Displaying data in React components.
  • Creating charts using `react-chartjs-2`.
  • Integrating news feeds.
  • Adding styling using CSS Modules.
  • Handling errors and common mistakes.

You now have a solid foundation for building more complex cryptocurrency applications. Remember to experiment with different APIs, customize the design, and add new features to enhance your dashboard.

FAQ

  1. Can I use a different cryptocurrency API? Yes, absolutely! The code in this tutorial is designed to be adaptable. You’ll need to adjust the API endpoints and data parsing logic to match your chosen API’s structure.
  2. How can I add more cryptocurrencies to the dashboard? You can modify the API calls to fetch data for more cryptocurrencies. You might also want to add a search feature or a configuration option to allow users to select which cryptocurrencies they want to track.
  3. How do I deploy this application? You can deploy your Next.js application to various platforms, such as Vercel, Netlify, or AWS. These platforms provide easy deployment workflows and handle the server-side rendering and build process for you.
  4. How can I improve the performance of the dashboard? Optimize image sizes, use code splitting, and consider server-side rendering or static site generation for improved performance. Lazy loading of images and components can also help.

Building this dashboard is just the beginning. The world of cryptocurrency is constantly evolving, and so too can your dashboard. Consider adding features like user authentication, portfolio tracking, price alerts, and more advanced charting capabilities. As you continue to learn and experiment, you’ll gain a deeper understanding of both Next.js and the exciting world of cryptocurrencies. This project serves as a practical example of how to leverage modern web development techniques to create a valuable and informative tool. The skills you’ve acquired will be invaluable as you tackle more complex projects and continue your journey as a developer.

More posts