This is the whole product broken into build phases, in the order you should build them, each with one prompt you paste into Claude Code. Build the experience first, then the data, then the video, then the money, then the admin, then the AI. Don't try to do it all in one prompt.
Before you start — accounts you'll need
VS Code + Claude Code
Your build tool, with an Anthropic API key (billing on).
GitHub
Where your code lives.
Vercel
Where your app goes live.
Supabase
Login + database (free to start).
Stripe
Payments for premium episodes.
Mux
Video hosting. The one new tool, video can't be served from the app itself.
👉 Why Mux? A drama app is mostly video, and you can't store or stream video from your own app, it's too heavy and premium clips would be easy to steal. Mux handles the upload, encoding, and smooth playback, and it can lock premium video with signed links so only paying users can watch. Cloudflare Stream is a fine alternative, this sheet uses Mux.
💵 What Mux costs: it's the one paid tool here, but it starts free. The free tier gives you 100,000 streaming minutes a month and up to 10 stored videos, enough to build and test the whole app for $0. Note the 10-video limit, though: it's fine for testing, but a real catalog moves you to the paid plan as soon as you load actual episodes. After that it's pay-as-you-go, and you only pay for what people actually use: roughly 2.5¢ per minute to process a video one time, a tiny fraction of a cent per minute to store it, and about $0.0008 per minute watched once you pass the free 100k. So it stays near-free while you build, and your cost only grows as your viewership (and your revenue) grows.
1
Phase 1 · The experience
Build the face with sample data
No database yet. Get the whole thing clickable first, so you have something real to look at and show.
Paste into Claude Code
Build me a mobile-first vertical drama streaming web app in Next.js, like ReelShort or DramaBox. Start with the front end only, using placeholder sample data, no database yet. Build three things: (1) a home/discovery screen with horizontal poster rows for Featured, Trending Now, Continue Watching, Recommended For You, New Releases, and genre rows like Romance, Revenge, Thriller, Fantasy; (2) a series detail page with title, poster, description, genre, tags, episode list, free-vs-premium badges on episodes, and Start Watching / Resume buttons; (3) a full-screen vertical 9:16 video player with play/pause, a progress bar, volume, fullscreen, next and previous episode, autoplay-next with a short countdown, and loading and error states. Use a few sample dramas with placeholder posters and one sample vertical video so I can click through the entire experience. Make it feel like a real, polished mobile streaming app. Don't ask me questions, make reasonable choices and build it.
✓ Payoff: you can click through the app and watch a sample episode on your phone.
2
Phase 2 · Accounts + memory
Add login and the database
Now the app gets real accounts and remembers everything. Create your Supabase project first, then paste this.
Paste into Claude Code
Now add Supabase for accounts and data. Add sign-up, login, logout, and password reset. Create tables for: dramas (title, description, poster, trailer, genres, tags, status), episodes (drama_id, episode number, video reference, thumbnail, duration, free-or-premium, price, publish status), viewing_progress (user, drama, episode, playback position, completion, last-watched time), favorites (user, drama), and transactions (user, what they bought, amount, payment status, date). Turn on Row Level Security on every table. Replace the sample data with real data from Supabase, and wire up Continue Watching, Favorites/Watchlist, and Recently Watched from these tables. Save playback progress automatically as the video plays. Store uploaded images like posters and thumbnails in Supabase Storage, not in the database, and keep the image URLs on the drama and episode records. I've already created my Supabase project, so don't tell me to make one. Ask me once for my Project URL, publishable key, and secret key, put them in my .env, and save the SQL I need to run to a file called supabase/schema.sql. The secret key must never be exposed to the browser. Don't ask me anything else, build it.
✓ Payoff: real accounts, and the app remembers what each person watched and saved.
3
Phase 3 · Real video
Host the video on Mux
Paste into Claude Code
Set up real video hosting with Mux instead of storing video in the app. When an episode video is uploaded, send it to Mux, store the Mux playback ID on the episode, and play episodes back through Mux in the vertical player. For premium episodes, use Mux signed playback URLs so the video link can't be shared or opened without a valid entitlement, and generate the signing token server-side only. Free episodes can play with a normal public playback ID. Read my Mux credentials from environment variables, never in browser code. Check the current Mux documentation first so the setup is right. Don't ask me questions, build it.
✓ Payoff: episodes stream smoothly, and premium video is protected.
4
Phase 4 · The money
Add the paywall and payments
Paste into Claude Code
Add the premium paywall with Stripe. Free episodes play normally. When a user reaches a premium episode, show a clear unlock screen with what they get, the price, and a purchase button. Use Stripe Checkout for the purchase, and only unlock the content after a Stripe webhook confirms the payment, then record it in the transactions table. The entitlement check must happen server-side: a user must never unlock premium content by changing values in the browser, and premium video must never play without a verified purchase on the server. Turn on Row Level Security so only the webhook can write purchase records. Add this to a single Stripe webhook handler, don't create a second one. Save any SQL to supabase/schema.sql and tell me the exact webhook URL to paste into Stripe. Check current Stripe docs first. Don't ask me questions, build it.
✓ Payoff: someone can pay to unlock a premium episode and keep watching.
👉 Heads-up on fees: every card charge costs about 2.9% + 30¢, so on a $0.99 episode unlock you lose roughly a third to fees. That's why platforms like ReelShort sell coins (one bigger purchase, then many unlocks) instead of charging per episode. Coins are in "save for later" below, but you'll likely want them sooner rather than later.
5
Phase 5 · The control room
Build the admin dashboard
Paste into Claude Code
Build a secure admin dashboard, separate from the user app and protected by an admin role checked on the server. In it the content owner can: create dramas (title, description, cover image, genres, tags); upload episodes and their video files to Mux; reorder episodes; mark each episode free or premium and set its price; publish and unpublish content, with unpublished drafts clearly separated from live content; edit existing content; and see reported playback problems. Add a basic analytics view: total users, active users, total views, episode and drama views, completion rate, average watch time, most popular dramas and episodes, premium unlocks, revenue, and the free-to-paid conversion rate. Protect every admin route on the server, not just by hiding buttons. Don't ask me questions, build it.
✓ Payoff: the owner can upload dramas, price episodes, publish, and watch the numbers.
6
Phase 6 · The AI layer
Add the AI features
AI improves the experience quietly, it's not the interface. Do this last, once the app works.
Paste into Claude Code
Add the AI features using the Anthropic Claude API. Read the API key from an environment variable and make every AI call server-side. (1) Natural-language search: let users type things like "a revenge romance with a female lead" or "something like the one I just watched," and have Claude turn it into a search across the drama metadata. Keep normal keyword search working too. (2) AI metadata helper: when an admin adds a drama or episode, use Claude to suggest a description, episode summary, genres, tags, and keywords. The admin reviews and edits before publishing, and AI must never overwrite what the admin typed. (3) Recommendations: recommend dramas from each user's watch history, genres watched, favorites, and completions, and fall back to trending titles for brand-new users. Check the current Anthropic API docs first. Don't ask me questions, build it.
👉 Captions: Mux can auto-generate captions from the uploaded video. Add them as a small admin step, generate, review, edit, publish, rather than a separate build. Multi-language subtitles are a later enhancement.
✓ Payoff: smarter search, auto-filled metadata, and recommendations that improve with use.
The non-negotiables
Security rules that cannot slip.
This app takes money and locks content, so these are not optional. Tell Claude to hold to them in every phase.
Never trust the browser.
• Whether someone owns a premium episode is checked on the server, every time. Changing a value in the browser must never unlock anything.
• Premium video plays only through signed Mux URLs, so the link can't be shared or reused.
• Access is granted only after a Stripe webhook confirms payment, never on the "success" page alone.
• Row Level Security on every Supabase table, and only the webhook can write purchase records.
• All secret keys (Stripe, Mux, Anthropic, Supabase secret) stay server-side. None ever gets a NEXT_PUBLIC_ prefix.
⚖️ Before you take real money, add your legal pages: terms of service, a privacy policy, and a refund policy, same as the Week 3 legal step. Stripe expects them, and a paid content platform needs them. This is also where content licensing matters: only publish dramas you have the rights to.
Version 1 — what "done" means
Ship the core loop first.
The success test: a person can create an account, quickly find a drama they like, watch the free episodes smoothly, resume where they left off, and securely pay to unlock more. If a feature doesn't serve that loop, defer it.
Save for later (don't build in V1):
Coin / credit system and bundles
Monthly subscriptions and VIP tiers
Native iOS / Android apps
Comments, reactions, ratings, social sharing
Multi-language subtitles and interface
Referral program and promo codes
👉 Build the phases in order, and deploy and test after each one. Six clean phases beats one giant prompt that half-works.