/how-to-build-lovable

How to build Travel itinerary app with Lovable?

Step-by-step guide to build a travel itinerary app with Lovable covering UI, data models, syncing and deployment to launch a polished booking app

Matt Graham, CEO of Rapid Developers

Book a call with an Expert

Starting a new venture? Need to upgrade your web app? RapidDev builds application with your growth in mind.

Book a free No-Code consultation

How to build Travel itinerary app with Lovable?

 

Build a simple travel itinerary app inside Lovable: chat-create a Next.js app (or modify an existing template) with pages to list, create, and view itineraries, connect to Supabase for storage via Lovable Secrets, test in Preview, and Publish or export to GitHub for full production. Below are Lovable-ready prompts you can paste into Chat Mode to implement each step; no terminal is required inside Lovable — use Preview and Publish, and only use GitHub export if you need local/CI work that requires a CLI.

 

What we’re building / changing (plain English)

 

Travel Itinerary app: a small Next.js app inside Lovable with an itinerary list, creation form, and detail view. It uses Supabase as the backend (Postgres) to store itineraries. You’ll configure Supabase keys via Lovable Secrets, add a lightweight Supabase client, create API routes (pages/api) to CRUD itineraries, and build UI pages (pages/index.tsx, pages/itineraries/[id].tsx, components/ItineraryForm.tsx).

 

Lovable-native approach

 

Work entirely in Chat Mode: ask Lovable to create/modify files with explicit paths and content. Use Preview to run the Next.js app inside Lovable Preview. Configure Supabase credentials in Lovable Cloud Secrets UI. When ready, Publish from Lovable. If you need to run migrations or use a CLI-only step, export/sync to GitHub from Lovable and perform CLI steps outside Lovable (labeled clearly below).

 

Meta-prompts to paste into Lovable (paste each prompt separately into Chat Mode)

 

Prompt 1 — scaffold pages and components

 

Goal: Create UI pages and components for list, create, and detail views.

Files to create/modify:

  • create src/pages/index.tsx — itinerary list and link to create form
  • create src/pages/itineraries/[id].tsx — itinerary detail
  • create src/components/ItineraryForm.tsx — form to create itinerary
  • modify package.json if missing scripts (ensure "dev" and "build")

Acceptance criteria (done when…): Preview shows index with a heading "Itineraries" and a "Create itinerary" form link; the form component exists at src/components/ItineraryForm.tsx.

Prompt text to paste:

// Create pages and components for itinerary app.
// Create file src/pages/index.tsx
// Create file src/pages/itineraries/[id].tsx
// Create file src/components/ItineraryForm.tsx

// src/pages/index.tsx
// Simple list page that fetches from /api/itineraries
// Use fetch in useEffect and show basic list and link to /itineraries/new

// src/pages/itineraries/[id].tsx
// Show itinerary detail by calling /api/itineraries/[id]

// src/components/ItineraryForm.tsx
// A controlled form with fields: title, startDate, endDate, notes
// Submits POST to /api/itineraries and navigates back to /

 

Prompt 2 — add Supabase client + Secrets setup

 

Goal: Add a lightweight server-side Supabase client and instructions to set Secrets in Lovable Cloud.

Files to create/modify:

  • create src/lib/supabaseServer.ts — server Supabase client using SUPABASE_SERVICE_ROLE or anon key
  • create src/lib/supabaseBrowser.ts — browser client using anon key

Acceptance criteria: Files exist and import process.env.NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY (browser) and SUPABASE_SERVICE\_ROLE (server if used). App reads env vars via process.env.

Secrets/integration steps:

  • Open Lovable Cloud Secrets UI and create secrets: NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_ANON_KEY, SUPABASE_SERVICE\_ROLE (optional for server-only ops).
  • Enable the Supabase project and create a table "itineraries" with columns: id (uuid, primary key), title (text), start_date (date), end_date (date), notes (text), created\_at (timestamp).

Prompt text to paste:

// Add supabase clients
// Create file src/lib/supabaseBrowser.ts
// Create file src/lib/supabaseServer.ts

// supabaseBrowser.ts should export a browser client using NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY
// supabaseServer.ts should export a server-side client using SUPABASE_SERVICE_ROLE (if provided) or the same anon key for dev previews

 

Prompt 3 — API routes for CRUD

 

Goal: Add Next.js API routes to list, create, and fetch itinerary by id.

Files to create/modify:

  • create src/pages/api/itineraries/index.ts — handles GET (list) and POST (create)
  • create src/pages/api/itineraries/[id].ts — handles GET for single itinerary

