Crypto Tracker

Real-time crypto market monitoring dashboard featuring public API integration and an auto-refresh mechanism.

Tech Stack

• Next.js 14
• CoinGecko API
• SWR / Fetch
• Lucide Icons

1. Data Architecture

This application is designed to deliver up-to-the-minute market data without burdening our own servers. The approach used is Client-side Fetching directly to the CoinGecko API.

2. Technical Implementation

A. API Integration

Data is retrieved from the public CoinGecko markets endpoint. Due to rate limits on the public API, implementing caching and refresh intervals is crucial.

// Simple fetcher example
const fetchCryptoData = async () => {
  const res = await fetch(
    'https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd...'
  );
  if (!res.ok) throw new Error('Failed to fetch');
  return res.json();
};

B. State Management & Auto-Refresh

To ensure data freshness, I utilize the setInterval pattern within useEffect.

• Interval: Data automatically updates every 60 seconds.
• Manual Trigger: Users can force a refresh via a button, which resets the interval timer.
• Loading State: The UI displays a loading skeleton or spinner while data is being fetched (fetching state).

C. Formatting & UI

Numbers are formatted using Intl.NumberFormat for currency (USD/IDR) and percentages, ensuring optimal readability. Price changes (24h change) are color-coded: green for positive, red for negative.

3. Future Development

Moving forward, this tool will be enhanced with the following features:

• Historical Charts using the Recharts library.
• Alert System (browser notifications) when prices hit specific targets.
• Simple Portfolio Calculator.