How to Clone Netflix

Create a Netflix-style subscription streaming app called Reelhouse using Next.js (App Router), Tailwind, Prisma + SQLite. Niche catalog: classic independent films. Use a video API (Mux/Cloudflare Stream) for playback and Stripe for subscriptions.

## What to build
A paywalled catalog: marketing + pricing for signed-out users; subscribers browse rows, open a title, and watch with resume. Multiple profiles per account, each with its own watchlist and continue-watching.

## Screens
- Landing (signed out): cinematic hero, pricing (Basic/Standard/Premium), checkout CTA
- Profile picker: 'Who's watching?' avatar grid + Add Profile + Kids
- Browse home: featured hero banner + horizontal rows (Continue Watching, Trending, New, genre rows) of poster cards with hover-expand actions
- Title detail: backdrop, synopsis, meta, Play, Add to My List, season/episode list for series
- Player: adaptive full-screen, scrubber, captions, quality, resume, next-episode
- My List: poster grid
- Search: live results grid
- Account: plan, billing, manage profiles

## Prisma schema
Account (id, email, plan, subscriptionStatus)
Profile (id, accountId, name, avatar, isKids)
Title (id, type, name, synopsis, backdropUrl, posterUrl, year, rating, runtime, genres Json, cast Json, kidSafe)
Episode (id, titleId, season, number, name, runtime, playbackUrl)
Watchlist (profileId, titleId) with a unique (profileId, titleId) constraint
WatchProgress (profileId, episodeId, positionSeconds, updatedAt) with a unique (profileId, episodeId) constraint
PlaySession (profileId, titleId, startedAt) for the concurrent-stream cap

## App logic (must actually work)
- Gate all catalog/playback behind an active Stripe subscription; signed-out users get marketing + pricing only
- Continue Watching = titles with 0 < progress < complete for the active profile, newest first; resume seeks to positionSeconds
- My List and progress are per-profile; Kids profiles only see kidSafe titles
- Plan tier sets max quality and a simultaneous-stream cap; enforce it via PlaySession when a play starts
- Issue short-lived signed playback URLs only after the entitlement check passes - never expose a raw asset URL
- For series, autoplay the next episode and store progress per episode
- Search matches title name, genres and cast

## Style
Dark and cinematic: posters/backdrops dominate, one bold accent for Play/active states, smooth horizontal row scroll, hover-expand cards on desktop, swipeable rows on mobile. Mobile-first, fully responsive.

Seed: ~24 indie-film titles (a few multi-episode series), placeholder posters/backdrops, realistic synopses, two profiles on the demo account, and several titles in Continue Watching and My List so it feels lived-in.

Build a production-quality Netflix-style subscription streaming platform for a niche catalog. The subscription gate, per-profile state and video entitlement must be correct and secure; be honest that content licensing is the real blocker, not the code.

## Stack
- Next.js 14 App Router + TypeScript + Tailwind + shadcn/ui
- PostgreSQL via Prisma; NextAuth (email + Google)
- Mux (or Cloudflare Stream) for transcoding, signed playback and (mandatory for licensed content) DRM - do NOT build encoding, a CDN or DRM yourself
- Stripe Billing for plans, trials, proration and the customer portal; webhooks drive subscriptionStatus
- Zod schemas shared between API and forms

## Core design: entitlement and profiles
- A single 'can this request play this title' check gates playback: active subscription AND (kidSafe if profile.isKids) AND within the concurrent-stream cap for the plan. Issue short-lived signed playback URLs only after it passes - never expose a raw asset URL
- Per-profile state: Watchlist and WatchProgress are keyed by profileId, not accountId; switching profiles swaps Continue Watching, My List and recommendations
- Concurrent streams: track active playback sessions; the cap (1/2/4 by plan) is enforced server-side when a play session starts

## Catalog and rows
- Titles and Episodes are content; rows are computed: Continue Watching (progress query), Trending (recent play counts), New, and genre rows. Leave a clean seam for 'Because you watched' personalization later - explicitly NOT in v1
- Model rights as data: a title has availability (region, window start/end) even if v1 is single-region - this is the operational reality of streaming and you want the schema ready

## Schema
accounts, profiles (isKids), titles (type, kidSafe, genres, availability), episodes (playbackId), watchlist (unique profileId+titleId), watch_progress (unique profileId+episodeId, positionSeconds), play_sessions (for concurrency), subscriptions (from Stripe). Indexes on watch_progress(profileId, updatedAt desc), titles(type), episodes(titleId, season, number).

## Implementation order
1. Auth + Stripe subscription + webhook → subscriptionStatus + paywall gate + seed (~24 titles)
2. Profiles (picker, kids, per-profile state) 
3. Browse home: featured hero + computed rows + hover-expand cards
4. Title detail + the entitlement check + signed-URL player with resume
5. Continue Watching + My List (per profile)
6. Search + concurrent-stream enforcement
7. DRM + downloads + ad-tier scaffolding (full version)

## Quality bar
- Playback URLs are short-lived and only issued post-entitlement; verify a non-subscriber cannot fetch a stream
- Resume is exact (store position frequently, restore on play); next-episode autoplay for series
- Webhook handler idempotent; subscription state is the single source of truth for access

