Es gibt Hunderte von Programmiersprachen, Frameworks und Tools da draussen. Als Anfaenger ist das laehmend. Welches sollst du lernen? Welches ist "das beste"?
Hier ist die Abkuerzung des Vibe Coders: Waehle einen gut unterstuetzten, populaeren Stack und bleib dabei. Das Ziel ist nicht, jedes Tool zu lernen -- sondern etwas Echtes zu bauen.
Unser Stack (und warum)
Konzept
Ein "Tech Stack" ist die Kombination aus Programmiersprachen, Frameworks und Tools, die zum Bau einer Anwendung verwendet werden. Stell es dir wie die Zutatenauswahl vor dem Kochen vor -- du brauchst nicht jedes Gewuerz im Laden, nur die richtigen fuer dein Rezept.Next.js -- Dein Application Framework
Next.js ist ein React-Framework zum Bau von Webanwendungen. Ein Framework handhabt beides:
- Frontend -- was Benutzer in ihrem Browser sehen (Seiten, Buttons, Formulare)
- Backend -- Server-Logik, die hinter den Kulissen passiert (Daten speichern, E-Mails senden)
Warum Next.js? Riesige Community, exzellente Dokumentation, und Claude kennt es extrem gut. Es nutzt React "Components" (wiederverwendbare Bausteine fuer deine UI) und hat eingebautes Routing (jede Seite ist ein URL-Pfad).
TypeScript -- JavaScript mit Sicherheitsnetz
TypeScript ist JavaScript mit Type-Annotations -- zusaetzliche Hinweise, die helfen, Fehler zu erkennen, bevor sie auftreten.
Warum TypeScript? Claude generiert deutlich besseren TypeScript-Code als reines JavaScript. Die Types fungieren als Vertrag zwischen verschiedenen Teilen deines Codes, sodass es weniger wahrscheinlich ist, dass Claude beim Schreiben eines Teils einen anderen kaputt macht.
Du musst die TypeScript-Syntax nicht lernen. Claude uebernimmt das. Du musst nur wissen, dass es existiert und im Hintergrund Fehler fuer dich abfaengt.
Tailwind CSS -- Styling leicht gemacht
Tailwind CSS ist ein Utility-First CSS-Framework. Anstatt separate Style-Dateien zu schreiben, fuegst du Klassen direkt zu HTML-Elementen hinzu.
Warum Tailwind? Es liest sich wie Kurzschrift, und Claude beherrscht es unglaublich gut.
Einige Beispiele:
bg-blue-500bedeutet "blauer Hintergrund"text-lgbedeutet "grosser Text"p-4bedeutet "Padding auf allen Seiten"flex items-centerbedeutet "Elemente in einer Reihe anordnen, vertikal zentriert"
DynamoDB -- Deine Cloud-Datenbank (spaeter)
Amazon DynamoDB ist die serverlose Datenbank von AWS. Wir fuegen sie in den Lektionen 9-10 hinzu.
Warum DynamoDB? Grosszuegiger Free Tier -- 25 GB Speicher und 200 Millionen Anfragen pro Monat, fuer immer kostenlos. Keine Server zu verwalten. Daten werden als flexible JSON-aehnliche Dokumente gespeichert.
Was wir NICHT verwenden (und warum)
- Kein PHP, Ruby oder Java -- nicht weil sie schlecht sind, sondern weil unser Stack fuer KI-gestuetzte Entwicklung optimiert ist
- Kein WordPress -- wir bauen etwas Individuelles und lernen, wie Apps unter der Haube funktionieren
- Kein Docker -- zu viel Komplexitaet fuer ein erstes Projekt. Vielleicht beim naechsten Mal.
Ehrlicher Hinweis
Es gibt keinen "besten" Tech Stack. Es gibt ueberall Kompromisse. Wir haben diesen Stack gewaehlt, weil er extrem gut mit KI-gestuetzter Entwicklung funktioniert, eine riesige Community fuer Problemloesung hat und auf dem AWS Free Tier laeuft. Wenn du spaeter Python, Go oder andere Tools erkunden moechtest, lassen sich die Vibe-Coding-Faehigkeiten, die du hier lernst, direkt uebertragen.Das Projekt erstellen
Jetzt erstellen wir tatsaechlich unser Next.js-Projekt. Oeffne Claude Code in deinem waitlist-wizard-Ordner:
Probier es aus
Tippe in Claude Code: "Create a new Next.js project with TypeScript and Tailwind CSS in this folder. Use the app router."Claude wird
npx create-next-app@latest mit den richtigen Konfigurationsflags ausfuehren. Das dauert etwa eine Minute.
Was erstellt wurde
Nachdem das Projekt generiert wurde, siehst du eine Reihe neuer Dateien. Hier sind die wichtigsten:
| Datei/Ordner | Was sie tut |
|---|---|
app/ |
Hier leben deine Seiten und Routen |
app/page.tsx |
Die Startseite deiner Anwendung |
app/layout.tsx |
Das gemeinsame Layout, das alle Seiten umschliesst |
public/ |
Statische Dateien (Bilder, Favicon) |
package.json |
Listet die Abhaengigkeiten deines Projekts |
tailwind.config.ts |
Tailwind CSS Konfiguration |
tsconfig.json |
TypeScript Konfiguration |
Mach dir keine Sorgen, jede Datei zu verstehen. Claude weiss, was jede tut, und du lernst es natuerlich beim Bauen.
Deine App starten
Probier es aus
Fuehre in deinem Terminal (oder frag Claude) aus:npm run dev
Oeffne dann deinen Browser unter http://localhost:3000. Du solltest die Standard-Willkommensseite von Next.js sehen. Deine App laeuft!
Pro-Tipp
Der Entwicklungsserver "beobachtet" deine Dateien. Wenn du eine Aenderung speicherst, aktualisiert sich der Browser automatisch -- kein manuelles Neuladen noetig. Diese sofortige Feedback-Schleife laesst Vibe Coding fast magisch wirken.Git Checkpoint
Lass uns unseren Fortschritt speichern:
git add .
git commit -m "initialized next.js project with typescript and tailwind"