Acceptance criteria: API returns JSON. POST accepts title, startDate, endDate, notes and inserts into Supabase; GET returns rows. Preview network tab shows working /api endpoints.

Prompt text to paste:

// Create API routes
// src/pages/api/itineraries/index.ts -> export default async (req, res) => { GET: fetch all from supabase; POST: insert new row and return created record }
// src/pages/api/itineraries/[id].ts -> export default async (req, res) => { GET: fetch by id from supabase and return JSON or 404 }

// Use import { createClient } from '@supabase/supabase-js' and the server client helper created earlier

 

Prompt 4 — test in Preview and small UX polish

 

Goal: Verify UI + API work in Lovable Preview, add success/error messages.

Files to modify:

  • update src/components/ItineraryForm.tsx to show loading and toast-like messages

Acceptance criteria: In Preview you can create an itinerary, return to list, and click a row to view details.

Prompt text to paste:

// Update ItineraryForm to show loading state and handle API response.
// Add simple client-side navigation to / after success.

 

How to verify in Lovable Preview

 

  • Open Preview in Lovable after edits. Visit / to see the Itineraries list.
  • Create a new itinerary using the form; confirm network requests to /api/itineraries succeed and the new item appears.
  • Click an item to open /itineraries/[id] and verify details render.

 

How to Publish / re-publish

 

Use Lovable's Publish button to deploy the project from the workspace. Publishing will use the Secrets stored in Lovable Cloud. If you need to run DB migrations or more control, export/sync to GitHub from Lovable and perform migrations outside Lovable (see "outside Lovable" note below).

 

Common pitfalls in Lovable (and how to avoid them)

 

  • Missing Secrets: Preview will fail silently or API calls return auth errors. Add keys in Lovable Cloud Secrets UI and re-open Preview.
  • Assuming terminal exists: Lovable has no terminal. If you need to run psql/migrations, export to GitHub and run migrations locally or on CI.
  • Server vs browser keys: Don't expose service_role in frontend. Store it in Secrets and use only in server-side code (API routes). Use NEXT_PUBLIC\_ keys for the browser client.

 

Outside Lovable (terminal required)

 

If you need SQL migrations or advanced Supabase setup, export/sync the repo to GitHub from Lovable and run migrations or CLI commands locally or in CI (this step is outside Lovable and requires a terminal).

 

Want to explore opportunities to work with us?

Connect with our team to unlock the full potential of no-code solutions with a no-commitment consultation!

Book a Free Consultation

How to add itinerary versioning with Lovable

This prompt helps an AI assistant understand your setup and guide to build the feature

AI AI Prompt

How to add expiring, revocable public share links to a travel itinerary app with Lovable

This prompt helps an AI assistant understand your setup and guide to build the feature

AI AI Prompt

How to add an itinerary validation and quick-fix API

This prompt helps an AI assistant understand your setup and guide to build the feature

AI AI Prompt

Want to explore opportunities to work with us?

Connect with our team to unlock the full potential of no-code solutions with a no-commitment consultation!

Book a Free Consultation
Matt Graham, CEO of Rapid Developers

Book a call with an Expert

Starting a new venture? Need to upgrade your web app? RapidDev builds application with your growth in mind.

Book a free No-Code consultation

Best Practices for Building a Travel itinerary app with AI Code Generators

 

Build the itinerary app in Lovable by iterating in Chat Mode to generate and refine routes, UIs, and server endpoints; keep secrets (OpenAI/Supabase keys) in Lovable Cloud's Secrets UI; use file diffs/patches and Preview to test UI changes; export/sync to GitHub to run DB migrations or run heavier dev tasks locally. Architect with a small server-side API (for secure AI calls and DB writes), a client that calls that API, and clear data modelling plus rate‑limits and human review for AI outputs.

 

Project structure & core ideas

 

  • Server-side endpoints for AI calls and DB operations so API keys never go to the browser.
  • Client for conversation-driven itinerary editing (chat-first UI) and Preview in Lovable to iterate quickly.
  • Database (Supabase recommended) for users, trips, days, and bookings; keep migrations and heavy ops outside of Lovable using GitHub sync.
  • Secrets set in Lovable Cloud Secrets UI (OPENAI_API_KEY, SUPABASE_URL, SUPABASE_KEY). Never commit them.

 

Development workflow in Lovable

 

  • Generate code with Chat Mode — ask the assistant to produce endpoints or components, then accept edits as file diffs/patches.
  • Use Preview frequently to validate UI and API behavior under Lovable's runtime.
  • Push to GitHub when you need to run CLI tasks (migrations, seed scripts) or CI tests — export/sync from Lovable and run locally or in CI.
  • Publish from Lovable Cloud when ready; ensure Secrets are set before publish so runtime works.

 

