Vom Prototyp zur Produktion

🔄 Kurzer Rueckblick: In der letzten Lektion hast du gelernt KI-generierten Code zu debuggen mit Fehlermeldungen lesen, Rollbacks und frischen Gespraechen. Jetzt wendest du diese Skills an waehrend du deinen Prototypen fuer echte Nutzer upgradest.

Dein Prototyp laeuft. Auf deinem Rechner. Mit perfektem Input. Bei schneller Verbindung. Produktion ist anders — echte Nutzer machen unerwartete Dinge, Verbindungen brechen ab und Randfaelle tauchen auf.

Die Produktions-Luecke

Prototyp	Produktion
localStorage	Echte Datenbank (Supabase, Firebase)
Keine Authentifizierung	Nutzerkonten mit Login/Signup
Nur Happy Path	Error Handling fuer jeden Fehlerfall
Nur deine Bildschirmgroesse	Responsive auf allen Geraeten
Du bist der einzige Nutzer	Mehrere gleichzeitige Nutzer
Keine Input-Validierung	Alle Eingaben validiert und bereinigt

Schritt 1: Echte Datenbank hinzufuegen

Die meisten Vibe-Coded-Prototypen starten mit localStorage. Wechsle zu einer echten Datenbank:

Ich muss meinen Lesezeichen-Manager von localStorage auf Supabase migrieren.

Aktuelle Datenstruktur in localStorage:
- bookmarks: Array von {id, title, url, tags, createdAt}

Bitte:
1. Erstelle das Supabase-Tabellenschema
2. Ersetze alle localStorage-Lese/Schreibvorgaenge durch Supabase-Queries
3. Behalte dasselbe UI-Verhalten — der Nutzer sollte keinen Unterschied merken
4. Fuege Ladezustaende hinzu waehrend Daten geladen werden
5. Handle Fehler (zeige eine Meldung wenn die Datenbank nicht erreichbar ist)

Warum Supabase? Es ist kostenlos zum Starten, hat einen grosszuegigen Free Tier, arbeitet gut mit KI-Tools zusammen und bietet Authentifizierung gleich mit. Und fuer den deutschen Markt wichtig: Supabase bietet EU-Server-Standorte.

✅ Quick Check: Nach der Migration zu Supabase laden deine Lesezeichen mit 1-2 Sekunden Verzoegerung (vorher war es sofort aus localStorage). Ist das ein Bug? (Antwort: Nein — das ist erwartet. localStorage-Lesevorgaenge sind instant weil die Daten auf deinem Geraet sind. Datenbank-Queries gehen uebers Netzwerk und brauchen Zeit. Deshalb fuegst du Ladezustaende hinzu — zeige einen Spinner oder Skeleton-UI waehrend Daten geladen werden.)

Schritt 2: Authentifizierung hinzufuegen

Schuetze deine App damit jeder Nutzer nur seine Daten sieht:

Fuege Supabase-Authentifizierung zu meinem Lesezeichen-Manager hinzu:

1. Erstelle Signup-Seite (/signup) mit E-Mail- und Passwort-Feldern
2. Erstelle Login-Seite (/login) mit E-Mail und Passwort
3. Nach Login Weiterleitung zu /dashboard
4. Schuetze /dashboard — leite nicht-authentifizierte Nutzer zu /login um
5. Filtere Lesezeichen nach der ID des eingeloggten Nutzers
6. Fuege einen "Abmelden"-Button im Header hinzu
7. Richte Row Level Security in Supabase ein damit Nutzer nur ihre
   eigenen Lesezeichen lesen/schreiben koennen

Row Level Security (RLS) ist das entscheidende Stueck — es verhindert auf Datenbankebene dass ein Nutzer auf die Daten eines anderen zugreifen kann, nicht nur auf UI-Ebene.

Schritt 3: Error Handling hinzufuegen

KI-generierter Code behandelt oft nur den “Happy Path.” Fuege Error Handling fuer jeden Fehlerfall hinzu:

Fuege umfassendes Error Handling zu meiner App hinzu:

