How to Clone Airbnb

Create a full-stack Airbnb-style rental marketplace called StayFinder using Next.js (App Router), Tailwind CSS, Prisma and SQLite (easy to swap to Postgres later).

## What to build
A two-sided marketplace where hosts list properties and guests book them. Platform charges a 12% guest service fee shown in the price breakdown.

## Key screens
- Home with a prominent search bar (location, dates, guests) and a responsive grid of listing cards
- Search results: filterable grid (price slider, property type chips, amenities) plus a map panel with price markers
- Listing page: image gallery, amenities, calendar with blocked dates, sticky booking card computing subtotal + service fee, reviews with average rating
- Multi-step 'Become a host' wizard: details → location → photos → pricing → publish
- Host dashboard: my listings, incoming bookings (accept/decline), simple earnings chart
- Guest trips page: upcoming/past with review modal after stay
- Auth: email magic link or credentials, separate host/guest flows sharing one account

## Schema (Prisma)
User (id, name, email, image, bio), Listing (id, hostId, title, desc, type, city, country, lat, lng, pricePerNight, maxGuests, bedrooms, baths, amenities Json, photos Json, published), Booking (id, listingId, guestId, checkIn, checkOut, guests, subtotal, fee, total, status), Review (id, bookingId, authorId, rating, comment), Message (id, bookingId, senderId, body, createdAt)

## Logic that must work
- Server-side date-overlap validation so no double bookings
- Price breakdown: nights × rate + 12% fee, computed in one shared util used by UI and API
- Booking status flow: pending → confirmed → completed (auto after checkout date) → reviewable
- Only the booking's guest and host can see their message thread

## Style
Airbnb-like: white canvas, #FF385C primary, rounded-2xl cards, soft shadows, Inter font, skeleton loaders on data fetch. Fully responsive - booking card becomes a fixed bottom bar on mobile.

Seed with 12 demo listings (4 cities, varied prices, unsplash photo URLs) and 2 demo users so the app is browsable immediately. Use Stripe test mode for checkout if available; otherwise mock the payment step with a fake card form that always succeeds.

You are building a production-quality Airbnb clone. Work iteratively: scaffold, then implement feature by feature, running the app after each step.

## Stack
- Next.js 14 App Router, TypeScript, Tailwind CSS, shadcn/ui
- PostgreSQL via Prisma; Supabase for auth (email + Google OAuth) and image storage
- Stripe Connect (destination charges) for marketplace payments - 12% guest fee, 3% host fee
- Mapbox GL for maps; react-day-picker for calendars; Zod for all input validation

## Architecture requirements
- Route groups: (marketing), (app), (host). Server components by default; client components only for interactive widgets (search bar, calendar, map, gallery)
- All mutations through server actions with Zod schemas; never trust client-side price math - recompute the booking total server-side from the listing's stored price
- lib/pricing.ts: single source of truth for subtotal, fees, payout amounts; unit-test it
- Booking conflict prevention: Postgres exclusion constraint on (listing_id, daterange(check_in, check_out)) - not just application-level checks

## Data model
users, listings (with PostGIS point for geo search), listing_photos, bookings, reviews, messages, payouts. Add indexes on listings(city), bookings(listing_id, check_in), reviews(listing_id).

## Implementation order
1. Scaffold + Prisma schema + Supabase auth with middleware-protected routes
2. Listing CRUD: multi-step create wizard (react-hook-form + Zod), photo upload to Supabase storage with client-side compression
3. Search: /s/[city] page - server-rendered results, URL-state filters (price, type, guests, amenities), Mapbox map synced to result hover
4. Listing detail: gallery, amenities, availability calendar that greys out booked ranges fetched server-side
5. Booking flow: date selection → server action validates availability → Stripe Checkout session with application_fee_amount → webhook confirms booking → confirmation page + email (Resend)
6. Host dashboard: bookings table with accept/decline (for request-to-book listings), earnings summary grouped by month
7. Reviews: unlocked by a completed stay; double-blind (hidden until both submit or 14 days)
8. Messaging: per-booking thread, polling or Supabase realtime

## Quality bar
- Loading.tsx skeletons for every async route; error.tsx boundaries
- SEO: generateMetadata on listing pages (title, description, og:image from first photo), JSON-LD VacationRental schema
- Currency stored in cents as integers, formatted with Intl.NumberFormat
- Seed script: npx prisma db seed creates 3 hosts, 12 listings across 4 cities, 20 bookings, 30 reviews

