Skip to content

crypto-portfolio-tracker-with-the-crypto-market-data-api

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

crypto-portfolio-tracker-with-the-crypto-market-data-api

README.md

Crypto Portfolio Tracker

⚠️ Deprecated — reference only. The Crypto Market Data API add-on is no longer offered by Quicknode, so this sample app can no longer be run end to end. The code is kept here as a reference implementation and is no longer maintained. Browse the Quicknode add-ons catalog for currently available alternatives.

Overview

The Crypto Portfolio Tracker is a web application that allows users to input their cryptocurrency holdings and track their portfolio value over time. The app fetches current and historical exchange rates to display the total portfolio value and a chart of historical portfolio values in various currencies. It is built using TypeScript, Vite, and Tailwind CSS.

Crypto Portfolio Tracker Overview

Features

  • Add and Manage Holdings: Users can add, edit, and remove cryptocurrency holdings.
  • Current Portfolio Value: Fetches and displays the current value of the portfolio in the selected currency.
  • Currency Selection: Users can select the currency in which to view the portfolio value (default is USD).
  • Time Interval Selection: Users can select the time interval for viewing the historical portfolio value.
  • Historical Portfolio Value: Displays a chart of the portfolio's value over time.
  • Pie Chart: Visual representation of the portfolio distribution in percentage and USD value.
  • Export Data: Users can export the historical portfolio value data as a CSV file.

Getting Started

Prerequisites

Before you begin, ensure you have the following:

  • Node.js installed on your system.
  • A Quicknode account with the Crypto Market Data API enabled (no longer available).
  • Typescript and ts-node

You can install TypeScript and ts-node globally using the commands below:

npm install -g typescript ts-node

Installation Dependencies

  1. Clone the repository to your local machine:
git clone https://github.com/quiknode-labs/qn-guide-examples.git
  1. Navigate to the project directory:
cd sample-dapps/crypto-portfolio-tracker
  1. Install the necessary dependencies:
npm install

Setting Environment Variables

Rename .env.example to .env and replace the YOUR_QUICKNODE_ENDPOINT placeholder with your Quicknode endpoint that the Crypto Market Data API is enabled.

VITE_QUICKNODE_ENDPOINT="YOUR_QUICKNODE_ENDPOINT"

Please note that while we utilize dotenv for environment variable management, sensitive information like endpoints can still be visible on the frontend. This configuration is not recommended for production environments as-is.

Running the Application

Run the development server:

npm run dev

Open http://localhost:5173/ with your browser to see the application.

Usage

  • Add Holdings: Input the cryptocurrency asset and amount, then click Add.
  • Manage Holdings: Edit or remove holdings as needed.
  • Select Currency: Choose the currency in which to view your portfolio value.
  • Select Time Interval: Choose the time interval for viewing historical portfolio value (e.g., 5 Minutes, 1 Hour, 1 Day).
  • View Current Portfolio Value: The current portfolio value and pie chart are fetched immediately after you add or update assets to your holding.
  • View Historical Portfolio Value: Click Calculate Portfolio Value to fetch the historical values.
  • Export Data: Click Export as CSV to download your historical portfolio value data.

Project Structure

  • src/: Contains the source code for the application.
    • components/: Contains React components.
    • interfaces/: TypeScript interfaces for type definitions.
    • services/: Functions for fetching data from APIs.
    • utils/: Utility functions.
  • public/: Static assets.
  • .env: Environment variables.
  • vite.config.ts: Vite configuration.

API Integration

The application integrates with the following APIs:

  • Quicknode Crypto Market Data API: For fetching current and historical exchange rates.
    • v1/getAssets: Fetch all available assets.
    • v1/getCurrentExchangeRates: Fetch current exchange rates.
    • v1/getHistoricalExchangeRates: Fetch historical exchange rates.

Contributing

Contributions are welcome! Please open an issue or submit a pull request for any changes.

Acknowledgements

  • Quicknode for providing the Crypto Market Data API.
  • CoinAPI for the market data.

Contact

For any inquiries or issues, please contact suysal@quicknode.com.

Conclusion

The Crypto Portfolio Tracker effectively utilizes Crypto Market Data API to provide a functional tool for managing and analyzing cryptocurrency portfolios. This application demonstrates how to integrate real-time and historical market data to track portfolio performance and gain valuable insights.

The features implemented here are just a starting point. You can customize and extend the application to suit your specific needs, whether for personal use, financial analysis, or development of crypto-related projects.