Studio Hyra University

Roast My Website

Baue eine echte KI-gesteuerte App von Grund auf. Schritt für Schritt. Heute noch deployen.

10 Lektionen · ~4-6 Stunden hands-on

Lektion 01

Das Projekt aufsetzen

Ein frisches Next.js-Projekt mit konfiguriertem Claude Code, startbereit. 10 Minuten.

Öffne VS Code und das Terminal

Öffne VS Code. Klicke oben in der Menüleiste auf Terminal → New Terminal. Unten öffnet sich ein Panel. Hier tippst du Befehle ein.

Installiere Claude Code

Falls du <strong>"npm: command not found"</strong> siehst:

Terminal

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

Falls du "npm: command not found" siehst:

Gehe zu nodejs.org
Klicke auf den grünen Download-Button
Installiere es (klicke dich durch den Installer)
Schließe in VS Code das Terminal-Panel (klicke auf das X) und öffne ein neues: Terminal → New Terminal
Versuche den Befehl erneut

Starte Claude Code

Tippe claude und drücke Enter. Ein Browserfenster öffnet sich zum Anmelden. Melde dich an, klicke auf Authorize, gehe zurück zu VS Code.

Du bist jetzt in Claude Code. Das Terminal sieht anders aus — es hat ein Eingabefeld, in dem du Nachrichten an Claude tippst.

Erstelle das Projekt

Sag Claude

Erstelle ein neues Projekt namens "roast-my-website" auf meinem Schreibtisch. Richte es als Next.js-Website mit Tailwind CSS ein. Richte Design Tokens mit einem dunklen Theme und orangener Akzentfarbe ein. Richte das Übersetzungssystem (i18n) mit Englisch als Standard ein. Initialisiere Git und erstelle ein privates GitHub-Repository. Richte Docker ein, damit das Projekt in einem Container läuft. Führe mich durch alles, wo du meine Eingabe brauchst.

Claude arbeitet das ab. Es könnte fragen:

"Hast du einen GitHub-Account?" → Falls nicht, hilft Claude dir einen zu erstellen. Falls ja, öffnet sich ein Browserfenster — klicke auf Authorize.
"Docker Desktop muss laufen" → Öffne Docker Desktop aus Programme (Mac) oder Startmenü (Windows). Warte auf das Wal-Symbol. Sag Claude, dass es läuft.

Öffne das Projekt in VS Code

Klicke auf File → New Window (ein neues VS Code-Fenster öffnet sich)
Klicke auf File → Open Folder
Navigiere zu deinem Schreibtisch, finde roast-my-website, klicke auf Open

Du siehst die Projektdateien in der linken Seitenleiste.

Starte Claude Code im Projekt

Öffne das Terminal: Terminal → New Terminal. Tippe claude, drücke Enter.

Starte Docker und sieh dir das Projekt an

Sag Claude

Starte das Projekt in Docker, damit ich es im Browser sehen kann.

Claude nennt dir die Adresse. Öffne sie im Browser.

Falls Claude sagt "port is already in use":

Sag Claude

Verwende einen anderen Port.

Erstelle CLAUDE.md

Sag Claude

Erstelle eine CLAUDE.md für dieses Projekt. Das Projekt ist "Roast My Website" — ein KI-Tool, das Websites mit lustiger Bewertung bewertet. Wir sind in Phase 1: Homepage und Roast-Funktionalität bauen. Regeln: Design Tokens für alle Farben verwenden, aller Text über das Übersetzungssystem, Benutzereingaben validieren. Du sollst den Status nach jedem Commit aktualisieren.

Überprüfe alles

Sag Claude

Funktioniert alles? Docker läuft, Projekt im Browser sichtbar, Git eingerichtet, GitHub verbunden, CLAUDE.md erstellt? Repariere, was nicht stimmt.

Note

Sag am Ende jeder Lektion zu Claude: "Commit and push." Das speichert deine Arbeit und sichert sie auf GitHub.

Baue das