Be explicit in your output that the hardest part is acquiring streamable content rights, which this build assumes you already have. Start with step 1 and show me the entitlement check and the Stripe webhook flow before continuing.

Design the complete UI for a Netflix-style subscription streaming app called Reelhouse for a niche indie-film catalog. React + Tailwind + shadcn/ui + lucide-react. Aesthetic: dark and cinematic - near-black background, posters and backdrops are the hero, a single bold accent (warm red) for Play and active states, smooth horizontal scrolling, generous imagery, minimal text chrome.

## Screens

### 1. Landing (signed out)
- Full-bleed cinematic hero with a featured backdrop, title treatment, short tagline and a 'Start watching' CTA
- A pricing section: three plan cards (Basic / Standard / Premium) with quality and simultaneous-streams differences highlighted

### 2. Profile picker
- Centered 'Who's watching?' with a row of large rounded profile avatars, an Add Profile tile (+) and a distinct Kids tile; a 'Manage Profiles' link

### 3. Browse home (main screen)
- Top nav: wordmark, nav links (Home, Series, Films, My List), search icon, and the active profile avatar with a dropdown
- Featured hero: a large backdrop with the title logo, a one-line synopsis, Play (filled) and More Info (translucent) buttons, and an age/maturity chip
- Stacked content rows: each a labeled, horizontally-scrollable carousel of poster cards; cards expand on hover to show a preview frame with Play, Add-to-List, Like and Info buttons; include a 'Continue Watching' row whose cards show a red progress bar

### 4. Title detail (modal)
- Large backdrop header with Play, then synopsis, year, maturity rating, runtime, cast and genre tags; for series, a season dropdown and an episode list (thumbnail, number, title, runtime, progress)

### 5. Video player
- Full-screen video with auto-hiding controls: play/pause, a scrubber with a thumbnail-preview tooltip, time, volume, captions, quality gear, and a 'Next Episode' button; a back arrow and the title top-left

### 6. Search
- A search field and a responsive poster grid of results, with a 'no results' state and a row of suggested genres

### 7. My List
- A simple labeled poster grid of the active profile's saved titles, with a hover-expand and remove action; an empty state prompting the user to add titles

### 8. Account / settings
- The current plan card (with an upgrade/downgrade option), billing date, a Manage Profiles section listing each profile with edit/delete, and a Sign-out button

### 9. Loading & empty states
- Skeleton shimmer rows of poster placeholders while the catalog loads
- An empty My List state and an empty search-results state, each with a suggestion to browse

Fully responsive, mobile-first: rows become swipeable, hover-expand becomes tap-to-open on mobile, and the top nav collapses to a compact bar with a search icon. Populate with ~24 indie-film titles (posters, backdrops, realistic synopses, years, ratings, cast), a couple in Continue Watching with progress bars, and two account profiles so it looks lived-in.

Build a subscription streaming app (Netflix model) called Reelhouse for a niche indie-film catalog.

## Entities
- Account: email, plan (basic/standard/premium), subscriptionStatus
- Profile: account reference, name, avatar, isKids
- Title: type (movie/series), name, synopsis, backdropUrl, posterUrl, year, rating, runtime, genres (JSON), cast (JSON), kidSafe
- Episode: title reference, season, number, name, runtime, playbackUrl
- Watchlist: profile reference, title reference
- WatchProgress: profile reference, episode reference, positionSeconds, updatedAt

## Roles
- Subscriber: browses the catalog, plays titles, manages profiles, watchlist and continue-watching (requires an active subscription)
- Admin: manages the catalog (titles, episodes, genres, kid-safe flags), and a dashboard with subscribers and most-watched titles

## Pages
1. Landing (signed out): cinematic hero with pricing (Basic/Standard/Premium) and a sign-up/checkout CTA
2. Profile picker: 'Who's watching?' avatar grid with Add Profile and a Kids profile
3. Browse home: a featured hero banner over horizontal rows (Continue Watching, Trending, New, genre rows) of poster cards
4. Title detail: backdrop, synopsis, meta, cast, Play, Add to My List, and a season/episode list for series
5. Player: adaptive video with resume, captions, quality and next-episode
6. My List + Search
7. Admin: catalog management and dashboard

## Rules
- All browsing and playback require an active subscription; signed-out users see only marketing and pricing
- Continue Watching shows titles with saved progress between started and finished for the active profile; resume jumps to the saved position
- My List and progress are per-profile; Kids profiles only see kid-safe titles
- Plan tier controls maximum quality and the number of simultaneous streams
- For series, the next episode autoplays and progress is tracked per episode
- Playback only starts after the subscription and stream-count checks pass

## Look & feel
Dark and cinematic: posters and backdrops dominate, one bold accent for Play and active states, smooth horizontal row scrolling, hover-expand cards on desktop and swipeable rows on mobile. Mobile-first.

Seed: ~24 indie-film titles (a few multi-episode series) with placeholder posters/backdrops and realistic synopses, two profiles on the demo account, and several titles in Continue Watching and My List so it feels lived-in.