Build a Lightweight Crypto Price Tracker in 10 MinutesCryptocurrency markets move fast. If you want quick access to price data without heavy desktop apps or bloated browser extensions, a lightweight crypto price tracker can give you real-time (or near-real-time) updates with minimal system impact. This guide shows how to build a simple, efficient, and portable tracker in about 10 minutes using web technologies. It’s suitable for learning, personal use, or as a foundation for more advanced tools.
Why a lightweight tracker?
- Speed: Minimal UI and logic mean faster load and lower latency.
- Low resource use: Small memory/CPU footprint — ideal for low-power devices and quick desktop widgets.
- Simplicity: Easier to maintain and customize than full-featured apps.
- Privacy: You can control which APIs you call and avoid heavy telemetry.
What this tracker will do
- Fetch current prices for a list of cryptocurrencies (e.g., BTC, ETH, LTC).
- Display price, 24h change, and timestamp.
- Auto-refresh at a configurable interval.
- Be small enough to run as a single HTML file (open in any modern browser).
Tools & APIs
- Browser (Chrome, Firefox, Edge, Safari).
- A public crypto price API (example: CoinGecko’s free API — no API key required).
- Basic HTML/CSS/JavaScript.
Project structure
This is a single-file approach. Create a file named tracker.html and paste the code below.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1" /> <title>Lightweight Crypto Price Tracker</title> <style> :root{--bg:#0f1724;--card:#0b1220;--text:#e6eef8;--muted:#9fb0c8;--green:#16a34a;--red:#ef4444} html,body{height:100%;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;background:var(--bg);color:var(--text);display:flex;align-items:center;justify-content:center} .tracker{width:360px;padding:16px;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);box-shadow:0 6px 18px rgba(2,6,23,0.6)} h1{font-size:16px;margin:0 0 12px;color:var(--muted);font-weight:600} .list{display:grid;gap:10px} .row{display:flex;align-items:center;justify-content:space-between;padding:10px;border-radius:8px;background:var(--card);box-shadow:inset 0 -1px 0 rgba(255,255,255,0.02)} .meta{display:flex;gap:10px;align-items:center} .symbol{width:36px;height:36px;border-radius:8px;display:grid;place-items:center;background:rgba(255,255,255,0.03);font-weight:700} .price{font-variant-numeric:tabular-nums;font-weight:700} .change{font-weight:700;padding:6px 8px;border-radius:999px;font-size:13px} .muted{color:var(--muted);font-size:12px} .controls{display:flex;justify-content:space-between;align-items:center;margin-top:12px} .small{font-size:12px;color:var(--muted)} button{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--muted);padding:6px 10px;border-radius:8px;cursor:pointer} </style> </head> <body> <div class="tracker" id="app"> <h1>Lightweight Crypto Price Tracker</h1> <div class="list" id="list"></div> <div class="controls"> <div class="small">Updated: <span id="updated">—</span></div> <div> <button id="refresh">Refresh</button> <button id="toggleAuto">Auto: On</button> </div> </div> </div> <script> // Configuration const coins = ['bitcoin','ethereum','litecoin','chainlink','cardano']; // CoinGecko IDs const vsCurrency = 'usd'; const refreshIntervalMs = 15000; // 15s let autoRefresh = true; let timer = null; // DOM const listEl = document.getElementById('list'); const updatedEl = document.getElementById('updated'); const refreshBtn = document.getElementById('refresh'); const toggleAutoBtn = document.getElementById('toggleAuto'); function fmt(num){ return Number(num).toLocaleString(undefined,{maximumFractionDigits:8}); } function timeNow(){ return new Date().toLocaleTimeString(); } function rowHtml(id, name, symbol, price, change) { const cls = (change === null) ? 'muted' : (change >= 0 ? 'change' : 'change'); const color = (change === null) ? 'var(--muted)' : (change >= 0 ? 'var(--green)' : 'var(--red)'); const sign = (change === null) ? '' : (change >= 0 ? '+' : ''); return ` <div class="row" data-id="${id}"> <div class="meta"> <div class="symbol">${symbol.toUpperCase()}</div> <div> <div style="font-size:13px;font-weight:700">${name}</div> <div class="muted" style="font-size:11px">${vsCurrency.toUpperCase()}</div> </div> </div> <div style="text-align:right"> <div class="price">$${fmt(price)}</div> <div class="muted" style="margin-top:6px"> <span class="change" style="background:transparent;color:${color};padding:0;font-weight:600">${sign}${change === null ? '—' : change.toFixed(2) + '%'}</span> </div> </div> </div> `; } async function fetchPrices() { try { const ids = coins.join(','); const url = `https://api.coingecko.com/api/v3/coins/markets?vs_currency=${vsCurrency}&ids=${encodeURIComponent(ids)}&order=market_cap_desc&price_change_percentage=24h`; const res = await fetch(url); if (!res.ok) throw new Error('Network error'); const data = await res.json(); // Map: id -> {price, change} const byId = {}; for (const item of data) { byId[item.id] = { price: item.current_price, change: item.price_change_percentage_24h }; } // Render listEl.innerHTML = coins.map(id => { const item = byId[id]; const name = item ? (item.name || id) : id; const symbol = item ? (item.symbol || id.slice(0,3)) : id.slice(0,3); const price = item ? item.price : 0; const change = item ? item.change : null; return rowHtml(id, name, symbol, price, change); }).join(''); updatedEl.textContent = timeNow(); } catch (e) { updatedEl.textContent = 'Error'; console.error(e); } } refreshBtn.addEventListener('click', () => fetchPrices()); toggleAutoBtn.addEventListener('click', () => { autoRefresh = !autoRefresh; toggleAutoBtn.textContent = 'Auto: ' + (autoRefresh ? 'On' : 'Off'); if (autoRefresh) startTimer(); else stopTimer(); }); function startTimer(){ stopTimer(); timer = setInterval(fetchPrices, refreshIntervalMs); } function stopTimer(){ if (timer) { clearInterval(timer); timer = null; } } // Init fetchPrices(); if (autoRefresh) startTimer(); </script> </body> </html>
How it works (brief)
- Uses CoinGecko’s public markets endpoint to get current price + 24h change for given coin IDs.
- Minimal CSS for a compact card UI; JS handles fetch, render, and auto-refresh.
- Single-file approach keeps it portable — drop it on a thumb drive or open locally.
Customization ideas (quick)
- Add icons: fetch coin images from the API response (item.image).
- Persist coin list: use localStorage to save user-selected coins.
- Desktop widget: wrap with Electron/TAURI or create a small webview.
- Notifications: add push/toast when price crosses thresholds.
- Rate limiting: adjust refreshIntervalMs to respect API usage.
Notes & best practices
- Public APIs may have rate limits; avoid very short intervals on many coins.
- For production or commercial use, consider authenticated APIs and error/retry logic.
- Keep secrets off the client — don’t embed private API keys in a shipped HTML file.
That’s it — a compact tracker you can run instantly. Want a version with coin selection, desktop notifications, or a server-backed cache?