Skip to content

sanidhyy/learnhub

BranchesTags

Repository files navigation

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

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

Ask Me Anything! GitHub license Maintenance GitHub branches Github commits Vercel status GitHub issues GitHub pull requests

📔 Table of Contents

‼️ 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

  1. Make sure Git and NodeJS is installed.
  2. Clone this repository to your local computer.
  3. Create .env file in root directory.
  4. 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
  1. 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=/
  1. 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"
  1. 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.
  1. 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
  1. App Base URL
NEXT_PUBLIC_APP_BASE_URL=http://localhost:3000
  1. Uploadthing Keys

To obtain Uploadthing keys, follow these steps:

  1. Sign up for an Uploadthing account:

  2. Create a new application:

    • Log in to your Uploadthing account.
    • Navigate to the dashboard and create a new application.

  3. 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
  1. 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.

  1. Open terminal in root directory. Run npm install --legacy-peer-deps or yarn install --legacy-peer-deps.

  2. 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.

  1. Verify Data in Database: Once the script completes, check your MySQL database to ensure that the category data has been successfully seeded.

  2. 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:

Modern UI/UX

Course Setup

Chapter Creation

Watch Chapters

⚙️ Tech Stack

React JS Next JS Typescript Tailwind CSS Vercel Prisma MySQL

🔧 Stats

Stats for LearnHub

🙌 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.

💎 Acknowledgements

Useful resources and dependencies that are used in LearnHub.

☕ Buy Me a Coffee

🚀 Follow Me

GitHub followers Twitter YouTube

📚 Learn More

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

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

📃 Deploy 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 Next.js deployment documentation for more details.

⭐ Give A Star

You can also give this repository a star to show more people and they can use this repository.

🌟 Star History

Star History Chart

(back to top)

About

Discover seamless learning with LearnHub - your all-in-one Learning Management System.

learnhub-lms.vercel.app/

Topics

react typescript stripe nextjs axios recharts mux react-icons prisma tailwindcss clerk uploadthing lucide-react

Resources

Readme

License

MIT license

Code of conduct

Code of conduct

Security policy

Security policy
Activity

Stars

8 stars

Watchers

1 watching

Forks

5 forks
Report repository

Sponsor this project

  •  
Learn more about GitHub Sponsors

Contributors 2

Languages