Build a Real-Time Crypto Tracker with CoinGecko API and React.js

CoinGecko is a comprehensive cryptocurrency data platform that provides real-time and historical data on thousands of cryptocurrencies. It offers a market-tracking website and app for digital currencies. CoinGecko collects data to rank the potential of each coin, benchmarking digital currencies like Bitcoin, Ethereum, and over 6,000 other cryptocurrencies. In short, think of CoinGecko as a library that provides information on various cryptocurrencies. It offers a wide range of information, including price, volume, market capitalization, and more, as seen below: As CoinGecko offers these services, it also extends its capabilities to developers and organizations through its Application Programming Interface (API), allowing them to use the vast amount of available data. This API provides access to real-time and historical data, enabling the creation of applications that can track cryptocurrency prices, analyze market trends, and more. CoinGecko's API offers features and endpoints like Market Data, Historical Data, Exchange Data, Global Data, Trending Coins, NFTs Data, and more. Some of the applications that can be built with CoinGecko's API include: Crypto Tracker Prices Checker Trading Bot Dashboard. In this article, you'll learn how to build a Crypto Tracker using React.js for the User Interface (UI). Prerequisites Basic understanding of JavaScript, ReactJs, and CSS Node.js and npm installed Familiarity with REST APIs Installed the following: Reactjs either Create React App or Vite.js Axios React Router Dom Recharts TailwindCSS or Bootstrap (included in the code) Code Editor Setting up the tracker’s components Clear out App.jsx file to have something like: This file will be handling all the routing. Clear out Index.css and App.css Create a folder inside src folder and name it Component. This will be where the display file for Coins’ details and the Search field will be stored. Create two files inside Component and name them Display.jsx and Search.jsx Create another component under src folder and name it Homepage.jsx Displaying Content To display these components, you will be using the React Router Dom functions such BrowserRouter and Routes and importing them into App.jsx in this manner 👇🏽 import './App.css' import DisplayCoin from './Component/Display

import Homepage from './Homepage

import { BrowserRouter, Route, Routes} from 'react-router-dom'

function App() {

return (

} />

} /> //'/coin/:id' to display the details of coin using its id

) }

export default App Fetching Data from CoinGecko API React Hooks (useState, useEffect) In this tutorial, you will be making use of useState and UseEffect useState: This hook is used for adding state management to functional components. In the context of Homepage.jsx, useState will be used to manage the state of coin or any other data that needs to be displayed or updated in the UI. For example, you will fetch coin data from an API and store it in a state variable so that it can be displayed dynamically in the component.

useEffect: This hook is used for performing side effects in functional components. Side effects could be data fetching, subscriptions, or manually changing the DOM in React components. In this case, useEffect will be used to fetch the coin data from an API when the component mounts. It ensures that the data fetching logic is kept separate from the UI logic, and it can also handle re-fetching data if any dependencies change. Having this understanding, Open Homepage.jsx and import useState and useEffect into the file in this manner👇🏽 import React, { useState, useEffect } from 'react'

const Homepage = () => {

return (

Crypto Tracker

) }

export default Homepage; CoinGecko API Endpoints Coin Data by ID: This endpoint allows you to query all the coin data of a coin (name, price, market .... including exchange tickers) on the CoinGecko coin page based on a particular coin ID. endpoint: https://api.coingecko.com/api/v3/coins/{id} Coin historical Chart Data by ID: This endpoint allows you to get the historical chart data of a coin including time in UNIX, price, market cap and 24hrs volume based on a particular coin id. endpoint: https://api.coingecko.com/api/v3/coins/{id}/market_chart Search Queries: This endpoint allows you to search for coins, categories and markets listed on CoinGecko. endpoint: https://api.coingecko.com/api/v3/search Trending Search List: This endpoint allows you to query trending search coins, nfts and categories on CoinGecko in the last 24 hours.endpoint: https://api.coingecko.com/api/v3/search/trending Fetching Trending Coin To fetch the trending coin, we will be making using axios, useEffect, useState and Trending Search list endpoint. import React, { useState, useEffect } from 'react'

import axios from 'axios'

import { Link } from 'react-router-dom'

const Homepage = () => {

const [trendingCoins, setTrendingCoins] = useState([]);

useEffect(() => { const fetchData = async () => { try { const response = await axios.get('https://api.coingecko.com/api/v3/search/trending'); console.log(response.data);

} catch (error) { console.error(error); } } fetchData(); }, []);

return ( Crypto Tracker )

}

