Spotify-quiz fra forsædet: Sådan ser AI-assisteret kodning ud i virkeligheden

Spotify-quiz fra forsædet: Sådan ser AI-assisteret kodning ud i virkeligheden

Apr 07, 2026 ai-assisted-development vibe-coding spotify-api rapid-prototyping tailscale web-development developer-workflow constraint-driven-design

Bygger en Spotify-quiz fra forsædet: Sådan ser AI-drevet kodning ud i praksis

Hitster er et hit blandt musikfans. Du scanner en QR-kode. Spotify spiller en sang. Vennerne gætter året. Alle sorterer kort på en tidslinje. Simpelt. Vanedannende. Og det koster 25 euro for et sæt kort.

En udvikler tænkte: Hvorfor købe, når jeg selv kan lave det? Udfordringen? Han sad som passager på bilTur fra Østrig til Tyskland. Kun mobil, hjemmeserver og Claude AI som kodehjælper.

Resultatet viser præcis, hvad AI kan gøre i dag – og hvor det stadig halter.

Begrænsningerne var nøglen

Det her var ikke noget kunstlet eksperiment. Det var et rigtigt forsøg på at løse et problem under pres. Ingen laptop. Ingen tastatur. Ingen mulighed for at slå API-dokumentation op på en lille skærm. Kun stemmebeskeder til Claude via Telegram, en server der kørte koden, og iteration baseret på mobilen.

Stakken blev super enkel: Ren HTML, CSS og JavaScript. Spotifys PKCE-flow uden backend. QRCode.js til koder. Html5-QRCode til scanning. Intet overflødigt.

Det lærer os om begrænsningsdesign. Uden let adgang til libs vælger du velkendte værktøjer. Du springer eksotiske afhængigheder over. Kompleksiteten holder sig forudsigelig.

Første succes på tre timer

Da bilen holdt ved en Burger King, virkede kernen. Udvikleren scannede en QR-kode på mobilen – og Spotify spillede fra playlisten.

Tænk på tidsrammen: Fra idé til prototype på tre timer. Kun stemmekommandoer og fjernudførelse. Spotify-authentication – normalt et mareridt med konsoller, OAuth og token-fejl – lykkedes fra første gang.

Hemmeligheden? Klar tale. Udvikleren beskrev præcist, hvad der skulle bygges. Claude stillede spørgsmål, valgte værktøjer og kørte. Ved blokeringer (som Spotify-testbruger) fik de et simpelt svar fra et menneske. Ingen gætteri.

Hvor AI virkelig leverede

Fjern-fejlrapportering revolutionerede debug. Android Chrome har ingen DevTools. Normalt: Gæt fejlen, ændr kode, genindlæs, gentag. Claude tilføjede client-side logging, der sendte JS-fejl til serveren. Nu beskrev udvikleren bare ("knappen reagerer ikke") – og Claude læste de rigtige logs. Debug blev næsten så hurtigt som DevTools, uden at læse stack traces.

Authentication gik som smør. PKCE-flowet kræver ingen server. Client ID fra Spotifys dashboard, videre til Claude – og login var på plads. Et par runder med testbrugere, færdig. Perfekt til remote-arbejde.

Tailscale Serve gav lynhurtig test. Ingen port forwarding eller firewall-krangel. Claude kørte tailscale serve --bg --https=8443 http://127.0.0.1:8080. Appen var klar på mobilen via tailnet. Intet søg, bare kør.

UI uden designer. Claudes viden om designmønstre gjorde grænsefladen skarp. Poleret look uden Figma eller farvedebat.

Så ramte virkeligheden

Spotify API svigtede stille. Playlist-endpoint gav 403-fejl trods korrekt auth. Claude gravede i browser-logs og fandt ændringen fra februar 2026: /v1/playlists/{id}/tracks var erstattet af /v1/playlists/{id}/items. To linjer fik det. Men diagnosen tog tid – fejlen var ikke åbenlys. AI er stærk med logs, men tænker trin for trin.

Derefter den juridiske mur. Spillet var næsten klar. "Hvorfor ingen offentlig Hitster-klon?" spurgte udvikleren. Svar: Spotifys Developer Policy forbyder games med API. Sektion III: "Do not create a game, including trivia quizzes." Hitster har sikkert særlig aftale. Ingen kloner, fordi det er ulovligt – ikke teknisk svært.

Lektion: AI gør det let at bygge ToS-brud. Teknisk er det simpelt; lov og business stopper det.

Arbejdsgangen der matchede

Stemmebeskeder til Claude via Telegram. Tailscale til netværk. --dangerously-skip-permissions for at lade Claude skrive filer og køre kommandoer uden godkendelse midt i turen. Voice in, kode out, reload på mobil. Tre værktøjer i en stram loop.

Hvad mangler (og betyder noget)

Client-logging er smart, men ikke perfekt. Chrome DevTools Protocol kunne give Claude direkte adgang til console, netværk og DOM. Mere som et rigtigt dev-miljø.

Projektet hænger på hjemmeserver med IP og Tailscale. Cloud-krav? Tilbage til CLI, env-vars og deployment.

Og ToS-muren holder det privat – kun proof-of-concept til venner.

Den ægte pointe

AI erstatter ikke udviklere. Det accelererer iteration. Flaskehalsen flytter fra "find lib" og "læs docs" til "beskriv klart".

Udvikleren skulle stadig forstå projektet. Spotte det juridiske. Vælge Tailscale, PKCE, vanilla JS.

Forskellen? Fra dage til timer. Fra timer til bilTur.

Det er ikke trolddom. Det er bedre værktøjer, klar kommunikation og smarte begrænsninger.


Vil du bygge hurtigere? NameOcean's Vibe Hosting og AI-værktøjer er skræddersyet til lyniteration. Prototyper eller produktion – vi har netværk, domains og tools til at holde farten oppe.

Read in other languages:

RU BG EL CS UZ TR SV FI RO PT PL NB NL HU IT FR ES DE ZH-HANS EN