Wie man mit KI eine Reiseplaner-App baut

Bevor du den Builder öffnest, definiere die kleinste nützliche Version der App. Für einen Reiseplaner bedeutet das meist, einem Nutzer zu helfen, eine Reise zu erstellen, anzusehen und anzupassen, ohne in Sonderfällen unterzugehen.

Schreibe drei Dinge auf:

• Nutzer: Alleinreisende, Familien, Reisebüros oder interne Teamnutzung
• Kernaufgaben: Einen Reiseplan erstellen, Tagespläne durchsuchen, Notizen speichern, Budget schätzen, Reisedetails teilen
• Daten: Reiseziele, Daten, tägliche Aktivitäten, Transport, Hotelinfos, Notizen, Budgetposten

Eine sinnvolle erste Version enthält oft:

• Startseite mit einem klaren Ablauf zur Reiseeinrichtung
• Formular zum Erstellen einer Reise
• Reiseplan-Screen, nach Tagen gruppiert
• Aktivitätskarten mit Uhrzeit, Ort, Notizen und Kosten
• Einfacher Bearbeitungsablauf zum Verschieben oder Ändern von Einträgen

Lass alles weg, was du am ersten Tag nicht brauchst, wie Social Features, Karten, Offline-Synchronisierung oder komplexe Empfehlungslogik. Wenn Nutzer Reisen geräteübergreifend speichern sollen, plane Login und eine Datenbank ein. Wenn du für Premium-Reisepläne oder Reiseplanungsservices Gebühren verlangen willst, plane Stripe ein. Andernfalls halte die erste Version lokal und einfach.

Moremade funktioniert am besten, wenn du das Produkt in klarer Sprache mit genug Details beschreibst, um den ersten Build einzugrenzen. Sei konkret bei Screens, Feldern und Verhalten. Erwähne, ob du eine Website in React + Tailwind oder eine Mobile App in React Native mit Expo möchtest.

Hier ist ein gutes Beispiel für einen ersten Versuch:

Erstelle eine Mobile App in React Native (Expo) für einen Reiseplaner namens TripMap. Die App soll es einem Nutzer ermöglichen, eine Reise mit Reiseziel, Startdatum, Enddatum, Mitreisenden, Budget und Notizen anzulegen. Zeige einen Reiseplan-Screen, der nach Tagen gruppiert ist, mit Aktivitätskarten für Uhrzeit, Titel, Ort, Notizen und geschätzte Kosten. Füge einen Startbildschirm, einen Screen zum Erstellen einer Reise, einen Detail-Screen für den Reiseplan und einen Screen zum Bearbeiten von Aktivitäten hinzu. Nutze eine saubere, einfache Oberfläche mit klaren Abständen und großen Touch-Zielen. Fülle die App mit Beispielreisen, damit die Preview sofort nutzbar ist.

Das reicht aus, um einen hilfreichen Entwurf zu erzeugen, ohne jedes Pixel zu spezifizieren. Wenn du lieber eine Web-App möchtest, frage stattdessen nach einer Website. Moremade generiert echten Quellcode und zeigt dir eine Live-Preview, die du prüfen und per Chat ändern kannst.

Der erste Entwurf zeigt meist fehlende Anforderungen. Prüfe die Preview so, als wärst du ein echter Nutzer, der gerade eine Reise plant.

Achte auf diese Punkte:

• Versteht ein neuer Nutzer sofort, was zuerst zu tun ist
• Sind die Reise-Felder ausreichend, um einen realistischen Reiseplan zu erstellen
• Ist die Tagesansicht leicht zu erfassen
• Sind Bearbeitungsaktionen eindeutig
• Macht die Beispieldaten Sinn

Dann verfeinere mit kurzen, konkreten Folge-Prompts. Zum Beispiel:

• "Füge oben auf jedem Reisetag eine Tageszusammenfassung mit geschätzten Gesamtkosten und Anzahl der Aktivitäten hinzu."
• "Ermögliche es, eine Aktivität per Drag-and-drop auf einen anderen Tag zu verschieben und Einträge innerhalb eines Tages neu anzuordnen."
• "Füge auf dem Screen zum Erstellen der Reise Optionen für das Reisetempo hinzu: entspannt, ausgewogen, vollgepackt. Verwende diesen Wert im Beispieltext des Reiseplans."

Gute Folge-Prompts konzentrieren sich immer auf eine Änderung auf einmal. Wenn etwas visuell nicht stimmt, verwende Moremades visuellen Inspector, um das Element auszuwählen und zu ändern. Wenn du exakte Kontrolle auf Code-Ebene brauchst, nutze die Code-Ansicht.

Nicht jeder Reiseplaner braucht am ersten Tag Backend-Funktionen. Ein Demo- oder internes Prototyping-Projekt braucht vielleicht nur Beispieldaten und lokalen State. Füge Infrastruktur hinzu, wenn ein Nutzerbedarf davon abhängt.

