Crypto Tracker

Overview

Crypto Tracker is a dynamic React-based web application that provides real-time monitoring of the cryptocurrency market. It leverages the CoinGecko API to display live prices, market caps, and 24-hour fluctuations. The application is designed with a seamless user experience in mind, allowing users to search for specific coins, view detailed metrics, and switch between multiple fiat currencies (USD, EUR, THB) on the fly.

Key Features

• Real-Time Data Fetching: Integrates with the CoinGecko REST API to retrieve and display up-to-date cryptocurrency market data.
• Global State Management: Utilizes React Context API to manage global states, such as the selected fiat currency, ensuring seamless UI updates across all components without prop drilling.
• Interactive Data Visualization: Implements React Google Charts to render interactive line graphs, displaying 10-day historical price trends for individual cryptocurrencies.
• Dynamic Search & Filtering: Features an instant search functionality that filters through the fetched coin list in real-time, improving data accessibility for the user.

Challenges & Solutions

Challenge: Handling asynchronous data from a third-party API and formatting it correctly for the charting library. The historical price data from CoinGecko returns raw UNIX timestamps and string prices, which React Google Charts cannot render directly.

Solution: I implemented a robust data transformation logic within a useEffect hook. By mapping over the raw API response, I parsed the UNIX timestamps into native JavaScript Date objects and converted the price strings into floating-point numbers. This transformed array was then seamlessly fed into the Google Charts component, ensuring accurate and responsive visual rendering of the price trends.