In 7 Tagen zur ersten eigenen App — ohne eine Zeile Code

Sieben Tage. Eine eigene App. Keine Zeile Code aus deinen Fingern. Klingt nach Marketing-Schnack, ist es aber nicht — vorausgesetzt, du folgst einem klaren Plan und nicht deinem Bauchgefühl. In dieser Anleitung führen wir dich Tag für Tag durch ein realistisches Bauprojekt, das du nach einer Woche live im Internet hast.

Die App, die wir bauen: einen kleinen Habit-Tracker mit Login, Datenbank und einer einfachen Auswertung. Klein genug, um in einer Woche fertig zu sein. Echt genug, um zu zeigen, was Vibe Coding 2026 wirklich kann. Du kannst stattdessen jede andere kleine Idee nehmen — der Plan funktioniert genauso für eine Bookings-Seite, einen Newsletter-Manager oder eine Recipes-App.

Bevor du startest: Setup-Check

Du brauchst:

• Einen Laptop (Windows, Mac, Linux — egal)
• Einen Account bei Anthropic für Claude Code (oder bei Cursor)
• Einen kostenlosen GitHub-Account
• Einen kostenlosen Vercel-Account
• Einen kostenlosen Supabase-Account

Mehr brauchst du nicht. Wenn du dich fragst, was diese Tools tun, lies vorher unsere Übersicht Die 10 besten KI-Tools für VibeCoder 2026.

Tag 1 — Die Idee + die Spec

Ziel: Du hast am Ende des Tages ein Markdown-Dokument, das deine App beschreibt.

Setze dich 60–90 Minuten hin. Beantworte schriftlich:

• Wofür ist die App? ("Ich will Gewohnheiten tracken.")
• Wer ist der User? ("Ich selbst und Freunde, die ich einlade.")
• Welche Daten gibt es? Habits, Tracking-Einträge, User.
• Welche 5 Funktionen muss die App haben? Login, Habit anlegen, Habit abhaken, Übersicht, Statistik.
• Welche 3 Funktionen sind explizit raus? Social Sharing, Mobile App, Notifications. (Klare Schwerpunkte zu setzen ist wichtiger als Features dazuzudenken.)

Schreib das in eine Datei SPEC.md. Hier ein Beispiel-Anfang:

# Habit Tracker — Spec

## Ziel
Eine kleine Web-App, in der ich tägliche Gewohnheiten anlege und abhake.

## User
Ich selbst und 2-3 Freunde, die ich per E-Mail einlade.

## Daten
- User: id, email
- Habit: id, user_id, name, color
- HabitCheck: id, habit_id, date

## Features (V1)
1. Login per Magic Link
2. Habit hinzufügen / löschen
3. Habit für heute abhaken
4. Wochenübersicht (7 Tage Grid)
5. 30-Tage-Statistik

## Explizit nicht in V1
- Native Mobile App
- Push-Notifications
- Public Sharing

Pro-Tip: Wenn du nicht weiterkommst, lass dir von ChatGPT oder Claude Web helfen. Prompt: "Ich plane eine kleine App für [X]. Stell mir 10 Fragen, damit ich eine vernünftige Spec schreiben kann."

Tag 2 — Setup + Skeleton

Ziel: Das Projekt läuft lokal mit einem leeren Layout.

Heute installierst du Claude Code (oder öffnest Cursor), legst einen Projektordner an und lässt Claude Code das Skelett aufbauen.

Erster Prompt an Claude Code:

Lege ein Next.js-Projekt im Ordner ./habit-tracker an.
Stack: Next.js 16, App Router, TypeScript, Tailwind, Inter Font.
Hauptseite: einfacher Hero mit Headline "Mein Habit Tracker" und CTA "Login".
Dashboard-Route /dashboard mit "Hier kommen Habits" als Platzhalter.
Login-Route /login mit "Hier kommt der Magic Link".
Setze .gitignore richtig, mach den ersten Commit.

Nach 5–10 Minuten Arbeit von Claude Code hast du ein laufendes Projekt. Starte es mit npm run dev, öffne http://localhost:3000. Du siehst deine Skeleton-App.

Wichtig: Bevor du weitermachst, commit zu GitHub. Claude Code kann dir auch das einrichten — sag einfach "Erstelle ein GitHub-Repo und pushe den ersten Commit."

Tag 3 — Datenbank + Auth

Ziel: User können sich einloggen und es gibt eine echte Datenbank.

