Build a Simple Node.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 websites can be time-consuming and inefficient. This tutorial will guide you through building a simple, interactive, web-based cryptocurrency price tracker using Node.js. This project will not only provide real-time price updates for different cryptocurrencies but also introduce you to essential concepts like API integration, front-end development, and server-side logic.

Why Build a Cryptocurrency Price Tracker?

Creating your own cryptocurrency price tracker offers several advantages:

  • Real-time Data: Access live price data directly from cryptocurrency exchanges.
  • Customization: Tailor the tracker to display only the cryptocurrencies you’re interested in.
  • Learning Experience: Gain practical experience with Node.js, API calls, and front-end technologies.
  • Personalization: Design the interface to suit your preferences, including color schemes, display formats, and more.

This project is perfect for beginners and intermediate developers looking to expand their skills. You’ll learn how to fetch data from APIs, process it, and display it in a user-friendly web interface. We’ll cover everything from setting up your Node.js environment to deploying your application.

Prerequisites

Before you begin, ensure you have the following installed on your system:

  • Node.js and npm: Node.js is a JavaScript runtime environment, and npm (Node Package Manager) is used for managing project dependencies. You can download them from https://nodejs.org/.
  • A Code Editor: Choose your preferred code editor (e.g., Visual Studio Code, Sublime Text, Atom).
  • Basic Knowledge of HTML, CSS, and JavaScript: Familiarity with these web technologies will be helpful, but we’ll provide explanations along the way.

Project Setup

Let’s start by setting up our project directory and initializing npm. Open your terminal or command prompt and follow these steps:

  1. Create a Project Directory: 
    mkdir cryptocurrency-tracker
cd cryptocurrency-tracker
  2. Initialize npm: 
    npm init -y

    This command creates a package.json file, which will manage our project’s dependencies.

  3. Install Dependencies:

    We’ll need a few packages for this project:

    • express: A web application framework for Node.js.
    • axios: A promise-based HTTP client for making API requests.
    • cors: For enabling Cross-Origin Resource Sharing (CORS) to allow our front-end to communicate with our back-end.
    npm install express axios cors

Fetching Cryptocurrency Data

To get cryptocurrency prices, we will use a public API. There are many free APIs available; for this tutorial, we will use the CoinGecko API. You can sign up for a free API key if you need a higher rate limit, but it’s not strictly necessary for this project.

Step 1: Set up the Server File

Create a file named server.js in your project directory. This file will contain the server-side logic to fetch and serve cryptocurrency data.

// server.js
const express = require('express');
const axios = require('axios');
const cors = require('cors');

const app = express();
const port = process.env.PORT || 3000;

app.use(cors()); // Enable CORS for all routes

// API endpoint to fetch cryptocurrency prices
app.get('/api/prices', async (req, res) => {
  try {
    const response = await axios.get('https://api.coingecko.com/api/v3/simple/price?ids=bitcoin%2Cethereum%2Clitecoin&vs_currencies=usd');
    const prices = response.data;
    res.json(prices);
  } catch (error) {
    console.error('Error fetching prices:', error);
    res.status(500).json({ error: 'Failed to fetch prices' });
  }
});

app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

Explanation:

  • We import the necessary modules: express, axios, and cors.
  • We create an Express application instance and set the port.
  • We use cors() middleware to enable CORS.
  • We define a GET route /api/prices.
  • Inside the route handler, we use axios.get() to fetch data from the CoinGecko API. The API endpoint is constructed to retrieve prices for Bitcoin, Ethereum, and Litecoin in USD.
  • If the API call is successful, we send the data as a JSON response.
  • If there’s an error, we log it to the console and send an error response with a 500 status code.
  • Finally, we start the server and listen for incoming requests.

Step 2: Run the Server

Open your terminal and run the server using the following command:

node server.js

You should see the message “Server is running on port 3000” (or whatever port you configured) in your console. The server is now running and ready to serve cryptocurrency price data.

Building the Front-End

Now, let’s create the front-end to display the cryptocurrency prices. We will use HTML, CSS, and JavaScript for this purpose.

Step 1: Create HTML File

Create an index.html file in your project directory. This file will contain the structure of our web page.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cryptocurrency Price Tracker</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Cryptocurrency Price Tracker</h1>
        <div id="prices">
            <!-- Prices will be displayed here -->
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

Explanation:

  • We define the basic HTML structure, including the <head> and <body> sections.
  • The <title> tag sets the title of the page.
  • We link a CSS file named style.css for styling.
  • We have a <div> with the ID “prices” where we’ll display the cryptocurrency prices dynamically.
  • We include a JavaScript file named script.js to handle the front-end logic.

Step 2: Create CSS File

Create a file named style.css in your project directory. This file will contain the styles for our web page.

/* style.css */
body {
    font-family: sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

h1 {
    color: #333;
}

#prices {
    margin-top: 20px;
}

.price-item {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #f9f9f9;
}

Explanation:

  • We define basic styles for the body, container, headings, and price items.
  • The styles include font, background color, padding, and layout properties to make the page visually appealing.

Step 3: Create JavaScript File

Create a file named script.js in your project directory. This file will contain the JavaScript code to fetch and display cryptocurrency prices.