Key engineering best practices

 

  • Keep AI calls server-side to protect keys and control costs.
  • Prompt design + validation: use structured prompts that return JSON, then validate/normalize on the server before storing.
  • Human-in-loop: let users review & edit generated itineraries; store edit history for audit/rollback.
  • Rate limits and caching: throttle AI calls per user and cache common queries to control cost.
  • Testing & preview data: seed a test DB (locally or in CI) separate from prod; use Preview for UI tests only.
  • Migrations: since Lovable has no terminal, run DB migrations in CI or locally after exporting code to GitHub.

 

Minimal secure server example (Node)

 

// server/api/generate-itinerary.js
import fetch from 'node-fetch'
import { createClient } from '@supabase/supabase-js'

// // Supabase and OpenAI keys must be set in Lovable Secrets UI
const supabase = createClient(process.env.SUPABASE_URL, process.env.SUPABASE_KEY)

export default async function handler(req, res) {
  // // Expect { userId, prompt } from client
  const { userId, prompt } = req.body

  // // Call OpenAI ChatCompletion API
  const openaiResp = await fetch('https://api.openai.com/v1/chat/completions', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${process.env.OPENAI_API_KEY}`,
    },
    body: JSON.stringify({
      model: 'gpt-4o-mini',
      messages: [{ role: 'user', content: `Create a JSON itinerary: ${prompt}` }],
      max_tokens: 1000,
    }),
  })
  const openaiJson = await openaiResp.json()
  // // Extract assistant text (validate/parse safely)
  const text = openaiJson.choices?.[0]?.message?.content ?? ''
  let itinerary
  try {
    itinerary = JSON.parse(text) // // validate robustly in prod
  } catch (err) {
    return res.status(400).json({ error: 'Invalid AI output' })
  }

  // // Store in Supabase
  const { data, error } = await supabase.from('itineraries').insert({
    user_id: userId,
    content: itinerary,
    created_at: new Date(),
  }).select()

  if (error) return res.status(500).json({ error })
  res.json({ itinerary: data[0] })
}

 

Practical pitfalls to avoid

 

  • Don’t assume local CLI parity: Migrations and custom npm scripts must be run outside Lovable via GitHub sync.
  • Secrets leakage: Never hardcode keys—use Lovable Secrets UI and process.env in your server code.
  • Unvalidated AI outputs: Always parse and validate AI JSON before saving or performing actions (bookings).
  • Costs and rate spikes: Add safeguards and review logs after publish to control API spend.

 

Follow this flow: iterate in Chat Mode + Preview, store secrets in Secrets UI, export to GitHub for migrations/tests, run DB migrations externally, then Publish from Lovable Cloud once tests and secrets are in place.

Client trust and success are our top priorities

When it comes to serving you, we sweat the little things. That’s why our work makes a big impact.

Rapid Dev was an exceptional project management organization and the best development collaborators I've had the pleasure of working with. They do complex work on extremely fast timelines and effectively manage the testing and pre-launch process to deliver the best possible product. I'm extremely impressed with their execution ability.

CPO, Praction - Arkady Sokolov

May 2, 2023

Working with Matt was comparable to having another co-founder on the team, but without the commitment or cost. He has a strategic mindset and willing to change the scope of the project in real time based on the needs of the client. A true strategic thought partner!

Co-Founder, Arc - Donald Muir

Dec 27, 2022

Rapid Dev are 10/10, excellent communicators - the best I've ever encountered in the tech dev space. They always go the extra mile, they genuinely care, they respond quickly, they're flexible, adaptable and their enthusiasm is amazing.

Co-CEO, Grantify - Mat Westergreen-Thorne

Oct 15, 2022

Rapid Dev is an excellent developer for no-code and low-code solutions.
We’ve had great success since launching the platform in November 2023. In a few months, we’ve gained over 1,000 new active users. We’ve also secured several dozen bookings on the platform and seen about 70% new user month-over-month growth since the launch.

Co-Founder, Church Real Estate Marketplace - Emmanuel Brown

May 1, 2024 

Matt’s dedication to executing our vision and his commitment to the project deadline were impressive. 
This was such a specific project, and Matt really delivered. We worked with a really fast turnaround, and he always delivered. The site was a perfect prop for us!

Production Manager, Media Production Company - Samantha Fekete

Sep 23, 2022