Build Cryptocurrency Portfolio Tracker Using React

Building a Cryptocurrency Portfolio Tracker Using React and CoinAPI

In this article

Getting started
Setting Up Your React App
Retrieving Your Portfolio Data from CoinAPI
Styling Your Portfolio Tracker
Retrieve data at regular intervals

Getting Started with CoinAPI

Before diving into the tutorial, ensure you have:

  • Created a CoinAPI account and obtained an API key
  • Basic familiarity with React and web development

First things first, to make use of CoinAPI, you'll need to create an account and procure an API key. The key is needed to authenticate your application requests. Follow the instructions provided in CoinAPI's Getting Started Guide to set up your account.

Setting Up Your React App

Begin by creating a new React application. You can do this using the create-react-app command or your preferred method.

npx create-react-app coinapi-portfolio-tracker-app

You should have then following project structure:

Project structure

Get into the root of the folder in which package.json resides and check whether project is compiling & starting:

npm start

Successful compilation message

Once your app structure is ready and project successfully compiles, open the App.js file.
Copy and paste the following code into the App.js to see header displaying "CoinAPI Cryptocurrency Portfolio Tracker App".

import React, { useState } from 'react';
function App() {
  return (
    <div className="App">
      <h1>CoinAPI Cryptocurrency Portfolio Tracker App</h1>
    </div>
  );
}
export default App;

Start application again using npm start:

Cryptocurrency portfolio tracker header

Retrieving Your Portfolio Data from CoinAPI

CoinAPI provides the v1/exchangerate/asset_id_base endpoint for fetching the latest exchange rates of your assets.
To request BTC/USD, ETH/USD and XRP/USD exchange rates from CoinAPI, we'll use useEffect hook and axios module to retrive data.
This hook will fetch the exchange rates when the component mounts and then update the portfolio state.
Add following code as part of the App.js:

import React, { useState } from 'react';
 
function App() {
const [portfolio, setPortfolio] = useState([]);
useEffect(() => {
    async function fetchExchangeRates() {
      const assets = ['BTC', 'ETH', 'XRP'];
      const promises = assets.map(asset =>
        axios.get(`https://rest.coinapi.io/v1/exchangerate/${asset}/USD?apikey=YOUR_API_KEY`)
      );
      const responses = await Promise.all(promises);
      const exchangeRates = responses.reduce((acc, response, index) => {
        acc[assets[index]] = response.data.rate;
        return acc;
      }, {});
      setPortfolio(exchangeRates);
    }
    fetchExchangeRates();
  }, []);
 
  return (
    <div className="App">
      <h1>CoinAPI Cryptocurrency Portfolio Tracker App</h1>
    </div>
  );
}
 
export default App;

Note: Make sure to replace YOUR_API_KEY with API key you have obtained via CoinAPI website.

To make exchange rates appear in your web app, update the return part with following code:

return (
    <div className="App">
     <h1>CoinAPI Cryptocurrency Portfolio Tracker App</h1>
     <ul>
        {Object.entries(portfolio).map(([asset, exchangeRate]) => (
          <li key={asset}>{asset}: {exchangeRate}</li>
        ))}
      </ul>
    </div>
  );

Here's the complete App.js code:

import React, { useState, useEffect } from 'react';
import axios from 'axios';
 
