Feedback op mijn website

Voer dit uit. `npx @studiohyra/claude-code-starter init roast-my-website`. Dit maakt een privé GitHub-repo aan, zet Next.js op met Tailwind en TypeScript, installeert de skills en configureert Claude Code. Open het project in VS Code. Open de terminal. Typ `claude`. Pas CLAUDE.md aan. verander de projectnaam naar "Roast My Website". Zet de status van Phase 1 op actief. Voeg regels toe: geen hardcoded kleuren, alle tekst via i18n, voer een build uit vóór elke commit. Test. vraag Claude "What project are we working on?" Het antwoord moet de beschrijving van de roast-app zijn. Je hebt nu een repo, een geconfigureerde Claude Code-omgeving en een plan.

Geef Claude de volgende opdracht. "Plan dit: een homepage met een formulier waar gebruikers een website-URL kunnen plakken. Één invoerveld, één verzendknop. Donker design op basis van onze design tokens. i18n voor de labels. Nog geen database, alleen de UI." Lees het plan door, en stuur daarna. "Bouw het." Claude bouwt de homepage in src/app/[locale]/page.tsx, een RoastForm-component en i18n-strings in en.json. Het formulier controleert of de ingevulde URL geldig is. Bij verzenden gebeurt er verder nog niets, dat komt in les 3. Testen doe je met npm run dev. Open localhost:3000, plak een URL en kijk hoe het formulier reageert. Vul ook een ongeldige URL in om de validatie te zien. Na deze stap heb je een werkende homepage met URL-validatie. Twintig minuten werk.

Geef Claude de volgende opdracht. "Maak een API-route op /api/roast. De route ontvangt een URL via POST, haalt de HTML en metatags van die website op, stuurt ze naar de Claude API met een roasting-prompt, en geeft JSON terug met een overall score van 1 tot 10 en vier categorieën (design, copy, UX, firstImpression), elk voorzien van een score en 2 à 3 zinnen feedback." De AI-prompt is het kernstuk. Zorg dat hij echte tanden heeft: "Je bent een meedogenloos eerlijke websitecritic. Denk aan Simon Cowell. Geef een score van 1 tot 10. Benoem concrete elementen die je ziet. Wees grappig, niet gemeen. Een 5 is gewoon gemiddeld. De meeste sites halen een 4 tot 6." Claude bouwt daarna de hele API-route uit. Zod-validatie, het ophalen van de website, de prompt en een getypeerd response-object. Koppel vervolgens het formulier aan de API. Een submit stuurt het verzoek naar /api/roast en toont het resultaat direct op de pagina. Dan het leukste deel. plak een echte URL erin, wacht op de roast en lees wat eruit komt. Reken op 30 tot 40 minuten voor de hele stap.

Geef Claude de volgende prompt. "Bouw een component voor het roast-resultaat. Een grote totaalscore met kleurverloop van rood naar groen. Vier categoriekaarten: design, copy, UX, eerste indruk, elk met score en toelichting. Donker thema, veel ruimte. Het moet eruitzien als iets wat mensen automatisch screenshotten en doorsturen." Claude genereert een RoastResult-component, een ScoreCircle met geanimeerde score-indicator en een CategoryCard. De scorecirkel krijgt een kleur op basis van de score. Daarna een tweede ronde. "Bekijk de roast-weergave nog eens. Let op hardgecodeerde kleuren, ontbrekende i18n, mobiele lay-outproblemen en toegankelijkheid." Fase 1 zit erop. Plak een URL, je krijgt een nette roastpagina terug. Kwaliteitscheck. `npm run build` moet schoon zijn, nul fouten. Heb je de `/phase-check` skill? Gebruik hem. Commit. Dit kost je dertig minuten.

Geef Claude de volgende opdracht. "Maak een Supabase-migratie voor een roasts-tabel. Kolommen: id (uuid), url (text), domain (text, extracted domain), overall score (integer 1-10), categories (jsonb), created at (timestamptz). RLS: iedereen mag lezen, alleen de API mag schrijven. Zet een index op overall score voor het leaderboard." Heb je de Supabase MCP gekoppeld, dan inspecteert Claude je schema en voert de migratie meteen uit. Zo niet, dan levert hij SQL die je in het Supabase-dashboard plakt. Daarna pas je de API-route aan. sla de roast op nadat die is gegenereerd, en geef het roast-ID terug zodat de frontend de gebruiker naar een deelbare pagina stuurt. De stroom ziet er zo uit. POST /api/roast genereert de roast, slaat hem op in Supabase en geeft het ID terug. De frontend gaat naar /roast/[id]. Klaar? Roast een website en open het Supabase-dashboard. Als de roast in de tabel staat, zit je goed. Reken op 20 tot 30 minuten.

