TypeScript Tutorial: Building a Simple Interactive Cryptocurrency Exchange

Written by

learnmodernjavascript

in

Cryptocurrency has revolutionized the financial landscape, offering a decentralized and often volatile investment opportunity. However, understanding the intricacies of the crypto market can be daunting, especially for newcomers. Creating a functional cryptocurrency exchange from scratch might seem like a complex undertaking, but with TypeScript, we can build a simplified, interactive version that demystifies the core concepts. This tutorial will guide you through the process of developing a basic, yet educational, cryptocurrency exchange interface, perfect for beginners and intermediate developers looking to expand their TypeScript skillset.

Why Build a Cryptocurrency Exchange?

Building a cryptocurrency exchange, even a simplified one, provides invaluable insights into several critical areas:

  • API Integration: Learn how to fetch real-time data from cryptocurrency APIs.
  • Data Handling: Understand how to manage and manipulate financial data.
  • User Interface Development: Practice creating interactive elements and displaying data dynamically.
  • State Management: Grasp the fundamentals of managing application state.
  • Asynchronous Operations: Master the use of `async/await` for handling API calls.

This tutorial will not only teach you TypeScript but also give you practical experience in building a real-world application, albeit a simplified one. By the end, you’ll have a working exchange interface that simulates buying and selling cryptocurrencies, giving you a solid foundation for more complex projects.

Prerequisites

Before we begin, ensure you have the following:

  • Node.js and npm (or yarn) installed: This provides the runtime environment and package manager.
  • A basic understanding of TypeScript: Familiarity with types, interfaces, and classes will be helpful.
  • A code editor: Visual Studio Code or similar is recommended.
  • A modern web browser: For testing the application.

Setting Up the Project

Let’s start by setting up our project. Open your terminal and execute the following commands:

mkdir crypto-exchange-tutorial
cd crypto-exchange-tutorial
npm init -y
npm install typescript --save-dev
npm install axios --save

These commands create a new directory, initialize a Node.js project, install TypeScript as a development dependency, and install `axios`, a library for making HTTP requests (we’ll use this to fetch cryptocurrency data from an API). After installing the dependencies, create a `tsconfig.json` file in the root of your project with the following content:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./dist",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}

This `tsconfig.json` file configures the TypeScript compiler. It specifies the target JavaScript version, the module system, the output directory, and enables various checks for type safety. Now, create a `src` directory and, within it, create an `index.ts` file. This is where we’ll write our main application logic.

Fetching Cryptocurrency Data

We’ll use a free cryptocurrency API to fetch real-time data. There are many options available; for this tutorial, we will use the CoinGecko API. First, install the necessary package for the API: 

npm install coingecko-api --save

Now, let’s create a function to fetch the price of Bitcoin and display it in the console. Open `src/index.ts` and add the following code:

import CoinGecko from 'coingecko-api';

const CoinGeckoClient = new CoinGecko();

async function getBitcoinPrice(): Promise<number> {
  try {
    const data = await CoinGeckoClient.coins.fetch('bitcoin', {});
    return data.data.market_data.current_price.usd;
  } catch (error) {
    console.error('Error fetching Bitcoin price:', error);
    return 0;
  }
}

async function main() {
  const bitcoinPrice = await getBitcoinPrice();
  console.log(`Current Bitcoin price: $${bitcoinPrice}`);
}

main();

Let’s break down the code:

  • We import the CoinGecko API.
  • `getBitcoinPrice()` is an asynchronous function that fetches the Bitcoin price.
  • Inside `getBitcoinPrice()`, we use `CoinGeckoClient.coins.fetch(‘bitcoin’, {})` to get the data.
  • The function returns the price in USD.
  • `main()` is an asynchronous function that calls `getBitcoinPrice()` and logs the result to the console.
  • The `try…catch` block handles potential errors during the API call.

To run this code, compile the TypeScript file and then execute the JavaScript file:

tsc
node dist/index.js

You should see the current Bitcoin price printed in your console. This demonstrates how to fetch and display data from an API.

Creating the Exchange Interface

Now, let’s create a basic HTML interface for our exchange. Create an `index.html` file in the root directory and add the following HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Cryptocurrency Exchange</title>
    <style>
        body {
            font-family: sans-serif;
            margin: 20px;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
        }
        .currency-pair {
            margin-bottom: 20px;
        }
        .input-group {
            margin-bottom: 10px;
        }
        label {
            display: block;
            margin-bottom: 5px;
        }
        input[type="number"] {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
            margin-bottom: 5px;
        }
        button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
        }
        #balance {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>Cryptocurrency Exchange</h2>
        <div class="currency-pair">
            <h3>BTC/USD</h3>
            <p>Current Price: <span id="btc-price">Loading...</span></p>
            <div class="input-group">
                <label for="btc-amount">BTC Amount:</label>
                <input type="number" id="btc-amount" min="0" step="0.0001">
            </div>
            <div class="input-group">
                <label for="usd-amount">USD Amount:</label>
                <input type="number" id="usd-amount" readonly>
            </div>
            <button id="buy-btc">Buy BTC</button>
            <button id="sell-btc">Sell BTC</button>
        </div>
        <div id="balance">
            <h3>Your Balance</h3>
            <p>USD: <span id="usd-balance">1000</span></p>
            <p>BTC: <span id="btc-balance">0</span></p>
        </div>
    </div>
    <script src="dist/index.js"></script>
</body>
</html>

This HTML provides the basic structure for our exchange, including:

  • A title and basic styling.
  • A section to display the current Bitcoin price.
  • Input fields for entering the amount of BTC to buy or sell.
  • A display of the calculated USD amount.
  • Buttons for buying and selling BTC.
  • A section to display the user’s balance.

Next, let’s update our `src/index.ts` file to interact with the HTML elements.

Connecting TypeScript with the HTML

Now, let’s modify `src/index.ts` to fetch the Bitcoin price and update the HTML. Add the following code to your `src/index.ts` file:

import CoinGecko from 'coingecko-api';

const CoinGeckoClient = new CoinGecko();

// HTML elements
const btcPriceElement = document.getElementById('btc-price') as HTMLSpanElement;
const btcAmountInput = document.getElementById('btc-amount') as HTMLInputElement;
const usdAmountInput = document.getElementById('usd-amount') as HTMLInputElement;
const buyBtcButton = document.getElementById('buy-btc') as HTMLButtonElement;
const sellBtcButton = document.getElementById('sell-btc') as HTMLButtonElement;
const usdBalanceElement = document.getElementById('usd-balance') as HTMLSpanElement;
const btcBalanceElement = document.getElementById('btc-balance') as HTMLSpanElement;

// User balance (in USD and BTC)
let usdBalance = 1000;
let btcBalance = 0;

async function getBitcoinPrice(): Promise<number> {
    try {
        const data = await CoinGeckoClient.coins.fetch('bitcoin', {});
        return data.data.market_data.current_price.usd;
    } catch (error) {
        console.error('Error fetching Bitcoin price:', error);
        return 0;
    }
}

async function updateBitcoinPrice() {
    const price = await getBitcoinPrice();
    btcPriceElement.textContent = price.toFixed(2);
}

function calculateUsdAmount() {
    const btcAmount = parseFloat(btcAmountInput.value);
    const price = parseFloat(btcPriceElement.textContent || '0');
    const usdAmount = btcAmount * price;
    usdAmountInput.value = usdAmount.toFixed(2);
}

function buyBitcoin() {
    const btcAmount = parseFloat(btcAmountInput.value);
    const usdAmount = parseFloat(usdAmountInput.value);

    if (usdAmount <= usdBalance && btcAmount > 0) {
        usdBalance -= usdAmount;
        btcBalance += btcAmount;
        updateBalances();
        alert(`Bought ${btcAmount} BTC for $${usdAmount.toFixed(2)}`);
    } else {
        alert('Insufficient funds or invalid amount.');
    }
}

function sellBitcoin() {
    const btcAmount = parseFloat(btcAmountInput.value);
    const price = parseFloat(btcPriceElement.textContent || '0');
    const usdAmount = btcAmount * price;

    if (btcAmount <= btcBalance && btcAmount > 0) {
        usdBalance += usdAmount;
        btcBalance -= btcAmount;
        updateBalances();
        alert(`Sold ${btcAmount} BTC for $${usdAmount.toFixed(2)}`);
    } else {
        alert('Insufficient BTC or invalid amount.');
    }
}

function updateBalances() {
    usdBalanceElement.textContent = usdBalance.toFixed(2);
    btcBalanceElement.textContent = btcBalance.toFixed(4);
}

function setupEventListeners() {
    btcAmountInput.addEventListener('input', calculateUsdAmount);
    buyBtcButton.addEventListener('click', buyBitcoin);
    sellBtcButton.addEventListener('click', sellBitcoin);
}

async function main() {
    await updateBitcoinPrice();
    setInterval(updateBitcoinPrice, 5000); // Update price every 5 seconds
    setupEventListeners();
}

main();

Let’s break down the code:

  • We import the CoinGecko API.
  • We declare variables to hold references to the HTML elements using `document.getElementById()`. The `as HTMLSpanElement`, `as HTMLInputElement`, and `as HTMLButtonElement` are type assertions to help TypeScript understand the type of the elements.
  • We initialize `usdBalance` and `btcBalance` to represent the user’s starting balance.
  • `getBitcoinPrice()` fetches the current Bitcoin price from the CoinGecko API.
  • `updateBitcoinPrice()` calls `getBitcoinPrice()` and updates the `btc-price` element in the HTML. It also uses `setInterval` to update the price every 5 seconds.
  • `calculateUsdAmount()` calculates the USD amount based on the entered BTC amount and the current price.
  • `buyBitcoin()` and `sellBitcoin()` handle the buy and sell actions, updating the balances accordingly.
  • `updateBalances()` updates the balance display in the HTML.
  • `setupEventListeners()` sets up event listeners for the input and button elements.
  • `main()` calls `updateBitcoinPrice()` to fetch the initial price, sets up the price update interval, and sets up the event listeners.

