LMS Platform

Build an LMS Platform: Next.js 13, React, Tailwind, Stripe, Mux, Prisma, MongoDB

Table of Contents

• Key Features
• Prerequisites
• Start the app
• How to setup the initial project
• Contact

This is a repository for Build a SaaS AI Platform with Next.js 13, React, Tailwind, Prisma, 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
• Authentication using Clerk
• ORM using Prisma
• MongoDB Database

Prerequisites

Node version 18.x.x Yarn version 1.22.x

Start the app

Certainly, if you're working on a Node.js project and you have a development script, such as yarn dev, that you typically use to run your application during development, you can include that step in your workflow as well. Here's the updated order of commands:

1. Clone this repository:

   git clone [email protected]:rsshonjoydas/lms-platform.git
   

2. Environment Variables Setup: To rename the .env.example file to .env and add your environment-specific configuration, you can use the following command in a Unix-like shell (such as Linux or macOS):

   mv .env.example .env
   

   This command renames the .env.example file to .env.

   After renaming the file, you can open the .env file using a text editor and add your environment-specific configuration variables and their values. For example:

   DATABASE_URL=your_database_url_here
   API_KEY=your_api_key_here
   SECRET_KEY=your_secret_key_here
   

   Replace "your_database_url_here", "your_api_key_here", and "your_secret_key_here" with your actual configuration values. The .env file is commonly used to store sensitive or environment-specific configuration variables for your application.

3. Install packages

   yarn install
   

4. Prisma Setup:

   • Generate Prisma Client Code:

     npx prisma generate
     

   • Push Database Changes:

     npx prisma db push
     

   • Launch Prisma Studio: optional

     npx prisma studio
     

     Your Prisma database is accessible locally at the following address: http://localhost:5555

5. Seed the Database:

   node ./scripts/seed.ts
   

6. Run Your Application in Development Mode:

   yarn dev
   

   Your project is accessible locally at the following address: http://localhost:3000

How to setup the initial project

1. Install Next JS

   yarn create next-app --typescript --tailwind --eslint
   

2. Engine Locking configuration optional

   • Create .npmrc file and add below the code

     engine-strict=true
     

   • Create .nvmrc file and add below the code

     lts/fermium
     

   • Add this configuration to your project package.json

     "engines": {
        "node": ">=18.0.0",
        "yarn": ">=1.22.0",
        "npm": "please-use-yarn"
      }
     

3. Visual Studio Settings configuration optional

   • Get VSCode Settings.json file

4. Airbnb style guide setup

   • Get eslintrc.json file

5. Git Hooks for Husky

   • How to use husky

6. Shadcn Ui Setup

   • Initialize Shadcn ui

     npx shadcn-ui@latest init
     

   • How to use Shadcn ui optional

     npx shadcn-ui@latest add button
     

   • Overwrite existing ui components optional

     npx shadcn-ui@latest add button --overwrite
     

Contact

Shonjoy Das - [email protected]