MERN Stack with React , Redux: Build Ecommerce Online Course

Course Curriculum

Chapter 1: MERN Stack Introduction

Lecture 1: Coure Introduction

Lecture 2: Live demo of MERN Stack project "Build Ecommerce Online Course" website

Lecture 3: MERN stack architecture

Lecture 4: Setup Express Js Server

Lecture 5: Install Nodemon for auto run NodeJS when change code

Lecture 6: Setup dotenv library for using environment variables

Chapter 2: React JS Basic Knowledge

Lecture 1: React JS Introduction

Lecture 2: First simple React JS App

Lecture 3: Function-based vs Class-based Component Introduction

Lecture 4: What is JSX?

Lecture 5: How to install and run React JS using create-react-app

Lecture 6: Function vs class based component in create-react-app

Lecture 7: What is React JS Props?

Lecture 8: Props in function based component

Lecture 9: Props final review

Lecture 10: React JS State

Lecture 11: React JS Event Handling

Lecture 12: React JS Form Handling

Lecture 13: React JS Routing

Chapter 3: MongoDB and Mongoose

Lecture 1: Install MongoDB

Lecture 2: MongoDB – Create a collection

Lecture 3: MongoDB – Insert a document

Lecture 4: MongoDB – Find all documents

Lecture 5: MongoDB – Find one document

Lecture 6: What is Mongoose ?

Lecture 7: Mongoose Schema

Lecture 8: Mongoose Model

Lecture 9: Mongoose connect and insert a document

Chapter 4: Backend – API NodeJS (ExpressJs) Server

Lecture 1: Define API route for managing course categories

Lecture 2: Define Course Category Mongoose Schema and Model

Lecture 3: API – Get Course Categories Implementation

Lecture 4: API – Get Course Category Parent Information

Lecture 5: API – Create a Course Category Implementation

Lecture 6: API – Update a Course Category Implementation

Lecture 7: API – Delete a Course Category Implementation

Lecture 8: Refactor Course Category Model

Lecture 9: Refactor Course Category Route

Lecture 10: Refactor Course Category Controller

Lecture 11: Authentication workflow with JSON Web Token (JWT)

Lecture 12: API – Create Mongoose User Model

Lecture 13: API – Register a user

Lecture 14: API – Register a user : Encrypt user's password with Bcrypt

Lecture 15: API – Register a user – Create a JWT Token

Lecture 16: API – Login Implementation

Lecture 17: API – Define Course Mongoose Model

Lecture 18: API – Get all Courses Implementation and Test API with PostMan

Lecture 19: API – Create a Course Implementation

Lecture 20: API – Implement a middleware for check authentication

Lecture 21: API – Logout Implementation

Chapter 5: Frontend – React JS

Lecture 1: ElementReact UI Introduction and Installation

Lecture 2: Setup ReactJS Routing

Lecture 3: Setup Admin Layout

Lecture 4: Setup static List of Course Categories using ElementReact Table

Lecture 5: Connect from React JS Component to API NodeJS Server using Axios library

Lecture 6: Setup concurrently for runing both frontend and backend project at one command

Lecture 7: Integrate Redux into React JS project

Lecture 8: Setup connection betwwen ReactJS and Redux using react-redux library

Lecture 9: Install ReduxDevTools for inspecting Redux's state and action

Lecture 10: Get List of Coure Categories from Redux's store

Lecture 11: Display a Loading icon when loading data

Lecture 12: Paginate a list of Course Categories

Lecture 13: Setup Create/Update Course Category Form using ElementReact UI

Lecture 14: Create a customize UI Component for handling form

Lecture 15: Create a customize UI Component continue

Lecture 16: Load Course Categories into DropDownList in Course Category Popup Form

Lecture 17: Save course category into database – Backend and Frontend Implementation

Lecture 18: Load selected Course Category into Course Category Popup Form

Lecture 19: Update a course category into database – Backend and Frontend Implementation

Lecture 20: Create form for Create Course function

Lecture 21: Save a course into database – Backend and Frontend Implementation

Lecture 22: Introduce about Update Course form

Lecture 23: Update Course form – Integrate CKEditor for special input content

Lecture 24: Update Course form – Integrate Upload function for uploading video files

Lecture 25: API – Get Course Information by Course ID

Lecture 26: API – Update basic Course information

Lecture 27: Implement Get Course by Course ID function in React JS

Lecture 28: Display Course Information by Course ID in Component

Lecture 29: Update Course to database

Lecture 30: Introduce about Update Course Curriculum Form

Lecture 31: Buid UI Prototype for Update Course Curriculum form

Lecture 32: Buid UI Prototype for Update Course Curriculum form – Lession Content Design

Lecture 33: API – Get Course's Curriculum by Course ID Implementation

Lecture 34: Load Course's Curriculum Into Component

Lecture 35: Load Course's Curriculum Into Component continue

Lecture 36: Course Curriculum Component – Handle Lession's content

Lecture 37: Course Curriculum Component – Change title(name) of a section

Lecture 38: Course Curriculum Component – Delete a section

Lecture 39: Course Curriculum Component – Change title(name) of a lession

Lecture 40: Course Curriculum Component- Delete a lession

Lecture 41: Course Curriculum Component – Choose lession's content type is text

Lecture 42: Course Curriculum Component – Choose lession content type is upload video file

Lecture 43: Course Curriculum Component – Add a new lession

Lecture 44: API – Update Course Curriculum

Lecture 45: Update Course Curriculum

Lecture 46: Register a user