Fortgeschrittene Patterns und Workflows

🔄 Kurzer Rueckblick: In der letzten Lektion hast du deinen Prototypen produktionsreif gemacht: echte Datenbank, Authentifizierung, Error Handling und Sicherheit. Jetzt lernst du Patterns die bei groesseren, komplexeren Projekten funktionieren.

Du kannst Apps mit Vibe Coding bauen. Jetzt machen wir dich schnell und zuverlaessig dabei. Diese fortgeschrittenen Patterns sind das was erfahrene Vibe Coder nutzen um komplexe Projekte zu bauen ohne in Bugs zu versinken.

Pattern 1: Rules-Dateien fuer Konsistenz

Wenn Projekte wachsen wuerdest du in jedem Prompt dieselben Anweisungen wiederholen: “benutze TypeScript”, “folge diesem Pattern”, “Komponenten in /components”. Rules-Dateien eliminieren diese Wiederholung.

Cursor (.cursorrules im Projekt-Root):

# Projekt: DevMarks Lesezeichen-Manager
# Stack: Next.js 14, TypeScript, Tailwind CSS, Supabase

## Code-Stil
- Immer TypeScript (nie JavaScript)
- Funktionale Komponenten mit Hooks
- Komponenten in PascalCase, Dateien in kebab-case
- Tailwind CSS fuer alles Styling (keine CSS-Module)

## Projektstruktur
- Komponenten: /components/{feature-name}/{ComponentName}.tsx
- Seiten: /app/{route}/page.tsx
- API: /app/api/{endpoint}/route.ts
- Typen: /types/{domain}.ts

## Patterns
- React Server Components als Standard
- 'use client' nur wenn noetig (onClick, useState, etc.)
- Immer Loading- und Error-States
- Zod fuer alle Formular-Validierung

Claude Code (.claude/rules im Projekt-Root):

Wenn du in diesem Projekt arbeitest:
- Benutze TypeScript fuer alle Dateien
- Folge der bestehenden Ordnerstruktur
- Fuehre Tests nach Aenderungen aus
- Committe nach jedem funktionierenden Feature

Rules-Dateien werden von der KI vor jeder Interaktion gelesen — wie ein Coding-Standards-Dokument fuers Team.

✅ Quick Check: Du startest ein neues Feature-Gespraech ohne Rules-Datei. Die KI generiert JavaScript statt dem TypeScript-Standard deines Projekts. Wuerde das mit einer Rules-Datei passieren? (Antwort: Nein. Die Rules-Datei spezifiziert “Immer TypeScript” und wird bei jeder KI-Interaktion automatisch einbezogen. Ohne sie nutzt die KI was natuerlich erscheint — oft JavaScript. Rules-Dateien verhindern diese Konsistenzprobleme.)

Pattern 2: Multi-Datei-Architektur

Kleine Apps leben in ein oder zwei Dateien. Groessere Apps brauchen Struktur. Lass die KI die Architektur planen bevor du baust:

Ich baue ein Projektmanagement-Tool. Bevor du Code schreibst,
plane die Datei-Architektur:

Features:
- Nutzer-Authentifizierung
- Projekt-CRUD (erstellen, lesen, aktualisieren, loeschen)
- Aufgabenverwaltung innerhalb von Projekten
- Teammitglieder-Zuweisung

Schlage bitte vor:
1. Ordnerstruktur
2. Kerndateien und ihre Verantwortlichkeiten
3. Wie Daten zwischen Komponenten fliessen
4. Welche Komponenten Server vs Client sind

Schreib noch keinen Code — nur den Plan.

Pruefe den Plan. Dann baue Feature fuer Feature und referenziere die Architektur.

Pattern 3: API-Integration

Externe APIs anbinden ist eine haeufige Vibe-Coding-Aufgabe:

Integriere die OpenWeatherMap-API in mein Dashboard:

API-Key: gespeichert in .env.local als WEATHER_API_KEY
Endpoint: https://api.openweathermap.org/data/2.5/weather

Anforderungen:
1. Erstelle eine serverseitige API-Route unter /api/weather die den
   Request proxied (nie den API-Key zum Client exponieren)
2. Erstelle ein WeatherWidget das Stadt, Temperatur und Wetter zeigt
3. Lade Daten beim Seitenaufruf mit 5-Minuten-Cache
4. Handle Fehler: Zeige "Wetter nicht verfuegbar" wenn die API down ist
5. Ladezustand: Zeige Skeleton waehrend des Ladens

Kern-Pattern: Proxy Third-Party-APIs immer ueber deine eigene Server-Route. Das haelt API-Keys geheim und gibt dir einen Ort fuer Caching, Rate Limiting und Error Handling.

Pattern 4: Tests fuer deine Vibe-Coded-App

Tests sind beim Vibe Coding besonders wertvoll weil du nicht jede Zeile manuell pruefen kannst:

Fuege automatisierte Tests fuer meinen Lesezeichen-Manager hinzu:

1. Unit Tests (mit Vitest):
   - Lesezeichen hinzufuegen aktualisiert die Liste
   - Filtern nach Tag zeigt korrekte Ergebnisse
   - Suche findet Treffer in Titel, URL und Tags

2. Integration Tests:
   - Signup erstellt einen neuen Nutzer
   - Login leitet zum Dashboard weiter
   - Nicht-authentifizierte Nutzer koennen /dashboard nicht sehen

Lege Tests in einen __tests__-Ordner neben die Komponente die sie testen.

Nach dem Schreiben der Tests: Fuehre sie nach jeder KI-generierten Aenderung aus. Ein fehlschlagender Test sagt dir sofort was kaputtgegangen ist.

Pattern 5: Wissen wann man per Hand codet

Vibe Coding ist nicht die Antwort auf alles. Erkenne wann Hand-Coding besser ist:

Die besten Vibe Coder nutzen beides fliessend — KI fuer die schwere Arbeit, Hand-Coding fuer Praezision.

Von Vibe Coding zu Agentic Engineering

Selbst Karpathy, der “Vibe Coding” gepraeget hat, sagt mittlerweile dass sich der Ansatz weiterentwickelt. Die naechste Phase — “Agentic Engineering” — bedeutet KI-Agenten erledigen mehr Arbeit eigenstaendig waehrend du als Reviewer und Entscheider agierst.

Die Skills die du in diesem Kurs gelernt hast (klare Kommunikation, strukturiertes Prompting, Debugging, Architektur-Planung) sind genau das was Agentic Engineering erfordert. Die Prompts werden zu Agenten-Instruktionen. Das Debugging wird zu Code Review. Die Prinzipien sind dieselben.

Key Takeaways

• Rules-Dateien eliminieren repetitive Anweisungen — einmal einrichten, bei jedem Prompt anwenden
• Plane Multi-Datei-Architektur bevor du baust — pruefe den Plan zuerst
• Proxy Third-Party-APIs ueber Server-Routes um API-Keys zu schuetzen
• Automatisierte Tests sind dein Sicherheitsnetz — sie fangen was du nicht manuell pruefen kannst
• Nutze Vibe Coding fuer die schwere Arbeit, code per Hand fuer Praezision — sei pragmatisch
• Diese Skills uebertragen sich direkt auf “Agentic Engineering” — die naechste Evolution KI-gestuetzter Entwicklung

Up Next

In der letzten Lektion bringst du alles zusammen: Baue eine komplette Anwendung von Grund auf, deploye sie und teile sie mit der Welt.