MERN Stack: All You Need to Know with Practical Project

Learn MERN stack by building real-world applications with Node, Express, MongoDB, React & integrating RESTful APIs

What you will learn

Master the entire modern full-stack: Node, Express, React, MongoDB and Mongoose

Learn about the Nodejs built-in core library

Becoming proficient in Expressjs, one of the most widely used web frameworks for Nodejs

Create Express web servers and APIs

Becoming proficient in developing RESTful APIs with Nodejs

Store data with Mongoose and MongoDB

Build a full-stack application using Nodejs and EJS template engine

Becoming proficient in integrating RESTful APIs with React

Master the entire modern frontend stack: React, APIs integration, React hooks

Learn React beautiful mechanism such as Context API, Props drilling, Render props

Authentication, Authorization including password reset

Avoid useless coding – Learn what’s important

Description

Do you want to build fast and powerful full-stack applications with JavaScript? Would you like to become a more complete and in-demand developer?

Then MENR stack is the hottest technology for you to learn right now, and you came to the right place to do it!

This is a project based course where we build an extensive, in-depth full-stack application. We will start from scratch and end up with a professional project. We will dive deep into Node, Express, MongoDB, Mongoose, React, React hooks, integrating RESTful APIs . Here is some of what you will learn in this course and project:

‘;
}});

How Nodejs work
Nodejs built-in core library
Stream and Buffer
Express Framework
Routing & Controller
Express middleware
Custom Error Handling
EJS template engine
Upload file to S3 bucket
Sending Email
Authentication With JWT
Password hashing
MongoDB database
MongoDB Atlas & Compass
Mongoose ODM
Models & Relationships
Multi user role
Authentication and Authorization
Advanced Query (pagination, filter, searching etc)
React core functionality
How React works
Virtual DOM
Rendering JSX element
Component, State & Props
React Form
Controlled form vs Uncontrolled form
Rendering list & key
Props drilling
Context API
Render Props
React hooks
Custom hooks
Handling CSS with React
React routing
Authentication and Protected route
Recover password by email
Verify user email
Integrating RESTful APIs
HTTP Essentials
Postman Client

Web development is evolving, in the past, server-side rendering handled all views and templates, but with the emergence of frontend frameworks like React, Angular, and Vue, projects are now divided into backend and frontend components. The backend manages database interactions and serves JSON, while the frontend fetches data and creates the user interface. This course focuses on the entire full-stack aspect, enabling you to construct robust APIs and integrating RESTful APIs with React project.

Our curriculum goes beyond typical Nodejs, Express and React tutorials, as we cover advanced topics like authentication, multi-user roles, permissions, password reset mechanisms, sending email integration, integrating RESTful APIs with React and many more. By the end of this course, you’ll have a deep understanding of what it takes to be a proficient full-stack engineer.

Introduction

Course Overview

What is Nodejs

How Nodejs Work

Install Nodejs on Windows OS

Install Nodejs on Mac OS

Install Nodejs on Linux OS

Module and Global Object

How to Run Nodejs Code

Global Object

What is Module

How to Do Export and Import in Nodejs

What is Module Wrapper Function

Core Module in Nodejs

Core Module Introduction

Path Module

OS Module

FS Module Part 1

FS Module Part 2

Event Module Part 1

Event Module Part 2

HTTP Module

Steam and Buffer Introduction

Read Stream

Write Stream

Stream with Pipe

Express Framework

Express Framework Introduction

Basic Project Setup

First Express Server

Nodemon Module

Request Method

Take a Look About Postman

Parse Incoming Request Body

Params Object

Query String

Sub Route

Request Object Introduction

Request Object Part 2

Response Object Introduction

Response Method

View Engine and Html Response

Response Format

Http Response Status Code

What is Middleware

How to Use Middleware

Error Handling Middleware

Error Handling

MongoDb and Mongoose

Database Introduction

MongoDB Install on Windows OS

MongoDB Install on Mac OS

MongoDB Install on Linux OS

Establish Database Connection

Add to Database Part 1

Add to Database Part 2

Find Single Document from Database

Find Multiple Document from Database

Update Single Document

