2.3: Bouwen & itereren

Het moment is daar. Claude handelt alle technische setup af; jij kijkt mee terwijl je quiz tot leven komt, en daarna verfijn je hem tot het écht klopt.

Tijd: 40 min

Interactieve les: draai /start-2-3 in Claude Code

De projectstructuur

Eerst zet Claude de startbestanden op met één commando:

npx create-next-app@latest . --typescript --tailwind --eslint --app --no-src-dir --import-alias "@/*" --yes

Je ziet een hele reeks nieuwe bestanden verschijnen. Geen zorgen dat je ze begrijpt: de map app/ is waar je quiz woont, de rest is configuratie.

Bouwen met plan mode

Bij grote taken is het fijn om te zien wát Claude gaat doen vóór het gebeurt. Schakel met Shift + Tab naar Plan mode: Claude toont eerst zijn plan, jij keurt het goed, en dán voert het uit. Vraag daarna om de quiz te bouwen op basis van PLAN.md.

Claude maakt de quizpagina, de vraag-onderdelen en het resultaatscherm, implementeert de logica en styling, en voegt de CTA toe. Dit duurt een minuut of twee, laat het gewoon werken.

Je quiz bekijken

Claude start de quiz op met npm run dev en opent http://localhost:3000 in je browser.

localhost werkt alleen op JOUW computer, het is een tijdelijke, lokale versie. Publiek maken doe je later bij het deployen (les 2.5).

Veelvoorkomende haperingen:

Probleem	Oplossing
Browser ging niet open	Surf handmatig naar `http://localhost:3000`
Witte pagina	Check de browserconsole op JavaScript-fouten
Poort al in gebruik	Next.js stelt automatisch een andere voor (bv. 3001); open die
`npx`/`npm` niet herkend	Node.js is niet (goed) geïnstalleerd, herstart de terminal, zie 2.1

De iteratielus

De eerste versie is nooit meteen perfect. Itereren gaat zo: screenshot → beschrijven → wijzigen → verversen → herhalen.

Toptruc: maak een screenshot, plak hem in Claude met Ctrl + V (op Windows is dat Ctrl+V, niet Cmd+V!) en vertel wat er anders moet. Omcirkel iets, wijs ergens naar, laat gewoon zien wat je wil. Dit is ook dé manier om Claude een bug te tonen.

Ideeën voor iteraties: confetti of een animatie bij het resultaat, kleuren of lettertypes bijschalen (binnen de Studio Stroom-sfeer), tekst bijschaven, afbeeldingen per type toevoegen, een voortgangsbalk (“vraag 2 van 6”), of de CTA opvallender maken. Twee à drie rondes is normaal.

Eerst werkend, dan polijsten: los bugs op vóór je aan visuele finesse begint.

Wat nu

2.4: GitHub →, bewaar je code veilig in de cloud, klaar om live te gaan.

2.2: Plan 2.4: GitHub