Heute kümmerst du dich um Supabase. Lege im Supabase-Dashboard ein neues Projekt an, kopiere die URL und den Anon-Key. Dann sagst du Claude Code:

Integriere Supabase in das Projekt.
URL: <deine_url>
Anon Key: <dein_anon_key>
1. Lege drei Tabellen an: users (id, email), habits (id, user_id, name, color),
   habit_checks (id, habit_id, date).
2. Aktiviere Row-Level-Security mit Standard-Policies.
3. Implementiere Magic-Link-Login auf /login.
4. Wenn der User eingeloggt ist, leite ihn nach /dashboard.

Claude Code legt die Migrations an, schreibt die Auth-Komponente und verbindet alles. Teste den Flow: E-Mail eintragen, Magic Link bekommen, einloggen.

Pro-Tip: Wenn etwas nicht funktioniert, kopier die Fehlermeldung direkt zurück an Claude. "Ich bekomme diesen Fehler beim Einloggen: ..." — Claude debuggt selbst weiter.

Tag 4 — Kern-Features

Ziel: Habits anlegen, abhaken, anzeigen.

Heute baust du die wichtigsten Funktionen. Drei Prompts:

Prompt 1 — Habit anlegen:

Auf /dashboard:
- Liste aller Habits des eingeloggten Users.
- Button "+ Neuer Habit", öffnet ein Modal mit Name + Farbpicker.
- Submit speichert in Supabase und aktualisiert die Liste live.

Prompt 2 — Heute abhaken:

Jeder Habit zeigt eine grosse Checkbox für heute.
Klick erstellt einen Eintrag in habit_checks für today.
Wenn schon abgehakt, wird Klick zum "Unhake".

Prompt 3 — Wochenübersicht:

Zeige unter jedem Habit ein 7-Felder-Grid für die letzte Woche.
Gefüllte Felder = abgehakt. Heutiges Feld bleibt klickbar, alte Tage sind read-only.

Nach jedem Prompt: testen, prüfen, gegebenenfalls korrigieren. Heute Abend sollte deine App in der Basis funktionieren.

Tag 5 — Polish + Statistik

Ziel: Die App fühlt sich gut an und zeigt eine kleine Statistik.

Tag 5 ist der unsexy, aber wichtige Tag. Du machst die App schöner, prüfst den Mobile-Look und fügst eine Statistik ein.

1. Prüfe das Layout auf Mobile (375px Breite). Behebe alles, was abschneidet.
2. Füge dem Dashboard eine Statistik hinzu:
   - "Aktuelle Streak" pro Habit (wie viele Tage am Stück abgehakt)
   - "30-Tage-Quote" pro Habit (wie viel Prozent der letzten 30 Tage)
3. Verschönere das Login: Logo, kurzer Erklärtext, Loading-State.
4. Füge eine 404-Page hinzu mit "Zurück zum Dashboard"-Link.

Wenn du designerisch unsicher bist, nutze v0 by Vercel, um schnell schönere Komponenten zu generieren, und sag Claude Code: "Ersetze den aktuellen Dashboard-Header durch diese v0-Komponente: ..."

Tag 6 — Tests + Bugfixing

Ziel: Die App tut, was sie soll. Auch in Edge Cases.

Heute lässt du Claude Tests schreiben und durchdenkst die Edge Cases. Prompts:

1. Schreibe Vitest-Tests für die wichtigsten Funktionen:
   - createHabit
   - toggleHabitCheck
   - calculateStreak
   Lass die Tests laufen und fixe alle Fehler.

2. Geh die App durch wie ein neuer User:
   - Was passiert beim ersten Login ohne Habits?
   - Was passiert, wenn ich offline gehe?
   - Was passiert, wenn ich denselben Habit doppelt anlege?
   Schreibe für jedes Szenario einen kurzen Bericht und fixe Bugs, die du findest.

Erwartung: Du findest 3–5 echte Bugs, die du sonst nie gesehen hättest. Tag 6 ist der Tag, an dem aus "läuft bei mir" ein "läuft auch beim Freund" wird.

Tag 7 — Launch

Ziel: Die App ist online, deine Freunde können sie nutzen.

Letzter Tag, beste Stimmung. Drei Schritte:

Schritt 1 — Deploy zu Vercel:

Verbinde das Projekt mit Vercel.
Setze die Environment-Variablen aus .env.local in Vercel.
Deploye die App auf eine vercel.app-URL.

Claude Code führt das aus. Nach 60 Sekunden hast du eine Live-URL, z. B. habit-tracker-juls.vercel.app.

Schritt 2 — Domain dazu (optional):

