Build a Live Data Dashboard From a Free API (No Backend)

'Dashboard' sounds enterprise; the reality is one HTML file that fetches a URL and draws charts. Public APIs hand out live data for free — weather (Open-Meteo), earthquakes (USGS), crypto prices (CoinGecko, DeFiLlama), exchange rates, air quality. The pattern below works identically for all of them, and it's the foundation for every tracker-style site.

Step 1 — Look at the data before you build

Pick an API and open one of its endpoints directly in your browser. For example, Open-Meteo's forecast endpoint returns weather as JSON — a wall of structured text. You don't need to read it; you need to copy a chunk of it, because showing the AI real data beats describing it.

Step 2 — The build prompt, with evidence attached

Step 3 — Debug with the browser console

If the page is blank, here's the one developer tool worth learning: right-click → Inspect → Console tab. Red text is the error. You don't need to understand it — copy the entire red message into the chat and say 'the dashboard shows nothing, here's the console error'. This solves 90% of failures, which are usually CORS restrictions (the AI will switch you to a CORS-friendly endpoint) or a wrong path into the JSON.

Step 4 — Make it a dashboard, not a chart

Now iterate toward usefulness: add a second chart from another endpoint, a dropdown to switch cities/coins/regions, color-coded stat cards (green when up, red when down), auto-refresh every 5 minutes. Each is one plain-English request. Keep the single-file constraint — it's what keeps this deployable by drag-and-drop.

Step 5 — Understand the one real limitation

This page fetches data when a visitor loads it — it has no memory. It can't show 'price history since I built this' unless the API provides history. The moment you want to accumulate your own historical data daily, you've graduated to the next pattern: a small script on a schedule writing snapshots to a file. That's a cron job, it's one more tutorial's worth of work, and it's how tracker sites build data nobody else has.

Step 6 — Ship it

Upload the file to any host. Free APIs with no key can be called straight from the visitor's browser, so there's nothing else to deploy. If an API requires a key, don't put the key in the page (it's visible to anyone) — that's the signal to use the cron-and-snapshot pattern instead.