We just shipped a step by step tutorial for a video platform called Wavora. Anyone signs in with Whop, starts a channel, and uploads videos. Viewers watch, subscribe, like, comment, save to playlists, and scroll a vertical Waves feed. Creators turn on memberships, collect tips, and withdraw their earnings without leaving the app.
The build splits into three parts: the public site where people watch, the studio where creators upload and manage videos, and the money layer that connects the two.
What's in the box
- Channels with subscribers, a public page at
/@handle, and tabs for videos, Waves, and an about section - Video upload straight from the browser to Vercel Blob, a watch page, a home feed, search, and a vertical Waves feed
- Likes, threaded comments with creator moderation, watch history with resume, Watch Later, Liked, and playlists
- Channel memberships that renew monthly and one time Cheers tips, both paid on the creator's own Whop account
- An embedded payout portal with KYC built in, an earnings view, and an in app notification inbox
- Dark and light themes
Stack: Next.js App Router with Turbopack, React server components, Tailwind CSS with CSS first @theme (no config file), Prisma with the pg driver adapter against Neon Postgres, iron-session for the encrypted cookie session (no session table), Zod at every boundary including env vars, the Whop SDK plus the checkout embed plus the embedded payout components, Vercel Blob for video storage, Vercel for hosting.
The four hard parts, one SDK
A platform like this needs four things that are normally each their own project: charge users, take a platform fee, pay creators out with KYC, and turn payment events into database rows. Whop covers all four:
- Whop OAuth for sign in. Three routes (login, callback, logout) and an iron-session cookie. No password table.
- Connected accounts and embedded checkout for charging users. Each creator's channel is backed by their own Whop account. Memberships and Cheers tips are paid straight to the creator; the platform fee comes off the top automatically. The money never sits in our hands.
- Signed webhooks for recording what was paid. Payment events land in the webhook handler and become database rows: membership rows, tip rows, notification rows.
- An embedded payout portal for paying creators. KYC, balance, and withdrawals render inside the studio's monetization page as drop in components. Creators never leave the app to get paid.
The product surface is yours
Everything that is not money is a normal Next.js app you fully control. The upload flow sends video from the browser to Vercel Blob, the watch page tracks progress for resume, the comments are threaded with creator moderation, and the Waves feed is a vertical scroller over the same video table. The middleware file is proxy.ts, the sessions live in an encrypted cookie, and every boundary validates with Zod.
That split is the point of the architecture. The parts that would normally require a payments team (connected accounts, checkout, fee splitting, signed webhooks, KYC payouts) are SDK calls and a handful of webhook handlers. The parts that make the product yours (feed ranking, player UX, studio tools) are plain code you can take in any direction.
Going to production
The money path is production grade from the first request. The rest runs on free tiers, so the wrapping up section covers what to scale when you ship: move to paid Postgres with pooled connections, push view counts and watch progress to a counter store instead of one row per event, hand transcoding and adaptive streaming to a video service (only the upload flow and the Video model change), and back the in memory rate limiter with Redis so it counts across instances.
Links
- Demo: wavora-ruddy.vercel.app
- Code: github.com/whopio/whop-tutorials/youtube-clone
- Full tutorial: step by step walkthrough on the Whop blog
- Whop developer docs: dev.whop.com
If you are building any platform where creators upload content and get paid, the shape of this build carries over: your product surface, Whop's money layer, and a webhook handler between them.
Top comments (0)