How to Clone Twitch

Create a Twitch-style niche live-streaming app called StreamNest using Next.js (App Router), Tailwind, Prisma + SQLite, and a managed video provider (Mux, LiveKit, Cloudflare Stream or Amazon IVS) for streaming - never build the video pipeline. Niche: live coding.

## What to build
Creators broadcast live; viewers watch with real-time chat, follow, subscribe monthly for perks, and tip with virtual coins. The live community and monetization layer is the product; video is rented.

## Screens
- Landing page: hero, live-now channel row, streamer CTA
- Browse: grid of live channels (thumbnail, streamer, title, category, viewer count) with a live filter
- Watch page: provider video player with LIVE badge + viewer count, real-time chat panel (messages, emotes, send box), Follow/Subscribe/Tip buttons, stream title/category
- Channel page: live state or offline banner with schedule, VODs, clips, Subscribe panel, About
- Streamer dashboard: Go Live panel (stream key for OBS or in-browser start), title/category, live chat + activity feed, on-stream alert settings
- Earnings: subscriber list, tip history, earnings with creator/platform split
- Coins shop: buy virtual coins in bundles (mock checkout) to use for tipping

## Prisma schema
User (id, name, email, avatar, coinBalance, isStreamer), Channel (userId, title, category, isLive, viewerCount, streamKey, followerCount), Follow (id, followerId, channelId, createdAt), Subscription (id, subscriberId, channelId, tier, status, currentPeriodEnd), ChatMessage (id, channelId, userId, text, createdAt), Tip (id, channelId, userId, coins, message, createdAt), Vod (id, channelId, title, durationS, recordedAt, videoUrl)

## Real-time & monetization logic (the hard part - make it work)
- Streaming: integrate the provider - generate a stream key per channel, embed their player, flip isLive via the provider's webhook (stream.started / stream.ended). Do not transcode or serve video yourself
- Chat: WebSocket (Socket.IO) rooms per channel, Redis pub/sub to fan out across instances; only authed users post; persist a recent buffer
- Moderation: channel mods can timeout or ban a user and toggle slow mode; enforce server-side and broadcast to the room
- Subscriptions: monthly per channel (mock Stripe Billing); unlock sub badge and sub-only chat; record the creator/platform split
- Tips: spend coins from coinBalance in a transaction, write a Tip + ledger entry, emit an on-stream alert event over the socket; a balance can never go negative
- Coins: bought in bundles in a coins shop (mock checkout); the balance derives from a coin ledger, not a freely-edited field

## Acceptance
- A message sent in one browser appears in another viewer's chat for the same channel in real time
- The video provider's webhook flips a channel live/offline; the client cannot fake it
- Tipping debits coins and fires an on-stream alert; a tip larger than the balance is rejected
- Sub-only mode blocks non-subscribers from posting while letting subscribers chat

## Style
Dark, energetic, community-forward: deep purple #9146FF primary on dark, glassy panels, vivid LIVE accent, fast-feeling chat, prominent Subscribe/Tip. Mobile-first (player on top, chat below).

Seed: 8 live coding channels, scrolling fake chat with sub badges and emotes, a few VODs and clips, and a demo viewer with a coin balance and one active subscription.

Build a production-quality Twitch-style niche live-streaming platform. The live video is rented from a managed provider (Mux / LiveKit / Cloudflare Stream / Amazon IVS); the chat, subscription/tip ledger and payouts are yours and must be server-authoritative and real-time. Be explicit: do not implement an RTMP/HLS/WebRTC pipeline - integrate a provider.

## Stack
- Next.js 14 App Router + TypeScript + Tailwind + shadcn/ui (web), React Native later for mobile viewing
- A managed live-video provider for ingest/transcode/delivery; embed their player and consume their webhooks
- PostgreSQL via Prisma; Redis pub/sub + a WebSocket gateway (Socket.IO or managed Ably) for chat and alerts
- NextAuth (email + Google); Stripe Billing for channel subscriptions, Stripe Connect for creator payouts

## Core design: rent video, own the community layer
Wrap the provider in lib/streaming/provider.ts: createIngest(channel) → { streamKey, ingestUrl, playbackUrl }; handleWebhook(event) maps stream.started/ended to isLive. The application never sees raw video. The defensible code is the live community: a chat system (channel rooms over WebSocket, Redis pub/sub fan-out across socket servers, recent-message buffer, sub-only and slow modes) and a monetization ledger.

## Real-time & ledger (server-authoritative)
- Chat: room per channel; only authed users post; rate-limit per user; mods issue timeout/ban (enforced server-side, broadcast to the room); messages are ephemeral with a short Redis-backed history
- Coins/tips: coin_balance is derived from an append-only ledger (purchases + tips), never a mutable field; a tip is one transaction (debit viewer, credit channel-pending, emit alert) and cannot overdraw
- Subscriptions: Stripe Billing webhooks drive subscription status; the creator/platform split is recorded per period; payouts to creators via Stripe Connect on a schedule
- isLive flips ONLY from the provider webhook, never the client

## Schema
users, channels (stream_key, is_live, playback_url), follows, subscriptions (stripe ids, period end), chat_messages (short-lived), coin_ledger (append-only), tips, payouts, vods, clips. Indexes on channels(is_live, viewer_count desc), chat_messages(channel_id, created_at), coin_ledger(user_id).

## Implementation order
1. Schema + auth + seed (8 channels, demo viewer with coins) + provider wrapper with a stubbed/sandbox stream
2. Watch page: embed the player, isLive from webhook, viewer count, channel info
3. Real-time chat: WebSocket rooms + Redis fan-out + rate limit + history (load-test the fan-out)
4. Coins + tips ledger (write the no-overdraw test) + on-stream alert events
5. Subscriptions via Stripe Billing + sub-only chat/badges + emotes
6. Streamer dashboard: go-live, alerts, activity feed; moderation tools
7. VODs/clips from provider recordings + creator payouts via Stripe Connect

