I recently built Radio Balkan — a single-page web player that puts 750+ Balkan radio stations in one place: no ads, no sign-up, no cookie banners. It's my first "real" shipped project, and the journey taught me more than any tutorial. Here are the parts I think other devs will find useful.

The stack (deliberately boring)

• One static HTML file for the app — vanilla HTML/CSS/JS, no framework.
• Supabase (Postgres + REST) as the station database.
• Netlify for hosting + free SSL.
• A small Node script that generates the SEO pages.

No build step, no SPA framework. The whole thing loads fast and is trivial to deploy (drag a folder onto Netlify).

SEO-first: the thing competitors get wrong

Most existing radio sites are JavaScript SPAs. Open the page source and there's… nothing — the content is rendered client-side. Google can execute JS, but it's slower and less reliable, and crucially: there are no crawlable per-station pages to rank.

So I went the other way. A Node script pulls every station from Supabase and generates 500+ static HTML pages — one per station, country and genre — plus sitemap.xml. Each page is real HTML with the content right there.

// for each station -> write a static, crawlable page
fs.writeFileSync(`radio/${slug}/index.html`, stationPage(station));

Within days the site was indexed and getting its first organic clicks. Static pages beat a bigger-but-invisible catalog.

Supabase + RLS: public, but safe

The browser talks to Supabase directly with the anon key, which is fine if Row Level Security is set up right:

• stations → public read only.
• submissions (user-suggested stations) → insert only, no select policy, so nobody can read others' submissions.
• The service_role key never ships to the client — it's only used locally for seeding.

Public anon key + correct RLS = a serverless backend with no backend code.

The lesson that cost me the most: curl lies about audio

I imported a batch of stations and validated each stream like this:

curl -s -o /dev/null -w "%{http_code} %{content_type}" -r 0-1 "$URL"
# 200 audio/mpeg  ... right?

200 audio/mpeg looked like a pass. It wasn't. Plenty of those streams returned a clean 200 to curl but refused to play in a browser. curl checks that bytes come back; it does not check that a browser's <audio> element can actually decode and play them.

So I tested them the only way that's truthful — real playback in a headless browser:

function canPlay(url, ms = 14000) {
  return new Promise(resolve => {
    const a = new Audio();
    a.preload = 'auto';
    const done = r => { a.src = ''; resolve(r); };
    a.addEventListener('canplay',    () => done('OK'));
    a.addEventListener('loadeddata', () => done('OK'));
    a.addEventListener('error',      () => done('ERR' + (a.error && a.error.code)));
    a.src = url; a.load();
    setTimeout(() => done('TIMEOUT'), ms);
  });
}

Three things this caught that curl never could:

1. Icecast root mounts often need a trailing ;. https://host:9152/ threw MediaError code 4 (source not supported), but https://host:9152/; played perfectly. That semicolon is an old SHOUTcast/Icecast trick to force the audio mount instead of a status page.
2. Some codecs just don't play in <audio>. A whole CDN's worth of HE-AAC / Opus streams returned 200 to curl but timed out in the browser — they never reached canplay.
3. Use a generous timeout. My first pass used 8s and produced ~12 false negatives — working streams that are just slow to buffer. At 14s they all passed. Don't disable a station on one short timeout.

Takeaway: if your product's core action is "media plays in a browser," validate it in a browser. An HTTP status code is not playback.

A visualizer without breaking playback (CORS)

I wanted an audio visualizer (Web Audio AnalyserNode), but that needs crossOrigin = "anonymous", which fails on the ~30% of streams that don't send CORS headers. The fix: two audio elements.

• fxAudio — crossOrigin = "anonymous", routed through the Web Audio graph (visualizer works).
• plainAudio — no CORS, the fallback that always plays.

Try fxAudio first; on failure, cache that the station has no CORS and replay it on plainAudio. You get the visualizer where possible and never sacrifice playback.

Why no AdSense

It was tempting, but ad networks force a cookie-consent banner and tank load time. For a utility people open to press play and leave it running, that's the wrong trade. The site stays cookie-free and fast; if it grows, I'll monetize directly (featured-station placements), not via ad networks.

Wrap-up

Boring stack, static pages, ruthless validation. If you want to see the result, it's live at radiobalkan.net — and if you know a Balkan station that's missing, tell me and I'll add it.

Happy to answer questions about the SEO generation or the stream-testing setup in the comments.