MERN Stack with React , Redux: Build Ecommerce Online Course

Name: MERN Stack with React , Redux: Build Ecommerce Online Course
Rating: 4.3 (4 reviews)

Learn how to build an ecommerce online course website using MERN stack with React JS, Redux, NodeJS,MongoDB, ExpressJS

Created byHùng Nguyễn Thế

Last updated 8/2021

English

What you'll learn

Learn React JS
Know how to use MongoDB, Mongoose library
Learn setup NodeJS API Server using ExpressJS
Learn how to setup a MERN stack project from scratch
How to build a complete Ecommerce Online Course web using MERN stack with React JS v16, REDUX, NodeJS, Express JS, MongoDB, Mongoose, ElementReact UI
Learn how to integrate CKEditor in ReactJS
Learn how to use ElementReact UI for buiding ReactJS UI Component
Learn how to upload file using React JS and NodeJS (using Multer library)
Learn how to integrate Paypal checkout in React JS
Learn how to use POSTMAN to test API
Learn how to implement authentication and authorization

Course content

6 sections • 108 lectures • 25h 28m total length

Coure Introduction9:29
Live demo of MERN Stack project "Build Ecommerce Online Course" website18:05
MERN stack architecture3:51
Setup Express Js Server8:08
Install Nodemon for auto run NodeJS when change code5:42
Setup dotenv library for using environment variables5:14

React JS Introduction6:00
First simple React JS App7:20
Function-based vs Class-based Component Introduction5:56
What is JSX?7:13
How to install and run React JS using create-react-app6:22
Function vs class based component in create-react-app8:28
What is React JS Props?8:17
Props in function based component4:29
Props final review3:59
React JS State6:39
React JS Event Handling9:25
React JS Form Handling14:59
React JS Routing9:29

Define API route for managing course categories5:41
Define Course Category Mongoose Schema and Model11:29
API - Get Course Categories Implementation6:03
API - Get Course Category Parent Information13:00
API - Create a Course Category Implementation11:34
API - Update a Course Category Implementation7:54
API - Delete a Course Category Implementation6:01
Refactor Course Category Model5:09
Refactor Course Category Route6:08
Refactor Course Category Controller9:57
Authentication workflow with JSON Web Token (JWT)12:46
API - Create Mongoose User Model4:02
API - Register a user10:40
API - Register a user : Encrypt user's password with Bcrypt9:14
API - Register a user - Create a JWT Token11:06
API - Login Implementation17:36
API - Define Course Mongoose Model10:09
API - Get all Courses Implementation and Test API with PostMan25:30
API - Create a Course Implementation10:59
API - Implement a middleware for check authentication31:13
API - Logout Implementation4:23

ElementReact UI Introduction and Installation11:08
Setup ReactJS Routing11:05
Setup Admin Layout18:33
Setup static List of Course Categories using ElementReact Table6:31
Connect from React JS Component to API NodeJS Server using Axios library12:44
Setup concurrently for runing both frontend and backend project at one command8:27
Integrate Redux into React JS project21:25
Setup connection betwwen ReactJS and Redux using react-redux library20:56
Install ReduxDevTools for inspecting Redux's state and action14:43
Get List of Coure Categories from Redux's store7:36
Display a Loading icon when loading data5:41
Paginate a list of Course Categories9:16
Setup Create/Update Course Category Form using ElementReact UI16:27
Create a customize UI Component for handling form14:43
Create a customize UI Component continue30:11
Load Course Categories into DropDownList in Course Category Popup Form11:59
Save course category into database - Backend and Frontend Implementation38:36
Load selected Course Category into Course Category Popup Form25:28
Update a course category into database - Backend and Frontend Implementation33:53
Create form for Create Course function26:33
Save a course into database - Backend and Frontend Implementation27:50
Introduce about Update Course form6:40
Update Course form - Integrate CKEditor for special input content30:04
Update Course form - Integrate Upload function for uploading video files31:48
API - Get Course Information by Course ID3:14
API - Update basic Course information7:23
Implement Get Course by Course ID function in React JS7:32
Display Course Information by Course ID in Component13:05
Update Course to database12:52
Introduce about Update Course Curriculum Form5:31
Buid UI Prototype for Update Course Curriculum form33:14
Buid UI Prototype for Update Course Curriculum form - Lession Content Design34:17
API - Get Course's Curriculum by Course ID Implementation30:19
Load Course's Curriculum Into Component15:32
Load Course's Curriculum Into Component continue16:08
Course Curriculum Component - Handle Lession's content34:17
Course Curriculum Component - Change title(name) of a section22:18
Course Curriculum Component - Delete a section3:45
Course Curriculum Component - Change title(name) of a lession8:27
Course Curriculum Component- Delete a lession7:32
Course Curriculum Component - Choose lession's content type is text19:44
Course Curriculum Component - Choose lession content type is upload video file10:28
Course Curriculum Component - Add a new lession13:46
API - Update Course Curriculum9:42
Update Course Curriculum34:59
Register a user31:25
Login6:28
Implement Authentication HOC37:03
Logout9:16
Get List of Instructor Courses19:22
Instructor - Delete and Approve Course27:25
Admin - Approve and Reject Instructor's Courses28:12
Home Page19:19
Display Course Detail20:33
Add Course to Cart20:36
Display Shopping Cart and Checkout using Paypal28:23

Setup online MongoDB database with MongoDB Atlas21:13
Deploy MERN stack to HEROKU41:30
Source code0:22
Extract this file vlms_mevnc.rar to any folder in your computer, for example D:\mydata\vlms_mevnc
Remember to install mongodb in your computer and access mongdodb folder in you CMD
in my case I install mongodb in this folder " C:\Program Files\MongoDB\Server\4.0\bin>"
so I open cmd or Windows power shell , change directory to this " C:\Program Files\MongoDB\Server\4.0\bin>"
and run this command to import database:
.\mongorestore --host localhost --port 27017 --db mynewdata D:\mydata\vlms_mevnc

D:\mydata\vlms_mevnc is the folder you put mongodb dump files get in above link
mynewdata is the name of database you want, you can change this name

Requirements

Any level can learn this course

Description

In this course you not only learn React JS, MongoDB basic knowledge but also learn how to build a complete "Ecommerce Online Course website" using MERN stack from scratch.

You will learn many interesting techniques from this course:

+ How to setup a simple MERN stack project

+ How to integrate CKEditor in your ReactJS

+ How to upload file in ReactJS and NodeJS (using Multer library)

+ How to integrate Paypal checkout

+ How to use ElementReact UI for building user interfaces with existed components for Button, Table, Tab,Upload.... and much much more components for NICE user interface

+ How to use Redux for better state management in React JS

Who this course is for:

All students interested in MERN stack (React JS, Redux, MongoDB, Mongoose, NodeJS, ExpressJS)

MERN Stack with React , Redux: Build Ecommerce Online Course

What you'll learn

Explore related topics

Course content

MERN Stack Introduction6 lectures • 50min

React JS Basic Knowledge13 lectures • 1hr 39min

MongoDB and Mongoose9 lectures • 51min

Backend - API NodeJS (ExpressJs) Server21 lectures • 3hr 51min

Frontend - React JS56 lectures • 17hr 14min

Deployment and Source code3 lectures • 1hr 3min

Requirements

Description

Who this course is for: