Wie man mit KI eine Habit-Tracker-App baut

Bevor du einen Prompt schreibst, definiere die kleinste sinnvolle Version.

Für einen Habit-Tracker bedeutet das normalerweise:

• einen Startbildschirm mit den heutigen Gewohnheiten
• eine Möglichkeit, eine Gewohnheit als erledigt oder übersprungen zu markieren
• einen Screen zum Erstellen oder Bearbeiten von Gewohnheiten
• einfache Fortschrittsansichten wie Streaks oder Wochenabschlüsse
• grundlegende Einstellungen

Lege dann fest, welche Daten jede Gewohnheit braucht. Halte es einfach.

Ein praktisches Startmodell:

• Name der Gewohnheit
• Farbe oder Icon
• Häufigkeit: täglich, Wochentage, benutzerdefinierte Tage
• Ziel: einmal pro Tag, mehrmals, Minuten, Gläser, Wiederholungen
• aktueller Streak
• Verlauf der Abschlüsse

Entscheide außerdem, ob es sich um Folgendes handelt:

• einen persönlichen Prototyp für einen einzelnen Nutzer
• eine App mit Anmeldung und gespeicherten Daten
• eine kostenpflichtige App mit Abos

Wenn du nur die Idee testen willst, starte ohne Konten oder Zahlungen. So bleibt der erste Build kleiner und leichter zu prüfen.

In Moremade beschreibst du die App in natürlicher Sprache und der KI-Agent schreibt den Quellcode. Für Websites generiert es React mit Tailwind. Für Mobile-Apps generiert es React Native mit Expo.

Für einen Habit-Tracker sollte dein erster Prompt Folgendes abdecken:

• Plattform: Web-App oder Mobile-App
• zentrale Screens
• Hauptaktionen
• visueller Stil
• ob Daten zunächst lokal sein können oder ein Backend nötig ist

Beispiel für den ersten Prompt:

Erstelle eine mobile Habit-Tracker-App in React Native mit Expo. Ich möchte eine klare, einfache Oberfläche mit einem Startbildschirm, auf dem die heutigen Gewohnheiten als Karten mit einer Checkbox oder einem Tap-Target angezeigt werden, um sie als erledigt zu markieren. Füge einen Screen zum Erstellen von Gewohnheiten und einen Screen zum Bearbeiten von Gewohnheiten hinzu. Jede Gewohnheit soll einen Namen, ein Icon, eine Farbe, eine Häufigkeit und eine Zielanzahl pro Tag unterstützen. Ergänze eine Fortschrittsansicht mit aktuellem Streak und dem Abschluss der letzten 7 Tage. Starte nur mit lokalen Beispieldaten, noch ohne Anmeldung. Verwende einen ruhigen, minimalistischen Stil mit klaren Abständen und großen Tap-Zielen.

Das reicht aus, um eine erste funktionierende Struktur zu erhalten, ohne jedes Pixel zu über-spezifizieren.

Nach der ersten Generierung verwendest du die Live-Preview, um die App zu prüfen. Versuche nicht, alles in einer riesigen Folgeanfrage zu beheben. Arbeite Screen für Screen.

Achte darauf:

• ob der Hauptablauf vollständig ist
• ob Habit-Karten leicht zu überblicken sind
• ob mobile Tap-Ziele groß genug sind
• ob Fortschrittsinformationen verständlich sind
• ob die Beschriftungen der Denkweise der Nutzer zu Gewohnheiten entsprechen

Gute Folge-Prompts sind konkret und begrenzt. Zum Beispiel:

• "Ändere den Startbildschirm so, dass Gewohnheiten in Morgen, Nachmittag und Abend gruppiert werden."
• "Mache die Abschlussaktion zu einem größeren runden Check-Button rechts auf jeder Habit-Karte und zeige den aktuellen Streak unter dem Namen der Gewohnheit an."
• "Füge einen wöchentlichen Fortschritts-Screen mit einem einfachen 7-Tage-Raster und dem Prozentsatz für diese Woche hinzu."

Moremade hat außerdem einen visuellen Inspektor und eine Code-Ansicht, was hilft, wenn du genau weißt, welches Element geändert werden soll. Nutze den Chat für breitere Produktänderungen und den Inspektor, wenn du auf einen bestimmten Button, eine Karte oder ein Abstandsproblem zeigen willst.

Ein Habit-Tracker braucht oft gespeicherte Fortschritte über mehrere Geräte hinweg. Wenn das wichtig ist, füge Supabase hinzu, nachdem die grundlegende Oberfläche sinnvoll funktioniert.

Supabase ist hier der passende integrierte Connector, weil er Folgendes abdeckt:

• Datenbanktabellen
• Anmeldung
• Dateispeicher, falls du später Avatare oder Uploads hinzufügst

Eine sinnvolle Reihenfolge ist:

