Dein erster Mini-Lernbuddy — in 30 Minuten von Null zu lauffähig

Genug Theorie. Jetzt baust du was — und zwar nicht irgendein „Hello World", sondern den ersten winzigen Prototyp deines Capstone-Projekts: ein Mini-Lernbuddy. Eine Seite, in die man eine Frage tippt und eine Erklärung zurückbekommt.

Kleiner ehrlicher Hinweis vorweg: Die Antwort ist heute noch gemockt — also fest hinterlegt, nicht von einer echten KI. Das ist Absicht. Heute lernst du den Workflow mit Claude Code im Reflex — leerer Ordner, Prompt, Diff, Build, Commit. Die echte KI hängst du später dran (Modul 3 und im Capstone). Erst das Gerüst, dann der Motor.

Diese Lektion ist bewusst von Null — der nackte Workflow, ohne Vorlage. Ab Modul 2 wechselst du auf das becoss-coding-framework-Repo (die Plattform, in der du gerade liest). Warum erst dann? Steht am Ende dieser Lektion.

Schritt 1: Neues Projekt anlegen

cd ~/dev
npx create-next-app@latest mein-lernbuddy \
  --typescript --tailwind --app --src-dir --import-alias "@/*" \
  --eslint --turbopack
cd mein-lernbuddy

Erwartete Reaktion: ein neuer Ordner mein-lernbuddy mit dem Next.js-Default-Setup. Dauer ~30 Sekunden, am Ende steht sowas wie „added 305 packages".

Was ist da passiert? create-next-app hat dir ein frisches Projekt gebaut — mit TypeScript, Tailwind (fürs Styling), App Router, dem @/*-Import-Kürzel, ESLint und Turbopack. Das ist das Standard-Setup für den ganzen Kurs, du musst dir die Flags nicht merken.

Schritt 2: Dev-Server starten

npm run dev

Erwartete Reaktion: Terminal zeigt ▲ Next.js … und „Ready in N ms" mit http://localhost:3000.

Browser auf http://localhost:3000 — du siehst die Next.js-Default-Seite. Lass den Server in dem Terminal laufen, der aktualisiert die Seite gleich automatisch.

Schritt 3: Claude Code starten

Öffne ein zweites Terminal-Fenster, geh ins Projekt und starte Claude Code:

cd ~/dev/mein-lernbuddy
claude

Erwartete Reaktion: der Claude-Code-Prompt erscheint mit einem ›. Du bist jetzt im Projekt — Claude kann deine Dateien lesen und ändern.

Schritt 4: Den Mini-Lernbuddy prompten

Tippe in den Claude-Prompt (ruhig wörtlich übernehmen):

Ersetze den Inhalt von src/app/page.tsx durch eine Seite „Mein Lernbuddy". Oben eine freundliche Überschrift. Darunter ein Textfeld mit Platzhalter „Stell deine Frage, z. B. ‚Wie addiere ich Brüche?'" und ein Button „Erklär mir das". Wenn man auf den Button klickt, erscheint darunter eine Beispiel-Erklärung in mehreren Schritten — die Erklärung ist erstmal fest hinterlegt (ein kurzer, freundlicher Beispieltext, der den Lösungsweg für Bruch-Addition Schritt für Schritt zeigt, nicht nur das Ergebnis). Das braucht Interaktivität, also eine Client-Komponente. Style es mit Tailwind: zentriert, ruhige Typographie, der Antwortbereich gut abgesetzt.

Erwartete Reaktion: Claude Code antwortet zuerst mit einem Plan (was es vorhat, welche Datei). Du stimmst zu, dann zeigt es den Diff. Du akzeptierst — oder lehnst ab und schärfst nach.

Schritt 5: Anschauen

Zurück in den Browser. Die Seite hat sich live aktualisiert. Tipp eine Frage ein, klick den Button — die Beispiel-Erklärung erscheint.

Erwartete Reaktion: dein erster Mini-Lernbuddy reagiert auf Klick und zeigt eine Schritt-für-Schritt-Erklärung. Sieht noch simpel aus — aber das Skelett deines Capstone-Projekts steht.

Sieht es seltsam aus oder erscheint nichts? Kopier, was du im Browser oder Terminal an Fehler siehst, in den Claude-Prompt und schreib „Bitte fix das." Mehr dazu gleich beim Fix-Schritt.

Schritt 6: Build prüfen, bevor du committest

npm run build

Erwartete Reaktion: grün, mit „✓ Compiled successfully". Falls rot: kompletten Fehler in den Claude-Prompt kopieren, „Bitte fix das" — Claude liest die Fehlermeldung und findet den Bug meist beim ersten Versuch.

Show → Do → Fix — so lernst du's im Reflex

Den Dreiklang ziehst du im ganzen Kurs durch:

Show (gerade gemacht): Ich zeig dir den Workflow Schritt für Schritt, du machst exakt nach.

Do (jetzt du): Erweitere selbst. Bitte Claude Code: „Lass den Antwortbereich erst nach einer kurzen ‚Lernbuddy denkt nach…'-Verzögerung von einer Sekunde erscheinen, damit es sich lebendiger anfühlt." — Claude löst es, du schaust, ob die Lösung sauber ist.

Fix (gleich): Bau absichtlich einen Fehler ein. Öffne src/app/page.tsx, ersetze irgendwo ein const durch cosnt, speichern. Der Dev-Server zeigt einen Fehler. Kopier die Meldung in den Claude-Prompt: „Der Server zeigt diesen Fehler: […]. Bitte fix das." — Claude diagnostiziert und repariert.

Vormachen, Nachmachen, kaputt machen, reparieren — das ist der schnellste Weg, AI-Coding zum Reflex zu machen. Nicht überspringen, gerade das Kaputtmachen lehrt am meisten.

Schritt 7: Committen und pushen

git add .
git commit -m "feat: erster mini-lernbuddy prototyp (gemockte antwort)"
git push

Falls noch kein Remote dranhängt:

1. Repo auf https://github.com/new anlegen (privat reicht). Erwartete Reaktion: du landest auf der Repo-Seite mit „Quick setup".

2. git remote add origin git@github.com:DEINNAME/mein-lernbuddy.git
   git branch -M main
   git push -u origin main

   Kopieren

Erwartete Reaktion: GitHub zeigt deinen ersten Commit. Dein erster Mini-Lernbuddy läuft lokal und liegt auf GitHub. Glückwunsch — das ist mehr, als die meisten je bis hierher schaffen.

Was du jetzt hast — und was als Nächstes kommt

Du hast mit Claude Code von Null einen Mini-Lernbuddy gebaut. Guter Reflex-Aufbau — aber das ist ein Spielzeug-Vorgeschmack. Die echte KI fehlt noch, Login fehlt, gespeichert wird nichts. Genau das ist der Plan. Ab Modul 2 arbeitest du nicht mehr im leeren Ordner, sondern in einem vollständigen Production-Setup: dem becoss-coding-framework-Repo. Und in Modul 8 baust du daraus den echten Lernbuddy — den du wirklich launchst.