Roast My Website

Run: npx @studiohyra/claude-code-starter init roast-my-website. This creates a private GitHub repo, scaffolds Next.js with Tailwind and TypeScript, installs skills, and configures Claude Code.

Open the project in VS Code. Open the terminal. Type claude.

Customize CLAUDE.md: update the project name to "Roast My Website." Set Phase 1 status to IN PROGRESS. Add rules: no hardcoded colors, all text through i18n, run build before every commit.

Test: ask Claude "What project are we working on?" It should answer with the roast app description.

You now have: a repo, a configured Claude Code environment, and a plan.

Tell Claude: "Plan this: a homepage with a form where users paste a website URL. One input field, one submit button. Dark design using our design tokens. i18n for the labels. No database yet, just the UI."

Review the plan. Then: "Build it."

Claude creates: the homepage at src/app/[locale]/page.tsx, a RoastForm component, and i18n strings in en.json. The form validates the URL (is it a real URL?). On submit it does nothing yet. That's lesson 3.

Test: npm run dev, open localhost:3000. Paste a URL. See the form work. Try an invalid URL. See the validation.

You now have: a working homepage with a validated URL form. 20 minutes.

Tell Claude: "Create an API route at /api/roast. It receives a URL via POST. It should: fetch the website's HTML and meta tags, send them to Claude API with a roasting prompt, return JSON with an overall score (1-10) and four categories (design, copy, UX, firstImpression) each with a score and 2-3 sentences of feedback."

The AI prompt is the key. It needs to produce brutal but specific feedback: "You are a brutally honest website critic. Think Simon Cowell. Score 1-10. Be specific about actual elements you see. Be funny, not mean. A 5 is average. Most sites score 4-6."

Claude builds: the API route with Zod validation, website fetching, AI prompt, and typed response.

Connect the form to the API. Submit calls /api/roast, displays the result.

Test: paste a real URL. Wait for the roast. Read it. 30-40 minutes.

Tell Claude: "Build a roast result component. Large overall score with color gradient (red for low, green for high). Four category cards: design, copy, UX, first impression. Each with score and feedback. Dark theme, generous spacing. Make it look like something people screenshot and share."

Claude creates: RoastResult component, ScoreCircle (animated score indicator), CategoryCard. The score circle fills with color based on the score.

Run a second pass: "Review the roast display. Check for hardcoded colors, missing i18n, mobile layout issues, accessibility."

Phase 1 is complete. You have: paste a URL, get a beautiful roast page.

Run your quality check: npm run build (zero errors). Run /phase-check if you have the skill. Commit. 30 minutes.

Tell Claude: "Create a Supabase migration for a roasts table. Columns: id (uuid), url (text), domain (text, extracted domain), overall_score (integer 1-10), categories (jsonb), created_at (timestamptz). RLS: anyone can read, only the API can insert. Index on overall_score for the leaderboard."

If you connected the Supabase MCP, Claude inspects your schema and applies the migration directly. If not, it generates SQL for the Supabase dashboard.

Update the API route: after generating the roast, save to Supabase. Return the roast ID so the frontend redirects to a shareable page.

Flow: POST /api/roast generates the roast, saves to Supabase, returns the ID. Frontend redirects to /roast/[id].

Test: roast a website. Check the Supabase dashboard. The roast is in the table. 20-30 minutes.

Tell Claude: "Create a dynamic route at /[locale]/roast/[id]/page.tsx. Read the roast from Supabase by ID. Display the roast result. Include generateMetadata: title 'Website Roast: [domain] scored [score]/10'. Add OpenGraph tags for social sharing previews."

Claude builds: the dynamic page, Supabase query, 404 handling, SEO metadata with dynamic title and description.

Add sharing: a "Share this roast" button that copies the URL, and a "Roast another website" button back to home.

Test: roast a site, copy the URL, open in incognito. The roast loads for anyone with the link. 20 minutes.

Tell Claude: "Build a leaderboard for the homepage. Query Supabase for the 10 roasts with the lowest overall_score. Show: rank, domain, score with color, one-line from the firstImpression feedback. Each row links to the full roast. Add scroll animations."

Edge cases: fewer than 10 roasts? Show what exists. Tie scores? Order by newest first.

Place the leaderboard below the form. The flow: see the leaderboard, wonder if your site would end up there, paste your URL.

Phase 2 complete. Roasts save to database, have shareable URLs, worst ones appear on the leaderboard.

Run phase-check. Fix what it finds. Commit. 25 minutes.

First: verify all English strings go through next-intl. Ask Claude: "Show me all i18n keys. Are there any hardcoded strings in components?"

Pick your second language. Spanish, German, French, whatever fits your audience. Tell Claude: "Create es.json by translating all strings from en.json to Spanish. Informal tone."

The important part: the AI output itself. Update the API route to accept a locale: POST /api/roast with url and locale. The AI prompt adjusts: "Respond in Spanish. Keep the brutal honesty."

Update routing config to include the new locale. Test: switch to /es/ in the URL. Interface is Spanish. Roast a site. Feedback comes back in Spanish.

The pattern: adding a third language is the same steps, same 15 minutes. This is why i18n from day one matters. 20 minutes.

Tell Claude: "Write Playwright tests for Roast My Website. Test: homepage 200 status for both locales, form renders with correct placeholder, empty submit shows error, invalid URL shows error, leaderboard section renders, a roast page loads with score and categories, no mobile overflow at 375px, second language shows correct text."

Claude writes 8+ tests. Run: npx playwright test e2e/roast.spec.ts.

First run usually catches 1-2 real issues: a mobile overflow, a missing translation key, a component that doesn't handle null data. That's normal. Fix them.

After tests pass: that's your permanent safety net. Every future change verified automatically in 30 seconds. 20 minutes.

Final quality check: npm run build (zero errors). npx playwright test (all pass). Run /phase-check one final time.

Deploy: if Vercel CLI is linked, run vercel --prod. If not: push to GitHub, import the repo on vercel.com, add environment variables (Supabase URL, anon key, AI API key), deploy.

Test the live app: open your Vercel URL. Roast a website. Check it saves. Check the shareable link works. Check the leaderboard. Switch languages.

Share it: post on LinkedIn ("I built this with Claude Code. Paste your URL and find out how bad your website really is."). Send to colleagues ("Try roasting our company site."). Add to your portfolio.

You now have: a live, deployed, multilingual, AI-powered web application with a database, shareable pages, a leaderboard, and automated tests. Built from scratch. 20 minutes for deployment.