## Quality bar
- Chat stays responsive and ordered under high message rates; reconnects without dropping the room
- Coin balance can never go negative (prove it with a concurrent-tip test); ledger reconciles
- Live state is driven solely by provider webhooks; clients cannot fake going live

Start with step 1; show me the provider wrapper interface and the chat room + Redis fan-out design before continuing.

Design the complete UI for a Twitch-style niche live-streaming app called StreamNest (live-coding community). React + Tailwind + shadcn/ui + lucide-react. Aesthetic: dark, energetic, community-forward - deep purple #9146FF primary on a near-black theme, glassy panels, a vivid LIVE red-pink accent, fast-feeling chat, prominent Subscribe and Tip actions.

## Screens

### 1. Watch page (the core screen)
- Large 16:9 video player (placeholder live frame) with a top-left LIVE badge, viewer count, stream duration, and quality/fullscreen controls
- Right-side chat panel: scrolling messages with colored usernames, sub badges and emotes, a send box with an emote picker, and mod/slow-mode indicators
- Under the player: streamer avatar + name, stream title and category tag, and a button row - Follow (heart), Subscribe (purple, prominent), and Tip Coins (opens a coin amount picker)
- Mobile: player on top, chat below in a tab alongside an About tab

### 2. Browse / discovery
- Section tabs (Live now, Categories, Following)
- Grid of channel cards: live thumbnail with a LIVE badge and viewer count, streamer avatar, stream title, and a category pill; hover shows a preview state

### 3. Channel page
- Channel banner with avatar, name, follower count, Follow/Subscribe buttons
- Live now player OR an offline banner with a 'next live' schedule
- Tabs: VODs (video thumbnails with duration), Clips (short cards), About

### 4. Streamer dashboard
- Go Live panel: a stream-key field with copy button (for OBS) and a 'Start in browser' button, plus title and category inputs
- A live preview, a chat + activity feed (new follows/subs/tips streaming in), and an alerts settings card (toggles and styles for sub/tip/follow alerts)

### 5. Earnings & subscribers
- Stat cards (subscribers, monthly tips, estimated earnings)
- Subscriber list with tiers, a tip history feed, and an earnings chart showing the creator/platform split

### 6. Tipping & subscribe flow
- A coin-amount picker sheet (preset coin chips + a custom amount) with an optional cheer message, and a low-balance 'buy coins' prompt
- A coins shop with coin bundles and a mock checkout
- A subscribe modal with tier cards (perks listed) and a gift-a-sub option
- An on-stream alert overlay sample: an animated 'NewSub' / 'Tip' banner the streamer can preview
- An offline channel state with a 'notify me when live' follow prompt and the last VOD featured

Fully responsive, mobile-first for viewing. Fill everything with realistic live-coding content: 8 channels with thumbnails and titles, a fast-scrolling fake chat with emotes and sub badges, a few VODs and clips, and a demo viewer with a coin balance and one active subscription.

Build a niche live-streaming app (Twitch model) called StreamNest for a live-coding community. Use a managed video provider for streaming; the app handles the community and monetization layer, not the video pipeline.

## Entities
- User: name, email, avatar, coinBalance, isStreamer
- Channel: user reference, title, category, isLive, viewerCount, streamKey, followerCount
- Follow: follower reference, channel reference, createdAt
- Subscription: subscriber reference, channel reference, tier, status, currentPeriodEnd
- ChatMessage: channel reference, user reference, text, createdAt
- Tip: channel reference, user reference, coins, message, createdAt
- Vod: channel reference, title, durationS, recordedAt, videoUrl

## Roles
- Viewer: watches live streams, chats in real time, follows channels, subscribes monthly, tips creators with coins
- Streamer: goes live (stream key for OBS or in-browser), sets title/category, configures on-stream alerts, sees earnings and subscribers
- Admin/Moderator: channel moderation (timeout/ban, slow mode, banned words), platform dashboard of live channels and revenue

## Pages
1. Watch page: a video player with a LIVE badge and viewer count, a real-time chat panel with emotes, and Follow/Subscribe/Tip buttons under the stream title and category
2. Browse: grid of live channels (thumbnail, streamer, title, category, viewer count) with a live-now filter
3. Channel page: live state or offline banner with schedule, VODs, clips, and a Subscribe panel
4. Streamer dashboard: Go Live panel, title/category, live chat and activity feed, on-stream alert settings
5. Earnings: subscriber list, tip history, and earnings with the creator/platform split
6. Coins shop: buy virtual coins in bundles (mock checkout) to spend on tips

## Rules
- Going live flips the channel to live (driven by the video provider) and notifies followers; offline shows VODs and a schedule
- Chat is real-time and only for logged-in users; subscribers get channel emotes and badges; mods can timeout/ban and enable slow mode
- Subscriptions are monthly per channel, unlock perks, and split revenue between creator and platform
- Tips spend coins from the viewer's balance (bought in a coins shop), trigger an on-stream alert, and are tracked in a ledger; a balance can never go negative
- Streaming itself is handled by a managed video provider; the app embeds the player and reacts to the provider's live/offline webhooks

## Look & feel
Dark, energetic, community-forward: deep purple primary on a near-black theme, glassy panels, a vivid LIVE accent, fast-feeling chat, prominent Subscribe and Tip buttons. Mobile-first (player on top, chat below on phones).

Seed: 8 live coding channels with thumbnails, a fast-scrolling fake chat with emotes and sub badges, a few VODs and clips, and a demo viewer with a coin balance and one active subscription.