Build WhatsApp clone w video calls Mern stack socket io

Build a backend from zero with a Node.js and Express app, add nodemon for automatic restarts, organize code under src (configs, controllers, routes, models, services), and push to GitHub.

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.

Learn to configure an express application with middleware, distinguish development and production using cross-env, and implement a reliable dev workflow with yarn dev and nodemon.

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.

Replace console.log with a custom winston logger for production-ready apps, using left/right log formatting. Ensure graceful shutdown on sigterm, close database connections, and properly handle http errors.

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.

Learn to implement HTTP errors in Express middleware to return JSON with status and message for 400, 404, 409, and 500 errors.

Set up a modular express router with organized route files, implement auth routes, controllers, and versioned api routes, then trim incoming requests with the trim-requests middleware.

Create a MongoDB Atlas cluster and connect your Express application to a hosted cloud database. Handle connection errors and enable debugging during development using the Atlas URL and WhatsApp database.

Connect to MongoDB with Mongoose using the database URL from process.env, configure options, log a successful connection, handle errors, and enable debugging in development.

Create a React app front end for WhatsApp clone using yarn, add an SVG icon set, configure index and public files, and push to GitHub with back-end and front-end repos.

Set up tailwind css in a react app by installing as a dev dependency, generating tailwind.config.js, configuring content paths, and applying utilities for colors, typography, dark mode, and custom classes.

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.

Learn to persist only the user data on refresh using redux persist with a custom transform filter, choosing storage type and handling serializable middleware for clean rehydration.

Create a user model for a WhatsApp clone backend using a mongoose schema in MongoDB, defining name, email, phone, password, and a default profile picture with validator.

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.

Explain how auth middleware protects endpoints by reading the access token from the authorization header, verifying it with jwt, and attaching the user payload to the request.

Build register and login pages with Tailwind CSS styling, implement validated forms with React Hook Form, and manage authentication using asynchronous thunk requests, including Cloudinary image uploads and dark mode.

Utilize react hook form with yup to build validated forms by installing, configuring useForm, register, handleSubmit, watch, and the resolver for schema-based validation.

Build a reusable auth input component with validation rules for name, email, status, and password, using React functional components, register with errors, and regex-based constraints, with dark mode styling.

Finish the sign up form markup and styles with a green button and hover/focus states, plus a loading spinner driven by status, and add a sign in link.

Create an async thunk to register users with axios, posting to the auth/register endpoint. Handle loading, success, and errors with extra reducers and navigate on success.

Implement an optional picture upload in the register form with a reusable component, validating format and size, and providing a base64 readable preview via a hidden input.

Learn how to upload images to cloudinary, configure cloud name and secrets, set upload presets, and send form data via axios to obtain a secure image URL for user profiles.

Streamline the login flow by building a focused sign in form, creating a sign in schema, wiring the login action, and testing with credentials to confirm payload and 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.

Define and implement a conversation model with mongoose, supporting both one-to-one and group chats, storing user references, latest message, admin rights, and timestamps for the conversations collection.

Learn to build a conversation route in the mern stack WhatsApp clone by creating a post endpoint, integrating auth middleware, and handling open or new conversations with receiver IDs.

Open or create a private, non-group conversation by matching sender and receiver IDs, verify both users, and populate the latest message and user details excluding passwords.

Implement a get conversations endpoint in a mern stack app to retrieve all chats for the logged-in user, populating users, admin, and latest messages while omitting passwords.

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.

Fetch conversation messages in a MERN stack chat app by routing to a conversation id, querying messages, populating sender and conversation details, and handling missing ids with errors.

Build the home layout for a MERN stack WhatsApp clone by creating a left sidebar with conversation lists and a search users feature, including a sidebar header and dark mode.

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.

Design the sidebar search component markup, implement focus and blur behavior, toggle between search and back icons, and apply a rotate animation to mirror WhatsApp's look in dark mode.

Create a chat slice with initial state for status, error, conversations, active conversation, and notifications; implement a set active conversation reducer and register the slice in the store.

Build the get conversations flow with an asynchronous thunk that fetches all conversations from the conversation endpoint using a bearer token, and manage loading, success, and error in redux.

Add a picture field to the conversation model and use it when creating conversations, enabling per-chat images. The update refines the backend workflow for creating conversations and sending messages.

Build a responsive conversations sidebar in a MERN stack chat app by creating a Conversations component that lists chats from state and renders each with name, latest message, and picture.

Learn to display message dates in a WhatsApp-style format using moment.js, with a date handler utility that shows now, minutes, hours, yesterday, or full dates based on context.

Build the backend search users feature in a MERN app by creating routes and a controller, securing queries with auth middleware and regex-based name or email search.

Enable frontend search by typing in the sidebar input, pressing enter to fetch results via axios with a token, and update the search results in the sidebar.

Create a search results feature for a messaging interface by building a search results component, passing results via props, and rendering contacts with tailwind styling for dark mode.

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.

Open or create a conversation by posting to the conversation endpoint with the token and receiver id, and set the returned conversation as the active chat to load messages.

Fix conversations by handling empty messages and truncating long texts, show the latest message with optional ellipsis. Conditionally render date, and cover front end and back end creation flows.

Build the chat header inside the chat container using the active conversation's name and avatar, showing user info, online status, and action icons.

Set up the chat messages component and fetch messages for the active conversation, rendering sender messages on the right and receiver on the left, with auto-scroll to end.

Render chat messages from the store, build a reusable message component, and align own messages on the right with timestamps for a WhatsApp-style UI.

Explore building a chat actions component for a WhatsApp clone, including inputs, emoji picker and attachments, with icons, dark mode styling, and modular input, emoji picker, and attachments components.

Learn to send a message in a mern stack chat app by wiring input state, on change, and form submit to post to backend, with loading and state updates.

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.

Implement an emoji picker in the chat interface using the emoji picker react package to resemble WhatsApp, toggle with state, and insert emojis at the cursor via an input ref.

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.

Implement automatic smooth scroll to the end of conversations and fix submit loader by introducing a loading state and using ref and scroll into view to show latest message.

Adjusts top padding and container widths to improve responsiveness in the WhatsApp-like clone, and implements active conversation highlighting and refined hover styling.

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.

Explain socket.io basics with emit and on for sending and receiving events, then implement a global socket context to access the socket across all components.

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 real-time messaging with socket events and redux, updating the active conversation's messages and the left-side conversations when a new message arrives, while avoiding duplicate listeners.

Implement real-time online status with sockets by tracking online users via user IDs and socket IDs, handling join, disconnect, and emitting updates to the frontend.

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.