Studio Hyra University

Roast My Website

Build a real AI-powered app from scratch. Step by step. Deploy it today.

10 lessons · ~4-6 hours hands-on

Lesson 01

Set up the project

A fresh Next.js project with Claude Code configured and ready. 10 minutes.

Open VS Code and the terminal

Open VS Code. In the menu bar at the top, click Terminal → New Terminal. A panel opens at the bottom. This is where you type commands.

Install Claude Code

If you see <strong>"npm: command not found"</strong>:

Terminal

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

If you see "npm: command not found":

Go to nodejs.org
Click the green download button
Install it (click through the installer)
In VS Code, close the terminal panel (click the X on it) and open a new one: Terminal → New Terminal
Try the command again

Start Claude Code

Type claude and press Enter. A browser window opens asking you to sign in. Sign in, click Authorize, come back to VS Code.

You're now in Claude Code. The terminal looks different — it has an input area where you type messages to Claude.

Create the project

Say to Claude

Create a new project called "roast-my-website" on my Desktop. Set it up as a Next.js website with Tailwind CSS. Set up design tokens with a dark theme and orange accent color. Set up the translation system (i18n) with English as default. Initialize Git and create a private GitHub repository. Set up Docker so the project runs in a container. Walk me through anything that needs my input.

Claude works through this. It might ask:

"Do you have a GitHub account?" → If not, Claude helps you create one. If yes, a browser window opens — click Authorize.
"Docker Desktop needs to be running" → Open Docker Desktop from Applications (Mac) or Start Menu (Windows). Wait for the whale icon. Tell Claude it's running.

Open the project in VS Code

Click File → New Window (a fresh VS Code opens)
Click File → Open Folder
Navigate to your Desktop, find roast-my-website, click Open

You see the project files in the left sidebar.

Start Claude Code in the project

Open the terminal: Terminal → New Terminal. Type claude, press Enter.

Start Docker and see the project

Say to Claude

Start the project in Docker so I can see it in my browser.

Claude tells you the address. Open it in your browser.

If Claude says "port is already in use":

Say to Claude

Use a different port.

Create CLAUDE.md

Say to Claude

Create a CLAUDE.md for this project. The project is "Roast My Website" — an AI tool that scores websites with funny feedback. We're in Phase 1: building the homepage and roast functionality. Rules: use design tokens for all colors, all text through the translation system, validate user input. You should update the status after every commit.

Check everything

Say to Claude

Is everything working? Docker running, project visible in the browser, Git set up, GitHub connected, CLAUDE.md created? Fix anything that's off.

Note

At the end of every lesson, tell Claude: "Commit and push." This saves your work and backs it up to GitHub.

Build This

Run the init command. Open Claude Code. Ask it about the project. If it answers correctly, you're ready.

Lesson 02

The URL input form

The homepage with a URL input and submit button. Clean, dark, one purpose.

Enter plan mode

Press Shift+Tab. Look at the bottom-left corner of Claude Code. It now says Plan Mode. In this mode, Claude thinks and plans but doesn't change files.

Describe the homepage

Say to Claude

I want the homepage. A big headline, something like "How bad is your website?" with the word "bad" in an italic accent font. Below that, an input field where you paste a URL and a big round orange button that says "Roast it." Dark background, lots of space. All text through the translation system. That's the whole page for now.

Claude suggests a plan. Read it. If you want to change something:

Say to Claude

I don't want the subtitle. Just the headline and the form. Make the button really big, like a pill shape.

Build it

Press Shift+Tab again. Bottom-left no longer says Plan Mode. Now Claude can change files.

Say to Claude

Build the homepage based on what we discussed.

When Claude is done:

Say to Claude

Are the Docker changes picked up? Tell me the URL to check.

Open the URL in your browser. You should see your homepage.

Make it look better

Say to Claude

The headline should be much bigger. There's not enough space between the headline and the form. The button doesn't look clickable enough — give it more presence.

Refresh the browser after each change. Keep going until it looks good.

Add validation

Say to Claude

If someone clicks the button without typing anything, show an error. If they type something that isn't a URL, show a different error.

Test it: click the button with nothing typed. Then type "asdf" and click it.

Save

Say to Claude

Commit and push.

