DEV Community

Jaipal bishnoi
Jaipal bishnoi

Posted on Originally published at verityadaily.com

I Built a Live Crypto Ticker Without API Keys — Here's How

The Problem

Every news site showing crypto prices faces the same dilemma: API keys. CoinGecko's free tier throttles hard, CoinMarketCap demands attribution, and the moment your traffic spikes, you're rate-li## The Source: Binance's Public Endpoint

Binance exposes a public 24-hour ticker endpoint requiring no authentication:

const symbols = encodeURIComponent(JSON.stringify(['BTCUSDT', 'ETHUSDT', 'SOLUSDT', 'XRPUSDT']));
fetch(`https://api.binance.com/api/v3/ticker/24hr?symbols=${symbols}`)
Enter fullscreen mode Exit fullscreen mode

That's the entire "API integration." No key. No signup. Public data.## The Fallback Problem (The Part Everyone Skips)

A ticker showing nothing when Binance is blocked by some ISP-level filter is worse than a static one. So the render function has two layers:

function render(data) {
  const el = document.getElementById('priceTicker');
  if (!el) return;
  el.innerHTML = data.map(c => {
    const up = c.pct >= 0;
    return `<span>${c.n} ${fmt(c.price)} <span class="${up ? 'up' : 'down'}">${up ? '' : ''}${Math.abs(c.pct).toFixed(2)}%</span></span>`;
  }).join('');
}
Enter fullscreen mode Exit fullscreen mode

Layer 1: Static fallback prices ship inline with the JS. Users see numbers instantly.
Layer 2: The fetch replaces them with live data when Binance responds.

Users never see an empty bar. Worst case: slightly-stale numbers, clearly rendered.mited into displaying stale numbers.

Here's the setup we shipped instead on our news site: zero API keys, zero rate limits, one 2.1KB JavaScript file.

Top comments (0)