Studio Hyra University

Feedback op mijn website

Bouw een echte AI-app van nul. Stap voor stap. Vandaag live.

10 lessen · ~4-6 uur hands-on

Les 01

Zet het project op

Een nieuw Next.js-project met Claude Code erin. Klaar in tien minuten.

Open VS Code en de terminal

Open VS Code. Klik in de menubalk bovenaan op Terminal → New Terminal. Onderaan verschijnt een paneel. Hier typ je je commando's.

Claude Code installeren

Als je <strong>"npm. command not found"</strong> ziet:

Terminal

npm install -g @anthropic-ai/claude-code

Als je "npm. command not found" ziet:

Ga naar nodejs.org
Klik op de groene downloadknop
Installeer het (klik je door de installer heen)
In VS Code sluit je het terminalpaneel (klik op de X) en open je een nieuw: Terminal → New Terminal
Probeer het opnieuw

Claude Code beginnen

Typ claude en druk op Enter. Er opent een browservenster waar je wordt gevraagd in te loggen. Log in, klik op Authorize, en ga terug naar VS Code.

Je zit nu in Claude Code. De terminal ziet er anders uit, hier typ je berichten naar Claude in plaats van commando's. Wait, no em-dash allowed. Let me redo: Je zit nu in Claude Code. De terminal ziet er anders uit. hier typ je berichten naar Claude in plaats van commando's. No colon-split either. One more try: Je zit nu in Claude Code. De terminal ziet er anders uit. Berichten aan Claude typ je hier, geen commando's.

Maak het project aan

Zeg tegen Claude

Maak een nieuw project aan op mijn desktop en noem het "roast-my-website". Zet het op als een Next.js-website met Tailwind CSS. Stel design tokens in met een donker thema en oranje als accentkleur. Zet het vertaalsysteem (i18n) op met Engels als standaardtaal. Initialiseer Git en maak een privé GitHub-repository aan. Zet Docker op zodat het project in een container draait. Gids me stap voor stap door alles waarbij je mijn input nodig hebt.

Claude werkt dit door. Het kan vragen stellen:

"Heb je een GitHub-account?" → Zo niet, dan helpt Claude je er een aan te maken. Heb je er al een, dan opent er een browservenster, klik op Autoriseren.
"Docker Desktop moet actief zijn" → Open Docker Desktop via Programma's (Mac) of het Startmenu (Windows). Wacht tot het walvisicoon verschijnt. Laat Claude weten dat het draait.

Open het project in VS Code

Klik op Bestand → Nieuw venster (VS Code opent opnieuw, schoon)
Klik op Bestand → Map openen
Ga naar je bureaublad, open de map roast-my-website en klik op Openen

Je ziet de projectbestanden in de linker zijbalk.

Claude Code starten in je project

Open de terminal. Terminal → New Terminal. Typ claude, druk op Enter.

Docker starten en het project bekijken

Zeg tegen Claude

Start het project in Docker zodat ik het in mijn browser kan zien.

Claude geeft je het adres. Open het in je browser.

Als Claude meldt dat de poort al bezet is:

Zeg tegen Claude

Probeer een andere poort.

Hoe je een CLAUDE.md bestand opzet

Zeg tegen Claude

Maak een CLAUDE.md aan voor dit project. Het project is "Roast My Website", een AI-tool die websites beoordeelt met grappige feedback. We werken nu aan fase 1: de homepage en de roast-functionaliteit. Hanteer deze regels: gebruik design tokens voor alle kleuren, stuur alle tekst door het vertaalsysteem en valideer gebruikersinput. Werk de status bij na elke commit.

Alles checken

Zeg tegen Claude

Werkt alles? Docker draait, project zichtbaar in de browser, Git ingesteld, GitHub gekoppeld, CLAUDE.md aangemaakt? Zet recht wat nog niet klopt.

Note

Zeg aan het einde van elke les tegen Claude. "Commit and push." Dit slaat je werk op en zet het op GitHub.

Bouw dit

Voer het init-commando uit. Open Claude Code. Vraag iets over het project. Komt het antwoord goed uit? Dan ben je klaar.

Les 02

URL-invoer form

De homepage met een URL-invulveld en een verzendknop. Strak, donker, één doel.

Plan mode activeren

Druk op Shift+Tab. Kijk naar de linkeronderhoek van Claude Code. Daar staat nu Plan Mode. In deze modus denkt Claude na en maakt het een plan, maar past geen bestanden aan.

Wat staat er op de homepage?

Zeg tegen Claude

