Planning a trip usually means open tabs, contradictory forum posts, and a rough itinerary that still leaves the hard decisions to you. Wander replaces that with a form: destination, dates, budget, travel vibe — and an AI agent returns a complete day-by-day plan with mapped stops, meals, and accommodation in minutes.
This project started as a manually configured Momen backend — a working template with the data model, AI agent, Actionflows, and integrations all set up inside the Momen editor. The frontend was then built by connecting that backend to Claude Code via the Momen no-code plugin: the plugin passes the full Momen project context to Claude Code, and the frontend was described in natural language from there — no code written manually.
What the App Does
A user picks a destination, sets trip length (1 to 14 days), adjusts a budget slider, and selects a vibe from eight options: Foodie, Hidden gems, Museums & art, Nature & hikes, Nightlife, Family friendly, Slow travel, or Photography. Submitting the form kicks off AI generation in the background.
A progress overlay shows two stages — "Reserving itinerary" and "Planning & illustrating days" — in real time. When the plan is ready, the app opens the trip detail page automatically.
Each trip has a cover image, a short summary, and a day-by-day breakdown with tabs. Switching days shows that day's activities, meals, and accommodation alongside an interactive map with every location pinned. Selecting a place on the list highlights it on the map, and vice versa. Users can save any trip with a single tap.
Other features in the app:
- Discover page: Browse itineraries generated by other users
- User accounts: Sign up with username and password; new accounts receive a free credit to generate a first trip
- Credit system: Each generation costs one credit; users can top up with Stripe ($5 for 3 credits)
- Personal center: View generated trips, credit balance, and order history
How the Backend Is Built
The Momen backend covers the full server-side of the app: data model, AI agent, Actionflows, and external API integrations — all configured visually inside the Momen editor, with no server code.
Data Model
The data is structured as a hierarchy: each account has many trips; each trip has itinerary days; each day has activities, meals, and an accommodation entry. Every location stores geographic coordinates so the map can place each pin exactly. Two additional tables handle credit orders and trip saves (likes).
This structure is configured visually in Momen — defining fields, types, and relationships between tables without writing any database code. For more on how data modeling works in Momen, see How to Create Data Models for Your App in Momen.
AI Agent
The itinerary generation is handled by an AI Agent configured in Momen. The agent takes the trip inputs — destination, duration, budget, and vibe — and returns a structured plan: themed days, geographic focus, specific activities, meals, and accommodation, all with names and coordinates. It also generates a cover image for the trip.
The agent prompt, model selection, and structured output format are configured in the Momen editor. No separate AI service or API key is needed on the backend — the agent runs inside Momen.
Backend Logic
Four Actionflows handle the app's business logic:
- Generate trip: An async flow that deducts a credit, calls the AI agent, saves the full itinerary to the database, and returns a trip ID. The frontend listens for completion over a WebSocket subscription and shows the progress overlay until the flow finishes.
- Apply default credit: A sync flow triggered at signup that adds one starter credit to the new account.
- Create order: Initiates a Stripe payment session when a user requests a top-up.
- Stripe webhook: Receives Stripe's confirmation after payment and adds three credits to the user's account.
Each flow is configured in the Momen editor — chaining steps, setting conditions, and connecting to the database or external services.
Integrations
Stripe handles credit purchases. When a user tops up, the frontend asks Momen to create an order. Momen calls Stripe using the secret key stored securely in the Momen backend, then returns only a payment token to the frontend. The Stripe secret key never appears in the frontend. After payment, Stripe's webhook notifies Momen to settle the order and add credits. See Momen's payment documentation for how payment integration is configured.
Geocoding API converts place names and addresses returned by the AI agent into precise lat/lng coordinates. This runs inside the trip generation Actionflow, so every activity, meal, and accommodation entry is geocoded before it reaches the frontend.
Nearby Search API enriches each day's itinerary by finding relevant points of interest around the day's geographic focus — called within the same generation flow so the final itinerary has real, locatable places rather than generic suggestions.
MapLibre GL renders the interactive map on the trip detail page using a free CARTO basemap — no Google Maps or Mapbox API key required on the frontend. Coordinates come from the geocoded backend data, so the map only renders what the backend already provides.
Building the Frontend with Claude Code
With the Momen backend in place, the Momen no-code plugin was used to pass the project's full context — data model, API schema, Actionflow IDs — to Claude Code. The frontend was then generated from natural language:
"Based on this Momen project, build a React + Vite frontend. There should be a home page with a trip generation form and a discover grid, a trip detail page with day tabs and an interactive map, a login/register page, and a personal center with my trips and order history."
Claude Code generated the component structure, wired every screen to Momen's GraphQL API, built the Stripe checkout flow, and implemented the real-time generation overlay — all from descriptions like this, without the user writing any code manually.
Two Ways to Build Something Like This
This project used a manually configured Momen backend connected to Claude Code via the plugin. If you're starting from scratch, there are two paths:
Momen AI Copilot — build the entire app inside the Momen editor. The in-product AI Copilot lets you describe your data model, backend logic, and UI in natural language, and it configures everything directly in your project. No external coding agent needed. See Meet Your Nocode AI Copilot for how this works.
Momen plugin + Claude Code / Codex / Cursor — build the Momen backend in the editor (or with the Copilot), then install the Momen no-code plugin in your AI coding agent of choice. The plugin passes your Momen project's full context — data model, API schema, Actionflow IDs — to the agent, so you can describe the frontend you want in natural language and have it wired to the right endpoints automatically.
How Long Does This Take?
Configuring this Momen backend manually — data model, AI agent, four Actionflows, Stripe integration, permissions — would take around 20 hours of focused work in the Momen editor. With the plugin handling configuration from natural language, the same backend takes 1 to 2 hours.
Building the frontend from scratch with Claude Code, once the Momen backend context is loaded into the plugin, takes around 30 minutes for the initial working version.
This project uses Stripe payment integration, which requires Momen's Pro plan at $85/project/month (billed annually). Stripe itself is pay-as-you-go with no monthly fee. Frontend hosting on Vercel is free for most early-stage projects.
Try It and Clone the Project
New users get a free credit on signup — enough to generate one trip and see the full app in action. If you want to build your own version with more credits or a different use case, clone the Momen backend into your own workspace and start from there.
Open in Momen editor / Clone project
For a broader look at why combining a no-code backend with an AI coding agent works well for building production apps, see How to Build an MVP Without Engineers.
Top comments (0)