Crypto Tracker

Dashboard pemantauan harga aset kripto real-time dengan integrasi API publik dan fitur auto-refresh.

Tech Stack

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

1. Arsitektur Data

Aplikasi ini dirancang untuk memberikan data pasar terkini tanpa membebani server sendiri. Pendekatan yang digunakan adalah Client-side Fetching langsung ke CoinGecko API.

2. Implementasi Teknis

A. Integrasi API

Data diambil dari endpoint publik CoinGecko markets. Karena limitasi rate-limit pada API publik, implementasi caching dan interval refresh sangat krusial.

// Contoh fetcher sederhana
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

Untuk memastikan data tetap segar, saya menggunakan pola setInterval di dalam useEffect.

• Interval: Data diperbarui setiap 60 detik secara otomatis.
• Manual Trigger: User dapat memaksa refresh melalui tombol, yang me-reset timer interval.
• Loading State: UI menampilkan skeleton loading atau spinner saat data sedang diambil (fetching state).

C. Formatting & UI

Angka diformat menggunakan Intl.NumberFormat untuk mata uang (USD/IDR) dan persentase, memastikan keterbacaan yang baik. Perubahan harga (24h change) diberi kode warna: hijau untuk positif, merah untuk negatif.

3. Pengembangan Lanjutan

Ke depannya, tool ini akan dikembangkan dengan fitur:

• Historical Chart menggunakan library Recharts.
• Alert System (notifikasi browser) saat harga menyentuh target tertentu.
• Portfolio Calculator sederhana.