Skip to content

sanidhyy/learnhub

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

150 Commits
.github
.github
 
 
actions
actions
 
 
app
app
 
 
components
components
 
 
config
config
 
 
hooks
hooks
 
 
lib
lib
 
 
prisma
prisma
 
 
public
public
 
 
scripts
scripts
 
 
.env.example
.env.example
 
 
.eslintrc.json
.eslintrc.json
 
 
.gitignore
.gitignore
 
 
CODE_OF_CONDUCT.md
CODE_OF_CONDUCT.md
 
 
CONTRIBUTING.md
CONTRIBUTING.md
 
 
LICENSE
LICENSE
 
 
README.md
README.md
 
 
SECURITY.md
SECURITY.md
 
 
components.json
components.json
 
 
environment.d.ts
environment.d.ts
 
 
middleware.ts
middleware.ts
 
 
next.config.js
next.config.js
 
 
package-lock.json
package-lock.json
 
 
package.json
package.json
 
 
postcss.config.js
postcss.config.js
 
 
tailwind.config.ts
tailwind.config.ts
 
 
tsconfig.json
tsconfig.json
 
 

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

3 stars

Watchers

1 watching

Forks

3 forks
Report repository

Sponsor this project

  •  
Learn more about GitHub Sponsors

Contributors 2

  •  
  •  

Languages