export default Homepage; You will see the response in the console👇🏽 const [trendingCoins, setTrendingCoins] = useState([]); This line initializes a state variable trendingCoins with an empty array. setTrendingCoins is the function used to update this state. The useEffect hook is used to fetch data from an external API (https://api.coingecko.com/api/v3/search/trending) when the component mounts. The empty dependency array [] means this effect runs once after the initial render. Inside useEffect, an asynchronous function fetchData is defined and immediately called. This function uses axios.get to make a GET request to the CoinGecko API to fetch trending coins. If the request is successful, the response data (response.data.coins) is logged to the console and used to update the trendingCoins state with setTrendingCoins. If there's an error during the fetch operation, it's caught in the catch block and logged to the console. From the above picture, you can see the list of Trending Coins, Categories, and NFTs. In this case, you only need the trending coins’ details. To do this, you just need to add setTrendingCoins(response.data.coins); import React, { useState, useEffect } from 'react'

import axios from 'axios'

import { Link } from 'react-router-dom'

const Homepage = () => {

const [trendingCoins, setTrendingCoins] = useState([]);

useEffect(() => { const fetchData = async () => { try { const response = await axios.get('https://api.coingecko.com/api/v3/search/trending'); console.log(response.data);

setTrendingCoins(response.data.coins);

} catch (error) { console.error(error); } } fetchData(); }, []);

return ( Crypto Tracker )

}

export default Homepage; Trending Coin UI import React, { useEffect, useState } from 'react'

import axios from 'axios'

import { Link } from 'react-router-dom';

const Homepage = () => { const [trendingCoins, setTrendingCoins] = useState([]);

useEffect(() => { const fetchData = async () => { try { const response = await axios.get('https://api.coingecko.com/api/v3/search/trending'); console.log(response.data); setTrendingCoins(response.data.coins); } catch (error) { console.error(error); } } fetchData(); }, []);

return (

TRENDING COINS {trendingCoins.map((coin, index) => ( {coin.item.name} Price: ${coin.item.data.price.toFixed(3)}

Market Cap Rank: {coin.item.market_cap_rank}

))}

) }

export default Homepage The trendingCoins state variable, which now holds the API response data, is mapped over to dynamically generate a list of coin elements. For each coin in trendingCoins, the following information is displayed: A link ( ) that navigates to a detailed page for the coin. The to attribute of the link is dynamically set to /coin/${coin.item.id}, where coin.item.id is the unique identifier for each coin. An image of the coin ( ), where src is set to coin.item.thumb, representing the coin's thumbnail image URL, and alt is set to coin.item.name, providing a text alternative for the image. The coin's name ( ), is displayed in a large, bold font. The coin's price ( ), where coin.item.data.price.toFixed(3) formats the price to three decimal places. This indicates that coin.item.data.price is a numerical value representing the coin's current price. The coin's market cap rank ( ), is displayed using coin.item.market_cap_rank. This is a numerical rank indicating the coin's position based on its market capitalization. Styling and Layout The coins are displayed in a responsive grid layout, with styling applied for aesthetics (e.g., rounded corners, shadow, hover effects) and responsiveness (e.g., different column counts for different screen sizes). Coin Chart Data with Price and TimeStamp This is the graphical illustration that shows the changes in prices within one day. To do this Create another file and name Rechart.jsx inside the Component. You will be making use of the: Rechart package. useParam hooks from React Router Dom to access the URL parameters, specifically to get the ID of the cryptocurrency. Coin historical Chart Data by ID endpoint. Inside the file add the following 👇🏽 import React, { useEffect, useState} from 'react' import axios from 'axios' import { useParams } from 'react-router-dom'; import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts';

const Rechart = () => { const params = useParams(); const [graphRes, setGraphRes] = useState([]);

useEffect(() => { const fetchData = async () => {

try {

const response = await axios.get(`https://api.coingecko.com/api/v3/coins/${params.id}/market_chart?vs_currency=usd&days=1`); setGraphRes(response.data.prices.map((item) => { const [timestamp, p] = item;

const date = new Date(timestamp).toLocaleDateString('en-us')

return { Date: date, Price: p, }; })); } catch (error) { console.error(error); } };

fetchData(); }, []);

return (

) }

export default Rechart Data Processing The response from the API contains price data as an array of [timestamp, price] pairs. This data is mapped over to transform it into an array of objects with Date and Price properties, where Date is a formatted date string and Price is the cryptocurrency price. The transformed data is then set to the graphRes state using setGraphRes. Rendering the chart The component returns JSX that renders an AreaChart component from recharts. The AreaChart is configured with a fixed width and height, and it's provided the data from graphRes. Inside the AreaChart, various components configure the appearance and behavior of the chart: CartesianGrid adds a grid to the chart. XAxis and YAxis define the axes of the chart, with Date being used as the data key for the X-axis. Tooltip enables a tooltip that shows information about a data point when hovered. Area defines the area chart itself, specifying that it should be a monotone type for smooth curves, and it sets the data key to Price for plotting, along with stroke and fill colors. Coin Details UI Recall the Display.jsx component you created at the start of this tutorial; this is where the coin details including coin chart data will be shown when a user clicks on any trending coin or searches for a specific coin. In this component, you will be making use of : Rechart Component by importing it useParams Hook. Coin Data by ID endpoint import React, { useEffect, useState} from 'react' import axios from 'axios' import { useParams } from 'react-router-dom'; import Rechart from './Rechart';

const Display = () => { const params = useParams(); const [apiResponse, setApiResponse] = useState([]);

useEffect(() => { const fetchData = async () => { try { const apiResponse = await axios.get(https://api.coingecko.com/api/v3/coins/${params.id}?localization=false); console.log(apiResponse); setApiResponse(apiResponse) } catch (error) { console.error(error); }

};

fetchData(); }, []); return ( {apiResponse.data && ( {apiResponse.data.name} DETAILs Currency {apiResponse.data.symbol}

Market Cap Rank {apiResponse.data.market_cap_rank}

Market Cap ${apiResponse.data.market_data.market_cap.usd}

Total Supply {apiResponse.data.market_data.total_supply}

Circulating Supply {apiResponse.data.market_data.circulating_supply}

Max Supply {apiResponse.data.market_data.max_supply}

) } ) }

export default Display Fetching Coin Details Makes asynchronous GET request to fetch detailed information about the cryptocurrency using Coin Data by ID endpoint. The URL includes a query parameter for disabling localization and a demo API key. So when the users click on any coin, they should see a UI like this 👇🏽 Search field Here, the user will be able to search for any cryptocurrencies and there will be list of cryptocurrencies related to the inputed text. For this functionality, you will be using: Search Queries Javascript Debounce functionality Add the following code to the file👇🏽 import React, { useEffect, useState } from 'react'; import axios from 'axios'; import { Link } from 'react-router-dom';

const Search = () => { const [apiResponse, setApiResponse] = useState(null); const [search, setSearch] = useState('');

const debounce = (func, delay) => { let inDebounce; return function() { const context = this; const args = arguments; clearTimeout(inDebounce); inDebounce = setTimeout(() => func.apply(context, args), delay); }; };

const debouncedSearch = debounce(handleSearch, 500);

useEffect(() => { debouncedSearch(); }, [search]);

return ( setSearch(e.target.value)} className="w-full h-12 my-4 p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" /> {apiResponse && ( {apiResponse.coins.map((coin, index) => ( {coin.name} ) )} )} );

};

export default Search; State Management: It uses the useState hook to manage: apiResponse: Stores the response from the CoinGecko API. search: Stores the current value of the search input field. Debounce Function: A debounce function is defined to limit the rate at which a function (handleSearch) is executed. This is use to optimizing performance and reducing the number of API calls made while typing in the search input. handleSearch Function: This asynchronous function is triggered to call the CoinGecko API. It checks if the search state is not empty, then makes a GET request to the CoinGecko API with the search query. The response is logged to the console and stored in the apiResponse state. If an error occurs, it's logged to the console. Debounced Search: The debounce function is applied to handleSearch with a 500ms delay, creating a new function debouncedSearch. This means handleSearch will only be called if there's a 500ms pause in invoking debouncedSearch, effectively reducing the number of API calls during rapid typing. useEffect Hook: React's useEffect hook is used to call debouncedSearch whenever the search state changes. This means the API call will be made 500ms after the user stops typing. Rendering: The component renders: An input field for the user to type their search query. The input's value is bound to the search state, and it updates the search state on change. A conditional block that checks if apiResponse is not null. If true, it maps over apiResponse.coins and renders a list of coins. Each coin is wrapped in a Link component for navigation, with the coin's name displayed as a link. After import the Search component into your Homepage.jsx, Congratulations, You have successfully built your own crypto Tracker🍾👏🏽 Conclusion In this article, you learned about the CoinGecko API, including its key features and endpoints, and how to use Axios to fetch data. You also explored examples of applications you can build with the API and followed a step-by-step guide to creating a complete application. Further Resources CoinGecko Documentation Building a crypto price app in React More features in the Crypto Tracker If you find this article helpful, let me know in the comment section, like✅, share 🛂 and follow 🚶🏽♂️for more. CoinGecko is a comprehensive cryptocurrency data platform that provides real-time and historical data on thousands of cryptocurrencies. It offers a market-tracking website and app for digital currencies. CoinGecko collects data to rank the potential of each coin, benchmarking digital currencies like Bitcoin , Ethereum , and over 6,000 other cryptocurrencies. In short, think of CoinGecko as a library that provides information on various cryptocurrencies. It offers a wide range of information, including price, volume, market capitalization, and more, as seen below: CoinGecko Bitcoin Ethereum As CoinGecko offers these services, it also extends its capabilities to developers and organizations through its Application Programming Interface (API) , allowing them to use the vast amount of available data. This API provides access to real-time and historical data, enabling the creation of applications that can track cryptocurrency prices, analyze market trends, and more. Application Programming Interface (API) Application Programming Interface (API) CoinGecko's API offers features and endpoints like Market Data, Historical Data, Exchange Data, Global Data, Trending Coins, NFTs Data, and more. Some of the applications that can be built with CoinGecko's API include: Some of the applications that can be built with CoinGecko's API include: Crypto Tracker Prices Checker Trading Bot Dashboard. Crypto Tracker Prices Checker Trading Bot Dashboard. In this article, you'll learn how to build a Crypto Tracker using React.js for the User Interface (UI). In this article, you'll learn how to build a Crypto Tracker using React.js React.js for the User Interface (UI). Prerequisites Basic understanding of JavaScript, ReactJs, and CSS Node.js and npm installed Familiarity with REST APIs Basic understanding of JavaScript, ReactJs, and CSS Node.js and npm installed Familiarity with REST APIs Installed the following: Reactjs either Create React App or Vite.js Axios React Router Dom Recharts TailwindCSS or Bootstrap (included in the code) Code Editor Reactjs either Create React App or Vite.js Create React App Vite.js Axios Axios React Router Dom React Router Dom Recharts Recharts TailwindCSS or Bootstrap (included in the code) TailwindCSS Bootstrap Code Editor Setting up the tracker’s components Clear out App.jsx file to have something like: This file will be handling all the routing. Clear out Index.css and App.css Create a folder inside src folder and name it Component. This will be where the display file for Coins’ details and the Search field will be stored. Create two files inside Component and name them Display.jsx and Search.jsx Clear out App.jsx file to have something like: This file will be handling all the routing. App.jsx This file will be handling all the routing. Clear out Index.css and App.css Index.css App.css Create a folder inside src folder and name it Component . This will be where the display file for Coins’ details and the Search field will be stored. src Component Create two files inside Component and name them Display.jsx and Search.jsx Component Display.jsx Search.jsx Create another component under src folder and name it Homepage.jsx Create another component under src folder and name it Homepage.jsx src Homepage.jsx Displaying Content To display these components, you will be using the React Router Dom functions such BrowserRouter and Routes and importing them into App.jsx in this manner 👇🏽 App.jsx import './App.css' import DisplayCoin from './Component/Display

import Homepage from './Homepage

import { BrowserRouter, Route, Routes} from 'react-router-dom'

function App() {

return (

} />

} /> //'/coin/:id' to display the details of coin using its id

) }

