TypeScript Tutorial: Building a Simple Interactive Cryptocurrency Tracker

Written by

learnmodernjavascript

in

In today’s fast-paced digital world, the fluctuating values of cryptocurrencies have captivated the interest of investors and enthusiasts alike. Keeping track of these values can be a daunting task, as prices change rapidly and across numerous platforms. This tutorial will guide you through the process of building a simple, interactive cryptocurrency tracker using TypeScript. This project will not only introduce you to the fundamentals of TypeScript but also provide a practical application that you can customize and expand upon to meet your specific needs. By the end of this tutorial, you’ll have a functional cryptocurrency tracker that fetches real-time data and displays it in an easy-to-understand format.

Why Build a Cryptocurrency Tracker?

Creating a cryptocurrency tracker provides several benefits, particularly for those new to TypeScript and web development:

  • Practical Application: It offers a real-world project to apply your TypeScript knowledge.
  • API Integration: You’ll learn how to fetch and display data from external APIs, a crucial skill in modern web development.
  • Interactive Interface: You’ll create a user-friendly interface to display and interact with cryptocurrency data.
  • Customization: The project can be easily expanded to include more features like price alerts, portfolio tracking, and more.

Prerequisites

Before you begin, ensure you have the following:

  • Node.js and npm (or yarn) installed: These are essential for managing project dependencies and running TypeScript code.
  • A code editor: Visual Studio Code, Sublime Text, or any other editor of your choice.
  • Basic understanding of HTML and JavaScript: Familiarity with these languages will help you understand the code structure and concepts.

Setting Up the Project

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

  1. Create a project directory: 
    mkdir crypto-tracker
cd crypto-tracker
  2. Initialize npm: 
    npm init -y

    This command creates a `package.json` file with default settings.

  3. Install TypeScript: 
    npm install typescript --save-dev

    This installs TypeScript as a development dependency.

  4. Create a `tsconfig.json` file: 
    npx tsc --init

    This command generates a `tsconfig.json` file, which configures TypeScript compiler options. You can customize this file to suit your project needs. For this tutorial, the default settings will suffice.

Project Structure

Create the following file structure for your project:

crypto-tracker/
├── src/
│   ├── index.ts
├── index.html
├── package.json
├── tsconfig.json

The `src/index.ts` file will contain our TypeScript code, `index.html` will be the main HTML file, and the other files were created in the previous steps.

Writing the TypeScript Code

Now, let’s write the TypeScript code to fetch cryptocurrency data and display it. We’ll use the CoinGecko API for fetching real-time cryptocurrency prices. You can sign up for a free API key if you want to make more frequent requests, but it’s not required for this tutorial.

Open `src/index.ts` and add the following code:

// src/index.ts

interface Cryptocurrency {
  id: string;
  symbol: string;
  name: string;
  current_price: number;
  market_cap: number;
  image: string;
}

async function getCryptocurrencies(): Promise {
  try {
    const response = await fetch("https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=10&page=1&sparkline=false");
    const data = await response.json();
    return data as Cryptocurrency[];
  } catch (error) {
    console.error("Error fetching data:", error);
    return [];
  }
}

async function displayCryptocurrencies() {
  const cryptocurrencies = await getCryptocurrencies();
  const cryptoContainer = document.getElementById('crypto-container');

  if (cryptoContainer) {
    cryptocurrencies.forEach(crypto => {
      const cryptoElement = document.createElement('div');
      cryptoElement.classList.add('crypto-item');

      cryptoElement.innerHTML = `
        <img src="${crypto.image}" alt="${crypto.name}" width="30">
        <span>${crypto.name} (${crypto.symbol.toUpperCase()})</span>
        <span>$${crypto.current_price.toLocaleString()}</span>
      `;

      cryptoContainer.appendChild(cryptoElement);
    });
  }
}

document.addEventListener('DOMContentLoaded', () => {
  displayCryptocurrencies();
});

Let’s break down this code:

  • Interface `Cryptocurrency`: This defines the structure of the data we’ll receive from the API. It specifies the properties of each cryptocurrency, such as `id`, `symbol`, `name`, `current_price`, `market_cap`, and `image`.
  • `getCryptocurrencies()` function: This asynchronous function fetches cryptocurrency data from the CoinGecko API. It uses the `fetch` API to make a GET request to the specified URL. The response is then parsed as JSON. Error handling is included within a `try…catch` block to manage potential network or API issues.
  • `displayCryptocurrencies()` function: This function retrieves the cryptocurrency data using `getCryptocurrencies()` and dynamically creates HTML elements to display the data. It gets the `crypto-container` element from the HTML document, iterates through the fetched cryptocurrencies, and creates a `div` element for each cryptocurrency. Each `div` displays the cryptocurrency’s image, name, symbol, and current price.
  • `DOMContentLoaded` event listener: This ensures that the `displayCryptocurrencies()` function is called after the HTML document has been fully loaded.

Creating the HTML File