// script.js
async function getPrices() {
  try {
    const response = await fetch('http://localhost:3000/api/prices'); // Replace with your server URL
    const data = await response.json();

    const pricesDiv = document.getElementById('prices');
    pricesDiv.innerHTML = ''; // Clear previous prices

    // Iterate through the data and display the prices
    for (const coin in data) {
      const price = data[coin].usd;
      const coinName = coin.charAt(0).toUpperCase() + coin.slice(1); // Capitalize first letter
      const priceItem = document.createElement('div');
      priceItem.classList.add('price-item');
      priceItem.textContent = `${coinName}: $${price.toFixed(2)}`;
      pricesDiv.appendChild(priceItem);
    }

  } catch (error) {
    console.error('Error fetching prices:', error);
    const pricesDiv = document.getElementById('prices');
    pricesDiv.innerHTML = '<p>Failed to fetch prices.</p>';
  }
}

// Fetch prices initially
getPrices();

// Refresh prices every 10 seconds
setInterval(getPrices, 10000);

Explanation:

  • We define an asynchronous function getPrices() to fetch data from the server.
  • Inside getPrices(), we use the fetch() API to make a request to our server’s /api/prices endpoint.
  • We parse the response as JSON.
  • We clear any previous price data.
  • We iterate through the received data and display the prices in the “prices” div. We format the prices to two decimal places and capitalize the coin names.
  • If there’s an error, we log it to the console and display an error message in the “prices” div.
  • We call getPrices() initially to load the prices when the page loads.
  • We use setInterval() to refresh the prices every 10 seconds.

Step 4: Run the Front-End

Open the index.html file in your web browser. You should see the cryptocurrency prices updating every 10 seconds. Make sure your server (node server.js) is running in a separate terminal.

Common Mistakes and Troubleshooting

Here are some common mistakes and how to fix them:

  • CORS Errors: If you encounter CORS (Cross-Origin Resource Sharing) errors, ensure you have the cors middleware enabled in your server (app.use(cors())). This allows your front-end (running on a different domain/port) to access the server.
  • Server Not Running: Double-check that your server (node server.js) is running in a separate terminal window. If the server isn’t running, the front-end won’t be able to fetch the data.
  • Incorrect API Endpoint: Verify that the API endpoint URL in your JavaScript (fetch('http://localhost:3000/api/prices')) matches the route you defined in your server (/api/prices). Make sure the port number matches where your server is running.
  • Data Not Displaying: Check the browser’s developer console (usually by pressing F12) for any JavaScript errors. These errors can provide clues about why the data isn’t being displayed. Also, ensure that the HTML element with the ID “prices” exists in your index.html file.
  • Incorrect API URL: Make sure the API URL from CoinGecko or the API you are using is correct. Typos can prevent data from loading.
  • Rate Limiting: Some APIs have rate limits. If you exceed the rate limit, you might get an error. Consider implementing error handling and possibly implementing a delay to avoid rate limiting.

Enhancements and Next Steps

Here are some ways to enhance your cryptocurrency price tracker:

  • Add More Cryptocurrencies: Extend the API call to include more cryptocurrencies.
  • Implement User Input: Allow users to select which cryptocurrencies to track.
  • Add Historical Data: Fetch and display historical price data using the API.
  • Implement Real-time Updates with WebSockets: Use WebSockets for more immediate price updates instead of polling every 10 seconds.
  • Add a Chart: Use a charting library (e.g., Chart.js) to visualize the price data.
  • Improve Styling: Enhance the CSS to create a more visually appealing and user-friendly interface.
  • Error Handling: Implement more robust error handling to provide better feedback to the user.
  • Deployment: Deploy your application to a hosting platform like Heroku, Netlify, or AWS.

Key Takeaways

This tutorial has shown you how to build a basic yet functional cryptocurrency price tracker using Node.js, Express, Axios, and basic HTML, CSS, and JavaScript. You’ve learned how to:

  • Set up a Node.js project and install necessary dependencies.
  • Fetch data from a public API.
  • Create a simple API endpoint using Express.
  • Build a front-end to display data.
  • Handle errors and troubleshoot common issues.

By completing this project, you’ve gained practical experience with essential web development concepts and technologies. You can now adapt and expand this project to build more sophisticated applications.

Frequently Asked Questions (FAQ)

  1. Can I use a different API?

    Yes, you can use any public cryptocurrency API that provides price data. Just adjust the API endpoint URL and data parsing logic in your server.js and script.js files accordingly.

  2. How can I deploy this application?

    You can deploy your application to a platform like Heroku, Netlify, or AWS. You will need to upload your project files and configure the platform to run your Node.js server. You might need to adjust the way you serve your front-end files depending on the platform you choose.

  3. How can I add more cryptocurrencies?

    In the server.js file, modify the API call to include the IDs of the additional cryptocurrencies you want to track. In the example using the CoinGecko API, you would add more IDs to the ids parameter. You’ll also need to update the front-end (script.js) to handle and display the new data.

  4. How do I handle API rate limits?

    To handle API rate limits, you can implement error handling in your code. If the API returns a rate limit error, you can add a delay before retrying the request. You can also implement a system for caching API responses to reduce the number of requests you make to the API. For production applications, consider using an API key if the API provides one.

  5. What are the benefits of using WebSockets for real-time updates?

    WebSockets provide a persistent, two-way communication channel between the client and the server. This allows for real-time updates without the need for the client to repeatedly poll the server. This reduces latency and improves the user experience. Using WebSockets is more efficient than polling, especially when frequently updating data.

Building this cryptocurrency price tracker is just the beginning. The skills you’ve acquired can be applied to a wide range of web development projects. Remember that the best way to learn is by doing, so continue experimenting and exploring different features. The world of cryptocurrency and web development is constantly evolving, and there’s always something new to discover. With a little creativity and persistence, you can build impressive and useful applications.

More posts