Führe den Init-Befehl aus. Öffne Claude Code. Stelle eine Frage zum Projekt. Wenn es richtig antwortet, bist du startklar.

Lektion 02

Das URL-Eingabeformular

Die Homepage mit einem URL-Eingabefeld und Absende-Button. Clean, dunkel, ein Zweck.

Gehe in den Plan-Modus

Drücke Shift+Tab. Schau unten links in Claude Code. Da steht jetzt Plan Mode. In diesem Modus denkt und plant Claude, ändert aber keine Dateien.

Beschreibe die Homepage

Sag Claude

Ich will die Homepage. Eine große Überschrift, so etwas wie "Wie schlecht ist deine Website?" mit dem Wort "schlecht" in einer kursiven Akzentschrift. Darunter ein Eingabefeld, in das man eine URL einfügt, und ein großer runder orangener Button mit "Roast it." Dunkler Hintergrund, viel Platz. Aller Text über das Übersetzungssystem. Das ist die ganze Seite für jetzt.

Claude schlägt einen Plan vor. Lies ihn. Wenn du etwas ändern willst:

Sag Claude

Ich will keinen Untertitel. Nur die Überschrift und das Formular. Mach den Button richtig groß, wie eine Pillenform.

Baue es

Drücke nochmal Shift+Tab. Unten links steht kein Plan Mode mehr. Jetzt kann Claude Dateien ändern.

Sag Claude

Baue die Homepage basierend auf dem, was wir besprochen haben.

Wenn Claude fertig ist:

Sag Claude

Wurden die Docker-Änderungen übernommen? Gib mir die URL zum Prüfen.

Öffne die URL im Browser. Du solltest deine Homepage sehen.

Mach es schöner

Sag Claude

Die Überschrift muss viel größer sein. Es ist nicht genug Platz zwischen Überschrift und Formular. Der Button sieht nicht klickbar genug aus — gib ihm mehr Präsenz.

Aktualisiere den Browser nach jeder Änderung. Mach weiter, bis es gut aussieht.

Füge Validierung hinzu

Sag Claude

Wenn jemand auf den Button klickt, ohne etwas zu tippen, zeige eine Fehlermeldung. Wenn jemand etwas tippt, das keine URL ist, zeige eine andere Fehlermeldung.

Teste es: klicke auf den Button ohne etwas zu tippen. Dann tippe "asdf" und klicke.

Speichern

Sag Claude

Commit and push.

Baue das

Baue es. Denk nicht zu viel nach. Beschreibe das Formular für Claude, lass es bauen, iteriere einmal am Design. Homepage shippen.

Lektion 03

Der KI-Roast

Eine API-Route, die eine URL entgegennimmt, sie an die KI schickt und einen strukturierten Roast mit Bewertungen zurückgibt.

Plane den Roast

Drücke Shift+Tab für den Plan-Modus.

Sag Claude

Wenn jemand eine URL abschickt, will ich, dass die App diese Website besucht, sie ansieht und eine gnadenlos ehrliche Bewertung schreibt. Bewerte 1-10 in vier Bereichen: Design, Textqualität, Benutzererfahrung und erster Eindruck. Der Ton soll witzig und scharf sein, wie Simon Cowell. Jeder Bereich bekommt eine Note und ein paar Sätze spezifisches Feedback. Plane das aus.

Drücke Shift+Tab, um den Plan-Modus zu verlassen.

Sag Claude

Baue es.

Die KI-Verbindung

Claude fragt vielleicht nach einem API Key:

Sag Claude

Führe mich durch das Erstellen eines Claude API Keys.

Claude sagt dir: gehe zu console.anthropic.com, finde API Keys, erstelle einen, kopiere ihn. Füge ihn ein, wenn Claude danach fragt.

Probiere es aus

Sag Claude

Läuft Docker mit den neuesten Änderungen? Gib mir die URL zum Öffnen.

Füge eine echte Website-URL ins Formular ein. Klicke auf "Roast it." Warte ein paar Sekunden. Du solltest Bewertungen und Feedback sehen.

