6 min read

Overview

Crypto Market Data API, developed by CoinAPI, allows developers to access real-time and historical market data from over 350 exchanges. This guide will walk you through building a Crypto Portfolio Tracker using this API, enabling you to analyze cryptocurrency portfolios effectively. The application will allow users to input their holdings, fetch current and historical exchange rates, and display the total portfolio value along with a historical portfolio value chart.

What You Will Do

• Clone and run a ready-to-use React app from our GitHub repository that utilizes Crypto Market Data API Marketplace Add-on to calculate and display the historical and current market value of a portfolio.

• Learn more about the different methods available on the Crypto Market Data API add-on

What You Will Need

• A QuickNode account with the Crypto Market Data API Marketplace Add-on enabled
• Node.js (version 18.16 or higher) installed on your system.
• Typescript and ts-node - installation instructions are indicated in the guide
• Familiarity with JavaScript or TypeScript

Overview of the Crypto Market Data API Add-on

The Crypto Market Data API provides a suite of endpoints to access various types of cryptocurrency market data. Here are some methods available in this add-on:

• v1/getExchanges: Retrieve a list of supported exchanges.
• v1/getSymbols: Get detailed information about available trading pairs.
• v1/getAssets: Access data on various cryptocurrencies and fiat currencies.
• v1/getCurrentQuotes: Fetch the latest price quotes for specified trading pairs.
• v1/getHistoricalQuotes: Obtain historical price quotes.
• v1/getCurrentOrderBooks: Get current order book snapshots.
• v1/getHistoricalTrades: Retrieve historical trade data.
• v1/getHistoricalExchangeRates: Access historical exchange rates for specified assets.
• v1/getHistoricalOHLCV: Obtain historical open, high, low, close, and volume data.
• v1/getCurrentExchangeRates: Fetch the latest exchange rates for specified assets.

These methods allow developers to build robust applications for crypto wallets, analytics, index providers, brokers, portfolio management, investment, taxes/accounting, research, bot trading, and more. By leveraging the Crypto Market Data API, you can integrate real-time and historical market data into your projects seamlessly.

Within the scope of this guide, we will create a crypto portfolio tracker application using v1/getAssets, v1/getCurrentExchangeRates, and v1/getHistoricalExchangeRates methods.

Setting Up Your Development Environment

Firstly, you need to set up your development environment to build your crypto portfolio tracker app by installing the necessary dependencies and configuring your QuickNode access.

Installing Necessary Tools and Dependencies

Before you begin, make sure you have Node.js installed on your system. If not, download and install it from the official website. Node.js comes with npm (Node Package Manager), which you will use to install other dependencies.

Next, install TypeScript and ts-node globally if you haven't already:

npm install -g typescript ts-node

Setting Up an Endpoint

Before you begin, please note that the Crypto Market Data API is a paid add-on. Please check the details and compare plans based on your needs.

Setting up your endpoint with the Crypto Market Data API is straightforward. If you haven't signed up already, you can create an account here.

Once logged in, navigate to the Endpoints page and click Create an endpoint. This add-on supports endpoints on several chains. You can choose any of these networks, then click Next. Activate the Crypto Market Data API add-on, and finally, click Create Endpoint.

If you already have an endpoint without the add-on, go to the Add-ons page within your endpoint, select the Crypto Market Data API, and activate it.

Once your endpoint is ready, copy the HTTP Provider link and keep it handy, as you'll need it in the next section.

Cloning and Running the Sample App

To streamline the process, we have prepared a sample app that you can clone and run locally. Follow these steps to get started:

1. Start by cloning QuickNode's Guide Examples repository to your local environment.

git clone https://github.com/quiknode-labs/qn-guide-examples.git

2. Navigate to the project directory:

cd sample-dapps/crypto-portfolio-tracker-with-the-crypto-market-data-api

3. Install all the required dependencies.

npm install