function App() {
  const [portfolio, setPortfolio] = useState([]);
  useEffect(() => {
    async function fetchExchangeRates() {
      const assets = ['BTC', 'ETH', 'XRP'];
      const promises = assets.map(asset =>
        axios.get(`https://rest.coinapi.io/v1/exchangerate/${asset}/USD?apikey=YOUR_API_KEY`
      );
      const responses = await Promise.all(promises);
      const exchangeRates = responses.reduce((acc, response, index) => {
        acc[assets[index]] = response.data.rate;
        return acc;
      }, {});
      setPortfolio(exchangeRates);
    }
    fetchExchangeRates();
  }, []);
  
  return (
    <div className="App">
     <h1>CoinAPI Cryptocurrency Portfolio Tracker App</h1>
     <ul>
        {Object.entries(portfolio).map(([asset, exchangeRate]) => (
          <li key={asset}>{asset}: {exchangeRate}</li>
        ))}
      </ul>
    </div>
  );
}
export default App;

Before starting the application, make sure to install axios module via npm install axios command.
Then start the application with npm start and check out the result:

View with fetched data

Styling Your Portfolio Tracker

Having fetched your portfolio data, you can now proceed to style your tracker.
You can use raw CSS or opt for a UI library like Bootstrap or Material UI to enhance the look of your portfolio tracker.
Here we'll use a css styling approach and following classes: portfolio, portfolio-item, asset-name and asset-rate.
Extend GUI part with className attributes values as following:

  return (
    <div className="App">
     <h1>CoinAPI Cryptocurrency Portfolio Tracker App</h1>
     <div className="portfolio">
        {Object.entries(portfolio).map(([asset, exchangeRate]) => (
          <li key={asset} className="portfolio-item">
            <span className="asset-name">{asset}/USD:</span> 
            <span className="asset-rate">{exchangeRate}</span>
          </li>
        ))}
      </div>
    </div>
  );

then update index.css with css class implementation:

.portfolio {
  padding: 1em;
}
 
.portfolio-item {
  display: flex;
  align-items: center;
  font-size: 18px;
  margin-bottom: 10px;
}
 
.asset-name {
  font-weight: bold;
  margin-right: 10px;
  color: #007bff;
}
 
.asset-rate {
  color: #28a745;
}
 
.portfolio-item:hover {
  transform: scale(0.95);
  transition: transform 0.2s ease-in-out;
}

Retrieve data at regular intervals

Rather than repeatedly refreshing the application to obtain the most recent exchange rates, we can enhance it to fetch this data at specified intervals and automatically update the view. To update the exchange rates every 5 seconds, you can use the setInterval function in React.

import React, { useState, useEffect } from 'react';
import axios from 'axios';
 
function App() {
  const [portfolio, setPortfolio] = useState([]);
  useEffect(() => {
    async function fetchExchangeRates() {
      const assets = ['BTC', 'ETH', 'XRP'];
      const promises = assets.map(asset =>
        axios.get(`https://rest.coinapi.io/v1/exchangerate/${asset}/USD?apikey=YOUR_API_KEY`)
      );
      const responses = await Promise.all(promises);
      const exchangeRates = responses.reduce((acc, response, index) => {
        acc[assets[index]] = response.data.rate;
        return acc;
      }, {});
      setPortfolio(exchangeRates);
    }
    fetchExchangeRates();
 
   // Fetch exchange rates every 5 seconds
   const intervalId = setInterval(fetchExchangeRates, 5000);
 
   // Clean up the interval when the component unmounts to avoid memory leaks
   return () => clearInterval(intervalId);
 
  }, []);
 
  return (
    <div className="App">
     <h1>CoinAPI Cryptocurrency Portfolio Tracker App</h1>
     <div className="portfolio">
        {Object.entries(portfolio).map(([asset, exchangeRate]) => (
          <li key={asset} className="portfolio-item">
            <span className="asset-name">{asset}/USD:</span> 
            <span className="asset-rate">{exchangeRate}</span>
          </li>
        ))}
      </div>
    </div>
  );
}
export default App;

By following these steps, you'll create a basic cryptocurrency portfolio tracker using React and CoinAPI.
Styled portfolio

For more information, you can check REST API Exchange Rates docs

If you would like the data to be sent to you in real-time, check our Real-time data visualization with javascript or real-time trades stream using WebSocket with different languages how-to articles.

Happy coding!


Copyright 2022 COINAPI LTD or its affiliates. All rights reserved.
StatusPage: