MERN Stack Real-Time Blogger App - React ,Node ,Socket IO

Create a React app named client in the shape blocks folder, start the development server on localhost:3000, and remove default content to prepare the share blocks front end.

Learn to set up Tailwind CSS in a React app, configure PostCSS and Tailwind, implement React Router DOM routes, and establish a folder structure with pages, plus essential npm modules.

Build a simple, centered registration screen for the mern stack real-time blogger app with name, email, and password fields, theme color, validation, and a login link.

Replicate the registration page to build the login screen, require only email and password, and create a reusable button component with a disabled state tied to input validation.

Set up a node and express server, install mongoose, bcrypt, jsonwebtoken, nodemon, and express, create server.js as the backend entry point, and prepare routes, models, middleware, and config for MongoDB.

Connect your Node.js backend to MongoDB using Mongoose and MongoDB Atlas. Configure the connection, handle success or failure, and resolve strict query warnings for a ready backend.

Develops the user model with mongoose and implements registration and login apis, including password hashing and jwt token generation for the MERN stack blogger app.

Integrate user authentication by wiring the frontend login and registration forms to backend user APIs using a centralized Axios instance and a proxy, enabling token-based authorization for protected endpoints.

Demonstrates using React hot toast to show success and error messages during registration and login, and navigates to the login page after successful actions.

This lecture covers building a protected route that uses a token in local storage to fetch and display the logged-in user's name and email, and redirects unauthenticated users to login.

Learn to implement authentication middleware that validates JWT tokens from the authorization header, attaches the user ID to requests, and secures routes in a MERN real-time blog app.

Set up Redux Toolkit state management to implement a loading indicator by creating a loaders slice with show and hide actions, configuring the store, and wiring it to the app.

Show and hide a full-screen loader using redux state, connect a loader component to the loading flag, and dispatch show and hide loading during login and registration.

Build the default layout for the logged-in interface with a header showing the project title, user name, and notifications, and use redux toolkit to manage the user and protected routes.

Create a client-side add blog form for the MERN stack blogger app using a React text editor to capture title, category, description, content, convert to HTML, and store in MongoDB.

Build a rich text editor with Draft.js in a React app, configure editor state and toolbar styles, and convert content to raw or HTML blocks for storage in MongoDB.

Create and expose blog APIs by defining the blog model and routes for add blog, get all blogs, and get blog by id.

Fetch and display blocks on the home screen using the get all blocks API, render a two-block grid, and navigate to a block’s detail with HTML content and user info.

Create the blog description page by fetching a block by id and rendering its title, description, and content using draft-js to HTML and a react html parser.

Master edit and delete blog features in a MERN real-time blogger app using React and Node. Learn prepopulating editor content, updating by id, deleting, and sorting posts by creation date.