MERN Stack Project Course 2022 Build Fullstack React App

MERN Stack Project Course 2022 Build Fullstack React App

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 & Testing Library & Postman/Insomnia
Understand Redux With Real Life Scenarios
Create Real Time Chat and Chart
Deploy to Heroku/Render
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 operationsWe will test our app using Jest & Testing LibrarySome of the e-commerce app features:shopping cartlogin, registerPayPal paymentupload images to Cloudinary and to local disksearching, sorting, filtering, pagination of product listmultilevel categoriesbestsellers carouselstar rating system and reviewsreal time sales charts using SocketIOchat using SocketIOdeploy application to Heroku & RenderReact 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 Info about next video

Lecture 15 Create User Chat Component

Lecture 16 Create The Header Using React Bootstrap

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

Lecture 18 Customize Header Component

Lecture 19 Style Footer Component

Lecture 20 Create Carousel and Card Components using React Bootstrap

Lecture 21 Customize the Home Page

Lecture 22 Chat Popup – Blue Circle With Icons

Lecture 23 Chat Popup – Create Header

Lecture 24 Chat Popup – Message Field and Submit Button

Lecture 25 Chat Popup – Example Chat History

Lecture 26 Prepare Product List Page

Lecture 27 Create HTML for Star Rating System

Lecture 28 Improve HTML for Sorting and Filtering Products

Lecture 29 Improve Component for Category Filters

Lecture 30 Improve Attributes Section for Filtering Options

Lecture 31 Improve Component for Product List

Lecture 32 Improve Pagination Component

Lecture 33 Create Scroll To Top Functionality

Lecture 34 Prepare Product Details Page

Lecture 35 Continue Developing Product Details Page

Lecture 36 Improve Message Component

Lecture 37 Update Product Description Page

Lecture 38 Improve Reviews Section

Lecture 39 Create Mouse Hover Effect on Images

Lecture 40 Prepare Cart Page

Lecture 41 Finish Cart Page

Lecture 42 Prepare Register Page

Lecture 43 Continue Developing Register Page

Lecture 44 Finish Template for Register Page

Lecture 45 Prepare Login Page

Lecture 46 Prepare User Profile Page

Lecture 47 Prepare User Orders Page

Lecture 48 Finish User Orders Page (template for now)

Lecture 49 The Page for User Order Details

Lecture 50 Finish User Order Details Page

Lecture 51 Prepare the Page for User Cart Details

Lecture 52 Prepare the Page for Admin Orders

Lecture 53 Create Component for Admin Links

Lecture 54 Prepare Admin Order Details Page

Lecture 55 Create Product List Page for Admin

Lecture 56 Prepare the Page for Creating The Product by Admin

Lecture 57 Finish the Page for Creating The Product by Admin

Lecture 58 Complete Edit Product Page for Administrator

Lecture 59 Create Users Page for Admin

Lecture 60 Create Edit Users Page for Admin

Lecture 61 Create Chats Page for Admin

Lecture 62 Create Chat Component for Admin

Lecture 63 Prepare Analytics Page for Admin

Lecture 64 Finish Analytics Page for Admin

Section 3: Node & Express as a Backend

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

Lecture 66 Express Middleware

Lecture 67 Prepare for Creating API

Lecture 68 Introduce Controllers in Express

Lecture 69 Handle Errors in Express

Lecture 70 Custom Middleware to Handle Errors

Section 4: MongoDB & Mongoose

Lecture 71 MongoDB Introduction and Configuration

Lecture 72 Mongoose Introduction – Connect with MongoDB

Lecture 73 First MongoDB Database Operation

Lecture 74 Finish Product Model

Lecture 75 Product May Have Many Reviews

Lecture 76 More About Database Relationships

Lecture 77 Create Indexes on Product Model

Lecture 78 More About Database Indexes

Lecture 79 Create Category Model

Lecture 80 User Model

Lecture 81 Order Model

Lecture 82 Introduce Seeders

Lecture 83 Seeder for Products

Lecture 84 Seeder for Reviews

Lecture 85 Add Reviews Relationship To Products Collection