Verfeinern

Sag Claude

Das Feedback ist zu generisch und zu höflich. Ich will es schärfer. Wenn die Seite ein Stockfoto von Händeschütteln hat, benenne es. Wenn der Button "Mehr erfahren" sagt, aber es gibt nichts zu erfahren, roaste das. Mach es wirklich lustig.

Teste nochmal. Verfeinere weiter:

Sag Claude

Die Bewertungen sind zu hoch. Die meisten Seiten sollten eine 3-6 bekommen, keine 7-8.

Speichern

Sag Claude

Commit and push.

Baue das

Roaste zuerst deine eigene Website. Dann die eines Wettbewerbers. Vergleiche die Scores.

Lektion 04

Die Roast-Anzeige

Eine schöne Ergebnis-Komponente mit animierten Scores, Kategorie-Karten und Feedback. Das Ding, das Leute screenshotten.

Gestalte die Bewertungen neu

Sag Claude

Die Roast-Ergebnisse sehen zu schlicht aus. Ich will die Gesamtbewertung riesig in einem farbigen Kreis — rot für schlecht, orange für mittelmäßig, grün für gut. Es soll animiert sein, hochzählend zur Endnote. Darunter vier Karten für jede Kategorie mit ihrer Bewertung und dem Feedback. Mach es so, dass Leute einen Screenshot davon machen würden.

Feintuning

Sag Claude

Mehr Abstand zwischen den Karten. Der Feedbacktext ist zu klein. Die Score-Animation soll langsamer sein, etwa 1 Sekunde.

Zweite Überprüfung

Sag Claude

Überprüfe die Ergebnisseite. Funktioniert es auf dem Handy? Verwenden die Farben Design Tokens? Ist Text hardcodiert statt in der Übersetzungsdatei? Repariere, was du findest.

Speichern

Sag Claude

Phase 1 fertig. Commit and push.

Baue das

Führe einen zweiten Durchgang auf der Anzeige-Komponente durch. Repariere, was Claude findet. So beginnt die Gewohnheit des zweiten Durchgangs.

Lektion 05

Roasts in Supabase speichern

Roasts werden in einer echten Datenbank gespeichert. Ergebnisse bleiben bestehen und können geteilt werden.

Richte die Datenbank ein

Sag Claude

Die Roasts verschwinden, wenn ich aktualisiere. Ich brauche sie dauerhaft gespeichert. Erstelle eine Datenbanktabelle, die die Website-URL, den Domainnamen, alle vier Bewertungen, die Gesamtbewertung, das Feedback und das Datum speichert. Nur die App soll neue hinzufügen können. Jeder soll sie ansehen können. Nutze unser Supabase-Projekt.

Claude fragt vielleicht nach deinen Supabase-Zugangsdaten:

Gehe zu supabase.com, öffne dein Projekt
Klicke in der linken Seitenleiste auf Settings, dann API
Kopiere die Project URL und füge sie bei Claude ein
Kopiere den Service Role Key (klicke zuerst auf "Reveal") und füge ihn bei Claude ein

Wenn Claude fragt "Soll ich eine direkte Verbindung (MCP) zur Datenbank einrichten?" — sag ja.

Verbinde die App

Sag Claude

Speichere Roasts jetzt automatisch, wenn jemand die App benutzt. Ich soll nichts dafür tun müssen.

Teste es

Roaste eine Website im Browser. Dann:

Sag Claude

Wurde dieser Roast in der Datenbank gespeichert? Zeig mir, was gespeichert ist.

Aktualisiere die Browserseite. Der Roast sollte immer noch da sein.

Speichern

Sag Claude

Commit and push.

Baue das

Roaste eine Seite und verifiziere, dass sie in deinem Supabase-Dashboard erscheint. Das ist dein erstes datenbankgespeichertes Feature.

Lektion 06

Teilbare Roast-Seiten

