Wie man mit AI eine Rezept-App erstellt

Halte die erste Version klein. Eine Rezept-App kann sich in viele Richtungen entwickeln, aber der schnellste Weg ist eine klare Version eins.

Lege den zentralen Nutzerfluss fest:

• Rezepte durchsuchen
• nach Name oder Zutat suchen
• nach Mahlzeitentyp, Küche oder Vorbereitungszeit filtern
• eine Rezept-Detailseite öffnen
• Favoriten speichern, falls du Konten brauchst

Für den ersten Build liste die Bildschirme auf:

• Start- oder Browse-Bildschirm
• Rezeptlisten-Bildschirm
• Rezept-Detailbildschirm
• Bildschirm für gespeicherte Rezepte, falls nötig
• einfacher Profil- oder Anmeldebildschirm, nur wenn Konten wichtig sind

Dann entscheide, welche Daten jedes Rezept braucht:

• Titel
• kurze Beschreibung
• Bild
• Vorbereitungszeit
• Kochzeit
• Portionen
• Zutaten
• Zubereitungsschritte
• Tags wie vegetarisch, schnell, glutenfrei

Entscheide außerdem, ob es eine Website oder eine mobile App sein soll. In Moremade werden Websites als React + Tailwind Code erstellt. Mobile Apps werden in React Native mit Expo gebaut. Wenn Menschen die App hauptsächlich auf dem Handy nutzen sollen, starte als mobile App.

Der erste Prompt ist wichtig, weil er die Struktur vorgibt. Sei konkret bei Bildschirmen, Datenfeldern und Verhalten. Starte nicht mit vagen Anfragen wie "mach eine Rezept-App".

Ein besserer Prompt beschreibt:

• Plattform: Web oder Mobile
• Zielgruppe
• benötigte Bildschirme
• wichtige Interaktionen
• Beispielinhalte
• visueller Stil in einfachen Worten

Hier ist ein guter Start-Prompt:

Erstelle eine mobile Rezept-App in React Native (Expo) für Hobbyköche. Füge einen Startbildschirm mit hervorgehobenen Rezepten und Kategorien hinzu, einen Browse-Bildschirm mit Suche und Filtern für Mahlzeitentyp, Küche und Vorbereitungszeit, eine Rezept-Detailseite mit Bild, Zutaten, Schritt-für-Schritt-Anleitung, Portionen, Vorbereitungszeit, Kochzeit und Tags sowie einen Bildschirm für gespeicherte Rezepte. Verwende Beispieldaten für 12 Rezepte. Gestalte die App sauber und gut lesbar mit großen Rezeptfotos, einer einfachen Bottom Navigation und klaren Abständen. Sorge dafür, dass Suche und Filter mit den Beispieldaten funktionieren.

Das reicht, um einen konkreten ersten Entwurf zu erzeugen, ohne das Projekt zu verkomplizieren.

Nach dem ersten Build öffnest du die Live-Vorschau und prüfst die Grundlagen:

• ist die Navigation nachvollziehbar
• finden Nutzer Rezepte schnell
• ist die Rezept-Detailseite beim Kochen gut lesbar
• sind Filter klar erkennbar
• ist der Text auf einem Handy groß genug

Nutze kurze Folgeprompts, die jeweils nur eine Sache ändern. Das funktioniert meist besser, als direkt nach einem kompletten Redesign zu fragen.

Drei nützliche Beispiele:

• "Verschiebe die Suche an den oberen Rand des Browse-Bildschirms, behalte die Filter in einer horizontalen Chip-Reihe und ändere den Platzhaltertext in 'Rezepte oder Zutaten suchen'."
• "Füge auf der Rezept-Detailseite einen fixierten Button zum Speichern des Rezepts hinzu und vergrößere den Zeilenabstand in den Bereichen Zutaten und Zubereitung für besseres Lesen."
• "Ersetze generische Beispielgerichte durch realistischere Alltagsgerichte und füge Tags wie proteinreich, vegetarisch und unter-30-Minuten hinzu."

Moremade enthält außerdem einen visuellen Inspector, sodass du ein Element markieren und ändern kannst, sowie eine Code-Ansicht, wenn du den generierten Quellcode direkter ansehen möchtest. Die Versionshistorie hilft, falls eine spätere Änderung die App verschlechtert und du zurückgehen musst.

Viele Rezept-Apps brauchen in Version eins keine Benutzerkonten und keine Zahlungen. Starte mit statischen Beispieldaten, solange es keinen echten Grund für Backend-Funktionen gibt.

Nutze Supabase, wenn du Folgendes brauchst:

