How to Clone YouTube

Create a YouTube-style niche creator video platform called Streamly using Next.js (App Router), Tailwind, Prisma + SQLite. Vertical: woodworking tutorials. Use a video API (Mux/Cloudflare Stream) for upload, transcode and playback.

## What to build
Creators upload videos to channels; viewers watch, like, comment, subscribe; a home feed and search surface content; playlists and watch history round it out.

## Screens
- Landing: featured-video hero, browse + sign-up
- Home feed: grid of video cards (thumbnail + duration, title, channel, views, age), sections for New / Popular / Subscriptions, left sidebar nav + category chips
- Watch page: player, title, like/dislike, share, save-to-playlist, channel row + Subscribe, expandable description, threaded comments, Up-next related list
- Channel page: banner, avatar, subscriber count, Subscribe, Videos/Playlists/About tabs + upload grid
- Upload: drag-drop file, title/description/tags/thumbnail/visibility, processing state
- Search results: query bar + vertical result list
- Library: history, watch-later, playlists

## Prisma schema
User (id, name, avatar)
Channel (id, userId, name, handle, banner, avatar, subscriberCount)
Video (id, channelId, title, description, tags Json, thumbnailUrl, playbackUrl, duration, views, visibility, status, createdAt)
Subscription (subscriberId, channelId) with a unique (subscriberId, channelId) constraint
Like (userId, videoId, value) with a unique (userId, videoId) constraint
Comment (id, videoId, userId, parentId, body, createdAt)
Playlist (id, userId, title); PlaylistItem (playlistId, videoId, position)
WatchHistory (userId, videoId, watchedAt); WatchSession (userId, videoId, startedAt) for view dedupe

## App logic (must actually work)
- Upload creates a Video in status 'processing' until the video API returns a ready playbackUrl (handle the webhook or poll), then status flips to 'ready' and it is watchable
- View count increments once per session (dedupe via WatchSession), not on every seek
- Likes are an up/down toggle stored per user; counts derived from the Like table
- Subscriptions feed = newest videos from subscribed channels, cursor-paginated
- Up-next = videos sharing tags or the same channel, excluding the current one
- Search = Postgres/SQLite text match over title, description and tags
- Comments support one level of replies via parentId; optimistic posting on the client

## Style
Content-first and clean: thumbnails dominate, one bold accent color for play/active states, comfortable desktop density, full dark-mode support, bottom tab bar on mobile. Mobile-first, fully responsive.

Seed: 6 woodworking channels, ~30 videos with placeholder thumbnails and realistic titles/views, a few threaded comments, and a demo user subscribed to 3 channels so the feed is populated on first login.

Build a production-quality YouTube-style niche creator video platform. Video handling must go through a managed video API, and the watch page, view-counting and subscription feed must be efficient and correct.

## Stack
- Next.js 14 App Router + TypeScript + Tailwind + shadcn/ui
- PostgreSQL via Prisma; NextAuth (email + Google)
- Mux (or Cloudflare Stream) for direct uploads, adaptive transcoding, signed playback and thumbnails - do NOT build encoding or a CDN; subscribe to its webhook to flip videos from 'processing' to 'ready'
- Stripe for subscriptions and Connect for creator payouts (full-version monetization)
- Zod schemas shared between API and forms

## Core design: the video lifecycle
- Upload flow: request a signed direct-upload URL from the video API, client uploads straight to it, create a Video row in status 'processing'; the API webhook (asset.ready) sets playbackId/duration/thumbnail and status 'ready'. Never proxy the file through your server
- Watch page is server-rendered for SEO (title/description/JSON-LD VideoObject); the player uses the signed playback URL
- View counting: increment once per (user/session, video) within a window - dedupe in a watch_sessions table, not a raw counter you can spam

## Feed and discovery (simple first, honest about the algorithm)
- Home = recent + popular (by views in last N days); Subscriptions = newest from subscribed channels (cursor-paginated)
- Up-next/related = videos sharing tags or channel, excluding current - explicitly NOT a recommendation engine in v1; leave a clean seam to add ranking later behind a flag
- Search = Postgres full-text over title/description/tags with a GIN index

## Schema
users, channels, videos (status, playbackId, duration, views, visibility), subscriptions (unique subscriberId+channelId), likes (unique userId+videoId, value), comments (parentId for threads), playlists, playlist_items, watch_sessions (for view dedupe), watch_history. Indexes on videos(channelId, createdAt desc), subscriptions(subscriberId), comments(videoId, parentId).

## Implementation order
1. Auth + schema + Mux direct-upload + webhook → 'ready' + seed (6 channels)
2. Watch page (SSR + player + like/save + VideoObject JSON-LD)
3. Channel page + subscriptions + the subscriptions feed
4. Home feed + search (full-text)
5. Threaded comments with optimistic posting
6. Playlists + watch history + Up-next
7. Monetization scaffold (Stripe subscriptions; Connect payout stubs)

## Quality bar
- Watch page passes Core Web Vitals: thumbnails with width/height (no layout shift), player lazy-mounted
- No N+1: batch like/subscribe state for a feed page in one query; feed and grid virtualized
- Webhook handler is idempotent (asset.ready may fire more than once)