Lecture 86 Seeder for Users

Lecture 87 Seeder for Orders

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

Lecture 88 Create API Endpoints and Controllers

Lecture 89 Complete First API Endpoint (GET)

Lecture 90 API Endpoint for Saving New Category

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

Lecture 92 More About Response Status Codes

Lecture 93 API for Deleting Category (DELETE)

Lecture 94 API Endpoint for Saving Category Attributes

Lecture 95 API Endpoint for Getting Products

Lecture 96 Start Developing Pagination

Lecture 97 Finish Database Query for Pagination

Lecture 98 Sort Products

Lecture 99 Filter Results of Products

Lecture 100 Get Products from Specific Category (search bar)

Lecture 101 Get Products from Specific Category (filtering page)

Lecture 102 Get Products by Attributes

Lecture 103 Query for Searching Products Through Search Box

Lecture 104 Get Product By Id

Lecture 105 Database Query for Bestsellers

Lecture 106 Get Products Data for Admin

Lecture 107 API Endpoint for Deleting the Product by Admin

Lecture 108 Create Product by Admin

Lecture 109 Admin Can Update Product

Lecture 110 Start Developing File Upload

Lecture 111 Validate Images

Lecture 112 Prepare for Final Upload

Lecture 113 Make Final Upload

Lecture 114 Save the Path of Uploaded Image

Lecture 115 API Endpoint for Deleting an Image

Lecture 116 Delete Database Path of Removed Image

Lecture 117 Get Users for Admin

Lecture 118 Register New User

Lecture 119 Hash Password Before Saving To Database

Lecture 120 Create Cookie and Send it with The Response

Lecture 121 Use JsonWebToken for Authentication and Authorization

Lecture 122 Start Developing Login Functionality

Lecture 123 Finish Login Process

Lecture 124 Create Middleware to Check Access to Resource

Lecture 125 Create Middleware to Check Access to Admin Resources

Lecture 126 Update User Profile

Lecture 127 Fetch User Data for User Profile

Lecture 128 Create Review for a Product

Lecture 129 Update Products Collection by Added Review

Lecture 130 Review Product Only Once per User

Lecture 131 Introduce Transactions for Reviews

Lecture 132 Get User Data for Updating in the Admin Panel

Lecture 133 Update User

Lecture 134 Delete User

Lecture 135 API Endpoint for Getting Orders for Regular User

Lecture 136 Get Order Details for Regular User

Lecture 137 Create an Order

Lecture 138 Update an Order To Be Paid

Lecture 139 Update an Order To Be Delivered

Lecture 140 Get All Orders for Admin

Lecture 141 Get Orders for Analysis

Section 6: Connect Frontent with Backend

Lecture 142 Create Scripts To Run Frontend and Backend Much Easier

Lecture 143 Create Console Command for Seeders

Lecture 144 Display Error Messages in The Console

Lecture 145 Connect Frontend With The Backend

Section 7: Local State in React Components

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

Lecture 147 Manage Local State for The React Component

Lecture 148 Use Local State for Storing Users

Lecture 149 Disconnect Database Connection When Leaving The Page

Lecture 150 Show Users On The Page

Lecture 151 Delete User From The List

Lecture 152 Display The List of Products

Lecture 153 Delete Product From The List

Lecture 154 Get Orders for Admin Panel

Lecture 155 Display Orders for Admin Panel

Lecture 156 Display Order Details Page

Lecture 157 API Call For Order Details

Lecture 158 Display Dynamic Data for Order Details Page

Lecture 159 Display Cart Items on Order Details Page

Lecture 160 Mark The Order as Delivered

Lecture 161 Fix Cart Item Component

Section 8: Redux for Global State – Introduction

Lecture 162 Redux Install and Introduction

Lecture 163 Install Redux Devtools Extension

Lecture 164 Organize Redux to Actions, Constants and Reducers

Lecture 165 Read Data From Redux State

Section 9: Login and Registration System & Authorization

Lecture 166 Start Developing Login Page

Lecture 167 Login State Info

Lecture 168 Redirect After Login Process

Lecture 169 Save Logged In User in Redux Global State

