How to Clone Zoom

Create a Zoom-style niche video-call app called MeetWell using Next.js (App Router), Tailwind, Prisma + Postgres, with WebRTC media provided by LiveKit (or Daily). Vertical: online tutoring.

## What to build
Tutors set availability and a rate; students book and pay; both join a scheduled video call (video, screen share, chat, whiteboard) by a gated room link. The real-time media runs on LiveKit - your backend handles rooms, scheduling, payments and join tokens; do NOT build an SFU.

## Screens
- Landing, tutor directory (filters), tutor profile with availability calendar
- Booking + payment (mock Stripe) that creates a session with a room
- Pre-join green room (camera/mic preview, device pickers)
- Call room: LiveKit video grid (gallery/speaker), control bar (mute, camera, screen share, chat, whiteboard, leave), side panels
- Dashboard: upcoming/past sessions for tutor and student

## Prisma schema
User (id, name, email, role, avatar, bio), TutorProfile (userId, subjects Json, hourlyRate, rating), Availability (id, tutorId, weekday, startTime, endTime), Session (id, tutorId, studentId, subject, scheduledAt, durationMin, price, status, roomName), Message (id, sessionId, userId, body, sentAt)

## Realtime + access (must actually work)
- POST /api/sessions/[id]/token: server checks the requester is the tutor or booked student AND that now is within the join window, then mints a LiveKit access token scoped to roomName; otherwise 403
- The browser joins LiveKit with that token; never embed a long-lived or shared token client-side
- Screen share and chat via the LiveKit SDK; persist chat to Message for history

## Business logic
- Booking writes a Session with a unique roomName and (mock) payment
- Join window: 15 min before scheduledAt until scheduledAt + durationMin
- Session auto-completes after the window; cancellation <24h forfeits payment
- Block double-booking a tutor's slot; remove booked slots from their availability
- The dashboard Join button is enabled only inside the join window for that session

## Call room details
- Use LiveKit's React components for the video grid, screen share and data channels
- Persist in-call chat to Message; render it in the side panel and keep it after the call
- Build a minimal shared whiteboard over a LiveKit data channel (pen, color, eraser, clear)

