MERN stack complete Blog Application from scratch 2022

Learn, Apply, Build a Blog Project using Redux (Redux Toolkit), NodeJs, Express, MongoDB, React js, Tailwindcss

Language: english

Note: 4.7/5 (72 notes) 2,563 students

Instructor(s): i novotek Academy

Last update: 2022-06-13

What you’ll learn

How to create a complete MERN stack project from scratch to finis
How to implement authentication both in server side and client side
How to block and unblock a user
How to upload images to cloudinary
How to resize image on the server
How to create a complete Blog API
How to send email using sendgrid
How to reset password. Forget password functionality
How to use redux – redux toolkit to manage the application state
How to implement follow and unfollow of a user API
How to implement account verification using token

Requirements

Basic understanding of javascript
Basic understanding of react js
You must have some experience in node js
At least you have created a simple API using node and mogodb
Familiar with redux

Description

Course description:

This course is all about managing the state in react application using the redux toolkit. Each topic included in this course is added incrementally, to make sure that you have a solid foundation of knowledge. You’ll find plenty of discussions added in to help you understand exactly when and where to use

What will you build?

Learn how to create a real-world blog application with a bunch of features
Develop Node Js API from scratch
How to implement react js logic to real-world application
Understand backend authentication
Learn how to upload files to Cloudinary
Learn how to block and unblock a user
Learn how to block a user by the application if the post the user is creating contains sum profane words
Learn how to resize images on the server-side
Learn how to implement forget password functionality
Learn how to implement follow and unfollow a user
Learn how to manage state in react using redux (redux toolkit)
How to implement account verification using a token
Learn how to implement sending Emails using Sendgrid
How to implement user management
Learn how to implement like and dislike of a post

Who this course is for:

Programmers looking to master MERN Stack
Developers who want to move from the traditional way of writing redux application
Engineers who have researched React but have had trouble mastering some concepts

Who this course is for

Any Developer who wants to master how to create MERN Stack projects
Any Developer who wants to master how to create node js API
Any Developer who wants to use redux (Redux toolkit) in their application
Any Developer who wants to develop real world application

Course content

