How to Build Travel itinerary app with V0

1// Paste this prompt into V0's AI chat:
2// Create a Supabase schema for a travel itinerary app:
3// 1. trips table: id (uuid PK), owner_id (uuid FK), title (text), destination (text), start_date (date), end_date (date), cover_image_url (text), budget_cents (int nullable), share_token (text UNIQUE DEFAULT gen_random_uuid()), is_public (boolean DEFAULT false), created_at (timestamptz)
4// 2. itinerary_days table: id (uuid PK), trip_id (uuid FK), date (date), notes (text)
5// 3. activities table: id (uuid PK), day_id (uuid FK), title (text), description (text), start_time (time), end_time (time nullable), location_name (text), latitude (numeric nullable), longitude (numeric nullable), cost_cents (int DEFAULT 0), category (text — 'transport', 'food', 'activity', 'accommodation', 'other'), position (int for ordering)
6// 4. trip_collaborators table: trip_id (uuid FK), user_id (uuid FK), can_edit (boolean DEFAULT false), PRIMARY KEY(trip_id, user_id)
7// RLS: owners and collaborators can access trips. Public trips accessible via share_token without auth.
8// Seed a sample 3-day trip to Tokyo with 4 activities per day.

1import { createClient } from '@/lib/supabase/server'
2import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
3import { Card, CardContent } from '@/components/ui/card'
4import { Badge } from '@/components/ui/badge'
5import { Button } from '@/components/ui/button'
6import { Separator } from '@/components/ui/separator'
7
8export default async function TripPage({ params }: { params: Promise<{ id: string }> }) {
9  const { id } = await params
10  const supabase = await createClient()
11
12  const { data: trip } = await supabase.from('trips').select('*').eq('id', id).single()
13  const { data: days } = await supabase
14    .from('itinerary_days')
15    .select('*, activities(*)')
16    .eq('trip_id', id)
17    .order('date')
18
19  const totalBudget = days?.flatMap(d => d.activities).reduce((sum: number, a: any) => sum + (a.cost_cents ?? 0), 0) ?? 0
20
21  return (
22    <div className="max-w-4xl mx-auto p-6">
23      <h1 className="text-3xl font-bold">{trip?.title}</h1>
24      <p className="text-muted-foreground">{trip?.destination}</p>
25      <p className="text-sm mt-2">Total spent: ${(totalBudget / 100).toFixed(2)}
26        {trip?.budget_cents && ` / $${(trip.budget_cents / 100).toFixed(2)} budget`}
27      </p>
28      <Separator className="my-4" />
29      <Tabs defaultValue={days?.[0]?.id}>
30        <TabsList>
31          {days?.map((day, i) => (
32            <TabsTrigger key={day.id} value={day.id}>Day {i + 1}</TabsTrigger>
33          ))}
34        </TabsList>
35        {days?.map((day) => (
36          <TabsContent key={day.id} value={day.id} className="space-y-3">
37            <p className="text-sm text-muted-foreground">{new Date(day.date).toLocaleDateString()}</p>
38            {day.activities
39              ?.sort((a: any, b: any) => a.position - b.position)
40              .map((activity: any) => (
41                <Card key={activity.id}>
42                  <CardContent className="p-4 flex justify-between items-start">
43                    <div>
44                      <p className="font-semibold">{activity.title}</p>
45                      <p className="text-sm text-muted-foreground">
46                        {activity.start_time} — {activity.location_name}
47                      </p>
48                    </div>
49                    <div className="flex items-center gap-2">
50                      <Badge variant="outline">{activity.category}</Badge>
51                      {activity.cost_cents > 0 && (
52                        <Badge variant="secondary">${(activity.cost_cents / 100).toFixed(2)}</Badge>
53                      )}
54                    </div>
55                  </CardContent>
56                </Card>
57              ))}
58            <Button variant="outline" size="sm">+ Add Activity</Button>
59          </TabsContent>
60        ))}
61      </Tabs>
62    </div>
63  )
64}

