Next.Js 14 E-Learning And Online Courses Marketplace App

Learn how to build an e-learning online courses marketplace using latest technologies like nextjs , mongodb , antd etc

What you'll learn

Understand all the latest features if nextjs v14 in-depth and how they can be implemented in real-time projects

Implement strong and secured authentication and authorization system using CLERK

Learn how to use the tailwind css with other third party ui components libraries like antd , material ui etc.

Integrate firebase inorder to store and handle the large media uploads in nextjs apps

Requirements

Basic nextjs knowledge is required

Description

Welcome to the course Next.js 14 e-Learning and Online Courses Marketplace App. In this course we will build a full-stack real-time web application using the popular and cutting edge technologies like nextjs , taiwind , mongodb etc. So here we are listing the complete project techstack and features Project Tech-stackNext.js 14 - For complete frontend and backend servicesTailwind CSS - For styling and alignmentsAnt Design : For ui componentsZustand : For handling global state managementMongo DB : For DatabaseFirebase : For storing all lessons , promo videos.Project FeaturesStrong and secure user authentication using CLERK.There will be 2 user roles , one is admin and another is student.Admin can create , modify and delete the courses.The course form will have the basic details and description with rich text editor and then finally the course curriculum with multiple sections support and each section can have multiple videos.We will have centralised media library where admin can upload all the course videos , so while creating curriculum they need not to upload manually for each lesson.Once the course is published it will be available for normal students to enroll.Students can view all courses in homepage and they can filter by category and they can also search by course title.They can view the complete course info like description , promo video and curriculum  by clicking on the course image.Students can purchase the courses by making payment using the stripe payment gateway.Once students purchase course , it will be added to student's purchases where they can watch all the videos.Students will also have a report page in which they will see total courses enrolled , total amount spent and last 5 purchases etc.Admin can view course all the students enrollments and course level enrollmentsAdmin will also have reports page in which we will show total courses published , total enrollments , total distinct students , total revenue collected and last 5 enrollments.Admin can also view the list of distinct students who enrolled in multiple courses.Drag and drop functionality in curriculum in-order to sort the sections and lessons. Deploying the application to vercel cloud service.Q/A and Direct Messages support

Overview

Section 1: Introduction

Lecture 1 Introduction

Lecture 2 Ant design demo

Lecture 3 Overriding antd components styling

Lecture 4 Override antd in global level

Section 2: User authentication

Lecture 5 Clerk introduction

Lecture 6 Integrate clerk in nextjs

Lecture 7 Custom sign-in and sign-up pages

Lecture 8 Show logged-in user info in ui

Lecture 9 Show logged-in user info in object

Lecture 10 Style sign-in and sign-up pages

Section 3: Save users

Lecture 11 Why should we save users to mongodb

Lecture 12 Mongodb connection

Lecture 13 User model

Lecture 14 Save user

Section 4: Build layout

Lecture 15 Layout skeleton and conditions

Lecture 16 Layout styling

Lecture 17 Showing spinners

Lecture 18 Implementing state management

Lecture 19 Menu-items for admin and students

Lecture 20 Manual logout functionality

Section 5: Course form

Lecture 21 Courses module introduction

Lecture 22 Basic details in course form

Lecture 23 Cover image and promo video

Lecture 24 Course description

Lecture 25 Creating sections-1

Lecture 26 Creating sections-2

Lecture 27 Action items for sections

Lecture 28 Edit section

Lecture 29 Delete section

Lecture 30 Add lesson

Lecture 31 Display lessons

Lecture 32 Action items for lessons

Lecture 33 Edit lesson

Lecture 34 Delete lessons

Section 6: Media library

Lecture 35 Setup firebase

Lecture 36 Upload media UI

Lecture 37 Upload media firebase logic

Lecture 38 Save uploaded media to mongodb media collection

Lecture 39 Media library table

Lecture 40 Preview media

Lecture 41 Delete media

Section 7: Saving course

Lecture 42 Save course - part 1

Lecture 43 Save course - part 2

Lecture 44 Display courses

Lecture 45 Loader for server components

Lecture 46 Edit course - part 1

Lecture 47 Edit course - part 2

Lecture 48 Delete course

Section 8: Homepage and course info page

Lecture 49 Homepage part - 1

Lecture 50 Homepage part - 2

Lecture 51 Course info page - Hero section

Lecture 52 Course info page - Description

Lecture 53 Course info page - Curriculum

Lecture 54 Course info page - Purchase card

Section 9: Purchase course

Lecture 55 Stripe account integration

Lecture 56 Stripe backend

Lecture 57 Stripe frontend

Section 10: Save enrollments

Lecture 58 Enrollments model

Lecture 59 Save enrollment after payment

Section 11: User enrollments and watch course

Lecture 60 Show user enrolled courses

Lecture 61 Watch course - part 1

Lecture 62 Watch course - part 2

Lecture 63 Data preparation

Section 12: Filters

Lecture 64 Filters API

Lecture 65 Filters UI

Frontend and full-stack developers who are curious about building a real-time projects