Edu-Hub

This is a Fullstack Learning management system made to empower free education and community learning.

Technologies used - Next.js 13, React, Tailwind, Typescript, Prisma, PostgreSQL (Neon DB), Docker, Mux, Stripe.

⭐ 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 (Used React Quill)
• Authentication using Clerk
• ORM using Prisma
• PostgreSQL database using Neon DB

📚 Getting Started and Setup

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=
DIRECT_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

npx prisma generate
npx prisma db push

Dummy Username and Password

• Username - tester
• Password - tester

Dummy Card info for buying course

• Card Number - 4242 4242 4242 4242
• Valid - any future date
• Other data can be Random

Start the app

npm run dev
# or
yarn dev
# or
pnpm dev

Built on NextJS

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

🏗️ Deployed on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.