Video Course Starter Kit

Video Course Starter Kit is a boilerplate project from Mux that shows how to build a membership-gated video course platform using Next.js and Mux's video APIs. It's an open-source GitHub repository that combines a modern TypeScript stack with Mux's streaming and upload infrastructure so you can go from repo clone to a working course site.

What is the Video Course Starter Kit?

The Video Course Starter Kit is a starter template that demonstrates how to use Next.js and Mux together to create your own video course platform. It takes your Mux video assets and GitHub-authenticated users as inputs, and produces a deployable Next.js application that can upload, encode, and play back course videos. The project was built by Mux and is available on GitHub under the muxinc organization.

What makes the Video Course Starter Kit stand out?

The template stands out because it pairs a full-stack Next.js application with Mux's specialized video tooling. Key features include:

• TypeScript and Next.js — The entire codebase is written in TypeScript, so you get type safety across API routes, components, and database queries.
• Tailwind CSS styling — All UI is styled with Tailwind, so you can easily customize the visual design without leaving your component files.
• Planetscale + Prisma — Data persistence uses Planetscale (a MySQL-compatible serverless database) with Prisma as the ORM, including a documented workflow for schema branching and deployment.
• Mux upload and playback — Mux Uploader handles video uploading, Mux Player handles playback, and Mux's APIs generate thumbnails and encode videos automatically.
• NextAuth with GitHub — Authentication via NextAuth lets end users sign in with their GitHub account, enabling membership-gating of course content.
• Mux webhook endpoint — The app includes an API route at /api/webhooks/mux to receive video status updates, with instructions for testing locally using ngrok.

Who should use the Video Course Starter Kit?

• Developers building a video course platform: You can fork this repo and replace the sample content with your own lessons, using the prebuilt authentication and video pipeline.
• Next.js developers learning Mux's API: The source code is a practical reference showing how to integrate Mux upload, playback, and webhooks in a real application.
• Creators and startups shipping an MVP: Since the deployment path to Vercel is documented, you can get a membership-gated video course live quickly without writing the video infrastructure yourself.

What can you do with the Video Course Starter Kit?

• Launch a video course MVP: Set up the repo, configure your Mux and Planetscale credentials, and you'll have a working video player with GitHub login you can customize.
• Prototype a video membership site: Use the provided Mux Player and Uploader components to demonstrate how video encoding and streaming work in a Next.js app.
• Experiment with video metadata and webhooks: Follow the local ngrok setup to see Mux webhooks update your database when uploads are ready.

How does the Video Course Starter Kit work?

The README walks you through a detailed setup: clone the repo, install dependencies with Yarn, create a .env.local file with Mux tokens, a Planetscale database connection string, and GitHub OAuth credentials. You then run a local proxy to your Planetscale database and start the dev server with yarn dev. Mux webhooks notify the app of video asset changes, and the Prisma schema can be modified and pushed using the provided CLI commands.

FAQ

Do I need a Mux account to use the Video Course Starter Kit?

Yes. Mux encodes and serves all videos for the course, so you must sign up for a Mux account. The README notes that signing up gives you $20 in complimentary credits to get started.

Does the template include payment processing?

No. The described stack covers authentication, video upload/playback, and database persistence, but there is no billing or payment integration included. You'd need to add that yourself if you plan to sell courses.

Can I deploy this to Vercel?

Yes, the setup instructions explicitly mention adding your environment variables to Vercel when deploying a production copy. Since it's a Next.js app, it deploys directly on Vercel.

What database is used?

Planetscale, a MySQL-compatible serverless database, is the data layer. Prisma is used as the ORM, and the repo includes a workflow for creating branches, pushing schema changes, and making deploy requests using the Planetscale CLI.