export default App import './App.css' import DisplayCoin from './Component/Display

import Homepage from './Homepage

import { BrowserRouter, Route, Routes} from 'react-router-dom'

function App() {

return (

} />

} /> //'/coin/:id' to display the details of coin using its id

) }

export default App Fetching Data from CoinGecko API React Hooks (useState, useEffect) In this tutorial, you will be making use of useState and UseEffect In this tutorial, you will be making use of useState and UseEffect useState: This hook is used for adding state management to functional components. In the context of Homepage.jsx, useState will be used to manage the state of coin or any other data that needs to be displayed or updated in the UI. For example, you will fetch coin data from an API and store it in a state variable so that it can be displayed dynamically in the component. useEffect: This hook is used for performing side effects in functional components. Side effects could be data fetching, subscriptions, or manually changing the DOM in React components. In this case, useEffect will be used to fetch the coin data from an API when the component mounts. It ensures that the data fetching logic is kept separate from the UI logic, and it can also handle re-fetching data if any dependencies change. useState : This hook is used for adding state management to functional components. In the context of Homepage.jsx , useState will be used to manage the state of coin or any other data that needs to be displayed or updated in the UI. For example, you will fetch coin data from an API and store it in a state variable so that it can be displayed dynamically in the component. useState Homepage.jsx useState coin useEffect : This hook is used for performing side effects in functional components. Side effects could be data fetching, subscriptions, or manually changing the DOM in React components. In this case, useEffect will be used to fetch the coin data from an API when the component mounts. It ensures that the data fetching logic is kept separate from the UI logic, and it can also handle re-fetching data if any dependencies change. useEffect useEffect Having this understanding, Open Homepage.jsx and import useState and useEffect into the file in this manner👇🏽 Homepage.jsx useState useEffect import React, { useState, useEffect } from 'react'

