How to Clone TikTok

Create a TikTok-style vertical video app called SizzleReel using Next.js (App Router), Tailwind, Prisma + SQLite. Niche: 60-second home-cooking videos.

## What to build
A full-screen swipeable video feed with upload, likes, comments, follows and a working engagement-weighted ranking algorithm. Mobile-first PWA with a bottom tab bar.

## Screens
- Feed: CSS scroll-snap container, one viewport-height video per snap point; <video> elements autoplay muted + loop, an IntersectionObserver plays only the visible video and pauses the rest; right action rail (avatar + follow, like heart, comment count, save, share); caption overlay with parsed hashtag links
- Following tab: same player, videos only from followed creators, newest first
- Upload: file input for MP4, client-side preview, cover-frame selector (canvas frame grab), caption with #hashtag parsing on save, category select
- Discover: trending hashtags computed from the last 7 days of views, search across captions and handles, thumbnail grid with view counts
- Profile: stats header (followers / following / total likes), 3-column video grid, tabs Videos / Liked, follow button
- Comments: bottom drawer, one-level threading, optimistic posting
- Notifications: likes, comments and follows grouped by day

## Prisma schema
User (id, handle, name, avatarUrl, bio), Video (id, userId, url, coverUrl, caption, durationSec, viewCount, likeCount, commentCount, shareCount, status, createdAt), Hashtag (id, tag) with VideoHashtag join, Follow (followerId, followeeId), Like (userId, videoId), Save (userId, videoId), Comment (id, videoId, userId, parentId, body, createdAt), View (id, userId, videoId, watchMs, completed, createdAt), Report (id, videoId, reporterId, reason, status)

## Ranking (must actually work)
- score = (likes*3 + comments*5 + completions*4 + shares*8) / pow(hoursSincePost, 1.4), computed server-side in GET /api/feed
- Each feed batch of 10 interleaves: 6 top-scored videos the user hasn't seen, 3 from followed creators, 1 'new creator' video with under 50 views
- The client posts watch telemetry: a View row at 2 seconds (view) and an update at 90% (completed); dedupe per user + video per day
- Exclude videos the user completed in the last 7 days

## API routes
- GET /api/feed?cursor= (personalized batch), POST /api/videos (store the file in /public/uploads for the demo), POST /api/videos/[id]/like | save | view, POST /api/comments, POST /api/follow/[userId], GET /api/discover/trending

## Rules
- Captions max 150 chars, max 5 hashtags; like/follow/save are idempotent toggles
- Denormalized counters (likeCount, commentCount, viewCount) update in the same transaction as the event row
- Videos are soft-deleted (status = removed) so counts and reports stay consistent
- Report reasons: spam, dangerous, stolen content; 3 reports auto-hides a video pending review

## Style
Dark video-first UI: #0F0F12 background, #FF4D4D coral for likes and primary CTAs, #39E6B0 mint for the followed state, white text over gradient scrims, Inter font, chunky touch targets.

Seed: 12 creators with cooking-themed handles, 36 videos using sample MP4/HLS placeholder URLs with food cover images, 150 comments with personality, and likes/follows/views distributed unevenly so the ranking produces a believable feed on first run.

Build a production-quality TikTok-style vertical video platform for a niche (home cooking). Telemetry and counters must be server-authoritative - assume hostile clients inflating views.

## Stack
- Next.js 14 App Router + TypeScript + Tailwind; Framer Motion for feed transitions and like animations
- PostgreSQL via Prisma; NextAuth (email + Google); Mux for video ingest/HLS playback (direct uploads with signed URLs); Upstash Redis for feed caching
- Zod schemas shared between upload forms and API validation

## Core design: the feed is a ranking service
Create lib/feed/ranking.ts as a pure module:
  score(video, stats) = (likes*3 + comments*5 + completions*4 + shares*8) / (ageHours ^ 1.4)
  assembleFeed(userId): 60% top-scored unseen / 30% followed / 10% exploration (videos with <50 views) - slot ratios as constants with unit tests
Materialize scores into a video_scores table via a cron route every 5 minutes; GET /api/feed reads scores + exclusions, never computes on the fly. Cache assembled batches in Redis for 60s per user.

## Telemetry (server-authoritative)
- POST /api/telemetry accepts batched events [{videoId, watchMs, completed}]; server clamps watchMs to video duration, ignores events for videos not in the user's recently-served set (store served IDs in Redis with TTL), and upserts one View row per user/video/day
- Likes/saves/follows are idempotent upserts; counters are denormalized in the same transaction
- Anti-gaming: completions from accounts under 10 minutes old don't count toward score

## Video pipeline
- Client requests a signed direct-upload URL from Mux; webhook /api/webhooks/mux marks the Video row ready and stores playback ID + auto-generated thumbnail
- Validate duration <= 90s in the webhook; reject and notify otherwise
- Each video page /v/[id] is SSR with OpenGraph video tags - shared links are the growth loop

## Schema
users, videos (status enum: processing/active/removed), video_scores, hashtags + video_hashtags, follows, likes, saves, comments (parent_id, one level), views (unique on user_id, video_id, date), reports, notification_events. Indexes: video_scores(score desc), views(user_id, video_id), comments(video_id, created_at).

## Implementation order
1. Schema + auth + seed script (12 creators, 36 videos with Mux test assets, skewed engagement)
2. Feed player: scroll-snap shell, IntersectionObserver playback manager, action rail with optimistic likes
3. Ranking module with unit tests + scored /api/feed + telemetry endpoint
4. Upload flow with Mux direct upload + webhook
5. Profiles, follows, Following tab, comments drawer
6. Discover (trending tags from views), notifications
7. Report queue + admin review page

