How to Build a Travel Itinerary App with Lovable

1Build a collaborative travel itinerary app. Create these Supabase tables:
2
3- trips: id, created_by (FK auth.users), title, destination, description, start_date (date), end_date (date), cover_image_url, share_token (uuid, default gen_random_uuid()), is_published (bool default false), created_at
4- trip_members: id, trip_id (FK trips), user_id (FK auth.users), email (text, for pending invites), role (owner|editor|viewer), joined_at, UNIQUE(trip_id, user_id)
5- itinerary_items: id, trip_id (FK trips), day_number (int, 1-indexed), sort_order (int), item_type (activity|hotel|flight|restaurant|transport|note), title, description, location, start_time (time nullable), end_time (time nullable), booking_reference, created_by (FK auth.users), created_at, updated_at
6- trip_expenses: id, trip_id (FK trips), paid_by (FK auth.users), title, amount (numeric), category (food|transport|accommodation|activity|other), expense_date (date), split_config (jsonb, { userId: amountOwed }), receipt_url, created_at
7
8RLS policies:
9- trips: SELECT/UPDATE/DELETE where id IN (SELECT trip_id FROM trip_members WHERE user_id = auth.uid())
10- trip_members, itinerary_items, trip_expenses: same trip_id IN (...) pattern
11- Only owners can delete trips and manage members
12- Allow public SELECT on trips WHERE is_published = true (for share link)
13
14Enable Realtime on itinerary_items and trip_expenses tables.

1Build the itinerary page at src/pages/TripItinerary.tsx:
2
31. Page header: trip title, destination, date range, member Avatars (show up to 5, then '+N more'), 'Invite' Button, 'Share' Button
42. Day tabs: one Tab per day of the trip labeled 'Day 1 — Jun 15', 'Day 2 — Jun 16' etc. (calculate from start_date + day_number - 1)
53. Day content:
6   - Timeline list of itinerary_items for this day ordered by sort_order
7   - Each item is a Card with: type icon (map pin for activity, bed for hotel, plane for flight, fork for restaurant), title, location, time range, booking reference (grayed out), edit/delete Actions menu
8   - Item type Badge with different colors per type
9   - Drag handle on left side. On drag end, update sort_order values for all affected items in a batch Supabase update
104. 'Add Item' Button at bottom of each day: opens a Dialog with fields for item_type Select, title, description, location, start_time, end_time, booking_reference
115. Subscribe to itinerary_items changes via Supabase Realtime. Show a 'Member Name edited this itinerary' toast when another user makes a change

1// src/utils/expenseSettlement.ts
2export interface Balance {
3  userId: string
4  name: string
5  balance: number
6}
7
8export interface Settlement {
9  from: string
10  fromName: string
11  to: string
12  toName: string
13  amount: number
14}
15
16export function calculateSettlements(balances: Balance[]): Settlement[] {
17  const debtors = balances.filter((b) => b.balance < 0).sort((a, b) => a.balance - b.balance)
18  const creditors = balances.filter((b) => b.balance > 0).sort((a, b) => b.balance - a.balance)
19  const settlements: Settlement[] = []
20
21  let i = 0
22  let j = 0
23  while (i < debtors.length && j < creditors.length) {
24    const debtor = debtors[i]
25    const creditor = creditors[j]
26    const amount = Math.min(Math.abs(debtor.balance), creditor.balance)
27
28    if (amount > 0.01) {
29      settlements.push({
30        from: debtor.userId,
31        fromName: debtor.name,
32        to: creditor.userId,
33        toName: creditor.name,
34        amount: Math.round(amount * 100) / 100,
35      })
36    }
37
38    debtor.balance += amount
39    creditor.balance -= amount
40
41    if (Math.abs(debtor.balance) < 0.01) i++
42    if (creditor.balance < 0.01) j++
43  }
44
45  return settlements
46}

1Build a member management Sheet (slides in from right) for trip owners:
2
31. Member list: Avatar + display name + email + role Badge (owner=purple, editor=blue, viewer=gray)
42. Role change Select per member (owners only): clicking changes role in trip_members
53. Remove member Button (owners only, cannot remove self if only owner)
64. Invite section at bottom:
7   - Email Input + Role Select + 'Send Invite' Button
8   - On submit: call invite_to_trip(trip_id, email, role) Supabase RPC function
9   - Show pending invites section: members with no user_id yet show as 'Pending — email@example.com' with a 'Revoke' button
105. Trip visibility toggle: 'Private' vs 'Public link' Switch. Setting to public sets is_published = true and shows the share URL: /trips/public/SHARE_TOKEN
116. Create a public route /trips/public/:token that fetches the trip by share_token WHERE is_published = true (no auth required) and shows a read-only itinerary view