Deine erste App mit Vibe Coding: Schritt für Schritt

Vom leeren Editor zur live deployten App an einem Wochenende. Dieses Tutorial führt dich Schritt für Schritt durch den Bau einer einfachen Habit-Tracker-App mit Login, Datenbank und Live-Deployment.

Was wir bauen

Ein einfacher Habit-Tracker: Nutzer melden sich an, legen Gewohnheiten an (zum Beispiel „Wasser trinken", „Lesen"), und haken jeden Tag ab, ob sie die Gewohnheit umgesetzt haben. Sie sehen eine Übersicht der letzten Wochen.

Wir nutzen Lovable als Tool, Supabase als Backend (Datenbank und Auth) und veröffentlichen am Ende auf einer Lovable-Subdomain. Eigene Domain kann später angebunden werden.

1. Vorbereitung

• Account bei lovable.dev anlegen.
• Account bei supabase.com anlegen, neues Projekt erstellen und Region wählen.
• Notiere dir Supabase Project URL und Anon Key, du brauchst sie gleich.

2. Initialer Prompt

In Lovable ein neues Projekt starten und folgenden Prompt eingeben:

Lovable generiert daraus die erste Version mit lokalem State. Wer den Initial-Prompt strukturiert vorbereiten will, nutzt den Initial-Prompt Generator.

3. Supabase anbinden

In Lovable oben rechts Connect Supabase klicken und das eben angelegte Projekt verbinden. Danach folgenden Prompt:

4. UI verfeinern

Jetzt ist die App funktional, aber visuell oft noch grob. Kleine Prompts, die viel bringen:

• „Verkleinere die Wochenstreifen und nutze runde Kästchen statt Quadrate."
• „Zeige für jede Gewohnheit eine Erfolgsquote in Prozent der letzten 30 Tage."
• „Animiere den Haken sanft, wenn ein Tag abgehakt wird."
• „Mach die Eingabe für eine neue Gewohnheit zu einem Modal statt eine eigene Seite."

Mehr Vorlagen für UI-Refinement und State-Handling stehen in der Prompt-Bibliothek.

5. Testen mit echten Nutzern

1. App über Publish veröffentlichen.
2. Die Lovable-Subdomain an drei bis fünf Bekannte schicken.
3. Beobachten, wo sie hängenbleiben oder Fragen haben.
4. Konkretes Feedback in neue Prompts übersetzen und einbauen.

Vor dem ersten echten Launch lohnt sich ein Blick auf die Projekt-Checkliste, damit RLS, Auth und Monitoring sitzen.

Häufige Stolpersteine

• Sessions verschwinden. Wenn der Login nach Reload nicht hält, fehlt meist persistSession in der Supabase-Client-Konfiguration. Lovable lösen lassen, dabei den genauen Fehler aus der Konsole nennen.
• RLS blockiert alles. Wenn nach dem Anlegen einer Gewohnheit „Permission denied" erscheint, prüfe in Supabase, ob die INSERT-Policy auth.uid() = user_id nutzt und ob du beim Anlegen die user_id mit übergibst.
• UI zerfällt nach großen Prompts. Statt einen riesigen Refactor-Prompt zu schreiben, lieber in fünf kleinen Schritten umbauen.

Wie es weitergeht

Sobald die Basis steht, lohnt sich der Blick auf Launch und Betrieb: Domain, Analytics, Mails, Monitoring. Wenn dir der Tool-Vergleich fehlt, lies Die besten Vibe-Coding-Tools 2026.