1. Erstelle die App zuerst mit lokalen Daten.
2. Prüfe, ob sich die Screens und Interaktionen richtig anfühlen.
3. Verbinde Supabase.
4. Bitte Moremade, lokale Beispieldaten durch echte Habit-Datensätze und Abschlussverläufe zu ersetzen.
5. Füge Anmeldung hinzu, wenn Nutzer private Daten brauchen.

Für viele Habit-Tracker wird Stripe anfangs nicht benötigt. Füge Stripe nur hinzu, wenn du tatsächlich ein kostenpflichtiges Produkt baust, etwa ein Abo-Modell oder ein einmaliges Premium-Upgrade. Moremade unterstützt Stripe-Checkout mit von dir festgelegten Preisen, aber für eine erste Version ist das zusätzliche Komplexität.

Halte das erste Datenmodell einfach:

• users
• habits
• habit_completions

Das reicht in der Regel für ein nutzbares MVP.

Auch wenn die App in der Preview gut aussieht, werden Habit-Tracker in kurzen, wiederkehrenden Momenten benutzt. Beim Testen solltest du dich auf Geschwindigkeit und Klarheit konzentrieren.

Prüfe diese praktischen Punkte:

• Kann man eine Gewohnheit mit einem Tap als erledigt markieren?
• Ist der Flow zum Hinzufügen einer Gewohnheit kurz genug?
• Sind Streaks und Verlauf ohne langes Suchen lesbar?
• Sind Buttons auf dem Smartphone leicht zu treffen?
• Ergibt die App noch Sinn, wenn es viele Gewohnheiten gibt?

Wenn du eine Mobile-App in Expo baust, achte besonders auf Abstände, Scroll-Verhalten und Formularfelder. Wenn du eine Website baust, teste schmale mobile Breiten und stelle sicher, dass das Layout weiterhin die Nutzung mit dem Daumen unterstützt.

Nützliche Verfeinerungs-Prompts in dieser Phase:

• "Reduziere die Anzahl der Taps, die nötig sind, um eine neue Gewohnheit zu erstellen."
• "Mache den Startbildschirm für eine kleine Smartphone-Breite besser nutzbar, mit größeren Abständen und einer fixierten unteren Navigation."
• "Zeige die heutige Abschlusszahl oben an und blende erledigte Gewohnheiten visuell aus."

Diese Testphase deckt oft Produktprobleme früher auf als das visuelle Feintuning.

Sobald die App nutzbar ist, veröffentliche sie. Moremade kann mit einem Klick auf eine kostenlose yourname.moremade.ai-Subdomain veröffentlichen. Das ist ein guter Standard für Demos, Nutzertests oder das Teilen mit Kollaborateuren.

Wenn du eine gebrandete Adresse brauchst, unterstützen kostenpflichtige Pläne eigene Domains. Domains können auch direkt in Moremade gekauft werden.

Vor dem Veröffentlichen solltest du eine kurze Release-Prüfung machen:

• Platzhaltertexte und falsche Labels entfernen
• sicherstellen, dass die wichtigsten Buttons funktionieren
• bestätigen, dass jede Supabase-Verbindung auf das richtige Projekt zeigt
• An- und Abmeldung testen, falls aktiviert
• App-Titel und grundlegende Metadaten überprüfen

Da du bei Moremade den vollständigen Quellcode als ZIP exportieren oder nach GitHub pushen kannst, ist Veröffentlichung nicht dasselbe wie Lock-in. Du kannst in Moremade weiter iterieren oder den Code später anderswo weiterverwenden.

Die üblichen Probleme sind nicht technischer Natur. Sie entstehen dadurch, dass zu viel zu früh gebaut wird.

Vermeide diese Fehler:

• Mit Konten, Zahlungen, Erinnerungen, Social Features und Analysen gleichzeitig zu starten. Baue zuerst das Erstellen und Abschließen von Gewohnheiten.
• Vage Prompts zu schreiben. "Mach einen Habit-Tracker" ist zu breit. Nenne die Screens, Aktionen und Datenfelder.
• Pro Prompt zu viele Dinge zu ändern. Kleine Anfragen liefern klarere Ergebnisse und sind leichter zu überprüfen.
• Für einen idealen Nutzer mit nur drei Gewohnheiten zu designen. Prüfe, was bei zehn oder zwanzig Gewohnheiten passiert.
• Den Export zu überspringen. Lade das ZIP herunter oder pushe zu GitHub, sobald du eine stabile Version erreicht hast.
• Die Versionshistorie zu ignorieren. Speichere sinnvolle Checkpoints vor größeren Änderungen.

Eine gute erste Version ist eine, bei der ein Nutzer eine Gewohnheit hinzufügen, sie abschließen und seinen jüngsten Fortschritt ohne Erklärung verstehen kann.