## Quality bar
- Feed scrolls at 60fps on mid-range phones: max 3 mounted players, poster images for the rest, HLS via mux-player
- Keyboard accessible (arrows navigate, L likes, M mutes); respects prefers-reduced-motion
- Telemetry batched and sent via sendBeacon on page hide so watch data survives tab closes

Start with step 1; show me the ranking module and its tests before building UI.

Design the complete UI for a TikTok-style vertical video app called SizzleReel, a community for home cooks. React + Tailwind + shadcn/ui + lucide-react. Aesthetic: cinematic dark UI - #0F0F12 background, #FF4D4D coral accent for likes and CTAs, #39E6B0 mint for followed state, white text on gradient scrims, Inter font, chunky touch-first controls.

## Screens

### 1. Feed (main screen)
- Full-viewport vertical video card (use a food photo placeholder with a subtle play shimmer), snap-scroll to the next
- Right action rail, vertically stacked: creator avatar with coral follow ring and a small + badge; heart icon with count (filled coral when liked, pop animation); comment bubble with count; bookmark; share arrow
- Bottom-left overlay on a black-to-transparent gradient: @handle in bold, caption clamped to 2 lines with 'more', hashtag chips (#15minutemeals #airfryer), and a music-note marquee with the dish name
- Top: 'Following | For You' pill toggle, For You active; search icon top-right
- Bottom tab bar: Home, Discover, big rounded-square + button, Inbox, Profile

### 2. Upload
- Drop zone with dashed border and camera emoji; after 'upload', show preview player on the left, form on the right: caption textarea with live hashtag highlighting, cover-frame strip (6 thumbnails, one selected), category chips, duration badge '0:47', coral Post button with progress bar state

### 3. Discover
- Search bar; 'Trending on SizzleReel' hashtag cards (tag, view count, 3 stacked mini-thumbnails)
- Category rows (Breakfast, Meal Prep, Baking, Vegan): horizontal scroll of 9:16 thumbnails with view-count badges

### 4. Profile
- Centered avatar, @handle, bio line; stat row: Following / Followers / Likes with bold numbers
- Follow button (coral) / Following state (outline mint); 3-column 9:16 thumbnail grid with view counts; tabs: Videos, Liked, Saved

### 5. Comments drawer
- Bottom sheet over a dimmed video: '128 comments' header, rows with avatar, handle, comment text, tiny heart with count, Reply link; one nested reply shown with 'View 4 more replies'; creator replies get a coral 'Creator' badge; sticky input with emoji button

### 6. Notifications inbox
- Grouped by Today / This Week: avatar, '{name} liked your video', video micro-thumbnail right-aligned; follow events get an inline Follow Back button

### 7. Report queue (admin)
- Table of flagged videos: thumbnail, reason badge (spam / dangerous / stolen), report count, reporter handles, Dismiss and Remove buttons; removed rows collapse with an undo toast

Fully responsive: mobile is the hero (390px), desktop centers the feed in a phone-width column with discover rails on the sides. Fill every screen with realistic cooking content - handles like @midnightnoodles and @theairfryerguy, captions, counts (12.4k style formatting) - no lorem ipsum.

Build a vertical short-video community app (TikTok model) called SizzleReel for home cooks sharing 60-second recipe videos.

## Entities
- Video: creator reference, videoUrl, coverUrl, caption, durationSec, viewCount, likeCount, commentCount, shareCount, status (active/removed), createdAt
- Hashtag: tag; VideoHashtag: video + hashtag references
- Follow: follower + followee references; Like: user + video; Save: user + video
- Comment: video reference, author, parentId (one level), body, likeCount, createdAt
- View: user, video, watchMs, completed flag, createdAt
- Report: video, reporter, reason (spam/dangerous/stolen), status (open/dismissed/removed)

## Roles
- Viewer: swipes the feed, likes, comments, saves, follows, reports
- Creator: everything a viewer does, plus uploads videos and sees per-video view/like stats
- Admin: report queue with dismiss/remove, can ban repeat offenders

## Pages
1. Feed: full-screen vertical video, one at a time, swipe to advance; right rail with follow, like, comment, save, share; caption + hashtags overlaid bottom-left; For You / Following toggle on top
2. Upload: MP4 picker (max 90 seconds), cover-frame choice, caption with hashtags, category chips, progress state
3. Discover: trending hashtags with view counts, category thumbnail rows, search over captions and handles
4. Profile: stats (followers/following/likes), 3-column video grid, Videos / Liked / Saved tabs
5. Comments: bottom drawer with one-level replies and creator badges
6. Notifications: likes, comments and new followers grouped by day
7. Admin report queue: flagged videos with watch, dismiss, remove

## Rules
- Feed ranking: score = (likes*3 + comments*5 + completions*4 + shares*8) divided by age in hours to the power 1.4; each feed batch is roughly 60% top-scored unseen, 30% followed creators, 10% videos with under 50 views
- A view counts after 2 seconds of watching; a completion at 90%; one view per user per video per day
- Don't reshow videos the user completed within 7 days
- Captions max 150 characters, max 5 hashtags; like/follow/save are toggles
- 3 open reports auto-hides a video until an admin reviews it; removals are soft deletes

## Look & feel
Dark cinematic UI: #0F0F12 background, #FF4D4D coral accents for likes and CTAs, #39E6B0 mint for followed state, white text on gradient scrims so captions stay readable over video, Inter font, bottom tab bar with a big center upload button.

Seed: 12 creators with cooking handles, 36 videos (placeholder MP4s with food cover images), 150 lively comments, uneven likes/views/follows so the ranked feed looks real, and 3 open reports so the admin queue has work to do.