TypeScript Tutorial: Building a Simple Interactive Web-Based Cryptocurrency Price Alert System

Written by

learnmodernjavascript

in

In the fast-paced world of cryptocurrency, staying informed about price fluctuations is crucial. Missing a sudden surge or dip could mean missing out on significant opportunities or incurring unexpected losses. That’s where a real-time cryptocurrency price alert system comes in. This tutorial will guide you, step-by-step, through building a simple, yet effective, web-based price alert system using TypeScript. This system will allow you to track the prices of your favorite cryptocurrencies and receive instant notifications when they reach your predefined target prices. We’ll cover everything from setting up your development environment to deploying your application, making it easy for beginners to intermediate developers to follow along and learn the power of TypeScript.

Why Build a Cryptocurrency Price Alert System?

Automated price alerts provide several key advantages. First and foremost, they save you time. Instead of constantly monitoring price charts, you can set alerts and let the system notify you when action is needed. Secondly, they help you make timely decisions. Instant notifications ensure you never miss a critical price movement, allowing you to react quickly to market changes. Finally, they reduce emotional trading. By relying on pre-set alerts, you can avoid impulsive decisions driven by fear or greed, leading to more rational trading strategies.

Prerequisites

Before we dive in, you’ll need the following:

  • A basic understanding of HTML, CSS, and JavaScript.
  • Node.js and npm (Node Package Manager) installed on your system.
  • A code editor, such as Visual Studio Code.
  • Familiarity with the command line/terminal.

Setting Up Your Development Environment

Let’s start by creating a new project directory and initializing a Node.js project. Open your terminal and run the following commands:

mkdir crypto-alert-system
cd crypto-alert-system
npm init -y

This will create a new directory called `crypto-alert-system`, navigate into it, and initialize a `package.json` file with default settings. Next, we’ll install TypeScript and some necessary packages:

npm install typescript --save-dev
npm install @types/node axios ws

Here’s what each package does:

  • `typescript`: The TypeScript compiler.
  • `@types/node`: TypeScript definitions for Node.js.
  • `axios`: A promise-based HTTP client for making API requests.
  • `ws`: A library for creating WebSocket connections.

Now, let’s configure TypeScript. Create a `tsconfig.json` file in your project root with the following content:

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "outDir": "./dist",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*"]
}

This configuration specifies that we’ll compile TypeScript to ES2016 JavaScript, use the CommonJS module system, output the compiled files to a `dist` directory, enable ES module interop, enforce consistent casing, enable strict type checking, and skip type checking of library files. It also tells the compiler to include all TypeScript files in the `src` directory.

Project Structure

Let’s create the following project structure:

crypto-alert-system/
├── package.json
├── tsconfig.json
├── src/
│   ├── index.ts
│   └── utils.ts
└── dist/

The `src` directory will hold our TypeScript source files, and the `dist` directory will contain the compiled JavaScript files. The `utils.ts` file will contain helper functions, and `index.ts` will be the main entry point of our application.

Creating the Core Logic (src/utils.ts)

First, we need a way to fetch cryptocurrency prices. We’ll use the CoinGecko API for this. Create a file named `src/utils.ts` and add the following code:

import axios from 'axios';

export interface CryptoPrice {
  [currency: string]: {
    usd: number;
  };
}

export async function getCryptoPrice(coinId: string, vsCurrencies: string = 'usd'): Promise {
  try {
    const response = await axios.get(`https://api.coingecko.com/api/v3/simple/price?ids=${coinId}&vs_currencies=${vsCurrencies}`);
    return response.data;
  } catch (error: any) {
    console.error('Error fetching price:', error.message);
    return null;
  }
}

This code defines an interface `CryptoPrice` to represent the price data and an asynchronous function `getCryptoPrice` that fetches the price of a specific cryptocurrency (e.g., bitcoin) in a specified currency (e.g., USD) using the CoinGecko API. It handles potential errors and returns `null` if the API request fails.

Implementing the Alert System (src/index.ts)

Now, let’s create the main logic in `src/index.ts`:

import { getCryptoPrice, CryptoPrice } from './utils';

// Define the cryptocurrencies to track and their target prices.
interface AlertConfig {
  coinId: string;
  targetPrice: number;
  alertMessage: string;
}

const alertConfigs: AlertConfig[] = [
  { coinId: 'bitcoin', targetPrice: 30000, alertMessage: 'Bitcoin price reached $30,000!' },
  { coinId: 'ethereum', targetPrice: 2000, alertMessage: 'Ethereum price reached $2,000!' },
];

async function checkPriceAndTriggerAlert(config: AlertConfig): Promise {
  const priceData: CryptoPrice | null = await getCryptoPrice(config.coinId);

  if (priceData) {
    const price = priceData[config.coinId].usd;
    if (price >= config.targetPrice) {
      console.log(`ALERT: ${config.alertMessage} Current price: $${price.toFixed(2)}`);
    }
  }
}

