LearnHub - your all-in-one Learning Management System.

📔 Table of Contents

Folder Structure
Getting Started
Screenshots
Tech Stack
Stats
Contribute
Acknowledgements
Buy Me a Coffee
Follow Me
Learn More
Deploy on Vercel
Give A Star
Star History
Give A Star

‼️ Folder Structure

Here is the folder structure of this app.

learnhub/
  |- app/
    |-- (auth)/
        |--- (routes)/
        |--- sign-in/[[...sign-in]]/
        |--- sign-up/[[...sign-up]]/
        |--- layout.tsx
    |-- (course)/coures/[courseId]
        |--- _components/
        |--- chapters/[chapterId]
          |---- _components/
          |---- page.tsx
        |--- layout.tsx
        |--- page.tsx
    |-- (dashboard)/
        |--- _components/
        |--- (routes)/
          |---- (root)/
            |----- _components/
            |----- page.tsx
          |---- search/
            |----- _components/
            |----- page.tsx
          |---- teacher/
            |----- analytics/
            |----- courses/
            |----- create/
            |----- layout.tsx
          |---- layout.tsx
        |--- layout.tsx
    |-- api/
        |--- courses/
          |---- [courseId]/
            |----- attachments/
            |----- chapters/
            |----- checkout/
            |----- publish/
            |----- unpublish/
            |----- route.ts
          |---- route.ts
        |--- uploadthing/
          |---- core.ts
          |---- route.ts
        |--- webhook/
          |---- route.ts
    |-- favicon.ico
    |-- globals.css
    |-- layout.tsx
  |- components/
    |-- modals/
    |-- providers/
    |-- ui/
    |-- banner.tsx
    |-- course-card.tsx
    |-- course-progress.tsx
    |-- course-list.tsx
    |-- editor.tsx
    |-- file-upload.tsx
    |-- icon-badge.tsx
    |-- navbar-routes.tsx
    |-- preview.tsx
    |-- search-input.tsx
  |- config/
    |-- index.ts
  |- hooks/
    |-- use-confetti-store.ts
    |-- use-debounce.ts
  |- lib/
    |-- db.ts
    |-- format.ts
    |-- stripe.ts
    |-- teacher.ts
    |-- uploadthing.ts
    |-- utils.ts
  |- prisma/
    |-- schema.prisma
  |- public/
    |-- logo.svg
  |- scripts/
    |-- seed.ts
  |- .env
  |- .env.example
  |- .eslintrc.json
  |- .gitignore
  |- components.json
  |- environment.d.ts
  |- middleware.ts
  |- next.config.js
  |- package-lock.json
  |- package.json
  |- postcss.config.js
  |- tailwind.config.ts
  |- tsconfig.json

🧰 Getting Started

Make sure Git and NodeJS is installed.
Clone this repository to your local computer.
Create .env file in root directory.
Contents of .env:

# .env

# disabled next.js telemetry
NEXT_TELEMETRY_DISABLED=1

# clerk auth keys
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
CLERK_SECRET_KEY=sk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

# clerk auth urls
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/

# aiven database url
DATABASE_URL="mysql://<username>:<password>@<host>:<port>/learnhub?ssl-mode=REQUIRED"

# uploadthing keys
UPLOADTHING_SECRET=sk_live_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
UPLOADTHING_APP_ID=xxxxxxxxx

# app base url
NEXT_PUBLIC_APP_BASE_URL=http://localhost:3000

# mux keys
MUX_TOKEN_ID=xxxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx
MUX_TOKEN_SECRET=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX/xxxxxxxxxxxxxxxxxx

# stripe api key & webhook secret
STRIPE_API_KEY=sk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
STRIPE_WEBHOOK_SECRET=whsec_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

# teacher id (go to dashboard.clerk.com and copy your desired user id)
NEXT_PUBLIC_TEACHER_ID=user_xxxxxxxxxxxxxxxxxxxxxxxxx

Clerk Configuration

Visit the Clerk Dashboard at dashboard.clerk.com.
Create a new project and obtain the Publishable Key and Secret Key.
Set up authentication URLs in the Clerk Dashboard and update NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY and CLERK_SECRET_KEY values in the .env file.

Replace /sign-in, /sign-up, and the redirect URLs with the actual URLs configured in your Clerk Dashboard.

NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/

MySQL DB URI

Replace <username>, <password>, <host>, and <port> in the DATABASE_URL with your Aiven MySQL database credentials.

DATABASE_URL="mysql://<username>:<password>@<host>:<port>/learnhub?ssl-mode=REQUIRED"

Mux Configuration

Visit the Mux Dashboard at dashboard.mux.com to obtain your MUX_TOKEN_ID and MUX_TOKEN_SECRET. Update these values in your .env file.

Stripe Configuration

Visit the Stripe Dashboard at dashboard.stripe.com and sign in or create an account.
Obtain your Stripe API Key. You can find this under the "Developers" section.
Create a webhook endpoint in the Stripe Dashboard:
- Navigate to the "Developers" section and then to "Webhooks."
- Click on "Add endpoint" and enter the following details:
  - Endpoint URL: http://localhost:3000/api/webhooks/stripe (Update this URL based on your deployment environment)
  - Events to send: Select "checkout.session.completed" and any other events you want to handle in your application.
- Save the webhook endpoint.
After saving, copy the "Signing secret" from the newly created webhook endpoint.
Update the .env file with the Stripe API Key and Webhook Secret:

STRIPE_API_KEY=sk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
STRIPE_WEBHOOK_SECRET=whsec_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

App Base URL

NEXT_PUBLIC_APP_BASE_URL=http://localhost:3000

Uploadthing Keys

To obtain Uploadthing keys, follow these steps:

Sign up for an Uploadthing account:
- Visit Uploadthing and create an account.
Create a new application:
- Log in to your Uploadthing account.
- Navigate to the dashboard and create a new application.
Get Secret and App ID:
- Once the application is created, find or generate the Secret and App ID.

UPLOADTHING_SECRET=sk_live_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
UPLOADTHING_APP_ID=XXXXXXXXX

Clerk Teacher ID

Visit the Clerk Dashboard at dashboard.clerk.com. Go to users tab and update Teacher ID with any user id you created to be able to create new courses. Update NEXT_PUBLIC_TEACHER_ID in your .env file.

Open terminal in root directory. Run npm install --legacy-peer-deps or yarn install --legacy-peer-deps.
Run the Seed Script: In the same terminal, run the following command to execute the seed script:

npx ts-node scripts/seed.ts

This command uses npx to execute the TypeScript file (scripts/seed.ts) directly using ts-node and writes category data in mysql database.

Verify Data in Database: Once the script completes, check your MySQL database to ensure that the category data has been successfully seeded.
Now app is fully configured 👍 and you can start using this app using npm run dev or yarn dev.

NOTE: Please make sure to keep your API keys and configuration values secure and do not expose them publicly.

📷 Screenshots:

⚙️ Tech Stack

🔧 Stats

🙌 Contribute

You might encounter some bugs while using this app. You are more than welcome to contribute. Just submit changes via pull request and I will review them before merging. Make sure you follow community guidelines.