Start with step 1. After each step, tell me what to verify in the browser before moving on.

Design the complete UI for an Airbnb-style rental marketplace called StayFinder. React + Tailwind, shadcn/ui components, lucide-react icons. Clean Airbnb aesthetic: white background, #FF385C primary, rounded-2xl cards, soft shadows, Inter font.

## Screens to generate

### 1. Home page
- Sticky header: logo left, pill-shaped segmented search bar center (Where / Check in / Check out / Who, with a coral search icon button), avatar menu right
- Category icon row (beachfront, cabins, trending, design, countryside) with active underline state
- Responsive listing grid (4 cols desktop / 2 tablet / 1 mobile): image carousel with dots and heart button, title, distance, dates, price per night bold, star rating

### 2. Search results
- Split view: scrollable card list left (60%), map placeholder right (40%) with floating price pill markers
- Filter bar: price range slider in a popover, property type chips, 'Filters' button opening a full modal with amenity checkboxes and a results-count CTA

### 3. Listing detail
- Photo grid hero: 1 large + 4 small with 'Show all photos' button
- Two-column body: left = title, rating · reviews · location line, host row with avatar and Superhost badge, amenity grid with icons, calendar; right = sticky booking card (date pickers, guest stepper, price breakdown rows: nightly × nights, service fee, total with divider)
- Reviews: overall rating with category progress bars (cleanliness, accuracy, value), 2-col review cards

### 4. Host dashboard
- Sidebar nav (Today, Calendar, Listings, Inbox, Earnings)
- Stats row cards (upcoming bookings, occupancy %, monthly earnings with mini area chart)
- Reservations table: guest avatar, dates, listing, payout, status badge (pending amber / confirmed green / cancelled gray), accept & decline buttons

### 5. Create-listing wizard
- Stepper header (5 steps), large friendly inputs, photo dropzone with thumbnail previews, sticky footer with Back / Next buttons and progress bar

Make every screen fully responsive. On mobile: search bar collapses to a tappable pill, booking card becomes a fixed bottom bar (price + Reserve button), map hides behind a 'Map' floating toggle. Use realistic placeholder data - real city names, prices $85–$450, ratings 4.2–4.98.

Build a two-sided rental marketplace app (Airbnb model) called StayFinder.

## Entities
- Listing: title, description, propertyType (apartment/house/cabin/villa), city, country, address, lat, lng, pricePerNight (number), maxGuests, bedrooms, baths, amenities (multi-select: wifi, kitchen, parking, pool, AC, washer, pets allowed), photos (image list), status (draft/published), host (user reference)
- Booking: listing reference, guest (user), checkIn (date), checkOut (date), guests (number), subtotal, serviceFee, total, status (pending/confirmed/cancelled/completed)
- Review: booking reference, author, rating (1–5), comment, createdAt
- Message: booking reference, sender, body, createdAt

## Roles & permissions
- Any signed-in user can be a guest; users who create a listing become hosts
- Hosts can only edit their own listings and only see bookings for their listings
- Guests can only see and message on their own bookings
- Admin role: moderate any listing, view a revenue dashboard (sum of serviceFee by month)

## Pages
1. Public home: search by city + dates + guests, grid of published listings (photo, title, price/night, avg rating)
2. Listing detail: gallery, amenities, host info, availability calendar, booking form with live price breakdown (nights × rate + 12% service fee), reviews list
3. Guest dashboard: my trips (upcoming/past), cancel booking button (allowed until 7 days before check-in), leave review after checkout
4. Host dashboard: my listings (create/edit/unpublish), incoming bookings with accept/decline, earnings summary
5. Admin dashboard: all listings with approve/remove, monthly platform-fee revenue chart

## Rules
- Block double bookings: a new booking's date range must not overlap an existing confirmed booking for the same listing
- Service fee = 12% of subtotal, added to guest total; host payout = subtotal minus 3%
- Reviews only allowed when booking status is completed; one review per booking per side
- New listings start as draft; admin approval publishes them

## Look & feel
Airbnb-inspired: white background, coral (#FF385C) primary buttons, card grid with rounded corners and photo carousels, clean sans-serif typography. Mobile responsive throughout.

Seed with 10 sample listings in 3 cities, 2 sample hosts, a few confirmed bookings and reviews so every page has data.