Mern Stack Project Course 2022 - Build Fullstack React App

Learn MERN Stack By Building an Advanced E-commerce App incl. Product Attributes, SocketIO, Real Time Chat,Charts & More

What you'll learn
Learn How To Combine MongoDB, Express, React, NodeJS (MERN Stack)
How To Create Fullstack Web Applications (Frontend + Backend) From Scratch Using MERN Stack
How To Create Testable and Maintainable React Components
How To Test Your App using Jest & Postman/Insomnia
Understand Redux With Real Life Scenarios
Create Real Time Chat and Chart
Much much more
Requirements
JavaScript language at least intermediate level
ES6 syntax (object de-structuring and arrow functions)
Basics of HTML & CSS
Basics of React is recommended but not a must-have
Description
In this course, you will learn the MERN Stack by building an amazing e-commerce application from scratch. The application will have not only basic functionalities such as a shopping cart and product search, but also advanced things such as chat, real-time sales charts, product attributes (e.g. product color to choose from), creating testable components in React and other things (see free videos and curriculum).MERN Stack is a very popular development kit for building web applications. MERN consists of MongoDB (as a database), Express (a framework to make it easier to use Node), React (to create user interfaces), and Node (as a server). You will learn how to combine all four technologies together and build an advanced fully responsive e-commerce application step by step.In the first part, you will learn the basics of MERN Stack and the JSX extension. Thanks to JSX we can easily create components in React. I will also show you the entire application and give you some tips about VS Code and downloadable resources. And the rest of this course is about covering and going through the steps of creating each MERN Stack application from scratch using e-commerce as example app. I will explain you everything in elegant and understandable way. You will deeply understand Redux using real life scenarios.We'll start by installing React and creating an HTML template for the entire application (using React Bootstrap). We will link the created subpages with routingNext, we will install Express JS to handle the Node server for our applicationWe will connect to the MongoDD database and save example data to this database, such as a list of products for the storeWe will create an API through which the frontend will retrieve data from the database, log in to the application, etc.Once we have the frontend, backend and API, we can connect everything together and develop the application further by supplementing the frontend code with backend operationsSome of the e-commerce app features:shoping cartlogin, registerPayPal paymentuload images to Clodinary and to local disksearching, sorting, filtering, pagination of product listmultilevel categoriesbestsellers carouselstar rating system and reviewsreal time sales chartschatdeploy application to HerokuReact local stateRedux statebeautiful functional programming using React HooksMuch more!Please go through the curriculum and see free videos to get better understanding of the courseAlmost all of my students are satisfied with my courses! Take a look at some of the comments from them:"I loved this course, the author explains everything in a good way, even for me non native speaker. I was a bit scared to do an english course but it paid off.Thanks a lot and greetings from Germany"another:"This course is outstanding! It covers ground that no other course does. The instructor is well organized and thorough in all his examples and explanations. I'm looking forward to more of his courses."Sign up for the course now and become a MERN Stack web developer !!!

Overview

Section 1: Introduction To The MERN Stack Course

Lecture 1 Introduction To The MERN Stack Course

Lecture 2 Application Demo

Lecture 3 MERN Stack Basics

Lecture 4 JSX Syntax Crash Course

Lecture 5 VS Code Editor

Lecture 6 How To Use Downloadable Resources

Section 2: React - Building The HTML Template For The App

Lecture 7 Let's get down to business!!!

Lecture 8 Install React App Using NPM

Lecture 9 Create First Page And First Route

Lecture 10 Create Routes For Publicly Available Pages like List Of Products

Lecture 11 Create Routes For Protected Pages For Regular User

Lecture 12 Create Routes For Protected Pages For Administrator

Lecture 13 Create Header And Footer Components

Lecture 14 Create User Chat Component

Lecture 15 Create The Header Using React Bootstrap

Lecture 16 Create Badge for Number of Products in The Cart and Select List For Categories

Lecture 17 Customize Header Component

Lecture 18 Style Footer Component

Lecture 19 Create Carousel and Card Components using React Bootstrap

Lecture 20 Customize the Home Page

Lecture 21 Chat Popup – Blue Circle With Icons

Lecture 22 Chat Popup – Create Header

Lecture 23 Chat Popup – Message Field and Submit Button

Lecture 24 Chat Popup – Example Chat History

Lecture 25 Prepare Product List Page

Lecture 26 Create HTML for Star Rating System

Lecture 27 Improve HTML for Sorting and Filtering Products

Lecture 28 Improve Component for Category Filters

Lecture 29 Improve Attributes Section for Filtering Options

Lecture 30 Improve Component for Product List

Lecture 31 Improve Pagination Component

Lecture 32 Create Scroll To Top Functionality

Lecture 33 Prepare Product Details Page

Lecture 34 Continue Developing Product Details Page

Lecture 35 Improve Message Component

Lecture 36 Update Product Description Page

Lecture 37 Improve Reviews Section

Lecture 38 Create Mouse Hover Effect on Images

