Spotify-quizspel bouwen vanaf de passagiersstoel: Zo ziet AI-ontwikkeling er écht uit

Hitster is een hit onder muziekliefhebbers. Scan een QR-code, Spotify speelt een nummer af, en je raadt het jaar. Vrienden sorteren kaarten op een tijdlijn. Simpel, verslavend, en het kost €25 per deck.

Een ontwikkelaar dacht: waarom kopen als ik het zelf kan maken? De uitdaging: hij zat als passagier op de snelweg van Oostenrijk naar Duitsland. Bewapend met een telefoon, een thuisserver en Claude AI als code-partner.

Het eindresultaat? Een eye-opener over wat AI-koppeling écht kan – en waar de grenzen liggen.

Beperkingen als brandstof

Dit was geen nep-experiment. Gewoon een echt probleem oplossen onder druk. Geen laptop. Geen toetsenbord. Geen tijd voor API-docs op een klein scherm. Alleen spraakberichten naar Claude via Telegram, een server voor uitvoering, en itereren op basis van de telefoon.

De tech-stack bleef kaal: pure HTML, CSS en JavaScript. Spotifys PKCE-authenticatie zonder backend. QRCode.js voor codes maken. Html5-QRCode voor scannen. Geen overbodige ballast.

Zo'n setup dwingt slim design af. Zonder makkelijke docs grijp je naar bewezen tools. Geen rare dependencies. Alles voorspelbaar.

Drie uur naar je eerste succes

Bij de Burger King-pauze werkte de kern al. QR-code scannen, en je Spotify-playlist begon te spelen.

Stel je voor: van idee naar prototype in drie uur, puur via spraak en remote code. Zelfs de Spotify-auth – normaal een gedoe met OAuth en tokens – lukte in één keer.

Geen toverij. Sleutel was heldere instructies. De maker beschreef precies wat hij wilde. Claude stelde vragen, koos tools en bouwde. Bij een Spotify-testuser-issue vroeg hij hulp aan een mens. AI hoeft niet te raden.

Waar AI écht excelleerde

Remote foutmeldingen flippen debugging. Op Android Chrome geen DevTools. Normaal: gokken, code aanpassen, herladen, herhalen. Claude voegde client-side logging toe die errors naar de server stuurde. Beschrijf 'knop reageert niet', en Claude las de echte logs. Debugging bijna net zo snel als DevTools – zonder stacktraces lezen.

Auth zonder gedoe. PKCE van Spotify vraagt geen backend. Client ID uit de developer console, doorgeven aan Claude, en login stond. Paar tweaks voor testuser, klaar. Perfect voor remote werk.

Tailscale Serve voor snelle tests. Geen poort-forwarding of firewall-gedoe. Claude draaide tailscale serve --bg --https=8443 http://127.0.0.1:8080, en de app was direct bereikbaar via de tailnet. Plug-and-play infrastructuur.

UI zonder designer. Claude kende design patterns. Van ruw naar strak, zonder Figma of kleurenruzies.

Toen sloeg de realiteit toe

Spotify API crashte stilletjes. Playlist-endpoint gaf 403, ondanks juiste scopes. Claude groef in browser-logs en vond de oorzaak: in februari 2026 verving Spotify /v1/playlists/{id}/tracks door /v1/playlists/{id}/items. Twee code-regels fix. Maar diagnose kostte iteraties – errors zijn niet altijd obvious. AI debugt systematisch met logs, maar stap voor stap.

De juridische muur. Bijna klaar vroeg de maker: "Waarom geen publieke Hitster-klonen?" Claude: Spotifys Developer Policy verbiedt games en quizzes expliciet in Sectie III. Hitster heeft vast speciale deal. Geen clones door contracten, niet door tech.

Lessen: AI maakt ToS-schendingen makkelijker dan ooit. Techniek is geen issue meer; regels wel.

De workflow die het deed

Spraak naar Claude via Telegram. Tailscale voor netwerktoegang. --dangerously-skip-permissions voor snelle file- en shell-acties – cruciaal vanuit de auto. Vertrouwensshift nodig.

Spraak in, code uit, telefoon herladen. Drie tools voor een strakke loop.

Wat ontbreekt (en telt)

Client-logging is oké, maar Chrome DevTools Protocol zou Claude direct console, requests en DOM geven. Echt dev-gevoel.

Project gebonden aan thuisserver met Tailscale. Cloud-deployments? Terug naar CLI en vars.

ToS blokkeert release – blijft privédemo.

De echte les

AI vervangt geen developers. Het versnelt iteratie: van 'docs zoeken' naar 'duidelijk vragen'.

De maker snapte de stack (Tailscale, PKCE, vanilla JS). Hij herkende de ToS-issue. Van dagen naar uren. Van uren naar autorit.

Dat is de kracht: betere tools, heldere comms, slimme beperkingen.

Sneller projecten bouwen? NameOcean's Vibe Hosting en AI-tools boosten rapid iteration. Van prototype tot schaalbare infra: ons netwerk, domains en tooling houden je op snelheid.