Build a web-shop in React MERN Full Stack [2024 Update]

Course Curriculum

Chapter 1: Introduction

Lecture 1: App Demo

Chapter 2: Installing Necessary Tools

Lecture 1: Node

Lecture 2: Git

Lecture 3: Visual Studio Code

Lecture 4: Visual Studio Code Extensions

Lecture 5: Prettier Settings

Chapter 3: Project Initialization

Lecture 1: Project Init

Lecture 2: Backend Init

Lecture 3: Installing Dependencies

Lecture 4: Index js

Lecture 5: Mongo DB Setup

Lecture 6: Mongo DB Compass

Lecture 7: Product Model

Lecture 8: Product Route

Lecture 9: Version Control via Git

Lecture 10: If You Get Stuck

Chapter 4: Chapter 1 – Products & Redux Setup

Lecture 1: Chapter One – Intro

Lecture 2: Cleaning Up Client Directory

Lecture 3: Getting Started With Chakra UI

Lecture 4: First Chakra UI Box

Lecture 5: Product Cart Part 1

Lecture 6: Product Card Part 2

Lecture 7: Product Card Part 3

Lecture 8: Product Card Part 4

Lecture 9: Product Card Part 5

Lecture 10: Concurrently

Lecture 11: Bable Plugin Warning Fix

Lecture 12: Redux Intro

Lecture 13: Redux Store

Lecture 14: Products Slice

Lecture 15: Product Actions

Lecture 16: Redux Devtools

Lecture 17: Dispatchers & Selectors

Lecture 18: Handling Images & Loading

Lecture 19: Pushing Our Code To Github

Lecture 20: Checkout My Branch

Chapter 5: Chapter 2 – Pagination & Favorites

Lecture 1: Intro

Lecture 2: Get Products Refinement To Allow Pagination

Lecture 3: Redux Slices For Favorites

Lecture 4: Products Actions For Pagination

Lecture 5: Product Actions Continued

Lecture 6: Header Initialization

Lecture 7: React Router Initialization

Lecture 8: Product Card Add & Remove Favorite

Lecture 9: Fixing Icon Heart In Header

Lecture 10: Pagination & Favorites On ProductsScreen

Lecture 11: Pushing Our Code To Github

Lecture 12: Checkout My Code

Chapter 6: Chapter 3 – Products Screen & Landing Screen

Lecture 1: Intro

Lecture 2: Get Product By Id Route

Lecture 3: Set Product Actions

Lecture 4: Get Product Actions

Lecture 5: Product Screen & Landing Screen Route

Lecture 6: Landing Screen

Lecture 7: ProductsScreen refinement

Lecture 8: Toggle Color Mode Component

Lecture 9: NavLink Component

Lecture 10: Header Part 1

Lecture 11: Header Part 2

Lecture 12: Header Part 3

Lecture 13: Header Part 4

Lecture 14: Product Card Route

Lecture 15: StarIcon

Lecture 16: Product Screen Part 1

Lecture 17: Product Screen Part 2

Lecture 18: Product Screen Part 3

Lecture 19: Product Screen Part 4

Lecture 20: Reviews Schema

Lecture 21: Pushing Our Code To Github

Lecture 22: Checkout My Branch If You Are Stuck

Chapter 7: Chapter 4 – Cart Screen & Footer

Lecture 1: Intro

Lecture 2: Initialize CartScreen & Footer

Lecture 3: Cart Slice Part 1

Lecture 4: Cart Slice Part 2

Lecture 5: Cart Actions

Lecture 6: Cart Icon In Header

Lecture 7: Product Card Add Cart Functionality

Lecture 8: Product Card Add Cart Functionality

Lecture 9: Cart Screen Structure

Lecture 10: Cart Screen Structure Continued

Lecture 11: Order Summary Component

Lecture 12: CartItem Component

Lecture 13: Footer Part 1

Lecture 14: Footer Part 2

Lecture 15: Pushing Our Work To Github

Chapter 8: Chapter 5 – Login & Registration

Lecture 1: Intro

Lecture 2: User Modal

Lecture 3: User Routes Part 1

Lecture 4: User Routes Part 2

Lecture 5: Postman Intro

Lecture 6: Register User

Lecture 7: Test Register User In Postman