Build WhatsApp clone w video calls Mern stack socket io

Create a basic express app by installing express, configuring module type and dotenv for port management, exporting the app, and adding a simple get route to test with postman.

Push your WhatsApp clone code to GitHub by initializing git, setting up a .gitignore for env and node_modules, making commits, linking a remote, and pushing to main.

Master implementing middlewares in a mern stack express app with morgan, helmet, json and urlencoded parsing. Explore mongo sanitize, cookie parser, compression, file upload, cors, and a hands-on git workflow.

Learn to gracefully close a mern stack server by handling uncaughtException and unhandledRejection, logging errors, and using a centralized error handler and a SIGTERM listener for graceful shutdown.

Set up react router dom in a react app by creating login, register, and home pages and mapping them to routes with a browser router and paths.

Set up a Redux Toolkit store, create a user slice, and learn how to dispatch actions, including logout, with Redux Persist to save data across refreshes.

Register a user by validating data, creating a user in the database via a service, generating access and refresh tokens, storing the refresh token in cookies, and returning user data.

Hash passwords with bcrypt in the user model using a pre save hook, generating a salt of 12 rounds, and store the hashed password before saving to the database.

Generate access and refresh tokens using Json web tokens to secure login, identify users, and store the refresh token in http-only cookies on the server for renewed authentication.

Learn login and logout functions by implementing a login route that handles email and password, validates with bcrypt, issues access and refresh tokens, and clears cookies on logout.

Explore how to generate an access token from a refresh token by verifying and decoding it to obtain the user id, finding the user, and issuing an access token.

Implement protected routes in a mern stack app by checking the user token and redirecting unauthenticated users to login, while blocking access to login or register when authenticated.

Create a messages backend by modeling messages with Mongoose, building routes for sending and retrieving messages, and wiring in auth protection for a MERN chat app.

Develop send message function in a mern stack whatsapp clone, validating inputs, creating and populating the message with sender and conversation data, and updating the latest message in the conversation.

Create a sidebar notifications component with an activate toggle, using a flex layout, left and right sections, icons, and dark mode styling to get notified of new messages.

Implement a toggleable sidebar header menu opened by the three dots, including logout, styled as a right dropdown. Use a redux slice to reset state on logout and protect routes.

Create the WhatsApp home component that shows a home view when no active conversation exists and displays messages for the active conversation selected from the chat slice, with tests.

Update conversations after sending messages by adding the picture to the message, updating the latest message, filtering out empty chats, and keeping the active chat visible.

Organize a chat attachment menu using a dedicated attachments component with icons for images, contact, documents, camera, stickers, and photos; manage show/hide state to close other panels.

Establish a real-time, secure bridge between front end and back end with socket.io, register users, and enable real-time messaging, online status, and typing indicators.

Learn to set up socket.io connections, register user presence, join conversations and rooms, and emit real-time messages in a MERN chat app.

Implement realtime messaging in a Mern stack chat app with socket.io, sending full message payloads and joining conversations, while fixing a bug that showed the wrong name and picture.

Implement typing indicators in a mern stack chat app using socket.io, emitting typing and stop typing signals per conversation, with debounced timing and front-end display.