1. Netzwerkfehler: Zeige "Verbindung fehlgeschlagen. Pruefe dein Internet
   und versuche es erneut" mit einem Retry-Button
2. Auth-Fehler: Leite zu Login weiter wenn die Session ablaeuft
3. Formular-Validierung: Zeige Inline-Fehler fuer ungueltige E-Mail,
   zu kurzes Passwort, leere Pflichtfelder
4. Ladezustaende: Zeige Skeleton-UI waehrend Daten laden
5. Leere Zustaende: Zeige eine freundliche Nachricht wenn es keine
   Lesezeichen gibt
6. 404-Seite: Zeige eine hilfreiche Seite fuer ungueltige URLs

Schritt 4: Responsive machen

Teste auf mehreren Bildschirmgroessen und fixe Probleme:

Pruefe das Responsive Design meiner App und fixe diese Punkte:

1. Auf Mobil (< 640px): Sidebar standardmaessig versteckt,
   zugaenglich per Hamburger-Menue
2. Auf Tablet (640-1024px): Sidebar einklappbar
3. Auf Desktop (> 1024px): Sidebar immer sichtbar
4. Karten: 3 Spalten (Desktop), 2 (Tablet), 1 (Mobil)
5. Touch-Ziele (Buttons, Links): mindestens 44px auf Mobil
6. Modal-Dialoge: Vollbild auf Mobil, zentriert auf Desktop

Schritt 5: Sicherheitspruefung

Lass die KI den Code pruefen den sie generiert hat:

Pruefe meine App auf Sicherheitsluecken:

1. Wird Nutzer-Input vor Datenbank-Queries bereinigt?
2. Sind API-Keys im Client-Code sichtbar?
3. Ist Row Level Security in Supabase korrekt konfiguriert?
4. Gibt es XSS-Schwachstellen (nicht-bereinigtes HTML-Rendering)?
5. Wird Authentifizierung auf jeder geschuetzten Route geprueft?
6. Werden Passwoerter sicher gespeichert (nicht im Klartext)?

Die Produktions-Checkliste

DATENBANK:
□ Echte Datenbank (nicht localStorage)
□ Daten gesichert oder wiederherstellbar
□ Row Level Security aktiviert

AUTHENTIFIZIERUNG:
□ Login/Signup funktioniert
□ Session-Persistenz (eingeloggt bleiben nach Refresh)
□ Geschuetzte Routen leiten nicht-authentifizierte Nutzer weiter

ERROR HANDLING:
□ Ladezustaende fuer alle Daten-Abfragen
□ Fehlermeldungen fuer Netzwerkausfaelle
□ Formular-Validierung auf allen Eingaben
□ Leere Zustaende fuer No-Data-Szenarien

RESPONSIVE:
□ Funktioniert auf Mobil (320px+)
□ Funktioniert auf Tablet (768px+)
□ Funktioniert auf Desktop (1024px+)
□ Touch-Ziele gross genug (44px+)

SICHERHEIT:
□ Keine API-Keys im Client-Code
□ Input-Bereinigung
□ Auth-Checks auf geschuetzten Routen
□ HTTPS aktiviert (die meisten Hoster machen das automatisch)

Key Takeaways

Die Produktions-Luecke ist real: localStorage → Datenbank, keine Auth → Nutzerkonten, Happy Path → Error Handling
Supabase ist der einfachste Weg vom Prototyp zur Produktion (Free Tier, Auth inklusive, KI-freundlich, EU-Server verfuegbar)
Error Handling ist die wichtigste Produktions-Anforderung — Nutzer sollten nie eine leere Seite sehen
Immer auf dem Handy testen — die meisten Vibe-Coded-Prototypen brechen auf kleinen Bildschirmen
Sicherheitspruefung ist nicht verhandelbar bevor du die App mit echten Nutzern teilst
KI bringt dich 70% — die letzten 30% sind Produktions-Haertung

Up Next

In der naechsten Lektion lernst du fortgeschrittene Vibe-Coding-Patterns — Rules-Dateien, Multi-Datei-Projekte, API-Integrationen und wann du lieber per Hand codest statt zu prompten.