Now, create the `index.html` file and add the following HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cryptocurrency Tracker</title>
    <style>
        body {
            font-family: sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f4f4f4;
        }

        #crypto-container {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .crypto-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .crypto-item img {
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <h1>Cryptocurrency Tracker</h1>
    <div id="crypto-container"></div>
    <script src="./dist/index.js"></script>
</body>
</html>

This HTML file sets up a basic structure for our cryptocurrency tracker:

  • Title and Meta Tags: Includes the title and meta tags for the page.
  • Basic Styling: Simple CSS styles are added for the body, the container, and the crypto items.
  • Container Div: A `div` with the id “crypto-container” is where the cryptocurrency data will be displayed.
  • Script Tag: Includes a script tag that links to the compiled JavaScript file (`dist/index.js`).

Compiling and Running the Application

Now, let’s compile the TypeScript code and run the application:

  1. Compile the TypeScript code: 
    npx tsc

    This command compiles the `src/index.ts` file into `dist/index.js`. The `tsconfig.json` file configures the compilation process.

  2. Open `index.html` in your browser:
    You can open the `index.html` file directly in your web browser. You should see a list of cryptocurrencies with their names, symbols, and prices.

If everything is set up correctly, you should see a list of cryptocurrencies with their names, symbols, and current prices displayed on the page. If you encounter any issues, check the browser’s developer console for error messages. Ensure that the API is accessible and that your code is correctly implemented.

Adding More Features

Once you have a basic cryptocurrency tracker, you can add more features to enhance its functionality:

  • Error Handling: Implement more robust error handling to gracefully manage API errors or network issues. Display user-friendly messages instead of raw error messages.
  • User Input: Allow users to search for specific cryptocurrencies or filter the list based on certain criteria.
  • Real-time Updates: Use WebSockets or server-sent events to receive real-time updates of cryptocurrency prices.
  • Data Visualization: Display price charts using libraries like Chart.js or D3.js to visualize price trends over time.
  • Portfolio Tracking: Allow users to track their cryptocurrency holdings by adding a portfolio feature.
  • Price Alerts: Implement price alerts to notify users when a cryptocurrency reaches a specific price point.
  • Dark Mode: Add a toggle for dark mode to improve the user experience.

Common Mistakes and Troubleshooting

Here are some common mistakes and how to fix them:

  • Incorrect API Endpoint: Double-check the API endpoint URL for typos. Also, ensure that the API is still active and accessible.
  • CORS Errors: If you encounter CORS (Cross-Origin Resource Sharing) errors, it means the API server is not configured to allow requests from your domain. If you are developing locally, you can use a browser extension to disable CORS for development purposes. In a production environment, you may need to configure the server to allow requests from your domain.
  • Type Errors: TypeScript’s type checking can help catch errors early. Make sure your types match the API’s response. If you’re unsure about the data structure, you can use `console.log()` to inspect the API response.
  • Incorrect File Paths: Ensure that the file paths in your `index.html` file (e.g., `<script src=”./dist/index.js”>`) are correct.
  • Network Issues: Verify your internet connection to ensure you can access the API.
  • API Rate Limits: Some APIs have rate limits. If you’re making too many requests, you might get a 429 error (Too Many Requests). Consider implementing rate limiting in your code or using an API key if the API provides one.

Key Takeaways

  • TypeScript Fundamentals: You’ve learned how to define interfaces, use asynchronous functions, and work with the DOM.
  • API Integration: You’ve successfully integrated with an external API to fetch and display real-time data.
  • Project Structure: You’ve set up a basic project structure and understood how to organize your code.
  • Error Handling: You’ve implemented basic error handling to make your application more robust.
  • User Interface: You’ve created a simple, interactive user interface to display cryptocurrency data.

FAQ

Here are some frequently asked questions:

  1. Can I use a different API?

    Yes, you can. You can modify the `getCryptocurrencies()` function to fetch data from any API that provides cryptocurrency data. Make sure to adjust the interface and data parsing accordingly.

  2. How do I add more cryptocurrencies?

    The current code fetches the top 10 cryptocurrencies by market cap. You can modify the API request parameters (e.g., `per_page`) in the `getCryptocurrencies()` function to fetch more cryptocurrencies. Also, you can allow users to search for specific cryptocurrencies by adding a search input and filtering the results.

  3. How can I deploy this application?

    You can deploy this application using platforms like Netlify, Vercel, or GitHub Pages. These platforms allow you to deploy static websites easily. You can also deploy it to a web server if you have one. You’ll need to ensure that the compiled JavaScript file (`dist/index.js`) and the HTML file are accessible on the server.

  4. How do I handle API rate limits?

    If the API has rate limits, you can implement strategies like adding a delay between requests, caching the API responses, or using an API key (if provided) and managing your usage. Some APIs also provide different tiers of access with varying rate limits.

This tutorial provides a solid foundation for building a cryptocurrency tracker using TypeScript. You can expand upon this project by adding features such as real-time updates, price alerts, and portfolio tracking. With your newfound knowledge, you can begin exploring other advanced concepts in TypeScript and web development. Keep practicing, experimenting, and building more complex applications. The more you work with TypeScript, the more proficient you’ll become.

More posts