const Homepage = () => {

return (

Crypto Tracker

) }

export default Homepage; import React, { useState, useEffect } from 'react'

const Homepage = () => {

return (

Crypto Tracker

) }

export default Homepage; CoinGecko API Endpoints Coin Data by ID: This endpoint allows you to query all the coin data of a coin (name, price, market .... including exchange tickers) on the CoinGecko coin page based on a particular coin ID. endpoint: https://api.coingecko.com/api/v3/coins/{id} Coin historical Chart Data by ID: This endpoint allows you to get the historical chart data of a coin including time in UNIX, price, market cap and 24hrs volume based on a particular coin id. endpoint: https://api.coingecko.com/api/v3/coins/{id}/market_chart Search Queries: This endpoint allows you to search for coins, categories and markets listed on CoinGecko. endpoint: https://api.coingecko.com/api/v3/search Trending Search List: This endpoint allows you to query trending search coins, nfts and categories on CoinGecko in the last 24 hours.endpoint: https://api.coingecko.com/api/v3/search/trending Coin Data by ID: This endpoint allows you to query all the coin data of a coin (name, price, market .... including exchange tickers) on the CoinGecko coin page based on a particular coin ID . Coin Data by ID: query all the coin data of a coin (name, price, market .... including exchange tickers) on the CoinGecko coin page based on a particular coin ID endpoint : https://api.coingecko.com/api/v3/coins/{id} endpoint Coin historical Chart Data by ID: This endpoint allows you to get the historical chart data of a coin including time in UNIX, price, market cap and 24hrs volume based on a particular coin id . Coin historical Chart Data by ID: get the historical chart data of a coin including time in UNIX, price, market cap and 24hrs volume based on a particular coin id endpoint: https://api.coingecko.com/api/v3/coins/{id}/market_chart endpoint: Search Queries: This endpoint allows you to search for coins, categories and markets listed on CoinGecko . Search Queries: search for coins, categories and markets listed on CoinGecko endpoint: https://api.coingecko.com/api/v3/search endpoint: Trending Search List: This endpoint allows you to query trending search coins, nfts and categories on CoinGecko in the last 24 hours . endpoint : https://api.coingecko.com/api/v3/search/trending Trending Search List: query trending search coins, nfts and categories on CoinGecko in the last 24 hours endpoint Fetching Trending Coin To fetch the trending coin, we will be making using axios , useEffect , useState and Trending Search list endpoint. axios useEffect useState import React, { useState, useEffect } from 'react'