Update Multiple Document

Delete Single Document

Delete Multiple Document

What is ODM

Database Connection Using Mongoose

Schema Define

Add Single Document Using Mongoose

Add Multiple Document Using Mongoose

Update Single Document Using Mongoose

Update Multiple Document Using Mongoose

Find Single Document Using Mongoose

Find Multiple Document Using Mongoose

Delete Single Document Using Mongoose

Delete Multiple Document Using Mongoose

Take a Look MongoDB Compass GUI Tool

Project Todo

Project Overview

Initialize Project

Add Project to Github

Connect with Database

List Todo Page

Add Todo Page

Update Todo Page

Delete Todo Page

Adding External CSS File

All Link Clickable

EJS Partials Concept

Page Dynamic Title

Todo Model Schema

Add Todo

List Todo

Date Format

Code Refactoring Part 1

Code Refactoring Part 2

Code Refactoring Part 3

Code Refactoring Part 4

Code Refactoring Part 5

Environment Variable

Test After Refactor

Update Todo

Delete Todo

Test App

Clone This Repository

Project Blog RESTful APIs

Project Requirement Analysis

What is RESTful API

Initial Project Setup

Connect Database

Cloud Database

User Model

Signup Route

Test Signup Route

Test Database in the Browser

Morgan Module

Response Format

Error Handling Middleware

Test Error Handle Middleware

Not Found Route

Signup Validation Part 1

Signup Validation Part 2

Signup Validation Part 3

Hashed Password

Signin Route

Generate Token

Email Verification Code

Send Verification Email

Add Environment Variable

User Verification

Send Forgot Password Code

Recover Password

Authenticate Middleware

Change Password

Update Profile

Category Model

Add Category

Is Admin Middleware

Update Category

Delete Category

Search Categories

Categories Pagination

Detail Category

File Module Introduction

Upload File

Filename

File Filter

Upload Multiple File

AWS S3 Bucket Setup

File Model

Multer Memory Storage

Upload File to S3

Add File to Database

Signed Url

Delete File

Update Profile Picture

Current User

Post Model

Add Post

Update Post

Delete Post

Post List

Detail Post

Filter Post by Category

React Introduction

What is React

What is Virtual DOM

Setup a React Project

JSX Element and Rendering JSX Element

What is JSX Element

JSX More Detail

Rendering JSX Element

Component and Props

What is Component

What is Props

Export and Import Component

Root Component

Children Property

Class Based Component

State and Life Cycle Method

What is State

More About State

Component Did Mount

Update State

Component will Unmount

State in Functional Component

Event Handler

Passing Parameter to Event Handler

Conditional Rendering List and Key

What is Conditional Rendering

Conditional Rendering More Detail

List

List Key Props

Counter App

React Form

Controlled Form vs Uncontrolled Form

Input Element

Textarea Input Element

Select Element

Checkbox Input Element

Radio Input Element

Submit Input

Registration Form

Higher Order Component

What is Higher Order Component

How to Create Higher Order Component

How to Use Higher Order Component

Render Props Pattern

What is Render Props

Render Props Example

Render Props Variation

Context API

Props Drilling

What is Context API

Create Custom Context

How to Use Context

Built in Context

useContext Hook

React Hook

React Hook Introduction

What is useEffect Hook

Timer Example

Cleanup Function

Fetch Data from API Request

React Memo and useCallback Hook

useMemo Hook

useRef Hook

useReducer Hook

Complex Counter

Fetch Post List Example

Fetch Post List by useReducer Hook

Custom Hook

React CSS

React Stylesheet

CSS Style in Html

Inline CSS

CSS Module

Dynamic CSS

React Router

What is React Router

Route Configuring

Nav Link

Active Link

Navigate Programmatically

Not Found Route

Dynamic Route

Url Params

Search Params

Nested Route

Relative Link

Source Code

React Blog Project

Project Requirement Analysis

Initiating React App

Project Layout and Routing

Signup Form

Signup Form Validation

Signup API Integration

Cors Middleware

Base Url

Toast Message

Signin API Integration

Store Information to Local Storage

Auth Context

Logout Functionality

Category Module All Pages