Nutze Supabase, wenn du Folgendes brauchst:

• Login
• Gespeicherte Reisen über Sitzungen oder Geräte hinweg
• Gemeinsames Bearbeiten von Reisen
• Dateispeicherung für Dokumente oder Bilder

Ein praktischer Prompt wäre:

• "Verbinde Supabase für E-Mail-Login und speichere Reisen, Reisetage und Aktivitäten pro Nutzer. Füge auf der Startseite eine Liste gespeicherter Reisen hinzu."

Nutze Stripe, wenn du Folgendes brauchst:

• Bezahlte Reisevorlagen
• Einen Premium-Planungsservice
• Checkout für einmalige Käufe von Reiseplänen

Ein praktischer Prompt wäre:

• "Füge einen Stripe-Checkout-Flow für einen bezahlten Reiseprüfungsservice hinzu. Verwende die von mir festgelegten Preise und zeige einen Kauf-Button auf dem Reiseübersichts-Screen."

Wenn du die Idee noch validierst, lass beides weg. Eine kleinere App ist leichter zu testen und zu verbessern.

Reise-Tools sehen im Desktop-Preview oft gut aus, scheitern aber im echten Einsatz. Teste die App in einer Ansicht für Smartphones und achte besonders auf Bildschirmlänge, Touch-Ziele und Formulareingaben, wenn du eine Mobile App baust.

Gehe einige realistische Szenarien durch:

• Eine 3-tägige Städtereise erstellen
• Einen 14-tägigen Urlaub mit mehreren Stationen erstellen
• Eine Aktivität bearbeiten und eine andere auf einen anderen Tag verschieben
• Lange Notizen und ungewöhnliche Ortsnamen hinzufügen
• Ein sehr kleines und ein sehr großes Budget ausprobieren

Achte auf typische Schwachstellen:

• Überladene Aktivitätskarten
• Datumsfelder, die schwer zu bearbeiten sind
• Buttons, die zu nah beieinander liegen
• Wichtige Informationen unterhalb des sichtbaren Bereichs
• Leere Zustände, die den nächsten Schritt nicht erklären

Wenn du ein Problem findest, bitte um eine direkte Korrektur. Beispiel: "Reduziere die visuelle Gewichtung der Aktivitätskarten, mache den Tages-Header sticky und halte den Button zum Hinzufügen von Aktivitäten bei langen Reiseplänen unten sichtbar."

Die Versionshistorie von Moremade hilft dabei. Wenn eine Änderung die App verschlechtert, kannst du zurückgehen.

Sobald der grundlegende Ablauf funktioniert, veröffentliche eine teilbare Version. Moremade kann mit einem Klick auf einer kostenlosen yourname.moremade.ai-Subdomain veröffentlichen. Wenn du eine eigene Domain willst, ist das in kostenpflichtigen Plänen verfügbar, und Domains können auch direkt in Moremade gekauft werden.

Prüfe vor der Veröffentlichung:

• App-Name und Bezeichnungen
• Platzhalter- und Beispieldaten
• Eventuelle Preisangaben, wenn Stripe aktiviert ist
• Login-Flow, wenn Supabase aktiviert ist
• Einfache rechtliche Seiten, falls die App öffentlich ist

Du kannst den vollständigen Quellcode jederzeit als ZIP exportieren oder zu GitHub pushen. Für Websites ist die Ausgabe React + Tailwind. Für Mobile Apps ist es React Native mit Expo. Das ist wichtig, wenn du später außerhalb des Builders weiterentwickeln möchtest. Es gibt keinen Lock-in.

Die meisten ersten Versionen scheitern aus Produktgründen, nicht wegen des Tools. Achte auf diese Fehler:

• Zu viele Funktionen zu früh: Starte mit Reiseerstellung und einem gut lesbaren Reiseplan, nicht gleichzeitig mit Karten, Chat und Empfehlungen.
• Schwache Beispieldaten: Wenn die Preview leer oder unrealistisch ist, lässt sich das Design schwer beurteilen.
• Kein klarer Bearbeitungsablauf: Reiseplaner leben davon, Pläne schnell ändern zu können.
• Backend zu früh: Füge Login oder Zahlungen erst hinzu, wenn es einen konkreten Grund dafür gibt.
• Desktop-first-Layout: Reisende prüfen Pläne meist auf dem Smartphone.
• Vage Prompts: "Mach es besser" ist weniger hilfreich als der genaue Screen, die Komponente und die gewünschte Änderung.

Eine gute Regel ist, zuerst eine komplette Nutzerreise zum Laufen zu bringen: Reise erstellen, Reiseplan ansehen, Aktivität bearbeiten, nutzbare Version veröffentlichen. Dann erweitern.