• Benutzerkonten für gespeicherte Rezepte auf mehreren Geräten
• eine Datenbank für von Nutzern erstellte Rezepte
• Dateispeicher für hochgeladene Rezeptfotos

Nutze Stripe, wenn du etwas berechnen willst wie:

• einen Premium-Bereich für Mahlzeitenpläne
• kostenpflichtige Rezeptpakete
• ein Abo für erweiterte Funktionen

Moremade bietet integrierte Verbindungen zu Supabase und Stripe. Wenn deine App nur Durchsuchen, Suchen und Rezeptdetails braucht, lass beides zuerst weg. Du kannst es später hinzufügen, sobald der Nutzerfluss funktioniert.

Eine sinnvolle Reihenfolge ist:

1. Die App mit Beispielrezepten bauen
2. Bildschirme und Interaktionen bestätigen
3. Supabase hinzufügen, wenn Nutzer Konten oder gespeicherte Daten brauchen
4. Stripe nur hinzufügen, wenn es eine klare kostenpflichtige Funktion gibt

So bleibt die erste Version einfacher und leichter zu testen.

Eine Rezept-App wird meist in der Küche, auf kleinen Bildschirmen und oft mit einer Hand benutzt. Teste entsprechend.

Prüfe diese Punkte:

• Rezepttitel umbrechen nicht unschön
• Zutatenlisten sind leicht zu überfliegen
• Zubereitungsschritte haben genügend Abstand
• Filterelemente sind mit dem Daumen bedienbar
• Bilder laden in sinnvollen Größen
• gespeicherte Rezepte sind leicht wiederzufinden

Teste auch mit realistischen Textlängen. Ein kurzes Mock-Rezept kann gut aussehen, während ein echtes Rezept das Layout sprengt.

Wenn etwas nicht passt, sende gezielte Prompts statt allgemeiner Beschwerden. Zum Beispiel:

• "Verkleinere die Bildhöhe auf den Rezeptkarten, damit mehr Rezepte auf den Bildschirm passen."
• "Mach die Checkboxen für Zutaten größer für die Touch-Eingabe."
• "Zeige Portionen, Vorbereitungszeit und Kochzeit in einer einzigen Zusammenfassungszeile unter dem Titel an."

Wenn du statt einer mobilen App eine Website baust, teste trotzdem auf Ansichten in Handygröße. Viele Rezeptseiten werden hauptsächlich über mobile Browser genutzt.

Wenn die App gut genug für externe Tests ist, veröffentliche sie.

Mit Moremade kannst du mit einem Klick auf einer kostenlosen yourname.moremade.ai-Subdomain veröffentlichen. In kostenpflichtigen Tarifen kannst du eine eigene Domain verbinden. Domains können auch direkt in Moremade gekauft werden.

Für einen frühen Test reicht die kostenlose Subdomain meist aus. Das ist praktisch, wenn du Feedback einholen willst, bevor du für eine Domain zahlst oder jedes Detail polierst.

Wenn du mit einem Kunden oder einem Team arbeitest, exportiere außerdem den vollständigen Quellcode als ZIP oder pushe ihn zu GitHub. Moremade unterstützt beides. Das ist wichtig, weil du den Code behältst und nicht an ein bestimmtes Hosting-Setup gebunden bist.

Ein sinnvoller Veröffentlichungsweg ist:

• auf einer temporären Subdomain veröffentlichen
• mit einer kleinen Gruppe testen
• Layout- und Inhaltsprobleme beheben
• später eine eigene Domain verbinden, wenn sich das Projekt rechtfertigt

Die größten Fehler betreffen meist Umfang und Prompts, nicht den Code.

Achte auf diese Punkte:

• zu viel für den ersten Build zu verlangen
• Muss-Funktionen mit Zukunftsideen zu vermischen
• Anmeldung hinzuzufügen, bevor der zentrale Rezeptfluss bewiesen ist
• vage Prompts wie "mach es besser" oder "mach es modern" zu verwenden
• nicht mit langen Zutatenlisten und echten Rezeptanweisungen zu testen
• die mobile Lesbarkeit zu ignorieren

Ein paar praktische Gewohnheiten helfen:

• Definiere Version eins in einer kurzen Liste mit Stichpunkten
• Verwende Beispieldaten, die echten Rezepten ähneln
• Verfeinere immer nur einen Bildschirm oder eine Interaktion nach der anderen
• Füge Backend-Funktionen nur hinzu, wenn das Produkt sie braucht
• Exportiere den Code, sobald du einen stabilen Meilenstein erreicht hast

Wenn du so vorgehst, bekommst du früher eine funktionierende Rezept-App und triffst sauberere Entscheidungen darüber, was als Nächstes gebaut werden soll.