Lecture 170 Use Local Storage To Store Initial Redux State

Lecture 171 Finish Login System

Lecture 172 Create Logout Functionality

Lecture 173 Register New User

Lecture 174 Control the Spinner and Messages while Registering New User

Lecture 175 Both Passwords Should Match

Section 10: Developing Pages for MERN Stack E-commerce Application

Lecture 176 User Info in The Header

Lecture 177 Update User Profile

Lecture 178 Info Messages for User Profile Page

Lecture 179 Both Password Should Match

Lecture 180 Fetch User Data for Editing Profile Page

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

Lecture 182 API Call For All Products

Lecture 183 Show Products on The Main Page

Lecture 184 Start Developing Product Details Page

Lecture 185 Continue Product Details Page

Lecture 186 Prepare Handler Function for Adding To The Cart

Lecture 187 Prepare Product Added To Cart For Redux

Lecture 188 Continue Preparing Product Added To Cart For Redux

Lecture 189 Make Final Cart Items Calculations

Lecture 190 Store Cart Items in Local Storage

Lecture 191 Info Messages when Adding To The Cart

Lecture 192 Start Developing Cart Page

Lecture 193 Display Cart Items From The Redux State

Lecture 194 Prepare The Handler for Removing from The Cart

Lecture 195 Finish Removing From Cart

Lecture 196 User Cart Details Page

Lecture 197 Complete Cart Data for User Cart Details Page

Lecture 198 User Info On Cart Details Page

Lecture 199 Disable Button On Cart Details Page

Lecture 200 Set Missing Address Info On Cart Details Page

Lecture 201 Prepare Order Data

Lecture 202 Save Order Data in The Database

Lecture 203 User Order Details Page

Lecture 204 Display User Data On User Order Details Page

Lecture 205 Get Order Data for User Order Details Page

Lecture 206 Set Messages After Placing an Order

Lecture 207 List All Cart Items On User Order Details Page

Lecture 208 Prepare Handler for Placing the Order

Lecture 209 Install PayPal for Order Details Page

Lecture 210 Render PayPal Buttons

Lecture 211 Create PayPal Button Methods

Lecture 212 Complete PayPal Function To Create Order (Payment)

Lecture 213 Continue PayPal Function To Approve Order

Lecture 214 Continue PayPal Function To Approve Order 2

Lecture 215 Start User Orders Page

Lecture 216 Show User Orders

Lecture 217 Create Redux Files for Categories

Lecture 218 Edit Product Page – List Categories

Lecture 219 Edit Product Page – Get Product Data

Lecture 220 Fill Form Fields for Edit Product Page

Lecture 221 Grab All The Forms Fields for Edit Product Page

Lecture 222 Edit Product

Lecture 223 Display Attributes for Edit Product Page

Lecture 224 Get Values For Selected Attribute

Lecture 225 Handle Changing Category on Edit Product Page

Lecture 226 Attributes for Product on Edit Product Page

Lecture 227 Create Wrapper Function for Attributes Table

Lecture 228 Delete Attribute from The Table

Lecture 229 Set Category for Edited Product

Lecture 230 Prevent Submitting the Form When Adding Attribute

Lecture 231 Deactivate Attribute Key Field if Value is Empty

Lecture 232 Finish Attributes Table for Edit Product Page

Lecture 233 Save Attribute to Categories Collection

Lecture 234 Delete Image Path On Edit Product Page

Lecture 235 Upload Images

Lecture 236 Create Product Page – Start

Lecture 237 API Request For Creating a Product

Lecture 238 Create Product Page – API Request

Lecture 239 Upload Images To Cloudinary

Lecture 240 Save Cloudinary Image Path in the Database

Lecture 241 Delete Image Path from Cloudinary

Lecture 242 Code Refactoring

Lecture 243 Create New Category

Lecture 244 Api Call for New Category

Lecture 245 Delete Category

Lecture 246 Code Refactoring

Lecture 247 Continue Code Refactoring

Lecture 248 Another Code Refactoring

Lecture 249 Delete Attribute for Create Product Page

Lecture 250 Save Attribute to Categories Document