Build This

Build it. Don't overthink. Describe the form to Claude, let it build, iterate once on the design. Ship the homepage.

Lesson 03

The AI roast

An API route that takes a URL, sends it to AI, and returns a structured roast with scores.

Plan the roast

Press Shift+Tab for plan mode.

Say to Claude

When someone submits a URL, I want the app to visit that website, look at it, and write a brutally honest review. Score it 1-10 in four areas: design, copy quality, user experience, and first impression. The tone should be funny and sharp, like Simon Cowell. Each area gets a score and a few sentences of specific feedback. Plan this out.

Press Shift+Tab to exit plan mode.

Say to Claude

Build it.

The AI connection

Claude might ask for an API key:

Say to Claude

Walk me through getting a Claude API key.

Claude tells you: go to console.anthropic.com, find API Keys, create one, copy it. Paste it when Claude asks.

Try it

Say to Claude

Is Docker running with the latest changes? Tell me what URL to open.

Paste a real website URL in the form. Click "Roast it." Wait a few seconds. You should see scores and feedback.

Refine

Say to Claude

The feedback is too generic and polite. I want it sharper. If the site has a stock photo of people shaking hands, call it out. If the button says "Learn More" with nothing to learn, roast that. Make it genuinely funny.

Test again. Keep refining:

Say to Claude

Scores are too high. Most sites should get 3-6, not 7-8.

Save

Say to Claude

Commit and push.

Build This

Roast your own website first. Then roast a competitor's. Compare the scores.

Lesson 04

The roast display

A beautiful result component with animated scores, category cards, and feedback. The thing people screenshot.

Redesign the scores

Say to Claude

The roast results look too plain. I want the overall score huge inside a colored circle — red for bad, orange for mediocre, green for good. It should animate, counting up to the final number. Below that, four cards for each category with their score and feedback. Make it look like something people would screenshot.

Fine-tune

Say to Claude

More space between the cards. The feedback text is too small. The score animation should be slower, about 1 second.

Second pass

Say to Claude

Review the results page. Does it work on a phone? Are the colors using design tokens? Any text hardcoded instead of in the translation file? Fix what you find.

Save

Say to Claude

Phase 1 done. Commit and push.

Build This

Run a second pass on the display component. Fix what Claude finds. This is how the second pass habit starts.

Lesson 05

Save roasts to Supabase

Roasts saved to a real database. Results persist and can be shared.

Set up the database

Say to Claude

The roasts disappear when I refresh. I need them saved permanently. Set up a database table that stores the website URL, the domain name, all four scores, the overall score, the feedback, and the date. Only the app should be able to add new ones. Anyone should be able to view them. Use our Supabase project.

Claude might ask for your Supabase credentials:

Go to supabase.com, open your project
In the left sidebar, click Settings, then API
Copy the Project URL and paste it to Claude
Copy the Service role key (click "Reveal" first) and paste it to Claude

If Claude asks "Do you want me to set up a direct connection (MCP) to the database?" — say yes.

Connect the app

Say to Claude

Now save roasts automatically when someone uses the app. I shouldn't have to do anything.

Test it

Roast a website in your browser. Then:

Say to Claude

Did that roast save to the database? Show me what's stored.

Refresh the browser page. The roast should still be there.

Save

Say to Claude

Commit and push.

Build This

Roast a site and verify it appears in your Supabase dashboard. That's your first database-persisted feature.

Lesson 06

Shareable roast pages

Every roast gets its own URL. Dynamic routes, SEO metadata, OpenGraph previews.

Individual pages

Say to Claude

After someone roasts a website, take them to a unique page for that roast. Something like /roast/abc123. If I send that link to someone, they see the full roast even if they've never been to our site.

Social media previews

Say to Claude

When someone pastes a roast link on LinkedIn or WhatsApp, I want the preview to show the website name and score. Like "example.com scored 3.2/10."

Share button

Say to Claude

Add a "Share this roast" button that copies the URL and shows "Copied!" for 2 seconds. And a "Roast another website" button that goes back to the homepage.

Test it

Roast a site. You land on the unique page. Click "Share this roast." Open a private window (Cmd+Shift+N on Mac, Ctrl+Shift+N on Windows). Paste the link. The roast loads.