Wenn du eine Domain hast, fügst du sie in Vercel hinzu. Wenn nicht, reicht die vercel.app-URL völlig.

Schritt 3 — User einladen:

Schreib eine kurze Nachricht an drei Freunde: "Ich hab in einer Woche eine Habit-Tracker-App gebaut. Ohne Code zu schreiben. Magst du sie testen? URL: ..."

Sammle Feedback. Schreib es auf. Plane die nächste Woche, in der du die wichtigsten Punkte einbaust.

Was du jetzt gelernt hast

In sieben Tagen hast du:

• Eine echte App gebaut, die du selbst nutzen kannst
• Spec-Schreiben geübt — die wichtigste Vibe-Coding-Skill
• Den Loop verinnerlicht: beschreiben, prüfen, iterieren
• Claude Code kennengelernt und genutzt
• Deploy + Datenbank + Auth integriert — die drei Bausteine fast jeder modernen App

Das ist mehr, als die meisten Coding-Bootcamps in einer Woche schaffen. Und du hast keine Zeile selbst geschrieben.

Was kommt als Nächstes?

Wenn du Blut geleckt hast, sind das die nächsten Schritte:

1. Eine zweite App bauen. Diesmal komplexer. Eine SaaS-Idee, die du immer im Kopf hattest. Eine Anleitung dafür: SaaS mit KI bauen.
2. Einen Stack vertiefen. Werde besser bei Supabase, Vercel und Tailwind. Lerne, was Server Components und API Routes sind.
3. Eine Community. Allein lernen ist hart. In der VibeCoding Masterclass bekommst du Live-Sessions, eine Slack-Community und Code-Reviews.

Dein Ziel: in drei Monaten zehn kleine Apps gebaut zu haben. Klein, fertig, im Internet. Diese Mini-Projekte sind dein Portfolio und deine Schule gleichzeitig.

Pro-Tipps für die ganze Woche

• Bleib bei einer Idee. Wechsle nicht mitten in der Woche. Klein und fertig schlägt gross und halb.
• Commit oft. Mindestens 1× pro Tag zu GitHub pushen. Wenn du was kaputt machst, bist du froh.
• Sprich mit der KI in vollständigen Sätzen. Stichworte führen zu schwammigem Output. Vollständige Beschreibungen führen zu sauberem Code.
• Lies dir den Code an. Du musst ihn nicht verstehen, aber du gewöhnst dich an die Sprache, was 10× wertvoller ist als das fertige Feature.
• Stell dumme Fragen. "Erklär mir, was du gerade gemacht hast" ist ein gültiger Prompt.

FAQ

Brauche ich Vorkenntnisse?

Nein. Du solltest dich auf deinem Laptop bewegen können (Dateien anlegen, Terminal öffnen) und keine Angst vor englischen Fehlermeldungen haben. Mehr nicht. Wer absolut bei Null startet, sollte zwei Tage länger einplanen.

Was kostet das alles?

Free-Tiers reichen für die ganze Woche. Wenn du Claude Code Pay-as-you-go nutzt, kommen vielleicht 5–15 € zusammen. Sonst null Euro.

Was, wenn ich an einem Tag nicht weiterkomme?

Ganz normal. Mach Pause, schreib auf, was nicht klappt, frag im KIWorld-Discord (oder ChatGPT) und mach am nächsten Tag weiter. Sieben Tage muss kein Marathon sein — sieben Sessions reichen.

Kann ich auch eine andere App als Habit-Tracker bauen?

Selbstverständlich. Der Plan ist generisch. Tag 1 = Spec, Tag 2 = Skeleton, Tag 3 = Auth + DB, Tag 4 = Features, Tag 5 = Polish, Tag 6 = Tests, Tag 7 = Launch. Funktioniert für jede kleine App.

Was, wenn ich nach 7 Tagen merke, dass die App nicht das ist, was ich wollte?

Glückwunsch — du hast Vibe Coding verstanden. Wirf weg, beginn neu. In der Zeit, in der du klassisch eine Spec geschrieben hättest, hast du jetzt schon Version 1. Version 2 baust du in 4 Tagen.

Welches Tool ist 2026 das beste für diese Anleitung?

Claude Code, mit Cursor zum Mitlesen. Mehr in unserem Vergleich.

---

Nächster Schritt: Wenn du tiefer einsteigen willst, ist die VibeCoding Masterclass deine Abkürzung. Wir bauen zusammen Projekte, du bekommst Code-Reviews und einen klaren Lernpfad.