SkillBlend(Learning management system): Next.js 13, React, Stripe, Mux, Prisma, Tailwind, Mongodb, shadcn ui, upThing
It helps users to create and manage courses, access learning materials, track progress on their dashboard,making it a valuable tool for online education and training.
- How Next.js folder structure works (so many route.tsx files).
- Dynamic routes.
- Next.js has built-in navigation. Previously, I had used reactRouter.
- Next.js loves server-side rendering (by default).
- How to create APIs and test them through Postman.
- Inbuilt Tailwind support, which makes project styling much faster with a ton of available classes.
- TypeScript for type safety, which helps make large projects bug-free (though it sometimes makes me cry with the number of errors it gives).
- Shadcn UI has many components that you can copy, paste, and customize, including forms, cards, and buttons.
- How to upload thumbnails, attachments, and videos using UploadThing.
- How to integrate video processing and player using MUX.
- How to integrate authentication (Clerk) and payment processing using Stripe.
- Learn about MongoDB Atlas database.
- Prisma ORM, which acts as a bridge between the database and client.
- For notifications, everyone's favorite is react-hot-toast.
- Throughout the development, I noticed that TypeScript, Prisma, and Next.js caught every small error I made, which helped me find and fix bugs.
- Browse & Filter Courses
- Purchase Courses using Stripe
- Mark Chapters as Completed or Uncompleted
- Progress Calculation of each Course
- Student Dashboard
- Teacher mode
- Create new Courses
- Create new Chapters
- Easily reorder chapter position with drag n’ drop
- Upload thumbnails, attachments 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
- Mongodb Atlas
- added Leaderboard
Node version 18.x.x
git clone https://github.com/Vishal101022/SkillBlend-LMS.git
npm i
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_TOKEN_ID=
MUX_TOKEN_SECRET=
STRIPE_API_KEY=
NEXT_PUBLIC_APP_URL=http://localhost:3000
STRIPE_WEBHOOK_SECRET=
NEXT_PUBLIC_TEACHER_ID=
Add MySQL Database (I used PlanetScale)
npx prisma generate
npx prisma db push
npm run dev