How to Clone Loom

Create a full-stack Loom-style async video messaging app called ClipCast using Next.js (App Router), Tailwind CSS, Prisma and SQLite (easy to swap to Postgres later).

## What to build
A browser recorder that captures screen + webcam and, on stop, produces an instant shareable watch link. Plus a library dashboard and a public watch page with transcript, timestamped comments and reactions.

## Key screens
- Library dashboard: grid of recordings (thumbnail, title, date, duration, views), New recording button, rename/delete, copy-link
- Recorder: requests screen + camera, shows a webcam bubble preview, record/pause/stop with a countdown; on stop, uploads and redirects to the watch page with the link copied
- Watch page (public route /v/[id]): player, title, creator, transcript panel, timestamped comment thread, emoji reactions, privacy badge
- Workspace: shared folders the team can browse
- Video settings: title, thumbnail, privacy, delete

## Recording approach
- Use navigator.mediaDevices.getDisplayMedia for the screen and getUserMedia for the camera
- Draw both onto a canvas (screen full-frame, camera as a circular bubble) and capture the canvas stream with MediaRecorder
- Upload the resulting Blob to storage via a signed URL; store the returned file URL on the video row

## Schema (Prisma)
User (id, name, email, image), Workspace (id, name, ownerId), Video (id, creatorId, workspaceId, title, videoUrl, thumbnailUrl, durationSeconds, privacy, createdAt), View (id, videoId, viewerId, watchedSeconds, createdAt), Comment (id, videoId, authorName, body, timestampSeconds, createdAt), Reaction (id, videoId, emoji, count)

## Logic that must work
- Generate a unique short id for each video used in the public /v/[id] URL
- Privacy enforcement: public = anyone with link; workspace = members only; private = creator only (check on the watch route)
- Clicking a timestamped comment seeks the player to that second
- Log a View and increment the count when the watch page loads; show total views in the library

## Style
Loom-like: clean white app, purple primary, rounded video cards with hover-play thumbnails, a prominent record button, a focused distraction-free watch page, Inter font. Responsive watch page; show a 'recording works best on desktop' note on mobile.

Seed with 2 users, 1 workspace and 8 sample videos (placeholder mp4 or poster images), durations, view counts, a few timestamped comments and reactions so the app is browsable immediately. If real storage isn't configured, mock uploads by storing a sample video URL.

You are building a production-quality Loom-style async video messaging app. 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 storage (signed upload URLs)
- Browser MediaRecorder + getDisplayMedia/getUserMedia for capture; Cloudflare R2 or S3 for video files behind a CDN
- Deepgram or Whisper API for transcription (full build); Zod for all input validation

## Architecture requirements
- The recorder is the riskiest piece - build it first as an isolated client component. Compose screen + camera on a canvas, capture canvas.captureStream() with MediaRecorder, collect chunks, and on stop produce a single Blob
- Upload via a signed URL obtained from a server action - never proxy large files through your server. Store only metadata (URL, duration, thumbnail) in Postgres
- Watch page is a server component for SEO/og tags with a client player island; generate a thumbnail (first-frame canvas grab at record time) to avoid server-side video processing in the MVP
- Privacy is enforced server-side on the watch route: public / workspace (membership check) / private (owner only)
- Defer transcoding: serve the recorded webm/mp4 directly at MVP scale; introduce Mux or Cloudflare Stream only when bandwidth/format issues appear (note this honestly to the user)

## Data model
users, workspaces, memberships, videos, views, comments, reactions, transcripts(video_id, segments JSONB). Index videos(creator_id, created_at), views(video_id), comments(video_id, timestamp_seconds).

## Implementation order
1. Scaffold + Prisma schema + Supabase auth with protected routes
2. Recorder client component: screen+camera capture, canvas compositing with a webcam bubble, MediaRecorder, local preview before save
3. Upload flow: signed-URL server action → upload Blob → create video row → redirect to watch page with link copied
4. Library dashboard: grid with thumbnails, durations, view counts, rename/delete
5. Watch page: server-rendered with og tags, client player, view logging, timestamped comments (seek on click) and emoji reactions
6. Workspaces, folders, and privacy enforcement on the watch route
7. Transcription via Deepgram/Whisper → searchable transcript panel + captions; basic trim (start/end) editing

## Quality bar
- Handle permission denial gracefully (no camera/screen) with clear UI; clean up media tracks on stop to release the camera light
- Loading skeletons and error boundaries; empty state for a fresh library
- Watch page must have correct og:title, og:description and a video thumbnail as og:image for link previews
- Seed script: 2 users, 1 workspace, 8 videos with poster images, views, comments and reactions

