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

Set up the front end of the share chart app by creating a React app named client, running it locally, and removing defaults ahead of Tailwind configuration.

Install and configure Tailwind CSS in a React app with npm, add postcss.config.js and tailwind.config.js, and apply Tailwind directives in the project.

Install required npm modules and define a folder structure with pages, components, Redux, and styles; set up React Router DOM routes for home, login, and register.

Design the registration screen for a MERN real-time chat app with login and registration forms, using custom CSS, Tailwind primary color, centered layout, inputs with placeholders, and Montserrat typography.

Develop the login and registration screens for the MERN stack real time chat app using React Router DOM links, onClick handlers, and email and password fields.

Set up backend by creating a server folder, initializing npm, installing express, mongoose, and jsonwebtoken, and building a server entry point that runs on port 5000, preparing for MongoDB setup.

Connect Node.js with MongoDB Atlas by creating a database and users collection, obtaining the connection URL, storing it in a .env file, and configuring Mongoose to establish a connection.

Build secure backend user apis for a mern stack chat app by creating a mongoose user model, hashing passwords with bcrypt, and issuing jwt on login.

Learn to integrate login and registration APIs in a MERN app by wiring a frontend to a backend, using a shared axios instance, token storage, and toasts for feedback.

Learn how to implement authorization in a MERN real-time chat app, building a get current user API, validating tokens with a middleware, and protecting all routes except login and registration.

Complete authorization in a MERN stack real-time chat app by implementing a protected route that validates the token on refresh, calls get current user, and redirects to login when needed.

Implement Redux toolkit state management by creating a loader slice to show and hide loading. Enable global loader access and token-based navigation to login.

Implement a loader overlay using redux state, showing a tailwind spinner during login and registration API calls, with show and hide actions and centralized API handling for stateful routes.

Design the home page layout for the mern stack real-time chat app, implementing a header with a logo and user info, and preparing the redux toolkit user slice.

Explore implementing a search users feature in a MERN real-time chat app: home page with a search bar lists or hides users and opens or creates a chat on selection.

Display and filter the users list in a MERN chat app by fetching all users, filtering by a search key, and rendering profile pictures or initials.

design chat APIs in a mern stack by building chart and message models, and setting up routes to create charts and fetch user chats with last message and unread counts.

Learn to create charts in a MERN real-time chat app by fetching the current user, all users, and existing charts, then create a chart with selected member IDs via API.

Design the chart area UI with three sections: recipient user, chart messages, and chart input, populate user data, enable search and selection highlighting, and refine chart filtering logic.

Continue styling the chat area by rendering a header with the selected recipient, their online status, and profile pic, then implement a custom input and send button for message delivery.

Learn to implement sending messages in a MERN real-time chat app by wiring the UI to post new messages, update the chart's last message, and increment unread counts.

Display chat messages by chart id, aligning sent messages to the right and received to the left, with a scrollable area and moment-formatted timestamps.

Display the last message in a selected chat, align it by sender (right for you, left for others), show the time, and manage read/unread status.