1// Paste this prompt into V0's AI chat:
2// Add a map overview page at app/trips/[id]/map/page.tsx.
3// Requirements:
4// - Install and use react-leaflet with OpenStreetMap tiles (free, no API key)
5// - Fetch all activities for this trip that have latitude and longitude
6// - Display each activity as a marker on the map
7// - Clicking a marker shows a popup with: activity title, time, location name, category Badge, and cost
8// - Color-code markers by category (transport=blue, food=orange, activity=green, accommodation=purple)
9// - Auto-center and zoom the map to fit all markers
10// - Use dynamic(() => import(...), { ssr: false }) since Leaflet doesn't support SSR
11// - Add a link back to the itinerary view
12// Important: Leaflet CSS must be imported for the map to render correctly.

1import { createClient } from '@/lib/supabase/server'
2import { Card, CardContent } from '@/components/ui/card'
3import { Badge } from '@/components/ui/badge'
4import { Separator } from '@/components/ui/separator'
5import { notFound } from 'next/navigation'
6
7export default async function SharedTrip({ params }: { params: Promise<{ token: string }> }) {
8  const { token } = await params
9  const supabase = await createClient()
10
11  const { data: trip } = await supabase
12    .from('trips')
13    .select('*, itinerary_days(*, activities(*))')
14    .eq('share_token', token)
15    .eq('is_public', true)
16    .single()
17
18  if (!trip) notFound()
19
20  return (
21    <div className="max-w-3xl mx-auto p-6">
22      <h1 className="text-3xl font-bold">{trip.title}</h1>
23      <p className="text-muted-foreground">{trip.destination}</p>
24      <Separator className="my-4" />
25      {trip.itinerary_days
26        ?.sort((a: any, b: any) => a.date.localeCompare(b.date))
27        .map((day: any, i: number) => (
28          <div key={day.id} className="mb-6">
29            <h2 className="text-xl font-semibold mb-3">Day {i + 1} — {new Date(day.date).toLocaleDateString()}</h2>
30            {day.activities
31              ?.sort((a: any, b: any) => a.position - b.position)
32              .map((activity: any) => (
33                <Card key={activity.id} className="mb-2">
34                  <CardContent className="p-3 flex justify-between">
35                    <div>
36                      <p className="font-medium">{activity.title}</p>
37                      <p className="text-sm text-muted-foreground">{activity.start_time} — {activity.location_name}</p>
38                    </div>
39                    <Badge variant="outline">{activity.category}</Badge>
40                  </CardContent>
41                </Card>
42              ))}
43          </div>
44        ))}
45    </div>
46  )
47}

1'use server'
2
3import { createClient } from '@/lib/supabase/server'
4import { revalidatePath } from 'next/cache'
5
6export async function createTrip(formData: FormData) {
7  const supabase = await createClient()
8  const { data: { user } } = await supabase.auth.getUser()
9  if (!user) return { error: 'Not authenticated' }
10
11  const title = formData.get('title') as string
12  const destination = formData.get('destination') as string
13  const startDate = formData.get('startDate') as string
14  const endDate = formData.get('endDate') as string
15
16  const { data: trip } = await supabase.from('trips').insert({
17    owner_id: user.id, title, destination,
18    start_date: startDate, end_date: endDate,
19  }).select('id').single()
20
21  // Auto-create itinerary days
22  const start = new Date(startDate)
23  const end = new Date(endDate)
24  const days = []
25  for (let d = new Date(start); d <= end; d.setDate(d.getDate() + 1)) {
26    days.push({ trip_id: trip!.id, date: d.toISOString().split('T')[0] })
27  }
28  await supabase.from('itinerary_days').insert(days)
29
30  revalidatePath('/trips')
31  return { tripId: trip!.id }
32}
33
34export async function addActivity(formData: FormData) {
35  const supabase = await createClient()
36  const dayId = formData.get('dayId') as string
37  const { data: maxPos } = await supabase
38    .from('activities').select('position')
39    .eq('day_id', dayId).order('position', { ascending: false }).limit(1).single()
40
41  await supabase.from('activities').insert({
42    day_id: dayId,
43    title: formData.get('title') as string,
44    start_time: formData.get('startTime') as string,
45    location_name: formData.get('location') as string,
46    category: formData.get('category') as string,
47    cost_cents: parseInt(formData.get('cost') as string || '0') * 100,
48    position: (maxPos?.position ?? 0) + 1,
49  })
50  revalidatePath(`/trips`)
51}
52
53export async function toggleShareLink(tripId: string, isPublic: boolean) {
54  const supabase = await createClient()
55  await supabase.from('trips').update({ is_public: isPublic }).eq('id', tripId)
56  revalidatePath(`/trips/${tripId}`)
57}