Ik wil de homepage. Een grote koptekst, iets als "Hoe slecht is jouw website?" met het woord "slecht" in een cursief accentlettertype. Daaronder een invoerveld waar je een URL in plakt en een grote ronde oranje knop met de tekst "Roast it." Donkere achtergrond, veel witruimte. Alle tekst via het vertaalsysteem. Dat is de hele pagina voor nu.

Claude stelt een plan voor. Lees het door. Wil je iets aanpassen:

Zeg tegen Claude

Ik wil de subtitel niet. Alleen de kop en het formulier. Maak de knop echt groot, als een pill-vorm.

Bouw het

Druk nogmaals op Shift+Tab. Linksonder staat niet meer Plan Mode. Nu kan Claude bestanden aanpassen.

Zeg tegen Claude

Bouw de homepage op basis van wat we besproken hebben.

Als Claude klaar is:

Zeg tegen Claude

Zijn de Docker-wijzigingen al doorgevoerd? Stuur me de URL, dan kijk ik het na.

Open de URL in je browser. Je homepage zou nu zichtbaar moeten zijn.

Beter ontwerp, betere resultaten

Zeg tegen Claude

De kop moet veel groter. Er zit te weinig ruimte tussen de kop en het formulier. De knop ziet er niet klikbaar genoeg uit, geef hem meer gewicht.

Ververs de browser na elke aanpassing. Blijf doorgaan tot het er goed uitziet.

Validatie toevoegen

Zeg tegen Claude

Als iemand op de knop klikt zonder iets in te typen, toon een foutmelding. Typt iemand iets dat geen URL is, toon dan een andere foutmelding.

Test het. klik op de knop zonder iets te typen. Typ dan "asdf" en klik opnieuw.

Opslaan

Zeg tegen Claude

Committen en pushen.

Bouw dit

Gewoon bouwen. Niet te lang nadenken. Beschrijf het formulier aan Claude, laat het bouwen, doe één iteratie op het design. Zet de homepage live.

Les 03

De AI-roast

Een API-route die een URL ontvangt, naar AI stuurt en een gestructureerde beoordeling met scores teruggeeft.

Zet een roast op de agenda

Druk op Shift+Tab voor planmodus.

Zeg tegen Claude

De app krijgt een URL en doet de rest. website bezoeken, goed bekijken, en een ongefilterde review schrijven. Vier categorieën krijgen elk een cijfer van 1 tot 10: design, copywriting, gebruikerservaring en eerste indruk. De toon is grappig en meedogenloos, denk aan Simon Cowell op zijn sloopst. Per categorie een score plus een paar zinnen concrete feedback. Werk dit uit.

Druk op Shift+Tab om de planmodus te verlaten.

Zeg tegen Claude

Bouw het.

De AI-verbinding

Claude vraagt soms om een API key:

Zeg tegen Claude

Leg me uit hoe ik een Claude API-sleutel aanvraag.

Claude legt het je uit. ga naar console.anthropic.com, open API Keys, maak een sleutel aan en kopieer hem. Plak hem wanneer Claude erom vraagt.

Probeer het

Zeg tegen Claude

Draait Docker met de laatste wijzigingen? Welke URL moet ik openen?

Plak een echte website-URL in het formulier. Klik op "Roast it." Wacht even. Je ziet de scores en feedback verschijnen.

Verfijnen

Zeg tegen Claude

De feedback is te generiek en te beleefd. Ik wil het scherper. Als de site een stockfoto heeft van mensen die handen schudden, benoem het gewoon. Als de button "Meer informatie" zegt zonder dat er iets te leren valt, maak er dan gehakt van. Echt grappig, niet een beetje.

Nog een keer testen. Blijf bijsturen:

Zeg tegen Claude

Scores zijn te hoog. De meeste sites horen op 3-6 uit te komen, niet op 7-8.

Opslaan

Zeg tegen Claude

Commit en push.

Bouw dit

Roast eerst je eigen website. Dan die van een concurrent. Kijk wat de scores zeggen.

Les 04

De roast display

Een verzorgd resultaatcomponent met geanimeerde scores, categoriekaarten en feedback. Het ding dat mensen screenshotten.

Scores opnieuw ontworpen

Zeg tegen Claude

De roast-resultaten zien er te kaal uit. Ik wil dat de totaalscore groot staat in een gekleurde cirkel: rood voor slecht, oranje voor matig, groen voor goed. Die moet animeren, tellend op naar het eindcijfer. Daaronder vier kaarten per categorie, elk met score en feedback. Het moet eruitzien als iets wat mensen meteen screenshotten.

Model verfijnen met je eigen data

Zeg tegen Claude

