next13-lms-platform - 构建 LMS 平台:Next.js 13、React、Stripe、Mux、Prisma、Tailwind、MySQL | 2023年完整课程

Created at: 2023-09-18 04:41:36
Language: TypeScript

构建 LMS 平台:下一页.js 13、 React 、条纹、复用、棱镜、 tailwind 、MySQL |2023年完整课程

全栈 Twitter 克隆副本副本

这是构建LMS平台的存储库:下一页.js 13, React ,条纹,Mux,Prisma, tailwind ,MySQL |2023年完整课程

视频教程

主要特点:

  • 浏览和过滤课程
  • 使用条纹购买课程
  • 将章节标记为已完成或未完成
  • 每门课程的进度计算
  • 学生 dashboard
  • 教师模式
  • 创建新课程
  • 创建新章节
  • 通过拖放轻松重新排序章节位置
  • 使用上传内容上传缩略图,附件和视频
  • 使用复用器进行视频处理
  • 使用复用器的 HLS 视频播放器
  • 用于章节描述的富文本编辑器
  • 使用文员进行身份验证
  • 使用棱镜的ORM
  • 使用Planetscale的MySQL数据库

先决条件

节点版本 18.x.x

克隆存储库

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

安装软件包

npm i

设置 .env 文件

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=

设置棱镜

添加MySQL数据库(我使用了PlanetScale)

npx prisma generate
npx prisma db push

启动应用

npm run dev

可用命令

使用 npm 运行命令

npm run [command]

命令 描述
dev
启动应用的开发实例