English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 24 Hours | 10.6 GB
Learn to Build Real World LMS eLearning Marketplace using NextJs React Node MongoDB Stripe AWS and Secure Authentication
Learn to build real world eLearning marketplace (Udemy clone) using Full stack/MERN stack JavaScript Next.js React Node MongoDB and Stripe from scratch to deployment.
If you have taken my previous courses, then you have already build some great projects, I know that You have already build E-commerce apps, SEO blogging platform, Social network and even a Marketplace…but you haven’t build any thing like this.
This project will not only teach you the very best of everything but also enables you to make a good income out of it.. yes this time you are not just going to build yet another project, you are going to build an eLearning marketplace that generates money for you and for your users (Instructors).
This concept is extremely powerful and there is no limit to it. You can grow this project to one of the most successful project ever. Yes I am talking about building an online education marketplace, something like Udemy! Yes you heard me right, you will learn to build something like Udemy using Full stack JavaScript React.js Next.js Node.js MongoDB Stripe and AWS.
Another important part of this course is, It is build for production use. Yes when we say production, we need to make sure it is secure, fast, SEO and built with solid infrastructures right? Don’t worry, I have covered all that in the best possible way!
You will build a secure and production ready authentication system using cookies. So no more worries about insecurities of storing tokens in local storage. It is extremely fast and SEO optimized because we are using Next.js, which is a React framework for building production apps.
It is built with solid infrastructures to ultimately scale in future. We are using AWS SES for emails and S3 for storage. So as you can see, this is absolutely amazing project to build, that can easily be one of the best startup project to change the world.
Whether you want to build an online education marketplace for a country or a region or the entire world. This is where it all starts.
And it is all done from scratch with nothing but an empty code editor and of course with a lot of passion to learn, build and grow together. In about 5000 lines of code, you will be able to build this masterpiece and deploy to the cloud for the real world.
So if this sounds amazing, join me in this course. Let’s build this next big thing together and have a good time along the way!
What you’ll learn
- Build Udemy clone for real world use
- Build one of the biggest real world eLearning marketplace app
- Master frontend/backend Full Stack/MERN Stack
- Learn to use NextJs to build SEO ready react apps
- Learn to use AWS IAM (user management) SES (for email) and S3 (for storage)
- Learn to use Stripe Connect to build a robust marketplace
- Fully automated payment system
- Platform fee and instructor payout on each sale
- Production ready authentication using cookies including password reset
- Role based access for instructors and students with dedicated dashboard
- Simple and scalable LMS (learning management system)
- Global state management using react context API and reducer hook
- Robust course creation/management with lessons add/update/rearrange
- Free and paid course enrollment option
- User dashboard for courses with options to keep track of completed lessons
- Instructor dashboard with stripe account access, payment history and revenue report
- Deploy to digital ocean cloud
Table of Contents
Introduction
1 Build react node udemy clone
2 Download source code for each lectures
Client setup
3 Nextjs client setup
4 Bootstrap and ant design
5 Custom CSS
6 Pages
7 Ant menu and icons
8 Register page
Server setup
9 Server setup
10 Express
11 Routes
12 Controllers
13 Mongo atlas or local install
14 Mongoose connect
15 Axios post request
16 User model
17 Bcrypt helper functions
Registration
18 Register user
19 Toast notifications
20 Loading spinner
21 Env and gitignore files
22 Custom next dev server (for dev mode only)
23 Active nav links
Login
24 Login page
25 Login backend updated
26 Trying login
Global state, CSRF, axios interceptors and protected routes
27 Global state with context api and reducer hook
28 Dispatch user response to context
29 Preserve user info on page refresh and redirect
30 Logout
31 Conditional nav links
32 Protecting pages from loggedin user
33 Handling expired token using axios interceptors
34 CSRF protection
35 Verify token and get current user
36 Protected page
37 Wrapper component user route
AWS IAM
38 AWS setup IAM user
39 Login to AWS as IAM user and verify email
Sending email and password reset
40 Sending test email
41 Password reset workflow
42 Forgot password page
43 Send email to reset password
44 Reset password client
45 Reset password server
Stripe onboarding
46 Stripe setup
47 User sidebar nav
48 Conditional links and pages
49 Become instructor page
50 Stripe account link for onboarding
51 Stripe onboarding client
52 Stripe callback page
53 User account status from stripe
Current instructor and protected routes
54 Dispatch updated user info to context
55 Current instructor server
56 Instructor protected routes
57 Active nav links
Create course
58 Create course form part 1
59 Create course form part 2
60 Create course component
61 Price dropdown and category
AWS S3 Image upload
62 Image preview
63 Image resize client
64 AWS S3 bucket policy
65 Upload image to S3
66 Image remove client
67 Delete image S3 server
Save course and instructor access
68 Course schema
69 Is instructor middleware and create endpoint
70 Save courses in database
71 Instructor courses in dashboard
72 Instructor course list
73 Single course view for instructors
74 Single course view
75 Display markdown context
AWS S3 Video upload and lessons
76 Add lesson modal
77 Add lesson form
78 Video upload button
79 Send video upload using form data
80 Upload video to S3
81 Remove video request
82 Remove video from S3
83 Only instructor can upload and delete videos
84 Add lesson
85 Rendering lessons as list items
Update course, lessons and rearrange
86 Course edit page
87 Reuse component to update course
88 Update course server
89 List of lessons on edit page
90 Draggable items
91 Drag and drop lessons to reorder
Lesson update and delete
92 Delete lesson client
93 Delete lesson server
94 Update lesson modal
95 Update lesson component
96 Video preview and switch button
97 Remove and upload new video on update
98 Update lesson request client
99 Update lesson server
Publishing courses
100 Publish unpublish icons
101 Course publish unpublish client
102 Course publish unpublish server
103 Published courses server
104 Published courses client
105 Ant card component to display courses
Single course view and SEO
106 Server render courses for SEO
107 Fetch single course
108 Display single course info
109 Video or image preview
110 Single course jumbotron
111 Course preview modal
112 Show course lessons
113 Show lessons preview
Free enrollment
114 Enroll button
115 Check enrollment server
116 Conditional rendering of enroll button
117 Free enrollment server
118 Free enrollment client
Paid enrollment
119 Stripe payment setup
120 Stripe paid enrollment server
121 Stripe paid enrollment client
122 Stripe cancel page
123 Stripe success page
124 Stripe success server
User courses and student route
125 User courses on dashboard
126 List of user courses
127 Single course view for user
128 Is enrolled middleware
129 Student route client
User course dashboard
130 Lessons menu sidebar
131 Clicked lesson content and collapsed sidebar
132 Mark as completed client
133 Mark as completed server
134 Completed lessons
135 Implement mark completed
136 Implement mark incomplete
Instructor dashboard
137 Enrolled students count
138 Revenue page
139 Instructor revenue balance
140 Instructor account history and payouts
141 Some styling
Deployment
142 Digital ocean setup
143 SSH access
144 Push code to Github
145 Installing Nodejs, NGINX and pull code from Github
146 Running server, installing MongoDB and commit changes
147 Running React, Nextjs client
148 Signup as instructor in live site
149 Create enroll publish free, paid course, getting paid and more
Resolve the captcha to access the links!