Be honest about scope: the recommendation algorithm, Shorts and live streaming are out of v1. Start with step 1 and show me the Video schema and the Mux upload-plus-webhook flow before continuing.

Design the complete UI for a YouTube-style niche video platform called Streamly for woodworking creators. React + Tailwind + shadcn/ui + lucide-react. Aesthetic: content-first and calm - thumbnails are the hero, generous but tidy grid density, a single bold accent for the play button and active states, full dark-mode support, restrained chrome so the video does the talking.

## Screens

### 1. Home feed (main screen)
- Top bar: hamburger, wordmark, a wide centered search field with a button, upload icon, notifications, avatar
- Left sidebar (collapsible): Home, Subscriptions, History, Playlists, Watch Later, then a subscribed-channels list with small avatars
- Category chips row under the top bar (All, Joinery, Finishing, Tools, Beginner...)
- Video grid: cards with a 16:9 thumbnail + duration badge, below it channel avatar, two-line title, channel name, 'views - age'

### 2. Watch page
- Main column: large player, then title (large), a row with views/date on the left and like/dislike pill, Share, Save, ... on the right; a channel row (avatar, name, subscriber count, red Subscribe button); an expandable description card; a comments section header ('N Comments') with a sort control, a comment composer, and threaded comments with avatars, like counts and 'Reply' / view-replies
- Right rail: a vertical list of 'Up next' video cards (thumbnail-left, title/channel/views-right)
- Mobile: player sticks to top, everything stacks, Up-next below comments

### 3. Channel page
- Banner image, avatar, channel name + handle, subscriber count, Subscribe button; tab bar (Home, Videos, Playlists, About); a grid of the channel's videos

### 4. Upload
- A drag-and-drop zone, then a details form (title, description, tag chips, thumbnail picker with 3 auto options, visibility radio) and a right-side preview card showing how the video will appear in the feed; a processing progress bar

### 5. Search results
- The query in the bar, a filter button, and a vertical list of results: large thumbnail left, title/channel/views/age/description snippet right
- An empty 'no results' state with a suggestion to browse categories

### 6. Library
- Sections for History (a horizontal row of recently watched), Watch Later, and the user's Playlists (cards with a stacked-thumbnail cover and a video count); each playlist opens to a video list

### 7. Comments component (within the watch page)
- A 'Sort by' control (Top / Newest), a composer with the user's avatar, and threaded comments: avatar, name, age, body, a like count with thumb up/down, a Reply action and an expandable 'View N replies' with indented child comments

### 8. Subscriptions feed
- A dedicated view: 'Latest from your subscriptions' as a grid, optionally grouped by day, with a channels strip at the top to filter

Fully responsive, mobile-first, with a working light/dark toggle. On mobile the sidebar collapses to a bottom tab bar (Home, Subscriptions, Upload, Library) and the watch page stacks player → details → comments → up-next. Populate with 6 woodworking channels, ~30 videos with realistic titles, view counts, durations and ages, and several threaded comments so it looks live.

Build a niche creator video platform (YouTube model) called Streamly for woodworking tutorials.

## Entities
- User: name, avatar
- Channel: user reference, name, handle, banner, avatar, subscriberCount
- Video: channel reference, title, description, tags (JSON), thumbnailUrl, playbackUrl, duration, views, visibility, status (processing/ready), createdAt
- Subscription: subscriber reference, channel reference
- Like: user reference, video reference, value (up/down)
- Comment: video reference, user reference, parent reference, body, createdAt
- Playlist: user reference, title; PlaylistItem: playlist reference, video reference, position
- WatchHistory: user reference, video reference, watchedAt

## Roles
- Viewer: watches, likes, comments, subscribes, builds playlists
- Creator: uploads and manages videos on their channel, sees basic view/subscriber stats
- Admin: moderates videos and comments, removes content, dashboard with users, videos and views per day

## Pages
1. Home feed: grid of video cards (thumbnail + duration, title, channel, views, age) with New / Popular / Subscriptions sections and a category chip row
2. Watch page: player, title, like/dislike, save-to-playlist, channel row with Subscribe, description, threaded comments, and an Up-next related list
3. Channel page: banner, avatar, subscriber count, Subscribe, and a grid of the channel's videos
4. Upload: choose a file, set title/description/tags/thumbnail/visibility, show a processing state until ready
5. Search results: list of matching videos
6. Library: watch history, watch-later and playlists
7. Admin: moderation and dashboard

## Rules
- A newly uploaded video stays 'processing' until its playback URL is ready, then becomes watchable
- View count increments once per watch session, not on every seek
- The Subscriptions feed shows newest videos from subscribed channels
- Up-next shows videos sharing tags or the same channel, excluding the current one

## Look & feel
Content-first and clean: thumbnails dominate, one bold accent color for play/active states, comfortable desktop density, dark-mode friendly, bottom tab navigation on mobile. Mobile-first.

Seed: 6 woodworking channels, ~30 videos with placeholder thumbnails and realistic titles/views, a few threaded comments, and a demo viewer subscribed to 3 channels so the feed is populated on first login.