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.

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.

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.

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.

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.