Capstone: App bauen und deployen

🔄 Kurzer Rueckblick: Ueber diesen Kurs hast du gelernt: Tool-Wahl (Lektion 2), Prompting-Techniken (Lektion 3), die Build-Reihenfolge (Lektion 4), Debugging (Lektion 5), Produktions-Haertung (Lektion 6) und fortgeschrittene Patterns wie Rules-Dateien und Testing (Lektion 7). Dieses Capstone integriert alles.

Du kennst die Tools, die Prompting-Techniken, die Debugging-Strategien und die Produktions-Patterns. Jetzt bau etwas Echtes und ship es.

Waehle dein Capstone-Projekt

Such dir eins aus (oder designe dein eigenes mit aehnlichem Umfang):

Option A: Persoenlicher Finanz-Tracker

Einnahmen und Ausgaben tracken, Ausgaben kategorisieren, Charts der Ausgabenmuster zeigen, monatliche Budgetlimits mit Warnungen.

Option B: Rezeptsammlung

Rezepte mit Zutaten und Anleitungen speichern, nach Kueche und Mahlzeittyp taggen, suchen und filtern, Einkaufslisten aus ausgewaehlten Rezepten generieren.

Option C: Gewohnheits-Tracker

Taegliche Gewohnheiten mit Streak-Zaehlung, Kalenderansicht der Erledigungen, Statistiken und Grafiken, Erinnerungen.

✅ Quick Check: Bevor du baust, beantworte drei Konzept-Fragen fuer dein gewaehltes Projekt: Fuer wen ist es? Was ist die eine Kernfunktion? Was ist die minimale Version? (Antwort: Fuer einen Gewohnheits-Tracker: Es ist fuer Leute die persoenliche Routinen aufbauen. Die Kernfunktion ist das taegliche Tracken ob Gewohnheiten erledigt wurden. Die MVP-Version ist eine Liste von Gewohnheiten mit Checkboxen und einem Streak-Zaehler — keine Charts, keine Erinnerungen, kein Sharing. Starte minimal.)

Der komplette Build-Durchlauf

Phase 1: Setup (5 Minuten)

1. Erstelle deine Rules-Datei:

Projekt: [Dein App-Name]
Stack: Next.js 14, TypeScript, Tailwind CSS, Supabase
Komponenten in /components, Seiten in /app
React Server Components als Standard
Immer Loading- und Error-States hinzufuegen
Immer TypeScript, nie JavaScript

2. Versionskontrolle einrichten: Git initialisieren und den ersten Commit machen (leeres Projekt mit Rules-Datei).

Phase 2: Layout (10 Minuten)

Schreibe einen detaillierten Prompt fuer das komplette Layout — alle Seiten, Navigation und Responsive-Verhalten. Teste auf Mobil und Desktop. Committe.

Phase 3: Kern-Feature (15 Minuten)

Baue das wichtigste Feature mit localStorage zuerst. Gruendlich testen. Committen.

Phase 4: Support-Features (20 Minuten)

Fuege 2-3 sekundaere Features hinzu, ein Prompt pro Feature. Nach jedem testen und committen.

Phase 5: Produktions-Haertung (15 Minuten)

Zu Supabase migrieren (Datenbank + Auth)
Error Handling fuer jeden Fehlerfall
Formular-Validierung
Responsive Design testen

Phase 6: Polish und Deploy (10 Minuten)

Visuelles Polish (Farben, Animationen, leere Zustaende)
Deployen auf Vercel, Netlify oder dem Hosting deines Tools
Die Live-URL auf dem Handy testen

Deployment-Checkliste

Bevor du deine deployte App teilst:

FUNKTIONALITAET:
□ Kern-Feature funktioniert End-to-End
□ Alle Support-Features getestet
□ Formulare validieren Input vor dem Absenden
□ Fehlermeldungen sind hilfreich (keine Stack Traces)
□ Ladezustaende bei allen Datenabfragen
□ Leere Zustaende leiten Nutzer an (keine leeren Seiten)

RESPONSIVE:
□ Auf dem Handy getestet
□ Auf dem Tablet getestet
□ Auf dem Desktop getestet
□ Touch-Ziele sind antippbar (44px+)

SICHERHEIT:
□ Keine API-Keys im Client-Code
□ Authentifizierung schuetzt private Routen
□ Row Level Security auf Datenbank aktiviert
□ Inputs bereinigt vor Datenbank-Schreibvorgaengen

DEPLOYMENT:
□ App laed ohne Fehler auf der deployten URL
□ HTTPS aktiviert (automatisch bei den meisten Hostern)
□ Umgebungsvariablen auf dem Hoster konfiguriert
□ Von jemandem getestet der nicht du bist

Kurs-Ueberblick

Lektion	Kern-Skill	Was du gelernt hast
1. Willkommen	Verstehen	Vibe Coding = natuerliche Sprache → funktionierender Code
2. Tools	Setup	Das richtige Tool fuer dein Erfahrungslevel waehlen
3. Prompting	Kommunikation	Spezifitaet, Context Layering, schrittweises Prompting, R-P-I
4. Bauen	Konstruktion	Build-Reihenfolge: Layout → Kern → Support → Polish
5. Debugging	Problemloesung	Fehler lesen, Rollbacks, frische Gespraeche
6. Produktion	Haertung	Datenbank, Auth, Error Handling, Sicherheit
7. Fortgeschritten	Skalierung	Rules-Dateien, Architektur, Testing, wann Hand-Coden
8. Capstone	Integration	Kompletter Workflow von Idee zur deployten App

Wie es weitergeht

Bau mehr. Der schnellste Weg besser im Vibe Coding zu werden ist mehr Apps zu bauen. Jedes Projekt lehrt dich neue Patterns.

Lerne etwas Code-Grundlagen. HTML, CSS und JavaScript-Grundlagen zu verstehen macht deine Prompts praeziser und dein Debugging schneller. Du musst kein Programmierer werden — nur genug um die Sprache zu sprechen.

Bleib am Ball. Vibe-Coding-Tools entwickeln sich rasant weiter. Folge den Communities: Cursors Discord, Claude Codes GitHub, Lovables Community-Foren.

Teile was du baust. Deploye deine Apps, teile sie mit Freunden und sammle Feedback. Echte Nutzer entdecken Probleme die du dir nie vorgestellt haettest.

Key Takeaways

Der komplette Workflow: Konzept → Rules-Datei → Layout → Kern → Support → Haertung → Polish → Deploy
Committe nach jedem funktionierenden Feature — diese Checkpoints sind dein Sicherheitsnetz
Produktions-Haertung (Auth, Datenbank, Error Handling) trennt Spielzeuge von echten Tools
Teste deine deployte App auf dem Handy und lass sie von jemand anderem testen
Vibe Coding ist ein Skill der mit Uebung besser wird — bau mehr, lerne mehr
Du musst nicht jede Codezeile verstehen um echte, nuetzliche Software zu shippen