## Style
Calm and trustworthy: indigo accent (#5B6CFF), rounded cards, focused full-screen call with auto-hiding controls. Mobile-first.

Seed: 6 tutors with subjects/availability/rates, a demo student, 2 upcoming + 3 past sessions. If LiveKit keys aren't set, stub the token endpoint and render placeholder video tiles so the UI is fully demoable.

Build a production-quality niche video-calling platform (Zoom for tutoring). WebRTC is the core; use a managed SFU (LiveKit) rather than rolling your own. The hard, must-get-right parts are room access control and the booking/payment state machine.

## Stack
- Next.js 14 App Router + TypeScript + Tailwind + shadcn/ui
- Realtime media: LiveKit (self-hosted or cloud) - SFU, recording egress, screen share, data channels for chat/whiteboard
- PostgreSQL via Prisma; NextAuth; Stripe for payments; signed LiveKit access tokens minted server-side

## Core design: tokens are the security boundary
Never let a client choose its room or identity. POST /api/rooms/[sessionId]/token verifies, in one place: (a) the user is an authorized participant of that session, (b) the session is paid, (c) now is inside the join window. Only then mint a short-TTL LiveKit token with that room grant and that identity. Everything else about the call rides on LiveKit; this endpoint is your whole access model - write it first and test the 403 paths.

## Booking state machine
Session status: draft → booked (on successful payment) → in_progress (first join inside window) → completed (after window) / cancelled / no_show. Model transitions explicitly; payment capture and refund rules hang off them. Use a Postgres transaction for book+pay so you never create a paid session without a room or vice versa.

## Schema
users, tutor_profiles, availability, sessions (status, room_name, scheduled_at, duration), payments (Stripe refs), messages, recordings (egress URLs). Indexes on sessions(tutor_id, scheduled_at), sessions(student_id, scheduled_at).

## Implementation order
1. Schema + auth + tutor profiles/availability + directory
2. Booking + Stripe payment + session/room creation in a transaction
3. Token endpoint with full authz + join-window checks (test 403s before any UI)
4. Call room: LiveKit React components, green room, controls, gallery/speaker, screen share
5. In-call chat + simple shared whiteboard over LiveKit data channels
6. Recording via LiveKit egress + a recordings library with access control
7. Dashboards, no-show/cancellation handling, refunds

## Quality bar
- A user can NEVER join a room they aren't a paid participant of, or outside the window - covered by tests
- Graceful reconnection on network drop; device-permission and 'no camera' edge states handled
- Booking and payment are transactional and idempotent (no double-charge on retry)
- Tutor availability and bookings can't collide (no two sessions in the same slot)
- The token endpoint degrades safely without LiveKit keys so the UI stays demoable

Start with step 1; before the UI, show me the token-endpoint authz logic and the Session status state machine.

Design the complete UI for a niche video-calling app called MeetWell (Zoom for online tutoring). React + Tailwind + shadcn/ui + lucide-react. Aesthetic: calm, focused, trustworthy - soft indigo accent (#5B6CFF), generous whitespace, rounded cards, and a distraction-free full-screen call view.

## Screens

### 1. Tutor directory
- Search + filters (subject, price range, availability) in a left rail
- Grid of tutor cards: photo, name, subject tags, star rating, hourly rate, 'next available' chip, Book button

### 2. Tutor profile
- Header: photo, name, subjects, rating, rate, Book CTA
- Bio, reviews list, and a weekly availability calendar with selectable open slots

### 3. Booking & payment
- Slot confirmation summary (tutor, subject, time, duration, price)
- Payment form (card fields styled, mock), confirm button, success state with the meeting link and an 'add to calendar' button

### 4. Pre-join green room
- Large self-preview video with mic level meter, device dropdowns (camera, mic, speaker), background-blur toggle, and a prominent 'Join lesson' button

### 5. Call room (the centerpiece)
- Full-bleed dark stage with participant video tiles (design both speaker view with a filmstrip and an even gallery grid)
- Auto-hiding bottom control bar: mute, camera, share screen, chat, whiteboard, reactions, participants, and a red Leave button
- Right side panel that swaps between Chat (message list + composer) and a simple Whiteboard (toolbar: pen, color, eraser, clear)
- Top-left session info chip (subject + elapsed time), connection-quality indicator

### 6. Dashboard
- Tabs: Upcoming and Past sessions; cards with the other person, subject, date/time, a Join button (enabled only near the time) and a 'view recording' link for past ones
- A small stats strip: hours taught/learned, upcoming count, and (for tutors) this month's earnings

### 7. Empty & edge states
- An empty dashboard with a friendly 'Find your first tutor' CTA
- A 'waiting for the other person to join' lobby state inside the call
- A device-permission-denied state with a clear fix-it message

Fully responsive (call view collapses gracefully to a phone layout with a 2-up tile grid). Fill with realistic tutor names, subjects, ratings, slots and a few booked sessions.

Build a niche video-calling app (Zoom model) called MeetWell, specialized for online tutoring. Use a WebRTC platform (LiveKit/Daily) for the actual call media; the app manages tutors, bookings, payments and gated room access.

## Entities
- User: name, email, role (tutor/student), avatar, bio
- TutorProfile: user reference, subjects (JSON), hourlyRate, rating
- Availability: tutor reference, weekday, startTime, endTime
- Session: tutor reference, student reference, subject, scheduledAt, durationMin, price, status (booked/in_progress/completed/cancelled), roomName
- Message: session reference, user reference, body, sentAt

## Roles
- Tutor: sets subjects/rate/availability, joins booked sessions, sees earnings and history
- Student: searches tutors, books and pays for sessions, joins the call
- Admin: manages users, reviews disputes, sees session metrics

## Pages
1. Tutor directory: search and filter by subject/price/availability; tutor cards
2. Tutor profile: bio, rate, reviews, weekly availability calendar, Book button
3. Booking + payment: choose a slot, pay (mock), creates a session with a unique room
4. Pre-join green room: camera/mic preview and device pickers
5. Call room: video tiles, control bar (mute, camera, screen share, chat, whiteboard, leave), chat and whiteboard side panels
6. Dashboard: upcoming and past sessions for both roles with gated Join buttons

## Rules
- A session creates a unique room; only the tutor and the booked student may join (gate the join token by session membership)
- The room link is active only from 15 minutes before the start until the scheduled end
- After the end, the session becomes 'completed' and moves to history
- Cancelling more than 24 hours ahead is free; later forfeits payment

## Look & feel
Calm and trustworthy: soft indigo accent (#5B6CFF), rounded cards, a focused full-screen call with auto-hiding controls. Mobile-first.

Seed: 6 tutors with subjects/availability/rates, a demo student, and 2 upcoming + 3 past sessions so dashboards look real. If no WebRTC keys are configured, show placeholder video tiles so the call UI is fully demoable.