Meer ruimte tussen de kaarten. De feedbacktekst is te klein. De score-animatie mag trager, zo'n seconde.

Tweede ronde

Zeg tegen Claude

Bekijk de resultatenpagina. Werkt hij op een telefoon? Komen de kleuren uit de design tokens? Staat er tekst hardcoded in plaats van in het vertaalbestand? Los op wat je tegenkomt.

Opslaan

Zeg tegen Claude

Fase 1 klaar. Commit en push.

Bouw dit

Doe nog een keer een pass over het display component. Pas aan wat Claude aanwijst. Zo begin je met dat tweede-pass-ritme.

Les 05

Sla roasts op in Supabase

Roasts opgeslagen in een echte database. Resultaten blijven bewaard en zijn te delen.

De database inrichten

Zeg tegen Claude

De roasts verdwijnen zodra ik de pagina vernieuw. Ik wil ze permanent bewaren. Maak een databasetabel aan met de website-URL, de domeinnaam, alle vier de scores, de totaalscore, de feedback en de datum. Alleen de app mag nieuwe toevoegen. Iedereen kan ze bekijken. Gebruik ons Supabase-project.

Claude kan om je Supabase-gegevens vragen:

Ga naar supabase.com, open je project
Klik in de linkerzijbalk op Settings, dan API
Kopieer de Project URL en plak die naar Claude
Kopieer de Service role key (klik eerst op "Reveal") en plak die naar Claude

Als Claude vraagt "Wil je dat ik een directe verbinding (MCP) met de database opzet?" — zeg ja.

Verbind de app

Zeg tegen Claude

Sla roasts nu automatisch op als iemand de app gebruikt. Ik hoef er niets voor te doen.

Test het

Roast een website in je browser. Dan:

Zeg tegen Claude

Is die roast opgeslagen in de database? Laat me zien wat er opgeslagen is.

Ververs de browserpagina. De roast moet er nog steeds staan.

Opslaan

Zeg tegen Claude

Commit and push.

Bouw dit

Roast een site en check of die in je Supabase dashboard verschijnt. Je eerste feature met een echte database erachter.

Les 06

Deelbare roastpagina's

Elke roast krijgt een eigen URL. Dynamische routes, SEO-metadata, OpenGraph-previews.

Individuele pagina's

Zeg tegen Claude

Nadat iemand een website roast, breng ze naar een unieke pagina voor die roast. Zoiets als /roast/abc123. Als ik die link naar iemand stuur, zien ze de volledige roast ook als ze nog nooit op onze site zijn geweest.

Social media previews

Zeg tegen Claude

Als iemand een roast-link plakt op LinkedIn of WhatsApp, wil ik dat de preview de websitenaam en score toont. Zoiets als "example.com scoorde 3.2/10."

Deelknop

Zeg tegen Claude

Voeg een "Deel deze roast"-knop toe die de URL kopieert en 2 seconden "Gekopieerd!" toont. En een "Roast nog een website"-knop die teruggaat naar de homepage.

Test het

Roast een site. Je landt op de unieke pagina. Klik op "Deel deze roast." Open een privévenster (Cmd+Shift+N op Mac, Ctrl+Shift+N op Windows). Plak de link. De roast laadt.

Opslaan

Zeg tegen Claude

Commit and push.

Bouw dit

Stuur de roast-URL door naar een vriend of collega. Vraag of het laadt en er goed uitziet. Zo heb je meteen iets om te delen.

Les 07

De beste 10 in de ranglijst

De 10 slechtst scorende websites op een publiek scorebord. Waarom mensen telkens terugkomen.

Bouw de ranglijst

Zeg tegen Claude

Voeg een ranglijst toe aan de homepage onder het formulier. De 10 laagst scorende websites, gerangschikt van slechtst naar minst slecht. Elke vermelding toont: rangnummer, domeinnaam, score met een kleur en de eerste zin van de eerste-indruk-feedback. Klikken op een vermelding gaat naar de volledige roast. Zet de sectietitel in het vertaalsysteem — iets als "De Muur der Schaamte."

Lege toestanden

Zeg tegen Claude

Wat als er nog geen roasts zijn? Of maar 3? Handel beide af. Toon een bericht als het leeg is, toon wat er is als er minder dan 10 zijn.

Vul het

Roast 5-6 verschillende websites om de ranglijst te vullen. Mix: een goede site, een slechte, een zakelijke, een blog. Ververs de homepage. De ranglijst moet ze gerangschikt tonen.

Opslaan

Zeg tegen Claude

Fase 2 klaar. Bekijk alles, commit and push.

Bouw dit