Jeder Roast bekommt seine eigene URL. Dynamische Routen, SEO-Metadaten, OpenGraph-Vorschauen.

Individuelle Seiten

Sag Claude

Nachdem jemand eine Website roastet, bringe sie auf eine eigene Seite für diesen Roast. So etwas wie /roast/abc123. Wenn ich diesen Link an jemanden schicke, sehen sie den ganzen Roast, auch wenn sie noch nie auf unserer Seite waren.

Social-Media-Vorschauen

Sag Claude

Wenn jemand einen Roast-Link auf LinkedIn oder WhatsApp einfügt, soll die Vorschau den Website-Namen und die Bewertung zeigen. So wie "example.com hat 3.2/10 bekommen."

Teilen-Button

Sag Claude

Füge einen "Diesen Roast teilen"-Button hinzu, der die URL kopiert und 2 Sekunden "Kopiert!" anzeigt. Und einen "Noch eine Website roasten"-Button, der zurück zur Homepage geht.

Teste es

Roaste eine Seite. Du landest auf der eigenen Seite. Klicke auf "Diesen Roast teilen." Öffne ein privates Fenster (Cmd+Shift+N auf Mac, Ctrl+Shift+N auf Windows). Füge den Link ein. Der Roast lädt.

Speichern

Sag Claude

Commit and push.

Baue das

Schicke eine Roast-URL an einen Freund oder Kollegen. Frage ob sie lädt und gut aussieht. Das ist dein erstes teilbares Feature.

Lektion 07

Die Top 10-Rangliste

Die 10 am schlechtesten bewerteten Websites auf einer öffentlichen Rangliste. Der Grund, warum Leute wiederkommen.

Baue die Rangliste

Sag Claude

Füge eine Rangliste auf der Homepage unter dem Formular hinzu. Die 10 am schlechtesten bewerteten Websites, sortiert von schlimmster zu am wenigsten schlimm. Jeder Eintrag zeigt: Rang, Domainname, Bewertung mit Farbe und die erste Zeile des Erste-Eindruck-Feedbacks. Klick auf einen Eintrag geht zum vollständigen Roast. Der Abschnittstitel geht über das Übersetzungssystem — so etwas wie "Die Mauer der Schande."

Leere Zustände

Sag Claude

Was, wenn es noch keine Roasts gibt? Oder nur 3? Behandle beides. Zeige eine Nachricht, wenn leer, zeige, was existiert, wenn weniger als 10.

Befülle sie

Roaste 5-6 verschiedene Websites, um die Rangliste zu füllen. Mische: eine gute Seite, eine schlechte, eine Business-Seite, einen Blog. Aktualisiere die Homepage. Die Rangliste sollte sie sortiert anzeigen.

Speichern

Sag Claude

Phase 2 fertig. Überprüfe alles, commit and push.

Baue das

Roaste 3-5 verschiedene Websites, um die Rangliste zu füllen. Sieh sie gerankt. Das kompetitive Element macht die App süchtig machend.

Lektion 08

Eine zweite Sprache hinzufügen

Vollständige i18n mit einer zweiten Sprache. Der KI-Roast-Output wird auch übersetzt. Du wählst die Sprache.

Prüfe auf hardcodierten Text

Sag Claude

Prüfe die App auf Text, der direkt auf Englisch geschrieben ist statt über das Übersetzungssystem. Repariere alles, was du findest.

Füge die Sprache hinzu

Wähle eine Sprache, die zu deiner Zielgruppe passt.

Sag Claude

Füge Spanisch als zweite Sprache hinzu. Übersetze alles: Überschrift, Buttons, Fehlermeldungen, Ranglistentitel, Teilen-Button. Halte es natürlich und locker, keine steife Übersetzung.

KI-Ausgabe auch in dieser Sprache

Sag Claude

Wenn jemand die App auf Spanisch benutzt, soll das Roast-Feedback auch auf Spanisch sein. Natürlicher spanischer Humor, kein übersetztes Englisch.

Teste es

