MERN Stack: All You Need to Know with Practical Project

  • Post category:StudyBullet-17
  • Reading time:20 mins read

All You Need to Know MERN Stack 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:


Get Instant Notification of New Courses on our Telegram channel.


  • 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.

English
language

Content

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

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
Cookies
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
Add Category
Add Token to Request Headers
Category List
Category List Pagination
Search Category
Update Category
Delete Confirmation Modal
Delete Category
Post Module All Pages
Add New Post
Upload File
Post List
Post Detail
Post Update
Post Delete
Home Page
Update Profile
Change Password
Verify User
Multi User Role
Recover Password
Wrapup

What Next

What Next
Enroll for Free

💠 Follow this Video to Get Free Courses on Every Needed Topics! 💠

Tags: ,