Start with step 1, then build the recorder in step 2 and let me test capture in the browser before continuing.

Design the complete UI for a Loom-style async video messaging app called ClipCast. React + Tailwind, shadcn/ui components, lucide-react icons. Friendly modern aesthetic: clean white app, a purple primary, rounded cards, soft shadows, Inter font.

## Screens to generate

### 1. Library dashboard
- Top bar: logo, a search field, workspace switcher, user avatar, and a prominent purple 'New recording' button with a record-dot icon
- A responsive grid of video cards: 16:9 thumbnail with a duration pill in the corner and a play overlay on hover, then title, creator avatar + name, relative date, and a small eye icon with view count. A hover kebab menu with Copy link, Rename, Delete
- A left rail of folders (My Videos, Workspace, Starred) 

### 2. Recorder overlay
- A focused recording control: a circular live webcam preview bubble, a large red Record button that becomes Stop while recording with a running timer, pause and restart controls, and a small toolbar to toggle camera/mic and choose screen vs tab. A 3-2-1 countdown state before recording starts

### 3. Watch page (public)
- Centered video player (with custom controls: play, scrubber, time, speed, captions, fullscreen)
- Below or beside it: title, creator avatar + name + date, a privacy badge (Public / Workspace), and a row of emoji reaction buttons with counts
- A right-side panel with tabs: Transcript (timestamped lines, click to seek) and Comments (a composer plus a thread where each comment shows a timestamp chip, author, text and time)
- A top-right action cluster: Copy link, a Share button, and (for the owner) an Edit/Settings gear

### 4. Video insights
- A simple analytics card for the creator: total views, average completion as a ring chart, a viewer list with avatars and how far each watched, and a small drop-off line chart
- A 'unique viewers vs total plays' stat pair and a tiny sparkline of views over the last 7 days

### 5. Recording-ready / share modal
- The state right after recording stops: a thumbnail preview, an editable title field, a privacy selector (Public link / Workspace / Private), a big 'Copy link' button (with a copied-confirmation state), and secondary actions to re-record or trim

### 6. Empty library state
- A friendly empty state for a brand-new account: an illustration, a one-line value prop ('Record your first video in seconds'), and a large purple 'New recording' button

## Interaction details
- Video cards play a short muted hover-preview of the thumbnail and show the duration pill bottom-right
- The active transcript line highlights as the video plays and auto-scrolls; clicking any line seeks the player
- The 'Copy link' button swaps to a green check + 'Copied!' for ~2 seconds after a click

Make every screen responsive: on mobile the watch page stacks player over a tabbed Transcript/Comments panel, and the library becomes a single column. Use realistic placeholder data - video titles like 'Q3 roadmap walkthrough', durations 1:12–8:40, view counts, avatars and a few sample transcript lines and comments.

Build an async video messaging app (Loom model) called ClipCast.

## Entities
- Workspace: name, owner (user reference)
- Video: title, videoUrl, thumbnailUrl, durationSeconds (number), privacy (public/workspace/private), creator (user reference), workspace (reference), createdAt
- View: video (reference), viewer (user reference, optional), watchedSeconds (number), createdAt
- Comment: video (reference), authorName, body, timestampSeconds (number), createdAt
- Reaction: video (reference), emoji, count (number)
- Membership: workspace (reference), user (reference), role (admin/member)

## Roles & permissions
- Creators record videos, manage their own library, and see view analytics for their videos
- Workspace admins manage members and shared folders
- Anyone with a public link can watch and comment without an account; workspace videos require membership; private videos are creator-only

## Pages
1. Library dashboard: grid of the creator's videos (thumbnail, title, date, duration, view count) with a New recording button and copy-link / rename / delete actions
2. Recorder: capture screen + webcam (webcam shown as a bubble), record/pause/stop, and on stop create the video and copy its watch link
3. Watch page: video player, title, creator, transcript panel, timestamped comment thread, emoji reactions, and a privacy badge
4. Workspace: shared folders of team videos
5. Video insights: total views, completion rate and a viewer list for the creator

## Rules
- On stop, the recorded file is stored and a unique watch link is generated and copied to the clipboard
- Privacy: public = anyone with the link; workspace = members only; private = creator only
- Clicking a timestamped comment seeks the player to that point; loading the watch page logs a View and increments the count
- Only the creator can edit or delete their own videos

## Look & feel
Loom-inspired: clean white app, purple primary, rounded video cards with hover-play thumbnails, a prominent record button, and a focused distraction-free watch page. Clean sans-serif typography. Responsive watch page; note that recording works best on desktop.

Seed with 1 workspace, 2 creators and 8 sample videos with thumbnails, durations, view counts, a few timestamped comments and reactions so every page has data.