Lecture 39 Prepare Cart Page

Lecture 40 Finish Cart Page

Lecture 41 Prepare Register Page

Lecture 42 Continue Developing Register Page

Lecture 43 Finish Template for Register Page

Lecture 44 Prepare Login Page

Lecture 45 Prepare User Profile Page

Lecture 46 Prepare User Orders Page

Lecture 47 Finish User Orders Page (template for now)

Lecture 48 The Page for User Order Details

Lecture 49 Finish User Order Details Page

Lecture 50 Prepare the Page for User Cart Details

Lecture 51 Prepare the Page for Admin Orders

Lecture 52 Create Component for Admin Links

Lecture 53 Prepare Admin Order Details Page

Lecture 54 Create Product List Page for Admin

Lecture 55 Prepare the Page for Creating The Product by Admin

Lecture 56 Finish the Page for Creating The Product by Admin

Lecture 57 Complete Edit Product Page for Administrator

Lecture 58 Create Users Page for Admin

Lecture 59 Create Edit Users Page for Admin

Lecture 60 Create Chats Page for Admin

Lecture 61 Create Chat Component for Admin

Lecture 62 Prepare Analytics Page for Admin

Lecture 63 Finish Analytics Page for Admin

Section 3: Node & Express as a Backend

Lecture 64 Install Express JS server for the Backend of our App

Lecture 65 Express Middleware

Lecture 66 Prepare for Creating API

Lecture 67 Introduce Controllers in Express

Lecture 68 Handle Errors in Express

Lecture 69 Custom Middleware to Handle Errors

Section 4: MongoDB & Mongoose

Lecture 70 MongoDB Introduction and Configuration

Lecture 71 Mongoose Introduction - Connect with MongoDB

Lecture 72 First MongoDB Database Operation

Lecture 73 Finish Product Model

Lecture 74 Product May Have Many Reviews

Lecture 75 More About Database Relationships

Lecture 76 Create Indexes on Product Model

Lecture 77 More About Database Indexes

Lecture 78 Create Category Model

Lecture 79 User Model

Lecture 80 Order Model

Lecture 81 Introduce Seeders

Lecture 82 Seeder for Products

Lecture 83 Seeder for Reviews

Lecture 84 Add Reviews Relationship To Products Collection

Lecture 85 Seeder for Users

Lecture 86 Seeder for Orders

Section 5: API for Our MERN Stack E-commerce Application

Lecture 87 Create API Endpoints and Controllers

Lecture 88 Complete First API Endpoint (GET)

Lecture 89 API Endpoint for Saving New Category

Lecture 90 Finish API Endpoint for Saving New Category (POST)

Lecture 91 More About Response Status Codes

Lecture 92 API for Deleting Category (DELETE)

Lecture 93 API Endpoint for Saving Category Attributes

Lecture 94 API Endpoint for Getting Products

Lecture 95 Start Developing Pagination

Lecture 96 Finish Database Query for Pagination

Lecture 97 Sort Products

Lecture 98 Filter Results of Products

Lecture 99 Get Products from Specific Category (search bar)

Lecture 100 Get Products from Specific Category (filtering page)

Lecture 101 Get Products by Attributes

Lecture 102 Query for Searching Products Through Search Box

Lecture 103 Get Product By Id

Lecture 104 Database Query for Bestsellers

Lecture 105 Get Products Data for Admin

Lecture 106 API Endpoint for Deleting the Product by Admin

Lecture 107 Create Product by Admin

Lecture 108 Admin Can Update Product

Lecture 109 Start Developing File Upload

Lecture 110 Validate Images

Lecture 111 Prepare for Final Upload

Lecture 112 Make Final Upload

Lecture 113 Save the Path of Uploaded Image

Lecture 114 API Endpoint for Deleting an Image

Lecture 115 Delete Database Path of Removed Image

Lecture 116 Get Users for Admin

Lecture 117 Register New User

Lecture 118 Hash Password Before Saving To Database

Lecture 119 Create Cookie and Send it with The Response

Lecture 120 Use JsonWebToken for Authentication and Authorization

Lecture 121 Start Developing Login Functionality

Lecture 122 Finish Login Process

Lecture 123 Create Middleware to Check Access to Resource

Lecture 124 Create Middleware to Check Access to Admin Resources

Lecture 125 Update User Profile

Lecture 126 Fetch User Data for User Profile

Lecture 127 Create Review for a Product

Lecture 128 Update Products Collection by Added Review

Lecture 129 Review Product Only Once per User

Lecture 130 Introduce Transactions for Reviews

Lecture 131 Get User Data for Updating in the Admin Panel

Lecture 132 Update User

Lecture 133 Delete User

Lecture 134 API Endpoint for Getting Orders for Regular User

Lecture 135 Get Order Details for Regular User

Lecture 136 Create an Order

Lecture 137 Update an Order To Be Paid

Lecture 138 Update an Order To Be Delivered

Lecture 139 Get All Orders for Admin

Lecture 140 Get Orders for Analysis