Compile the TypeScript code using `tsc` and open `index.html` in your browser. You should see the Bitcoin price, be able to enter amounts, and buy/sell BTC. You can see the current Bitcoin price and simulate buying and selling. The balances will update accordingly.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to fix them:

  • Incorrect Element Selection: Make sure you are selecting the correct HTML elements using `document.getElementById()`. Double-check the IDs in your HTML. Use the browser’s developer tools (right-click, Inspect) to verify the elements exist.
  • Type Errors: TypeScript will help you catch type errors. Ensure your variables are correctly typed. For example, use type assertions (e.g., `as HTMLInputElement`) when getting elements from the DOM.
  • Asynchronous Operations: Remember that API calls are asynchronous. Use `async/await` to handle them correctly. Make sure you are awaiting the results of the API calls before using the data.
  • Event Listener Issues: Ensure your event listeners are correctly attached and are not causing unexpected behavior. Debugging the event listeners using `console.log()` can be helpful.
  • Incorrect Calculation: Double-check your calculations. Make sure you are correctly parsing the input values using `parseFloat()` before performing calculations. Also, check for potential division by zero errors.
  • CORS Errors: If you encounter CORS (Cross-Origin Resource Sharing) errors, it means your browser is blocking the API request because the API server does not allow requests from your domain. This can be resolved by using a proxy server or, for local development, configuring your browser to allow cross-origin requests.

Enhancements and Next Steps

This is a basic implementation of a cryptocurrency exchange. To make it more functional and realistic, you can add the following enhancements:

  • More Cryptocurrencies: Allow users to trade more cryptocurrencies by fetching data from the API and creating corresponding UI elements.
  • Order Books: Implement an order book to display buy and sell orders.
  • Trading Fees: Add trading fees to simulate a real exchange.
  • User Authentication: Implement user accounts and authentication.
  • Advanced Charting: Integrate a charting library to display price charts.
  • Error Handling: Improve error handling and display more informative error messages to the user.
  • Data Validation: Validate user inputs to prevent errors and improve security.
  • Real-time Updates: Use WebSockets or Server-Sent Events (SSE) for real-time price updates.
  • Responsive Design: Make the interface responsive for different screen sizes.
  • Testing: Write unit and integration tests to ensure the application’s reliability.

Summary / Key Takeaways

In this tutorial, we’ve built a simplified, interactive cryptocurrency exchange interface using TypeScript. We’ve covered fetching data from an API, interacting with HTML elements, handling user input, and managing application state. This project provides a solid foundation for understanding the core concepts of cryptocurrency trading and web development. Remember to practice regularly, experiment with different features, and embrace the learning process. You’ve now taken your first steps into creating your own trading applications. The concepts of API integration, data handling, and user interface development learned are applicable to a wide range of web development projects, so keep exploring and expanding your skills. You’ve also gained hands-on experience in using TypeScript to build a practical application, reinforcing your understanding of types, classes, and interfaces. Now, you have the building blocks to expand and experiment with new features and create more complex applications.

FAQ

Q: Why is TypeScript a good choice for this project?

A: TypeScript offers type safety, which helps catch errors early in development. It also provides better code organization, improved readability, and enhanced maintainability. The strong typing system helps prevent bugs and makes the code easier to understand and scale.

Q: What are the benefits of using an API?

A: APIs allow you to access real-time cryptocurrency data without having to manage the data yourself. They provide a convenient and standardized way to retrieve information from external sources.

Q: How can I improve the user experience?

A: Enhance the user experience by adding features such as a responsive design, error messages, and more informative feedback. You could also include charting libraries to display price trends and integrate features like order books to simulate a real trading environment.

Q: What are the common challenges when working with APIs?

A: Common challenges include handling rate limits, dealing with API errors, and ensuring data accuracy. It is important to handle these challenges through proper error handling, data validation, and caching mechanisms.

Q: How do I deploy this application?

A: You can deploy the application by hosting the HTML, CSS, and JavaScript files on a web server. You can use platforms like Netlify, Vercel, or GitHub Pages for free hosting. You’ll need to compile the TypeScript code to JavaScript using `tsc` before deploying.

You’ve successfully built a basic cryptocurrency exchange interface. The journey doesn’t end here; it’s a launchpad for further exploration and deeper understanding. The skills you’ve acquired—from API integration to DOM manipulation—are highly valuable in modern web development. Continue to experiment, iterate, and refine your skills, and you’ll be well on your way to building more sophisticated and feature-rich applications.

More posts