Save

Say to Claude

Commit and push.

Build This

Send a roast URL to a friend or colleague. Ask if it loads and looks right. That's your first shareable feature.

Lesson 07

The Top 10 leaderboard

The 10 worst-scoring websites on a public leaderboard. The reason people come back.

Build the leaderboard

Say to Claude

Add a leaderboard to the homepage below the form. The 10 lowest-scoring websites, ranked worst to least worst. Each entry shows: rank number, domain name, score with a color, and the first line of the first impression feedback. Clicking an entry goes to the full roast. Put the section title through the translation system — something like "The Wall of Shame."

Empty states

Say to Claude

What if there are no roasts yet? Or only 3? Handle both. Show a message when empty, show what exists when fewer than 10.

Populate it

Roast 5-6 different websites to fill the leaderboard. Mix: a good site, a bad one, a corporate one, a blog. Refresh the homepage. The leaderboard should show them ranked.

Save

Say to Claude

Phase 2 done. Review everything, commit and push.

Build This

Roast 3-5 different websites to populate the leaderboard. See them ranked. The competitive element makes the app addictive.

Lesson 08

Adding a second language

Full i18n with a second language. The AI roast output also translates. You pick the language.

Check for hardcoded text

Say to Claude

Check the app for any text that's written directly in English instead of going through the translation system. Fix anything you find.

Add the language

Pick whatever language fits your audience.

Say to Claude

Add Spanish as a second language. Translate everything: headline, buttons, errors, leaderboard title, share button. Keep it natural and fun, not a stiff translation.

AI output in that language too

Say to Claude

When someone uses the app in Spanish, the roast feedback should also be in Spanish. Natural Spanish humor, not translated English.

Test it

In your browser, change the /en/ in the address bar to /es/ (or your language). The whole interface should switch. Roast a site — the feedback should come back in that language.

Say to Claude

The Spanish headline doesn't sound natural. Make it more idiomatic.

Save

Say to Claude

Commit and push.

Build This

Add the second language and roast the same site in both languages. Compare the humor. Different languages produce different roast styles.

Lesson 09

Playwright tests

Automated tests for both languages, desktop and mobile. Your safety net.

Tell Claude what to test

Say to Claude

Write tests for the app and run them. Test that: the homepage loads in both languages, the form shows errors on empty or invalid submit, the leaderboard appears, a roast page shows scores and categories, nothing scrolls sideways on a phone screen (375px wide), and the second language shows translated text. Tell me what passes and what fails.

Fix failures

For each failure:

Say to Claude

The phone test failed. What's wrong? Fix it and run the test again.

Final check

Say to Claude

Run all tests one more time.

All green? Anytime you change something later:

Say to Claude

Run all tests to check I didn't break anything.

Build This

Run the tests. If they all pass first try, congratulations. If something fails, fix it. Either way, you now have automated quality assurance.

Lesson 10

Deploy and share

Live on Vercel with a real URL. Share it with the world.

Final check

Say to Claude

Do a final check of everything. Tests, build errors, missing translations, security. Fix whatever you find.

Deploy

Say to Claude

Deploy this to Vercel so it's live on the internet. Walk me through every step.

Claude walks you through it. It might open a browser for Vercel login, ask you to link the project, and ask for your API keys (Supabase URL, Supabase key, AI API key). These get stored securely — not in your code.

When done, Claude gives you a URL. That's your app. Live.

Test the live version

Open the URL. Try everything: roast a website, open a shareable link in a private window, check the leaderboard, switch languages, open it on your phone.

If something doesn't work:

Say to Claude

On the live site, [what's wrong]. It works locally. What's different?

Custom domain (optional)

Say to Claude

I want a custom domain. Walk me through buying one and connecting it. Explain every step.

Save

Say to Claude

Final commit and push.

Tip

Share it. LinkedIn: "I built an AI website roaster. Paste any URL and see what AI thinks." Send it to colleagues. Put it in your portfolio.

Build This

Deploy it. Share the URL with one person. Ask them to roast a website. Watch them use something you built from scratch.

You just shipped.

A live, deployed, bilingual, AI-powered web application. Built from scratch with Claude Code.

Share your appShare your app Back to UniversityBack to University