4. Rename the .env.example file to .env and update the YOUR_QUICKNODE_ENDPOINT placeholder with your QuickNode endpoint that has the Crypto Market Data API enabled:

VITE_QUICKNODE_ENDPOINT="YOUR_QUICKNODE_ENDPOINT"

Note: Even though we use dotenv to manage environment variables, be aware that sensitive data such as endpoints can still be exposed on the frontend. This setup is not suitable for production environments without additional security measures.

5. Start the development server.

npm run dev

Then, open http://localhost:5173/ in your browser to view the application.

6. Add your holding and calculate your portfolio value.

Working Flow of the App

The app is designed to track and visualize your cryptocurrency portfolio using Crypto Market Data API. Here's a detailed overview of the working flow and the logic behind the app:

1. Fetching and Filtering Assets:

• Initially, the app fetches a list of assets using the v1/getAssets method. This list includes both cryptocurrencies and fiat currencies.

• The assets are then filtered to separate cryptocurrencies from fiat currencies. Cryptocurrencies are identified by a specific attribute (type_is_crypto), allowing the app to distinguish them from regular currencies.

• The filtered list of cryptocurrencies is used to populate the options in the "Add Holding" feature, enabling users to select which cryptocurrencies they want to add to their portfolio.

• Simultaneously, the filtered list of fiat currencies (e.g., USD, EUR) is used as options for the base currency in which the portfolio value will be displayed.

2. User Interaction and Data Fetching:

• Users can input their cryptocurrency holdings by selecting the desired assets and specifying the amount they hold. This input creates their personalized portfolio.

• Then, the app fetches current exchange rates for each cryptocurrency in the portfolio using the v1/getCurrentExchangeRates method.

• In addition to fetching current rates, the app also retrieves historical data for the assets using v1/getHistoricalExchangeRates for generating trends and visualizations that show how the portfolio value has changed over time.

3. Calculating and Displaying Portfolio Value:

• The app calculates the current value of the portfolio by multiplying the amount of each cryptocurrency by its current exchange rate in the selected fiat currency.

• For historical values, the app performs similar calculations using historical exchange rates. This allows users to see how their portfolio's value has evolved over time.

• The calculated values are then displayed as:

  • Pie Chart: Shows the distribution of the portfolio, illustrating the proportion of each cryptocurrency relative to the total portfolio value.
  • Line Chart: Displays the historical value of the portfolio, enabling users to visualize the trends and changes in their portfolio over a specified period.

Additional Ideas with the Crypto Market Data API

Discover what can be built with the Crypto Market Data API in addition to the Crypto Portfolio Tracker we developed in this guide. Here are some innovative and valuable project ideas:

1. Historical Market Data Analyzer: An app that provides detailed historical market data analysis using v1/getHistoricalQuotes, v1/getHistoricalOrderBooks, and v1/getHistoricalOHLCV.

2. Crypto Trading Bot: An app that integrates with automated trading strategies to execute trades using v1/getCurrentQuotes, v1/getCurrentOrderBooks, and v1/getHistoricalTrades.

3. Crypto Arbitrage Finder: An app that identifies arbitrage opportunities across different exchanges by comparing prices using v1/getCurrentQuotes and v1/getCurrentOrderBooks.

Conclusion

In this guide, you have learned about Crypto Market Data API's methods and working flow of the Crypto Portfolio Tracker app. This application demonstrates how to integrate market price data to track portfolio performance and gain valuable insights.

The app built here is 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. Also, you can develop other projects that utilize Crypto Market Data API's methods.

Subscribe to our newsletter for more articles and guides on Web3 and blockchain. If you have any questions or need further assistance, feel free to join our Discord server or provide feedback using the form below. Stay up to date with the latest by following us on Twitter (@QuickNode) and our Telegram announcement channel.

We ❤️ Feedback!

Let us know if you have any feedback or requests for new topics. We'd love to hear from you.