Introduction
- Project Intro
- Must Read
- Environment Setup
- JOIN THE COMMUNITY
User Authentication
- Backend API Features
- Course Path
- Express Server
- Connect to MongoDB
- Environment Variable DOTENV
- MVC architecture explained
- Data Modelling Explained
- User Data Modelling
- User Registration controller Part 1
- User Registration controller Part 2
- Middleware Explained
- Hashing User password using Bcryptjs
- Prevent Duplicate Registration of a User
- Express Routing
- Error Handling
- Not Found Error Handling
- User Login Controller Part 1
- User Login Controller Part 2
- Generate Token for login user -JWT
- Fetch All Users Controller
- Delete User Controller
- Fetch User Details Controller
- Authentication Logic
- User Auth Middleware
- User Profile Controller
- Update User Profile controller
- Update User Password controller
- User Auth Middleware Bug Fixed
User Following and Unfollowing
- User Following Controller Part
- Prevent Duplicate Following a User
- Unfollowing User Controller
User Blocking and Unblocking
- Blocking User
- Unblocking User
Email Sending
- How to send Email using SendGrid
User Account Verification
- User Account Activation Part 1
- User Account Activation Part 2
Forget Password Management
- Forget Password Functionality Part 1
- Forget Password Functionality Part 2
- Forget Password Functionality Part 3
File Upload to Cloudinary
- File Upload – Multer Configuration
- File Upload – Image Resizing
- File upload to Cloudinary
- Upload User Profile Photo
Creating Post API
- Creating Post Model
- Creating Post Controller
- Block user if post contains profane words
- Upload image when creating a post
- Remove saved images from our server after uploaded
- Fetch All Post Controller
- Fetch All Post and populate the user
- Fetch all post created by a user
- Fetch a post and populate the user
- Number of views of a post
- Update Post Controller
- Delete Post Controller
Post Likes and Unlikes
- Post Likes Controller Part 1
- Post Likes Controller Part 2
- Dislike Post Controller
- Populate Dislikes
Post Comment API
- Comment Model
- Create Comment Controller
- Fetch all comments controller
- Fetch a single comment controller
- Update comment Controller
- Delete Comment Controller
Email Messaging
- Email Messaging Model
- Create Email Message Controller
- Prevent Profane words in Email
Post Category
- Create Category Model
- Create Category Controller
- Fetch All Categories Controller
- Fetch Single Category Controller
- Update Category Controller
- Delete Category Controller
Redux Toolkit Frontend – Optional
- What’s Redux toolkit
- Install Redux Toolkit
- Redux Concept
- Create Redux Store – Redux toolkit
- Create Action using createAction – Redux toolkit
- Create Reducer using createReducer
- Dispatch Action using useDispatch
- Create Reducer using Map Notation Method
- Counter Project using – CreateSlice
- Post Project – CreateAsynchThunk
Blog Project – Frontend
- Create React App
- Install Tailwindcss for styling
- 90.Tailwindcss intro
- 91.Home Page Component
- React Router Dom installation
- React Routing
Users Account -Redux Toolkit
- Register Component
- Register User Form using Formik
- Create Redux Store
- User Registration Action
- User Registration Reducer (Slices)
- Dispatch Action To Register User
- Display User Register Loading and Error
- User Register Redirect
- User Login Form Component
- User Login Action Creator
- User Login Reducer – (CreateSlice)
- Dispatch Action to Login User
- User Redirect After Login
- Navbar – React Router Dom
- Display Navbar base on Login User
- Logout User Part 1
- Logout User Part 2
Post Managment – Redux-Toolkit
- Create Post Category Component
- Post Category Action Creator – CreateAction
- Post Category Reducer
- Post Category Dispatch Action
- Fetch All categories
- Date Formatter and Loading Component
- Delete and Update Category Action
- Fetch Category Details Action
- Delete and Update Category
- Post creating redirect
- How to protect Route in React
- Create Post Form Component
- Create Post action and reducer
- Dispatch Action to Create Post
- Post Category Dropdown Select
- Create Post With Image
- Display Post Creating Errors and Redirect
- Post List Component
- Fetch All Posts
- Fetch All categories
- Filter Post By Category
- Posts Like Action Creator
- Dispatch Action To Like Post
- Dispatch Action To DisLike Post
- Post Details Component
- Fetch Post Details
- Update Post Component
- Update Post Action And Reducer
- Dispatch Action To Update Post
- Redirect User After Updating Post
- Category and Post Error Fixed
- Delete Post And Redirect
- Only Post Owner can Delete His Post
- Post Comment Form
- Add Comment To Post
- Populate Post Comment
- Fetch All Comments Part 1
- Fetch All Comments Part 2
- Delete Comment
- Update Comment
- Display User Profile Image
User Profile
- User Profile Component
- User Profile Action And Reducer
- User Profile Part 1
- Upload Profile Photo Component
- Upload User Profile Photo
- Update User Profile Form
- Update User Profile Part 1
- Update User Profile Redirect
User Follow and UnFollow
- User Follow and Following Part 1
- User unFollow and UnFollowing Part 1
- User unFollow bug fixed
Sending Email
- Email Sending Form
- Sending Email Action And Reducer
- Sending Email Redirect
Account Verification
- Account Verification Component
- Account Verification API
- Account Verification Send Token
- Post Category Bug Fixed
- Account Verification Loading
User Profile Management Continue
- Account Verification
- Hide Follow Button Programatically
- Redirect To Profile Page
- Who View My Profile API
- Display Who View My Profile
- Implement User Account Type
- Users List Component
- Fetch All Users Actions
- Dispatch Action To Fetch All Users
- Block and Unblock User Part 1
- Block and Unblock User Part 2
- Block and Unblock User Part 3
Application Improvement
- Application Improvement
- Display Comment Errors
- Prevent User From Login if Blocked
- Starter Account Can Create Two Posts
User Password Management
- Update User Password Form
- Update User Password Action
- Dispatch Action To Update Password
- Password Reset Part 1
- Password Reset Part 2
- Password Reset Part 3
Deployment
- Backend Deployment
- Frontend Deployment