Section 6: Connect Frontent with Backend

Lecture 141 Create Scripts To Run Frontend and Backend Much Easier

Lecture 142 Create Console Command for Seeders

Lecture 143 Display Error Messages in The Console

Lecture 144 Connect Frontend With The Backend

Section 7: Local State in React Components

Lecture 145 Divide Users Page to Two Files: Component and Page

Lecture 146 Manage Local State for The React Component

Lecture 147 Use Local State for Storing Users

Lecture 148 Disconnect Database Connection When Leaving The Page

Lecture 149 Show Users On The Page

Lecture 150 Delete User From The List

Lecture 151 Display The List of Products

Lecture 152 Delete Product From The List

Lecture 153 Get Orders for Admin Panel

Lecture 154 Display Orders for Admin Panel

Lecture 155 Display Order Details Page

Lecture 156 API Call For Order Details

Lecture 157 Display Dynamic Data for Order Details Page

Lecture 158 Display Cart Items on Order Details Page

Lecture 159 Mark The Order as Delivered

Lecture 160 Fix Cart Item Component

Section 8: Redux for Global State - Introduction

Lecture 161 Redux Install and Introduction

Lecture 162 Install Redux Devtools Extension

Lecture 163 Organize Redux to Actions, Constants and Reducers

Lecture 164 Read Data From Redux State

Section 9: Login and Registration System & Authorization

Lecture 165 Start Developing Login Page

Lecture 166 Login State Info

Lecture 167 Redirect After Login Process

Lecture 168 Save Logged In User in Redux Global State

Lecture 169 Use Local Storage To Store Initial Redux State

Lecture 170 Finish Login System

Lecture 171 Create Logout Functionality

Lecture 172 Register New User

Lecture 173 Control the Spinner and Messages while Registering New User

Lecture 174 Both Passwords Should Match

Section 10: Developing Pages for E-commerce Application

Lecture 175 User Info in The Header

Lecture 176 Update User Profile

Lecture 177 Info Messages for User Profile Page

Lecture 178 Both Password Should Match

Lecture 179 Fetch User Data for Editing Profile Page

Lecture 180 Update Redux State and Local Storage When Updating the User

Lecture 181 API Call For All Products

Lecture 182 Show Products on The Main Page

Lecture 183 Start Developing Product Details Page

Lecture 184 Continue Product Details Page

Lecture 185 Prepare Handler Function for Adding To The Cart

Lecture 186 Prepare Product Added To Cart For Redux

Lecture 187 Continue Preparing Product Added To Cart For Redux

Lecture 188 Make Final Cart Items Calculations

Lecture 189 Store Cart Items in Local Storage

Lecture 190 Info Messages when Adding To The Cart

Lecture 191 Start Developing Cart Page

Lecture 192 Display Cart Items From The Redux State

Lecture 193 Prepare The Handler for Removing from The Cart

Lecture 194 Finish Removing From Cart

Lecture 195 User Cart Details Page

Lecture 196 Complete Cart Data for User Cart Details Page

Lecture 197 User Info On Cart Details Page

Lecture 198 Disable Button On Cart Details Page

Lecture 199 Set Missing Address Info On Cart Details Page

Lecture 200 Prepare Order Data

Lecture 201 Save Order Data in The Database

Lecture 202 User Order Details Page

Lecture 203 Display User Data On User Order Details Page

Lecture 204 Get Order Data for User Order Details Page

Lecture 205 Set Messages After Placing an Order

Lecture 206 List All Cart Items On User Order Details Page

Lecture 207 Prepare Handler for Placing the Order

Lecture 208 Install PayPal for Order Details Page

Lecture 209 Render PayPal Buttons

Lecture 210 Create PayPal Button Methods

Lecture 211 Complete PayPal Function To Create Order (Payment)

Lecture 212 Continue PayPal Function To Approve Order

Lecture 213 Continue PayPal Function To Approve Order 2

Lecture 214 Start User Orders Page

Lecture 215 Show User Orders

Lecture 216 Create Redux Files for Categories

Lecture 217 Edit Product Page – List Categories

Lecture 218 Edit Product Page – Get Product Data

Lecture 219 Fill Form Fields for Edit Product Page

Lecture 220 Grab All The Forms Fields for Edit Product Page

Lecture 221 Edit Product

Lecture 222 Display Attributes for Edit Product Page

Lecture 223 Get Values For Selected Attribute

Lecture 224 Handle Changing Category on Edit Product Page

Lecture 225 Attributes for Product on Edit Product Page

Lecture 226 Create Wrapper Function for Attributes Table

Lecture 227 Delete Attribute from The Table

Lecture 228 Set Category for Edited Product

Lecture 229 Prevent Submitting the Form When Adding Attribute

Lecture 230 Deactivate Attribute Key Field if Value is Empty

Lecture 231 Finish Attributes Table for Edit Product Page

Everyone who wants to build full stack web applications using MERN Stack,Everyone who wants to add to the portfolio an advanced MERN Stack project