import axios from 'axios'

import { Link } from 'react-router-dom'

const Homepage = () => {

const [trendingCoins, setTrendingCoins] = useState([]);

useEffect(() => { const fetchData = async () => { try { const response = await axios.get('https://api.coingecko.com/api/v3/search/trending'); console.log(response.data);

} catch (error) { console.error(error); } } fetchData(); }, []);

return ( Crypto Tracker )

}

export default Homepage; import React, { useState, useEffect } from 'react'

import axios from 'axios'

import { Link } from 'react-router-dom'

const Homepage = () => {

const [trendingCoins, setTrendingCoins] = useState([]);

useEffect(() => { const fetchData = async () => { try { const response = await axios.get('https://api.coingecko.com/api/v3/search/trending'); console.log(response.data);

} catch (error) { console.error(error); } } fetchData(); }, []);

return ( Crypto Tracker )

}

export default Homepage; You will see the response in the console👇🏽 You will see the response in the console👇🏽 const [trendingCoins, setTrendingCoins] = useState([]); This line initializes a state variable trendingCoins with an empty array. setTrendingCoins is the function used to update this state. The useEffect hook is used to fetch data from an external API (https://api.coingecko.com/api/v3/search/trending) when the component mounts. The empty dependency array [] means this effect runs once after the initial render. Inside useEffect, an asynchronous function fetchData is defined and immediately called. This function uses axios.get to make a GET request to the CoinGecko API to fetch trending coins. If the request is successful, the response data (response.data.coins) is logged to the console and used to update the trendingCoins state with setTrendingCoins. If there's an error during the fetch operation, it's caught in the catch block and logged to the console. const [trendingCoins, setTrendingCoins] = useState([]); const [trendingCoins, setTrendingCoins] = useState([]); This line initializes a state variable trendingCoins with an empty array. setTrendingCoins is the function used to update this state. trendingCoins setTrendingCoins The useEffect hook is used to fetch data from an external API ( https://api.coingecko.com/api/v3/search/trending ) when the component mounts. The empty dependency array [] means this effect runs once after the initial render. useEffect https://api.coingecko.com/api/v3/search/trending [] Inside useEffect , an asynchronous function fetchData is defined and immediately called. This function uses axios.get to make a GET request to the CoinGecko API to fetch trending coins. useEffect fetchData axios.get If the request is successful, the response data ( response.data.coins ) is logged to the console and used to update the trendingCoins state with setTrendingCoins . response.data.coins trendingCoins setTrendingCoins If there's an error during the fetch operation, it's caught in the catch block and logged to the console. From the above picture, you can see the list of Trending Coins, Categories, and NFTs. In this case, you only need the trending coins’ details. To do this, you just need to add setTrendingCoins(response.data.coins); setTrendingCoins(response.data.coins); import React, { useState, useEffect } from 'react'

import axios from 'axios'

import { Link } from 'react-router-dom'

const Homepage = () => {

const [trendingCoins, setTrendingCoins] = useState([]);

useEffect(() => { const fetchData = async () => { try { const response = await axios.get('https://api.coingecko.com/api/v3/search/trending'); console.log(response.data);

setTrendingCoins(response.data.coins);

} catch (error) { console.error(error); } } fetchData(); }, []);

return ( Crypto Tracker )

}

export default Homepage; import React, { useState, useEffect } from 'react'

import axios from 'axios'

import { Link } from 'react-router-dom'

const Homepage = () => {

const [trendingCoins, setTrendingCoins] = useState([]);

useEffect(() => { const fetchData = async () => { try { const response = await axios.get('https://api.coingecko.com/api/v3/search/trending'); console.log(response.data);

setTrendingCoins(response.data.coins);

} catch (error) { console.error(error); } } fetchData(); }, []);

return ( Crypto Tracker )

}

export default Homepage; Trending Coin UI import React, { useEffect, useState } from 'react'

import axios from 'axios'

import { Link } from 'react-router-dom';

const Homepage = () => { const [trendingCoins, setTrendingCoins] = useState([]);

useEffect(() => { const fetchData = async () => { try { const response = await axios.get('https://api.coingecko.com/api/v3/search/trending'); console.log(response.data); setTrendingCoins(response.data.coins); } catch (error) { console.error(error); } } fetchData(); }, []);

return (

TRENDING COINS {trendingCoins.map((coin, index) => ( {coin.item.name} Price: ${coin.item.data.price.toFixed(3)}

Market Cap Rank: {coin.item.market_cap_rank}

))}

) }

export default Homepage import React, { useEffect, useState } from 'react'

import axios from 'axios'

import { Link } from 'react-router-dom';

const Homepage = () => { const [trendingCoins, setTrendingCoins] = useState([]);

useEffect(() => { const fetchData = async () => { try { const response = await axios.get('https://api.coingecko.com/api/v3/search/trending'); console.log(response.data); setTrendingCoins(response.data.coins); } catch (error) { console.error(error); } } fetchData(); }, []);

return (

TRENDING COINS {trendingCoins.map((coin, index) => ( {coin.item.name} Price: ${coin.item.data.price.toFixed(3)}

Market Cap Rank: {coin.item.market_cap_rank}

))}

) }

export default Homepage The trendingCoins state variable, which now holds the API response data, is mapped over to dynamically generate a list of coin elements. For each coin in trendingCoins , the following information is displayed: The trendingCoins state variable, which now holds the API response data, is mapped over to dynamically generate a list of coin elements. For each coin in trendingCoins , the following information is displayed: A link ( ) that navigates to a detailed page for the coin. The to attribute of the link is dynamically set to /coin/${coin.item.id}, where coin.item.id is the unique identifier for each coin. An image of the coin ( ), where src is set to coin.item.thumb, representing the coin's thumbnail image URL, and alt is set to coin.item.name, providing a text alternative for the image. The coin's name ( ), is displayed in a large, bold font. The coin's price ( ), where coin.item.data.price.toFixed(3) formats the price to three decimal places. This indicates that coin.item.data.price is a numerical value representing the coin's current price. The coin's market cap rank ( ), is displayed using coin.item.market_cap_rank. This is a numerical rank indicating the coin's position based on its market capitalization. A link ( ) that navigates to a detailed page for the coin. The to attribute of the link is dynamically set to /coin/${coin.item.id} , where coin.item.id is the unique identifier for each coin. to /coin/${coin.item.id} coin.item.id An image of the coin ( ), where src is set to coin.item.thumb , representing the coin's thumbnail image URL, and alt is set to coin.item.name , providing a text alternative for the image. src coin.item.thumb alt coin.item.name The coin's name ( ), is displayed in a large, bold font. The coin's price ( ), where coin.item.data.price.toFixed(3) formats the price to three decimal places. This indicates that coin.item.data.price is a numerical value representing the coin's current price. coin.item.data.price.toFixed(3) coin.item.data.price The coin's market cap rank ( ), is displayed using coin.item.market_cap_rank . This is a numerical rank indicating the coin's position based on its market capitalization. coin.item.market_cap_rank Styling and Layout Styling and Layout The coins are displayed in a responsive grid layout, with styling applied for aesthetics (e.g., rounded corners, shadow, hover effects) and responsiveness (e.g., different column counts for different screen sizes). Coin Chart Data with Price and TimeStamp This is the graphical illustration that shows the changes in prices within one day. To do this Create another file and name Rechart.jsx inside the Component. Rechart.jsx You will be making use of the: You will be making use of the: Rechart package. useParam hooks from React Router Dom to access the URL parameters, specifically to get the ID of the cryptocurrency. Coin historical Chart Data by ID endpoint. Rechart package . Rechart package useParam hooks from React Router Dom to access the URL parameters, specifically to get the ID of the cryptocurrency. useParam React Router Dom Coin historical Chart Data by ID endpoint. Coin historical Chart Data by ID endpoint. Inside the file add the following 👇🏽 import React, { useEffect, useState} from 'react' import axios from 'axios' import { useParams } from 'react-router-dom'; import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts';

const Rechart = () => { const params = useParams(); const [graphRes, setGraphRes] = useState([]);

useEffect(() => { const fetchData = async () => {

try {

const response = await axios.get(`https://api.coingecko.com/api/v3/coins/${params.id}/market_chart?vs_currency=usd&days=1`); setGraphRes(response.data.prices.map((item) => { const [timestamp, p] = item;

const date = new Date(timestamp).toLocaleDateString('en-us')

return { Date: date, Price: p, }; })); } catch (error) { console.error(error); } };

fetchData(); }, []);

return (

) }

export default Rechart import React, { useEffect, useState} from 'react' import axios from 'axios' import { useParams } from 'react-router-dom'; import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts';

const Rechart = () => { const params = useParams(); const [graphRes, setGraphRes] = useState([]);

useEffect(() => { const fetchData = async () => {

try {

const response = await axios.get(`https://api.coingecko.com/api/v3/coins/${params.id}/market_chart?vs_currency=usd&days=1`); setGraphRes(response.data.prices.map((item) => { const [timestamp, p] = item;

const date = new Date(timestamp).toLocaleDateString('en-us')

return { Date: date, Price: p, }; })); } catch (error) { console.error(error); } };

fetchData(); }, []);

return (

) }

export default Rechart Data Processing Data Processing The response from the API contains price data as an array of [timestamp, price] pairs. This data is mapped over to transform it into an array of objects with Date and Price properties, where Date is a formatted date string and Price is the cryptocurrency price. The transformed data is then set to the graphRes state using setGraphRes. The response from the API contains price data as an array of [timestamp, price] pairs. [timestamp, price] This data is mapped over to transform it into an array of objects with Date and Price properties, where Date is a formatted date string and Price is the cryptocurrency price. Date Price Date Price The transformed data is then set to the graphRes state using setGraphRes . graphRes setGraphRes Rendering the chart Rendering the chart The component returns JSX that renders an AreaChart component from recharts. The AreaChart is configured with a fixed width and height, and it's provided the data from graphRes. Inside the AreaChart, various components configure the appearance and behavior of the chart: CartesianGrid adds a grid to the chart. XAxis and YAxis define the axes of the chart, with Date being used as the data key for the X-axis. Tooltip enables a tooltip that shows information about a data point when hovered. Area defines the area chart itself, specifying that it should be a monotone type for smooth curves, and it sets the data key to Price for plotting, along with stroke and fill colors. The component returns JSX that renders an AreaChart component from recharts . AreaChart recharts The AreaChart is configured with a fixed width and height, and it's provided the data from graphRes . AreaChart graphRes Inside the AreaChart , various components configure the appearance and behavior of the chart: AreaChart CartesianGrid adds a grid to the chart. CartesianGrid XAxis and YAxis define the axes of the chart, with Date being used as the data key for the X-axis. XAxis YAxis Date Tooltip enables a tooltip that shows information about a data point when hovered. Tooltip Area defines the area chart itself, specifying that it should be a monotone type for smooth curves, and it sets the data key to Price for plotting, along with stroke and fill colors. Area Price Coin Details UI Recall the Display.jsx component you created at the start of this tutorial; this is where the coin details including coin chart data will be shown when a user clicks on any trending coin or searches for a specific coin. Display.jsx In this component, you will be making use of : Rechart Component by importing it useParams Hook. Coin Data by ID endpoint Rechart Component by importing it Rechart Component useParams Hook . useParams Hook Coin Data by ID endpoint import React, { useEffect, useState} from 'react' import axios from 'axios' import { useParams } from 'react-router-dom'; import Rechart from './Rechart';

const Display = () => { const params = useParams(); const [apiResponse, setApiResponse] = useState([]);

useEffect(() => { const fetchData = async () => { try { const apiResponse = await axios.get(https://api.coingecko.com/api/v3/coins/${params.id}?localization=false); console.log(apiResponse); setApiResponse(apiResponse) } catch (error) { console.error(error); }

};

fetchData(); }, []); return ( {apiResponse.data && ( {apiResponse.data.name} DETAILs Currency {apiResponse.data.symbol}

Market Cap Rank {apiResponse.data.market_cap_rank}

Market Cap ${apiResponse.data.market_data.market_cap.usd}

Total Supply {apiResponse.data.market_data.total_supply}

Circulating Supply {apiResponse.data.market_data.circulating_supply}

Max Supply {apiResponse.data.market_data.max_supply}

) } ) }

export default Display import React, { useEffect, useState} from 'react' import axios from 'axios' import { useParams } from 'react-router-dom'; import Rechart from './Rechart';

const Display = () => { const params = useParams(); const [apiResponse, setApiResponse] = useState([]);

useEffect(() => { const fetchData = async () => { try { const apiResponse = await axios.get(https://api.coingecko.com/api/v3/coins/${params.id}?localization=false); console.log(apiResponse); setApiResponse(apiResponse) } catch (error) { console.error(error); }

};

fetchData(); }, []); return ( {apiResponse.data && ( {apiResponse.data.name} DETAILs Currency {apiResponse.data.symbol}

Market Cap Rank {apiResponse.data.market_cap_rank}

Market Cap ${apiResponse.data.market_data.market_cap.usd}

Total Supply {apiResponse.data.market_data.total_supply}

Circulating Supply {apiResponse.data.market_data.circulating_supply}

Max Supply {apiResponse.data.market_data.max_supply}

) } ) }

export default Display Fetching Coin Details Fetching Coin Details Makes asynchronous GET request to fetch detailed information about the cryptocurrency using Coin Data by ID endpoint. The URL includes a query parameter for disabling localization and a demo API key. So when the users click on any coin, they should see a UI like this 👇🏽 Search field Here, the user will be able to search for any cryptocurrencies and there will be list of cryptocurrencies related to the inputed text. For this functionality, you will be using: Search Queries Javascript Debounce functionality Search Queries Search Queries Javascript Debounce functionality Javascript Debounce functionality Add the following code to the file👇🏽 import React, { useEffect, useState } from 'react'; import axios from 'axios'; import { Link } from 'react-router-dom';

const Search = () => { const [apiResponse, setApiResponse] = useState(null); const [search, setSearch] = useState('');

const debounce = (func, delay) => { let inDebounce; return function() { const context = this; const args = arguments; clearTimeout(inDebounce); inDebounce = setTimeout(() => func.apply(context, args), delay); }; };

const debouncedSearch = debounce(handleSearch, 500);

useEffect(() => { debouncedSearch(); }, [search]);

return ( setSearch(e.target.value)} className="w-full h-12 my-4 p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" /> {apiResponse && ( {apiResponse.coins.map((coin, index) => ( {coin.name} ) )} )} );

};

export default Search; import React, { useEffect, useState } from 'react'; import axios from 'axios'; import { Link } from 'react-router-dom';

const Search = () => { const [apiResponse, setApiResponse] = useState(null); const [search, setSearch] = useState('');

const debounce = (func, delay) => { let inDebounce; return function() { const context = this; const args = arguments; clearTimeout(inDebounce); inDebounce = setTimeout(() => func.apply(context, args), delay); }; };

const debouncedSearch = debounce(handleSearch, 500);

useEffect(() => { debouncedSearch(); }, [search]);

return ( setSearch(e.target.value)} className="w-full h-12 my-4 p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" /> {apiResponse && ( {apiResponse.coins.map((coin, index) => ( {coin.name} ) )} )} );

};

export default Search; State Management: It uses the useState hook to manage: State Management : It uses the useState hook to manage: State Management useState apiResponse: Stores the response from the CoinGecko API. search: Stores the current value of the search input field. apiResponse : Stores the response from the CoinGecko API. apiResponse search : Stores the current value of the search input field. search Debounce Function: A debounce function is defined to limit the rate at which a function (handleSearch) is executed. This is use to optimizing performance and reducing the number of API calls made while typing in the search input. handleSearch Function: This asynchronous function is triggered to call the CoinGecko API. It checks if the search state is not empty, then makes a GET request to the CoinGecko API with the search query. The response is logged to the console and stored in the apiResponse state. If an error occurs, it's logged to the console. Debounced Search: The debounce function is applied to handleSearch with a 500ms delay, creating a new function debouncedSearch. This means handleSearch will only be called if there's a 500ms pause in invoking debouncedSearch, effectively reducing the number of API calls during rapid typing. useEffect Hook: React's useEffect hook is used to call debouncedSearch whenever the search state changes. This means the API call will be made 500ms after the user stops typing. Rendering: The component renders: Debounce Function : A debounce function is defined to limit the rate at which a function ( handleSearch ) is executed. This is use to optimizing performance and reducing the number of API calls made while typing in the search input. Debounce Function debounce handleSearch handleSearch Function : This asynchronous function is triggered to call the CoinGecko API. It checks if the search state is not empty, then makes a GET request to the CoinGecko API with the search query. The response is logged to the console and stored in the apiResponse state. If an error occurs, it's logged to the console. handleSearch Function search apiResponse Debounced Search : The debounce function is applied to handleSearch with a 500ms delay, creating a new function debouncedSearch . This means handleSearch will only be called if there's a 500ms pause in invoking debouncedSearch , effectively reducing the number of API calls during rapid typing. Debounced Search debounce handleSearch debouncedSearch handleSearch debouncedSearch useEffect Hook : React's useEffect hook is used to call debouncedSearch whenever the search state changes. This means the API call will be made 500ms after the user stops typing. useEffect Hook useEffect debouncedSearch search Rendering : The component renders: Rendering An input field for the user to type their search query. The input's value is bound to the search state, and it updates the search state on change. A conditional block that checks if apiResponse is not null. If true, it maps over apiResponse.coins and renders a list of coins. Each coin is wrapped in a Link component for navigation, with the coin's name displayed as a link. An input field for the user to type their search query. The input's value is bound to the search state, and it updates the search state on change. search search A conditional block that checks if apiResponse is not null. If true, it maps over apiResponse.coins and renders a list of coins. Each coin is wrapped in a Link component for navigation, with the coin's name displayed as a link. apiResponse apiResponse.coins Link After import the Search component into your Homepage.jsx , Homepage.jsx Congratulations, You have successfully built your own crypto Tracker🍾👏🏽 Conclusion In this article, you learned about the CoinGecko API, including its key features and endpoints, and how to use Axios to fetch data. You also explored examples of applications you can build with the API and followed a step-by-step guide to creating a complete application. Further Resources CoinGecko Documentation CoinGecko Documentation CoinGecko Documentation Building a crypto price app in React Building a crypto price app in React Building a crypto price app in React More features in the Crypto Tracker More features in the Crypto Tracker More features in the Crypto Tracker If you find this article helpful, let me know in the comment section, like✅, share 🛂 and follow 🚶🏽♂️for more.