TypeScript Tutorial: Building a Simple Interactive Web-Based Cryptocurrency Portfolio

Written by

learnmodernjavascript

in

In the rapidly evolving world of cryptocurrencies, keeping track of your investments can feel like navigating a complex maze. Prices fluctuate wildly, new coins emerge constantly, and the sheer volume of information can be overwhelming. Wouldn’t it be great to have a simple, interactive tool that allows you to monitor your cryptocurrency holdings in real-time? This tutorial will guide you through building a web-based cryptocurrency portfolio application using TypeScript. We’ll cover everything from setting up your development environment to fetching live market data and displaying your portfolio’s performance. By the end of this tutorial, you’ll have a functional application and a solid understanding of how to use TypeScript to build interactive web applications that interact with external APIs.

Why TypeScript?

TypeScript, a superset of JavaScript, adds static typing to the language. This means you can define the types of variables, function parameters, and return values. This provides several benefits:

  • Early Error Detection: TypeScript catches type-related errors during development, reducing the chances of runtime errors.
  • Improved Code Readability: Type annotations make your code easier to understand and maintain.
  • Enhanced Code Completion: IDEs can provide better code completion and suggestions, boosting your productivity.
  • Refactoring Safety: TypeScript makes it safer to refactor code, as the compiler helps you identify and fix potential issues.

In short, TypeScript helps you write more robust, maintainable, and scalable code. These advantages make it an excellent choice for building complex web applications, including our cryptocurrency portfolio.

Setting Up Your Development Environment

Before we start coding, let’s set up our development environment. You’ll need the following:

  • Node.js and npm: Node.js is a JavaScript runtime environment, and npm (Node Package Manager) is used to manage project dependencies. Download and install them from https://nodejs.org/.
  • A Code Editor: Choose your preferred code editor (e.g., VS Code, Sublime Text, Atom).
  • TypeScript Compiler: Install the TypeScript compiler globally using npm: npm install -g typescript

Once you have installed the prerequisites, create a new project directory for your portfolio application. Open your terminal or command prompt, navigate to your project directory, and initialize a new npm project:

mkdir cryptocurrency-portfolio
cd cryptocurrency-portfolio
npm init -y

This command creates a package.json file, which will store information about your project and its dependencies. Next, we need to set up TypeScript in our project.

Configuring TypeScript

To configure TypeScript, we need to create a tsconfig.json file. This file tells the TypeScript compiler how to compile your code. Run the following command in your terminal:

tsc --init

This command generates a tsconfig.json file with a default configuration. You can customize this file to suit your project’s needs. Here’s a basic configuration you can start with:

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

Let’s break down some of the key options:

  • target: Specifies the JavaScript version to compile to (e.g., “es5”, “es6”, “esnext”).
  • module: Specifies the module system to use (e.g., “commonjs”, “esnext”).
  • outDir: Specifies the output directory for the compiled JavaScript files.
  • strict: Enables strict type-checking.
  • esModuleInterop: Enables interoperability between CommonJS and ES modules.
  • skipLibCheck: Skips type checking of declaration files.
  • forceConsistentCasingInFileNames: Enforces consistent casing in file names.
  • include: Specifies the files and directories to include in the compilation.

Save the tsconfig.json file in your project directory.

Project Structure

Create a basic project structure with the following directories and files:

cryptocurrency-portfolio/
├── package.json
├── tsconfig.json
├── src/
│   ├── index.ts
│   └── styles.css
├── dist/
└── index.html
  • package.json: Contains project metadata and dependencies.
  • tsconfig.json: TypeScript compiler configuration.
  • src/: Contains your TypeScript source code.
  • src/index.ts: The main TypeScript file for your application.
  • src/styles.css: CSS file for styling the application.
  • dist/: Will contain the compiled JavaScript and other assets.
  • index.html: The HTML file for your application.

Creating the HTML Structure

Let’s create the basic HTML structure for our portfolio application in index.html. This will include the necessary HTML tags and a basic layout for displaying our portfolio data.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cryptocurrency Portfolio</title>
  <link rel="stylesheet" href="src/styles.css">
</head>
<body>
  <div class="container">
    <h1>My Cryptocurrency Portfolio</h1>
    <div id="portfolio-container">
      <!-- Portfolio data will be displayed here -->
    </div>
  </div>
  <script src="dist/index.js"></script>
</body>
</html>

This HTML provides a basic structure with a title, a container for the portfolio data, and a link to the CSS file. The JavaScript file (index.js) will be automatically generated by the TypeScript compiler and linked in the <script> tag.

Styling with CSS

To make our application look presentable, let’s add some basic styling in src/styles.css. This example provides a basic layout and styling for the container and portfolio items.

body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
}

.container {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
  color: #333;
}

.portfolio-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.portfolio-item:last-child {
  border-bottom: none;
}

.crypto-name {
  font-weight: bold;
}

.crypto-value {
  text-align: right;
}

This CSS provides a basic layout and styling for the container and portfolio items.

Writing the TypeScript Code

Now, let’s write the TypeScript code in src/index.ts. This is where the core logic of our application will reside. We’ll start by defining some interfaces to represent our data.


// Define interfaces for data types
interface Cryptocurrency {
  id: string;
  name: string;
  symbol: string;
  current_price: number;
  image: string;
}

interface PortfolioItem {
  cryptocurrency: Cryptocurrency;
  quantity: number;
  value: number; // Value in USD
}

// Placeholder for your API key (replace with your actual API key)
const API_KEY: string = 'YOUR_API_KEY';

// Function to fetch cryptocurrency data from an API
async function getCryptoData(coinIds: string[]): Promise<Cryptocurrency[]> {
  const ids = coinIds.join('%2C'); // Format coin IDs for the API request
  const apiUrl = `https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&ids=${ids}&order=market_cap_desc&per_page=100&page=1&sparkline=false`;

  try {
    const response = await fetch(apiUrl);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data: Cryptocurrency[] = await response.json();
    return data;
  } catch (error) {
    console.error('Error fetching cryptocurrency data:', error);
    return [];
  }
}

// Function to calculate the value of a portfolio item
function calculatePortfolioValue(crypto: Cryptocurrency, quantity: number): number {
  return crypto.current_price * quantity;
}

// Function to render a portfolio item
function renderPortfolioItem(item: PortfolioItem): HTMLElement {
  const itemElement = document.createElement('div');
  itemElement.classList.add('portfolio-item');

  const cryptoNameElement = document.createElement('span');
  cryptoNameElement.classList.add('crypto-name');
  cryptoNameElement.textContent = `${item.cryptocurrency.name} (${item.cryptocurrency.symbol.toUpperCase()})`;

  const cryptoValueElement = document.createElement('span');
  cryptoValueElement.classList.add('crypto-value');
  cryptoValueElement.textContent = `$${item.value.toFixed(2)}`;

  itemElement.appendChild(cryptoNameElement);
  itemElement.appendChild(cryptoValueElement);

  return itemElement;
}

// Function to display the portfolio
async function displayPortfolio(portfolioItems: PortfolioItem[]): Promise<void> {
  const portfolioContainer = document.getElementById('portfolio-container');
  if (!portfolioContainer) {
    console.error('Portfolio container not found.');
    return;
  }

  portfolioContainer.innerHTML = ''; // Clear previous content

  portfolioItems.forEach(item => {
    const itemElement = renderPortfolioItem(item);
    portfolioContainer.appendChild(itemElement);
  });

  // Calculate and display total portfolio value
  const totalValue = portfolioItems.reduce((sum, item) => sum + item.value, 0);
  const totalValueElement = document.createElement('div');
  totalValueElement.textContent = `Total Portfolio Value: $${totalValue.toFixed(2)}`;
  portfolioContainer.appendChild(totalValueElement);
}

// Main function to fetch data and display the portfolio
async function main(): Promise<void> {
  // Define your portfolio items with their respective coin IDs and quantities
  const portfolioData = [
    { id: 'bitcoin', quantity: 0.5 },
    { id: 'ethereum', quantity: 2 },
    { id: 'litecoin', quantity: 10 }
  ];

  // Extract coin IDs for API request
  const coinIds = portfolioData.map(item => item.id);

  // Fetch cryptocurrency data
  const cryptoData = await getCryptoData(coinIds);

  // Create portfolio items
  const portfolioItems: PortfolioItem[] = portfolioData.map(item => {
    const crypto = cryptoData.find(crypto => crypto.id === item.id);
    if (!crypto) {
      console.warn(`Cryptocurrency with ID ${item.id} not found.`);
      return null; // Skip if cryptocurrency not found
    }
    const value = calculatePortfolioValue(crypto, item.quantity);
    return {
      cryptocurrency: crypto,
      quantity: item.quantity,
      value: value
    };
  }).filter(item => item !== null) as PortfolioItem[]; // Remove null values

  // Display the portfolio
  await displayPortfolio(portfolioItems);
}

// Run the main function when the page loads
document.addEventListener('DOMContentLoaded', main);

Let’s break down the code:

  • Interfaces: We define two interfaces, Cryptocurrency and PortfolioItem, to represent the structure of our data.
  • getCryptoData: This asynchronous function fetches cryptocurrency data from a public API (CoinGecko). Replace YOUR_API_KEY with your actual API key if needed (not strictly required for the public API). The function constructs the API URL, makes a request, and parses the response.
  • calculatePortfolioValue: This function calculates the value of a single portfolio item based on the current price and the quantity.
  • renderPortfolioItem: This function creates an HTML element for each portfolio item and populates it with the cryptocurrency name, symbol, and value.
  • displayPortfolio: This function takes an array of PortfolioItem objects and renders them in the HTML. It clears any existing content in the portfolio container and appends the new portfolio items. It also calculates and displays the total portfolio value.
  • main: This is the main function that orchestrates the entire process. It defines an array of portfolio items with their respective coin IDs and quantities. It fetches the cryptocurrency data, calculates the value of each item, and then calls the displayPortfolio function to render the portfolio.
  • Event Listener: We add an event listener for the DOMContentLoaded event to ensure that the main function runs after the HTML is fully loaded.

Compiling and Running the Application

Now that you have written the TypeScript code and created the HTML and CSS files, it’s time to compile and run the application. Open your terminal in the project directory and run the following command:

tsc

This command will compile your TypeScript code into JavaScript and generate the index.js file in the dist directory. If there are any errors in your TypeScript code, the compiler will display them in the terminal. Once the compilation is successful, you can open index.html in your web browser. You should see your cryptocurrency portfolio displayed, with the names, symbols, and values of your holdings.

Common Mistakes and Troubleshooting

Here are some common mistakes and how to fix them:

  • Type Errors: TypeScript will highlight type errors during compilation. Carefully review the error messages and ensure that your variables and function parameters are of the correct types.
  • API Errors: If you encounter issues fetching data from the API, check the following:
    • API Key: Ensure you have a valid API key (if required) and that it’s correctly configured.
    • API Endpoint: Double-check the API endpoint URL and ensure it’s correct.
    • Network Connection: Make sure you have an active internet connection.
    • CORS Issues: If you’re running the application locally and the API has CORS restrictions, you might need to use a proxy or configure your browser to allow cross-origin requests.
  • Incorrect File Paths: Ensure that the file paths in your HTML (e.g., to the CSS and JavaScript files) are correct.
  • Missing Dependencies: If you’re using any external libraries, make sure you’ve installed them using npm.

Enhancements and Next Steps

This tutorial provides a basic foundation for a cryptocurrency portfolio application. Here are some ideas for enhancements and next steps:

  • Add User Input: Allow users to add or remove cryptocurrencies and specify the quantities they own.
  • Implement Real-time Updates: Use WebSockets or server-sent events to receive real-time price updates.
  • Add Historical Data: Display historical price charts using a charting library like Chart.js.
  • Implement Authentication: Allow users to create accounts and save their portfolio data.
  • Improve Styling: Enhance the user interface with more advanced styling and a better layout.
  • Error Handling: Implement more robust error handling and display user-friendly error messages.

Key Takeaways

  • TypeScript enhances web application development by adding static typing, improving code readability, and enabling early error detection.
  • Setting up a TypeScript project involves configuring the tsconfig.json file and defining the project structure.
  • Interfaces are essential for defining data types and ensuring type safety.
  • Asynchronous functions (using async/await) are crucial for handling API requests.
  • The DOM (Document Object Model) is used to manipulate and display data in the web browser.

FAQ

  1. What is TypeScript? TypeScript is a superset of JavaScript that adds static typing to the language, improving code maintainability and reducing errors.
  2. Why use TypeScript for web development? TypeScript offers early error detection, improved code readability, and better tooling support, leading to more robust and scalable web applications.
  3. How do I compile TypeScript code? You can compile TypeScript code using the tsc command in the terminal. This command generates JavaScript files from your TypeScript source code.
  4. Where can I find cryptocurrency API data? You can find cryptocurrency data from various APIs, such as CoinGecko, CoinMarketCap, and CryptoCompare.
  5. How can I deploy this application? You can deploy your application to a web hosting service like Netlify, Vercel, or GitHub Pages.

Building a cryptocurrency portfolio application with TypeScript is a great way to learn about web development and the cryptocurrency market. This tutorial has provided a solid foundation for your project. Remember to experiment, explore the API documentation, and add new features to your application. With practice, you can build a powerful and user-friendly tool to manage your cryptocurrency investments. Embrace the challenge, and you’ll find that the journey of building a web application with TypeScript is both educational and rewarding. The world of digital currencies is constantly evolving, and your ability to create tools to navigate it will be invaluable.

More posts