Discord Clone - Learn MERN Stack with WebRTC and SocketIO

Create an Express server by requiring express, configuring json and cors middleware, wiring a port from the environment (default 5000), an http server, and nodemon for auto restart.

Connect to the cloud MongoDB database using the mungo's package and Mongo URI, then start the server after a successful connection and set up login and register routes.

Create a modular server structure with folders for roots, controllers, models, and middleware, and implement post routes for register and login mounted at /api.

Move authentication handlers into a dedicated controllers folder, creating controllers.js, post login.js, and post register.js, then export and wire them into routes to modularize the MERN stack auth flow.

Implement request validation using Joi and express-joi-validation for user registration and login, defining schemas for username, password, and email, and validating the request body before reaching controllers.

Install essential frontend dependencies for a MERN Discord clone: axios for API calls, react-router-dom, redux-thunk, redux devtools, and @mui/material, then configure the API client with the integration token.

Create a custom login form validator using useEffect to validate email and password with shared validators, enforcing email pattern and password length, and wiring it into the login flow.

Create a custom alert notification component using Material UI's Alert and snack bar to display server messages, position it bottom center, and connect to Redux to control visibility.

Connect the notification component to redux state, dispatch alert actions, and display server messages as a snack bar with content from response data on login errors.

Build a basic dashboard UI with a left menu, invitation dialog to invite friends, a friends list with pending invitations and accept/reject options, plus a logout dropdown.

Build the Discord clone sidebar by creating the friends title and lists, styling text with Material UI typography and a hex color, and wiring the pending invitations layout.

Create a dummy friends list with id, username, and online status; map to FriendsListItem components with avatars showing initials and an online indicator, styled with Material UI typography.

Validate json web tokens on the server side by creating a socket.io middleware that decodes the token from the handshake, attaches user data to the socket, and rejects unauthorized access.

Set up a server store to track connected users with a socket id keyed map, decoding the token to capture user details on each new connection.

Implement a disconnect handler for the socket.io server to manage online users by tracking a map of connected sockets and handling disconnect events to update the dashboard.

Implement server routes for friends invitations in a discord clone MERN app, including a post invitation endpoint with token validation, payload validation, and the invite controller setup.

Design and implement custom friend invitation validation in a mern stack discord clone, preventing self-invites, validating target user existence, and handling duplicates via jwt-derived data and lowercased emails.

Identify online connections for a specific user id and emit personalized updates to those sockets, using a shared socket server instance to push pending invitations in real-time.

Implements server-side logic to update a user's friends list in real time using socket.io, populating friend data and emitting updates to online receivers.

Manage online presence by computing online users from the connected users map, broadcasting updates via Socket.IO, and refreshing indicators in real-time on the client.

Create the chosen option label component for the chat header in the Discord clone MERN app, connecting to the Redux store to display the chosen chat name with typography styling.

Create a chat messages header wired to Redux state, styled with Material UI, and showing the avatar and the beginning of your conversation with the selected user.

Learn to update the store's direct chat history by validating the active conversation against server data. Extract participant IDs and dispatch set messages via a shared update chat history utility.

Fix the messages store by saving the correct user and receiver IDs in redux. Update chat rendering by clearing messages on conversation switch and applying real-time server updates.

Fix the first message update in direct chats by creating new conversations, updating chat history, and enabling real-time messaging across users.

Implement a date separator in the chat to mark different days and the first message, using a dedicated date separator component styled with Material UI.

WebRTC enables peer-to-peer browser communication to exchange video, audio, and data without plugins, and highlights the signaling server that establishes a direct connection used by apps like Discord.

Explore how WebRTC uses a signaling server to exchange data needed to establish a direct peer connection, using web sockets as transport and codec information from the browser.

Learn how ice candidates and session description protocol information are exchanged over a signaling server to establish a direct peer connection or route via a server if needed.

Create four-user rooms with web peer connections forming a mesh, build a room ui, and manage real-time information with redux to support video, screen sharing, and camera controls.

Define and initialize the room state in a react app, including local and remote streams, room details, and screen sharing flags, and set up room actions and a reducer.

Change real-time room state by dispatching an open room action via the room handler, updating the Redux store to mark the user as in the room and as the creator.

Add a room resize functionality with a dedicated resize button that toggles the room between minimized and full-screen states using a resize handler and icons.

fix the active rooms bug by using the room creator user id in the server handler, ensuring the active rooms list updates and renders correctly for users.

Render active rooms in the sidebar by mapping server data to props and presenting an active room button for each with creator and participant info, enabling users to join.

Develop server-side logic to join an active room, updating active rooms and handling the room join via socket events to add the new participant.

Enable an audio-only mode by adding a redux-controlled audio-only toggle in the room controls, wiring actions, reducers, and UI to join or create rooms with microphone access only.

Fixing bug to enable audio-only rooms in a Discord clone MERN stack app using WebRTC and SocketIO; adjust room state, local stream preview, and constraints to support microphone-only communication.

Learn to stop all audio and video tracks when leaving a room, reset the local stream, and reinitialize a new media stream for subsequent rooms in a MERN WebRTC app.

Prepare a new peer connection object for the incoming user, determine initiator status, attach the local stream, and exchange signaling data, including ICE candidates, via socket events.

Debugs direct RTC connection by tracing socket events, correctly passing the connected user socket ID, enabling peer connections and rendering remote streams in a MERN app with WebRTC and SocketIO.

Update the local stream preview when switching between camera and screen sharing in a React app. Learn to manage screen sharing streams and clean up tracks when leaving a room.