SkillBlend(Learning management system): Next.js 13, React, Stripe, Mux, Prisma, Tailwind, Mongodb, shadcn ui, upThing

❔ what it does

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.

📖 things i learned

1. How Next.js folder structure works (so many route.tsx files).
2. Dynamic routes.
3. Next.js has built-in navigation. Previously, I had used reactRouter.
4. Next.js loves server-side rendering (by default).
5. How to create APIs and test them through Postman.
6. Inbuilt Tailwind support, which makes project styling much faster with a ton of available classes.
7. TypeScript for type safety, which helps make large projects bug-free (though it sometimes makes me cry with the number of errors it gives).
8. Shadcn UI has many components that you can copy, paste, and customize, including forms, cards, and buttons.
9. How to upload thumbnails, attachments, and videos using UploadThing.
10. How to integrate video processing and player using MUX.
11. How to integrate authentication (Clerk) and payment processing using Stripe.
12. Learn about MongoDB Atlas database.
13. Prisma ORM, which acts as a bridge between the database and client.
14. For notifications, everyone's favorite is react-hot-toast.
15. Throughout the development, I noticed that TypeScript, Prisma, and Next.js caught every small error I made, which helped me find and fix bugs.

✨ Key Features:

• 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

🛠️ how to run

Prerequisites

Node version 18.x.x

Cloning the repository

git clone https://github.com/Vishal101022/SkillBlend-LMS.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_TOKEN_ID=
MUX_TOKEN_SECRET=

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

NEXT_PUBLIC_TEACHER_ID=

Setup Prisma

Add MySQL Database (I used PlanetScale)

npx prisma generate
npx prisma db push

Start the app

npm run dev