Ändere in deinem Browser die /en/ in der Adresszeile zu /es/ (oder deine Sprache). Die ganze Oberfläche sollte wechseln. Roaste eine Seite — das Feedback sollte in dieser Sprache zurückkommen.

Sag Claude

Die spanische Überschrift klingt nicht natürlich. Mach sie idiomatischer.

Speichern

Sag Claude

Commit and push.

Baue das

Füge die zweite Sprache hinzu und roaste dieselbe Seite in beiden Sprachen. Vergleiche den Humor. Verschiedene Sprachen produzieren verschiedene Roast-Stile.

Lektion 09

Playwright-Tests

Automatisierte Tests für beide Sprachen, Desktop und Mobil. Dein Sicherheitsnetz.

Sag Claude, was getestet werden soll

Sag Claude

Schreibe Tests für die App und führe sie aus. Teste, dass: die Homepage in beiden Sprachen lädt, das Formular Fehlermeldungen bei leerem oder ungültigem Absenden zeigt, die Rangliste erscheint, eine Roast-Seite Bewertungen und Kategorien zeigt, nichts seitwärts scrollt auf einem Handybildschirm (375px breit), und die zweite Sprache übersetzte Texte zeigt. Sag mir, was besteht und was fehlschlägt.

Fehler beheben

Für jeden Fehler:

Sag Claude

Der Handy-Test ist fehlgeschlagen. Was ist los? Repariere es und führe den Test nochmal aus.

Letzte Prüfung

Sag Claude

Führe alle Tests noch einmal aus.

Alles grün? Wenn du später etwas änderst:

Sag Claude

Führe alle Tests aus, um zu prüfen, dass ich nichts kaputt gemacht habe.

Baue das

Führe die Tests aus. Wenn beim ersten Versuch alles besteht, Glückwunsch. Wenn etwas fehlschlägt, repariere es. So oder so hast du jetzt automatisierte Qualitätssicherung.

Lektion 10

Deployen und teilen

Live auf Vercel mit einer echten URL. Teile es mit der Welt.

Letzte Prüfung

Sag Claude

Mach einen letzten Check von allem. Tests, Build-Fehler, fehlende Übersetzungen, Sicherheit. Repariere, was du findest.

Deployen

Sag Claude

Deploye das auf Vercel, damit es live im Internet steht. Führe mich durch jeden Schritt.

Claude führt dich durch. Es öffnet vielleicht einen Browser für die Vercel-Anmeldung, bittet dich das Projekt zu verknüpfen und fragt nach deinen API Keys (Supabase URL, Supabase Key, KI-API-Key). Die werden sicher gespeichert — nicht in deinem Code.

Wenn es fertig ist, gibt Claude dir eine URL. Das ist deine App. Live.

Teste die Live-Version

Öffne die URL. Probiere alles: roaste eine Website, öffne einen teilbaren Link in einem privaten Fenster, prüfe die Rangliste, wechsle die Sprache, öffne es auf dem Handy.

Wenn etwas nicht funktioniert:

Sag Claude

Auf der Live-Seite funktioniert [was nicht stimmt] nicht. Lokal funktioniert es. Was ist anders?

Eigene Domain (optional)

Sag Claude

Ich will eine eigene Domain. Führe mich durch den Kauf und die Verbindung. Erkläre jeden Schritt.

Speichern

Sag Claude

Letzter Commit and Push.

Tip

Teile es. LinkedIn: "Ich habe einen KI-Website-Roaster gebaut. Füge eine URL ein und schau, was KI davon hält." Schicke es Kollegen. Pack es ins Portfolio.

Baue das

Deploye es. Teile die URL mit einer Person. Bitte sie, eine Website zu roasten. Schau zu, wie sie etwas benutzen, das du von Grund auf gebaut hast.

Du hast gerade geshippt.

Eine live, deployte, zweisprachige, KI-gesteuerte Webanwendung. Von Grund auf gebaut mit Claude Code.

Teile deine AppTeile deine App Zurück zur UniversityZurück zur University