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


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

What you will 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

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


Get Instant Notification of New Courses on our Telegram channel.


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
English
language

Content

Introduction

Project Intro
Must Read
Environment Setup

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 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 and UnFollowing Part 2

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 – Coming Soon

Frontend Deployment
Backend Deployment