Roast 3 tot 5 websites om het scorebord te vullen. Zie hoe ze zich verhouden. Door de competitie blijf je er maar op klikken.

Les 08

Een tweede taal toevoegen

Volledige i18n met een tweede taal. De AI-roast output vertaalt ook mee. Jij kiest de taal.

Check op hardcoded tekst

Zeg tegen Claude

Check de app op tekst die direct in het Engels staat in plaats van via het vertaalsysteem. Fix alles wat je vindt.

Voeg de taal toe

Kies een taal die bij je doelgroep past.

Zeg tegen Claude

Voeg Spaans toe als tweede taal. Vertaal alles: kop, knoppen, foutmeldingen, ranglijsttitel, deelknop. Hou het natuurlijk en leuk, geen stijve vertaling.

AI-uitvoer ook in die taal

Zeg tegen Claude

Als iemand de app in het Spaans gebruikt, moet de roast-feedback ook in het Spaans zijn. Natuurlijke Spaanse humor, geen vertaald Engels.

Test het

Verander in je browser de /en/ in de adresbalk naar /es/ (of jouw taal). De hele interface moet wisselen. Roast een site — de feedback moet terugkomen in die taal.

Zeg tegen Claude

De Spaanse kop klinkt niet natuurlijk. Maak het meer idiomatisch.

Opslaan

Zeg tegen Claude

Commit and push.

Bouw dit

Voeg een tweede taal toe en laat dezelfde site roosteren in allebei. Vergelijk het gevoel voor humor. Verschillende talen, verschillende stijl van afbranden.

Les 09

Playwright tests

Geautomatiseerde tests voor beide talen, op desktop en mobiel. Je vangnet.

Vertel Claude wat te testen

Zeg tegen Claude

Schrijf tests voor de app en draai ze. Test dat: de homepage laadt in beide talen, het formulier foutmeldingen toont bij leeg of ongeldig versturen, de ranglijst verschijnt, een roast-pagina scores en categorieën toont, niets zijwaarts scrollt op een telefoonscherm (375px breed), en de tweede taal vertaalde tekst toont. Vertel me wat slaagt en wat faalt.

Fix fouten

Voor elke fout:

Zeg tegen Claude

De telefoontest is gefaald. Wat is er mis? Fix het en draai de test opnieuw.

Laatste check

Zeg tegen Claude

Draai alle tests nog een keer.

Alles groen? Wanneer je later iets verandert:

Zeg tegen Claude

Draai alle tests om te checken dat ik niets kapot heb gemaakt.

Bouw dit

Voer de tests uit. Gaan ze allemaal in één keer groen, gefeliciteerd. Loopt er iets stuk, los het op. Hoe dan ook: je hebt nu geautomatiseerde kwaliteitscontrole.

Les 10

Uitrollen en delen

Live op Vercel met een echte URL. Deel het met de wereld.

Laatste check

Zeg tegen Claude

Doe een laatste check van alles. Tests, bouwfouten, missende vertalingen, beveiliging. Fix wat je vindt.

Deployen

Zeg tegen Claude

Deploy dit naar Vercel zodat het live op het internet staat. Loop me door elke stap.

Claude loopt het met je door. Het opent misschien een browser voor Vercel-login, vraagt je het project te koppelen en vraagt om je API keys (Supabase URL, Supabase key, AI API key). Die worden veilig opgeslagen — niet in je code.

Als het klaar is, geeft Claude je een URL. Dat is je app. Live.

Test de live versie

Open de URL. Probeer alles: roast een website, open een deelbare link in een privévenster, check de ranglijst, wissel van taal, open het op je telefoon.

Als iets niet werkt:

Zeg tegen Claude

Op de live site werkt [wat er mis is] niet. Lokaal werkt het wel. Wat is anders?

Eigen domein (optioneel)

Zeg tegen Claude

Ik wil een eigen domein. Loop me door het kopen en verbinden ervan. Leg elke stap uit.

Opslaan

Zeg tegen Claude

Laatste commit and push.

Tip

Deel het. LinkedIn: "Ik heb een AI-website-roaster gebouwd. Plak een URL en kijk wat AI ervan vindt." Stuur het naar collega's. Zet het in je portfolio.

Bouw dit

Zet hem live. Stuur de URL naar iemand die je vertrouwt. Vraag om eerlijke feedback op je site. En kijk toe hoe iemand anders iets gebruikt dat je helemaal zelf hebt gebouwd.

Het is live.

Een live, werkende, tweetalige webapplicatie met AI. Van nul af aan gebouwd met Claude Code.

Deel je appDeel je app Terug naar de universiteitTerug naar de universiteit