async function main() {
  for (const config of alertConfigs) {
    await checkPriceAndTriggerAlert(config);
  }

  // Check prices every 60 seconds (adjust as needed)
  setInterval(() => {
    alertConfigs.forEach(async (config) => {
      await checkPriceAndTriggerAlert(config);
    });
  }, 60000);
}

main();

This code imports the `getCryptoPrice` function from `utils.ts`. It defines an `AlertConfig` interface to specify the cryptocurrency, target price, and alert message. It then sets up an array of `alertConfigs` for Bitcoin and Ethereum. The `checkPriceAndTriggerAlert` function fetches the current price and triggers an alert if the price meets the target. The `main` function iterates through the alert configurations and checks prices periodically using `setInterval`. The `toFixed(2)` method ensures that the price is displayed with two decimal places.

Compiling and Running the Application

To compile your TypeScript code, run the following command in your terminal:

tsc

This will compile all TypeScript files in the `src` directory and output the JavaScript files to the `dist` directory. To run the application, execute the following command:

node dist/index.js

You should see the application fetching prices and checking for alerts every 60 seconds. If the price of Bitcoin or Ethereum reaches the configured target price, an alert message will be printed to the console.

Enhancements and Features

This is a basic implementation. Here are some ideas to enhance your price alert system:

  • User Interface: Create a web interface (using HTML, CSS, and JavaScript, and a framework like React or Vue.js) to allow users to configure their own alerts, view real-time price charts, and see their alert history.
  • Notification System: Implement push notifications (using a service like Firebase Cloud Messaging or web push) or email alerts to notify users when an alert is triggered.
  • More Cryptocurrencies: Expand the system to support a wider range of cryptocurrencies.
  • Historical Data: Integrate historical price data to allow users to analyze trends and make more informed trading decisions. You could use an API that provides historical data.
  • Advanced Alert Conditions: Allow users to set alerts based on percentage changes, moving averages, or other technical indicators.
  • Error Handling: Implement more robust error handling, including retries for API requests and logging of errors.
  • Configuration: Allow users to configure the alert intervals and other settings.
  • Data Persistence: Store user configurations and alert history in a database (e.g., PostgreSQL, MongoDB) or local storage.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid them:

  • Incorrect API Keys: If you’re using an API that requires an API key, make sure you’ve obtained a valid key and that it’s correctly configured in your code. Double-check the API documentation for any usage limits or restrictions.
  • Rate Limiting: APIs often have rate limits, meaning you can only make a certain number of requests within a given time period. If you exceed the rate limit, your requests will be blocked. Implement error handling to handle rate limit errors and potentially add delays between API requests.
  • Network Issues: Network connectivity problems can cause API requests to fail. Implement error handling to catch network errors and provide informative error messages. Consider adding retry logic to automatically retry failed requests.
  • Incorrect Data Parsing: APIs may return data in different formats. Carefully examine the API response format and make sure your code correctly parses the data. Use type checking in TypeScript to help catch data type mismatches.
  • Unclear Error Messages: Provide clear and informative error messages to help you debug your code. Log errors to the console or a log file to track issues.

Key Takeaways

  • TypeScript allows you to create robust and maintainable code for your web applications.
  • Using APIs, you can easily fetch real-time data from various sources.
  • Setting up automated alerts can help you stay informed about market changes.
  • Always handle potential errors gracefully to ensure your application runs smoothly.

FAQ

Q: How can I deploy this application?

A: You can deploy this application using a platform like Heroku, Netlify, or AWS. You’ll need to configure your environment to run Node.js and ensure that the application can access the internet to make API requests.

Q: How do I add more cryptocurrencies to track?

A: Simply add more entries to the `alertConfigs` array in `src/index.ts`, specifying the `coinId`, `targetPrice`, and `alertMessage` for each cryptocurrency you want to track. Make sure the `coinId` matches the identifier used by the CoinGecko API.

Q: How can I change the alert interval?

A: The alert interval is controlled by the `setInterval` function in `src/index.ts`. Modify the second argument of this function (currently 60000 milliseconds, or 60 seconds) to change the frequency of price checks.

Q: What if the CoinGecko API is down?

A: The `getCryptoPrice` function in `src/utils.ts` includes basic error handling. If the API request fails, it will log an error message to the console and return `null`. You can enhance this by implementing retry logic or using a different API as a backup.

Q: How can I receive notifications on my phone?

A: You can integrate push notifications using services like Firebase Cloud Messaging (FCM) or web push. These services allow you to send notifications to users’ devices when an alert is triggered. You’ll need to set up a service account and configure your application to use the chosen notification service.

Building a cryptocurrency price alert system in TypeScript is a great way to learn about real-time data fetching, API integration, and asynchronous programming. By following this tutorial, you’ve created a functional system that you can customize and expand to meet your specific needs. From here, you can explore the various enhancements and features mentioned earlier to build a more sophisticated and user-friendly application. Remember to always prioritize error handling and consider implementing features like user authentication and data persistence for a production-ready system. With a solid foundation in place, the possibilities for expanding your system are as vast and dynamic as the cryptocurrency market itself. The knowledge gained here can be applied to many other projects involving real-time data and notifications, making it a valuable skill set for any developer.

More posts