antonioerdeljac / next13-lms-platform

Build an LMS Platform: Next.js 13, React, Stripe, Mux, Prisma, Tailwind, MySQL | Full Course 2023

This is a repository for Build an LMS Platform: Next.js 13, React, Stripe, Mux, Prisma, Tailwind, MySQL | Full Course 2023

VIDEO TUTORIAL

Key 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
• MySQL database using Planetscale

Prerequisites

Node version 18.x.x

Cloning the repository

git clone https://github.com/AntonioErdeljac/next13-lms-platform.git

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=

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

Add MySQL Database (I used PlanetScale)

npx prisma generate
npx prisma db push

Start the app

npm run dev

Available commands

Running commands with npm npm run [command]

command	description
dev	Starts a development instance of the app

next13-lms-platform's Issues

Redirection Loop in Dashboard Route for Unauthenticated Users

The current implementation in the Dashboard route seems to create a redirection loop when users are not authenticated. The logic checks for userId and redirects unauthenticated users back to the root ("/") route, which leads to a loop when the root route is the dashboard for authenticated users.

it doesnt throw any error in dev mode but it does for me when deploying.

const { userId } = auth()

  if (!userId) {
    return redirect("/") 
  }

Suggestion: Improve User Experience by Minimizing Full Page Refreshes on Updates

Currently, router.refresh() triggers a full page refresh, which can disrupt the user's experience, especially if there are other interactive elements on the page. Instead, you may want to explore options to update only the necessary parts of the page that need to reflect the changes.

onChange property is missing on Combobox in category-form.tsx for shadcn combobox

In the file /app/(dashboard)/(routes)/teacher/courses/[courseId]/_components/category-form.tsx

The following line gives an error but does not prevent the application from running:
<Combobox options={...options} {...field} />

Property 'onChange' is missing in type '{ options: any; }' but required in type 'ComboboxProps'.ts(2741)

Since we are spreading the {...field} I guess this should be covered. The application works fine when I run pnpm run dev, but not when I run pnpm build

Error: Unauthorized when uploading an image at chapter UploadThing & Image Form

Hi there,
I am working on this LMS project which is awesome by the way and I am up to chapter UploadThing & Image Form. I have followed all the steps including adding env secret and app id for UploadThing but when I try to upload an image...

I get the following error: any ideas?

[UT] UploadThing dev server is now running!
Error: Unauthorized
    at handleAuth (webpack-internal:///(rsc)/./app/api/uploadthing/core.ts:15:41)
    at Object.eval [as middleware] (webpack-internal:///(rsc)/./app/api/uploadthing/core.ts:26:23)
    at eval (webpack-internal:///(rsc)/./node_modules/uploadthing/dist/chunk-LQBAB5WK.mjs:335:58)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Object.POST (webpack-internal:///(rsc)/./node_modules/uploadthing/dist/chunk-66XXRAVC.mjs:285:26)
    at async /Users/benjaminwaller/Projects/LMS-next/lms/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:1:66877

Any ideas of a cause or for a solution?

Best regards,
Ben

UT] Call unsuccessful after 4 tries. Retrying in 8 seconds...

While uploading a image through uplodthing

Connecting to PlanetScale without ?sslaccept=strict leads to suboptimal error message

Environment variables loaded from .env
Prisma schema loaded from prisma/schema.prisma
Datasource "db": MySQL database "blue-educational" at "aws.connect.psdb.cloud"

Error: Schema engine error:
unknown error: Code: UNAVAILABLE
server does not allow insecure connections, client must use SSL/TLS

This issue might appear on doing the npx prisma db push command.
To solve it you need to add "?sslaccept=strict" at the end of the planetscale URL in .env file

Couldn't able see the categories.

after successfully running the application I couldn't able see the categories

Configure vscode for tsx files

Hey Antonio, first, thanks so much for your great tutorials!

I keep on getting eslint errors in vscode for .tsx files, like this (see the errors in red):

Do you know how to configure vscode/eslint to avoid this?

No Switch button

I have successfully run the app but i can’t see the button that switches between the learner and the admin

@AntonioErdeljac

NEXT_PUBLIC_TEACHER_ID

NEXT_PUBLIC_TEACHER_ID not found

teacher payment

Hi Antonio! Thank you so much for your work. I was wondering how you would implement a teacher payment for this? Did I miss that part where the teachers get paid for their course?

Give an error in the deployed link while going to teacher mode or by clicking on any link

Application error: a server-side exception has occurred (see the server logs for more information).
Digest: 2282233572

Combobox throwing Unhandled Runtime Error

Getting this error when clicking on the combobox of category form

upload course img error

When i upload course img then error is Error parsing JSON, got '' and in terminal i got error TypeError: Cannot read properties of undefined (reading 'url')