Next.js 14 e-Learning and Online Courses Marketplace App

Next.js 14 e-Learning and Online Courses Marketplace App, available at $54.99, has an average rating of 5, with 78 lectures, based on 4 reviews, and has 63 subscribers.

You will learn about 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 This course is ideal for individuals who are Frontend and full-stack developers who are curious about building a real-time projects It is particularly useful for Frontend and full-stack developers who are curious about building a real-time projects.

Enroll now: Next.js 14 e-Learning and Online Courses Marketplace App

Summary

Title: Next.js 14 e-Learning and Online Courses Marketplace App

Price: $54.99

Average Rating: 5

Number of Lectures: 78

Number of Published Lectures: 78

Number of Curriculum Items: 78

Number of Published Curriculum Objects: 78

Original Price: $19.99

Quality Status: approved

Status: Live

What You Will 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

Who Should Attend

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

Target Audiences

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

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-stack

Next.js 14 – For complete frontend and backend services

Tailwind CSS – For styling and alignments

Ant Design : For ui components

Zustand : For handling global state management

Mongo DB : For Database

Firebase : For storing all lessons , promo videos.

Project Features

Strong 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 enrollments

Admin 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

Course Curriculum

Chapter 1: Introduction

Lecture 1: Project Demo

Lecture 2: Introduction

Lecture 3: Ant design demo

Lecture 4: Overriding antd components styling

Lecture 5: Override antd in global level

Chapter 2: User authentication

Lecture 1: Clerk introduction

Lecture 2: Integrate clerk in nextjs

Lecture 3: Custom sign-in and sign-up pages

Lecture 4: Show logged-in user info in ui

Lecture 5: Show logged-in user info in object

Lecture 6: Style sign-in and sign-up pages

Chapter 3: Save users

Lecture 1: Why should we save users to mongodb

Lecture 2: Mongodb connection

Lecture 3: User model

Lecture 4: Save user

Chapter 4: Build layout

Lecture 1: Layout skeleton and conditions

Lecture 2: Layout styling

Lecture 3: Showing spinners

Lecture 4: Implementing state management

Lecture 5: Menu-items for admin and students

Lecture 6: Manual logout functionality

Chapter 5: Course form

Lecture 1: Courses module introduction

Lecture 2: Basic details in course form

Lecture 3: Cover image and promo video

Lecture 4: Course description

Lecture 5: Creating sections-1

Lecture 6: Creating sections-2

Lecture 7: Action items for sections

Lecture 8: Edit section

Lecture 9: Delete section

Lecture 10: Add lesson

Lecture 11: Display lessons

Lecture 12: Action items for lessons

Lecture 13: Edit lesson

Lecture 14: Delete lessons

Chapter 6: Media library

Lecture 1: Setup firebase

Lecture 2: Upload media UI

Lecture 3: Upload media firebase logic

Lecture 4: Save uploaded media to mongodb media collection

Lecture 5: Media library table

Lecture 6: Preview media

Lecture 7: Delete media

Chapter 7: Saving course

Lecture 1: Save course – part 1

Lecture 2: Save course – part 2

Lecture 3: Display courses

Lecture 4: Loader for server components

Lecture 5: Edit course – part 1

Lecture 6: Edit course – part 2

Lecture 7: Delete course

Chapter 8: Homepage and course info page

Lecture 1: Homepage part – 1

Lecture 2: Homepage part – 2

Lecture 3: Course info page – Hero section

Lecture 4: Course info page – Description

Lecture 5: Course info page – Curriculum

Lecture 6: Course info page – Purchase card

Chapter 9: Purchase course

Lecture 1: Stripe account integration

Lecture 2: Stripe backend

Lecture 3: Stripe frontend

Chapter 10: Save enrollments

Lecture 1: Enrollments model

Lecture 2: Save enrollment after payment

Chapter 11: User enrollments and watch course

Lecture 1: Show user enrolled courses

Lecture 2: Watch course – part 1

Lecture 3: Watch course – part 2

Lecture 4: Data preparation

Chapter 12: Filters

Lecture 1: Filters API

Lecture 2: Filters UI

Chapter 13: Enrollments and reports in admin panel

Lecture 1: Show all enrollments

Lecture 2: Filter enrollments by course

Lecture 3: Reports api

Lecture 4: Report ui

Lecture 5: Show distinct students

Lecture 6: Student reports

Chapter 14: Assignments

Lecture 1: Assignment 1 – Enhancing user profile page

Lecture 2: Assignment 2 – Enhancing filters

Chapter 15: Deployment and drag and drop functionality

Lecture 1: Deploy app to vercel

Lecture 2: Create separate branch

Lecture 3: Drag and drop – part 1

Lecture 4: Drag and drop – part 2

Instructors

K.Sathyaprakash Reddy
Full Stack Developer

Rating Distribution

1 stars: 0 votes

2 stars: 0 votes

3 stars: 0 votes

4 stars: 0 votes

5 stars: 4 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!