Geef Claude deze instructie. "Maak een dynamische route op /[locale]/roast/[id]/page.tsx. Lees de roast uit Supabase op basis van het ID. Toon het resultaat. Voeg generateMetadata toe met als titel 'Website Roast: [domain] scoorde [score]/10'. Zet er OpenGraph-tags bij voor previews op social media." Claude bouwt vervolgens de dynamische pagina, de Supabase-query, 404-afhandeling en SEO-metadata met een dynamische titel en beschrijving. Voeg daarna twee knoppen toe. een "Deel deze roast"-knop die de URL kopieert, en een "Roast nog een website"-knop die teruglinkt naar home. Klaar? Roast een site, kopieer de URL en open hem in een incognitovenster. De roast laadt voor iedereen met de link. Dat kost je 20 minuten.

Typ dit in Claude. "Bouw een leaderboard voor de homepage. Haal de 10 roasts met de laagste overall score op uit Supabase. Laat zien: rang, domein, score met kleur, één regel uit de firstImpression feedback. Elke rij linkt door naar de volledige roast. Voeg scroll-animaties toe." Houd rekening met uitzonderingen. zijn er minder dan 10 roasts, toon dan wat er is. Bij gelijke scores sorteer je op nieuwste eerst. Zet het leaderboard onder het formulier. De logica is simpel. iemand ziet de lijst, vraagt zich af of zijn eigen site daar ook tussen zou staan, en plakt z'n URL erin. Fase 2 is klaar. Roasts worden opgeslagen in de database, hebben een deelbare URL, en de slechtst scorende verschijnen op het leaderboard. Voer de phase-check uit, los op wat het tegenkomt en commit. 25 minuten.

Controleer eerst of alle Engelse strings via next-intl lopen. Vraag Claude: "Show me all i18n keys. Are there any hardcoded strings in components?" Kies je tweede taal. Spaans, Duits, Frans, wat je doelgroep ook spreekt. Zeg tegen Claude: "Create es.json by translating all strings from en.json to Spanish. Informal tone." Dan het wezenlijke stuk. de AI-output zelf. De API-route heeft een locale nodig, POST /api/roast met url en locale. De bijbehorende prompt: "Respond in Spanish. Keep the brutal honesty." Voeg de nieuwe locale toe aan je routingconfiguratie. Test het: zet de URL op /es/. De interface staat in het Spaans, je roast een site, de feedback komt terug in het Spaans. Wat dit laat zien. een derde taal toevoegen is precies hetzelfde proces, ook gewoon 15 minuten. Dat is waarom je i18n vanaf het begin meeneemt. 20 minuten.

Geef Claude deze opdracht. "Schrijf Playwright-tests voor Roast My Website. Test: homepage geeft 200-status voor beide locales, formulier toont de juiste placeholder, lege submit geeft een foutmelding, ongeldige URL geeft een foutmelding, het leaderboard-gedeelte wordt weergegeven, een roast-pagina laadt met score en categorieën, geen mobiele overflow op 375px, tweede taal toont de juiste tekst."

Claude levert 8 of meer tests. Draai ze met. npx playwright test e2e/roast.spec.ts.

De eerste run legt vrijwel altijd 1 of 2 echte problemen bloot: een mobiele overflow, een ontbrekende vertaalsleutel, een component die null-data niet aankan. Dat is normaal. Los ze op.

Zodra de tests groen zijn, heb je een blijvend veiligheidsnet. Elke volgende wijziging automatisch gecheckt in 30 seconden. Alles bij elkaar: 20 minuten werk.

Doe eerst een laatste kwaliteitscheck. `npm run build` zonder fouten, `npx playwright test` alles groen, en draai `/phase-check` nog één keer.

Dan deployen. Heb je Vercel CLI al gekoppeld, dan is `vercel --prod` genoeg. Zo niet, push naar GitHub, importeer de repo via vercel.com, voeg je omgevingsvariabelen toe (Supabase URL, anon key en je AI API key) en ga live.

Open daarna je Vercel-url en test alles door. roast een website, kijk of de opslag werkt, of de deelbare link klopt, of het leaderboard laadt, en wissel een keer van taal.

Dan delen. Zet iets op LinkedIn, iets als. "I built this with Claude Code. Paste your URL and find out how bad your website really is." Stuur het naar collega's: "Try roasting our company site." Voeg het toe aan je portfolio.

Wat je nu hebt. een live, meertalige webapplicatie met AI, een database, deelbare pagina's, een leaderboard en geautomatiseerde tests. Volledig van nul af aan gebouwd, in twintig minuten deployment.