Lecture 251 Finish Create Product Page

Lecture 252 Start Edit User Page

Lecture 253 Get User Data for Editing

Lecture 254 Update The User

Lecture 255 Get Product Details

Lecture 256 Get Images on Product Details Page

Lecture 257 Get Reviews on Product Details Page

Lecture 258 Prepare The Handler for Sending Reviews

Lecture 259 Write Product Review

Lecture 260 Move Scrollbar Down

Lecture 261 Products List Page

Lecture 262 Modify Home Page

Lecture 263 Attributes for Chosen Category

Lecture 264 Collect Chosen Product Attributes

Lecture 265 Array With Chosen Attributes

Lecture 266 Rest Filters Button

Lecture 267 Price Filter

Lecture 268 Rating Filter

Lecture 269 Categories Filter

Lecture 270 Collect id Numbers of Selected Categories

Lecture 271 Make Non Related Categories Disabled

Lecture 272 Fetch Attributes for Checked Category

Lecture 273 Control Visibility of Categories Section on Filter Bar

Lecture 274 Prepare Sort Options

Lecture 275 Prepare Pagination

Lecture 276 Continue Pagination (frontend part only)

Lecture 277 Pagination – Backend Part

Lecture 278 Filter Products

Lecture 279 Categories in The Header

Lecture 280 Prepare The Handler for Search Form

Lecture 281 Navigate To Correct Routes While Searching Products

Lecture 282 Bestsellers – Make API Request

Lecture 283 Finish Bestsellers

Lecture 284 Dependency Injection & Presentational Componnts

Section 11: Analytics System – Real Time Charts using SocketIO for MERN Stack Application

Lecture 285 Analytics Page

Lecture 286 Fetch Orders Data for Two Dates

Lecture 287 Prepare JavaScript Object for Chart

Lecture 288 Draw Charts

Lecture 289 Install SocketIO

Lecture 290 Preparing The Handler For Listening Event From Socket

Lecture 291 Finish Sales Analytics Page

Section 12: Chat Using SocketIO for MERN Stack Application

Lecture 292 Send Socket Message From Client To Server

Lecture 293 Make User Chat Message Visible in Chat Box

Lecture 294 Admin Receives Chat Message

Lecture 295 Redux For Chat

Lecture 296 Chat Box For Admin

Lecture 297 Admin Can Close Chatbox

Lecture 298 Display Chat Message from Client

Lecture 299 Display Text Written by Admin in the Admin Chatbox

Lecture 300 Improve ChatRoom ScrollBar

Lecture 301 Send Message From Admin To Client

Lecture 302 Red Circle As Information that New Chat Message Arrives

Lecture 303 For Admin – Red Circle As Information that New Chat Message Arrives

Lecture 304 Sound As Information that New Chat Message Arrives

Lecture 305 For Admin – Sound As Information that New Chat Message Arrives

Lecture 306 Collect Admins In Socket Server

Lecture 307 One To One Communication

Lecture 308 Client Disconnected from Chat

Lecture 309 Client Disconnected from Chat – part 2

Lecture 310 Finish Chat Functionality

Section 13: Deploy MERN Stack Application to Live Server

Lecture 311 Install Helmet SEO Package

Lecture 312 Install Helmet Package for Security

Lecture 313 About Heroku Free Services

Lecture 314 Prepare for Deploying To Heroku

Lecture 315 Deploy To Heroku

Lecture 316 Deploy To Render.com

Section 14: Test MERN Stack App using Jest Framework

Lecture 317 Create Example Jest Tests

Lecture 318 Test Example React Component using Jest and Testing Library

Lecture 319 Test HomePage Component

Lecture 320 Mock Redux Functions

Lecture 321 Test Login Page Component

Lecture 322 Test Home Page using jest.mock()

Lecture 323 Use Jest for The Backend

Lecture 324 Create Snapshot Test

Lecture 325 Code Coverage

Lecture 326 Full source code of the app

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

Course Information:

Udemy | English | 30h 39m | 15.98 GB
Created by: Robert Apollo

You Can See More Courses in the Developer >> Greetings from CourseDown.com