Build an LMS Platform: Next.js 13, React, Stripe, Mux, Prisma, Tailwind, MySQL

Key Features:

Browse & Filter Courses
Purchase Courses using Stripe
Student Dashboard
Teacher mode
Create new Courses
Create new Chapters
Easily reorder chapter position with drag n’ drop
Upload thumbnails and videos using UploadThing
Video processing using Mux
HLS Video player using Mux
Rich text editor for chapter description
Authentication using Clerk
ORM using Prisma
MySQL database using Planetscale

Prerequisites

Node version 18.x.x

Cloning the repository

git clone https://github.com/nvtai040502/lms_website.git

Install packages

npm i

Setup .env file

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
NEXT_PUBLIC_CLERK_SIGN_IN_URL=
NEXT_PUBLIC_CLERK_SIGN_UP_URL=
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=

DATABASE_URL=

UPLOADTHING_SECRET=
UPLOADTHING_APP_ID=

MUX_ACCESS_TOKEN=
MUX_SECRET_KEY=

STRIPE_API_KEY=
NEXT_PUBLIC_APP_URL=http://localhost:3000
STRIPE_WEBHOOK_SECRET=

Setup Prisma

Add MySQL Database (I used PlanetScale)

npx prisma generate
npx prisma db push

Start the app

npm run dev