Discord Clone - Learn MERN Stack with WebRTC and SocketIO

Introduce building a modern full-stack server with MongoDB, Express, React, and Node.js, connect to MongoDB in the cloud, implement login and registration, jwt authentication, and API testing with Postman.

Install Node.js, the JavaScript runtime built on Chrome's engine, to run server-side code; verify installation with node -v and npm -v, and use node package manager to install packages.

Create a Discord backend project structure by organizing folders, initializing npm, and setting up a server.js with an Express API for a MERN stack Discord clone.

Install the necessary dependencies for the discord backend with npm install --save, including express, joi validation, json web token, mongoose, bcrypt.js, and nodemon, and verify they appear in package.json.

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.

Add a nodemon script in package.json to automatically restart the server after changes, run with npm start in the backend folder, and connect to MongoDB.

Create a cloud-based MongoDB database by signing into MongoDB, selecting the free cluster, and preparing to connect to the database to view its documents.

Configure a MongoDB atlas cluster, create the users collection, and set up a connection string with a new user. Add MONGO_URI and enable global IP access (0.0.0.0/0) for app readiness.

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.

Test server routes with postman by sending post requests to localhost:5000/api. Confirm responses show routes work and prepare you for routing and login and registration controllers.

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.

Test route validations in a MERN app with Postman, ensuring username, password, and email are provided before reaching the register controller. Validate unique emails and prepare for token creation.

Explore Joi, the powerful JavaScript data validator, and learn how to validate strings, dates, and patterns with regex, plus create custom validators for Express routes.

Create a user model and schema in the models folder using mongoose, defining email (unique), username, and password, exporting the user model to save new registrations to the users collection.

Develop a post register controller that checks for existing emails, hashes passwords with bcrypt, saves a new user with a lowercased email, and issues a token on success.

Test the registration route by sending requests via Postman, fix typos, validate email and username length, confirm server response and user creation with a mail token and encrypted password.

Implement login functionality by validating user existence, comparing passwords with bcrypt, and issuing a JWT on successful authentication, with robust error handling.

Test the login and registration flow in the discord clone using postman, with 201 created and 200 responses, validating credentials and a JVP token for a protected route.

Create a real jwt token using a package to encode user id and email for server-side authentication in a mern stack discord clone, with 24-hour expiry and a secret key.

Test login and register to obtain a token. Store the token in local storage for authenticated requests to secured routes, and auto-log out if it becomes invalid.

Create an express middleware to verify json web tokens, extract bearer tokens from authorization headers or query, and enforce access to restricted routes with proper error handling.

Protect routes in a Discord Clone MERN stack app by logging in to obtain a valid access token, sending it in the authorization header, and guarding resources with middleware.

Initialize a React project, implement Redux for state management, and build login and registration forms that connect to the api. Authenticate via jwt token stored in localStorage to access dashboard.

Initialize a React application with Redux, create a React app, set the project name to Discord frontend, install dependencies, and start developing the frontend.

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.

Verify the React app runs with npm start, then prune the project by removing unused files and folders, and prepare the Redux store to hold app state for future steps.

Configure redux store setup for the discord clone by creating a star folder, combining reducers, applying middleware, and enabling redux devtools for state management and authentication flow.

Set up React Router DOM routing with browser router, switch, and routes for login, register, and dashboard. Implement token-based redirects using local storage and create the necessary page components.

Create a reusable authentication box component in a React app using Material UI and emotion styled, centered on login and register pages. Render forms inside a shared wrapper with styling.

Build a login page header with Material UI typography in a React MERN app, using typography variants and color to display welcome messages and prepare email and password inputs.

Create a reusable custom input component with a label and styled wrapper for the login page, wiring email and password fields with useState and a login button.

Create a login page footer with a reusable custom primary button that submits the form, supports validation, uses props for label, disabled state, and click handling, built with Material UI.

Explore building a redirect info component in a MERN stack login flow, rendering typography with Material UI and a redirect handler that navigates to register page via React Router history.

Show a Material UI tooltip on mouse over the login button to display form validation messages for email and password, and enable the login button when the form is valid.

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 register page by reusing login components, wiring email, username, and password inputs with state and validation, and add a footer to handle registration and login redirects.

Configure an Axios API client with a base URL. Implement login and register calls, export api functions, handle errors, save tokens to local storage, and trigger Redux actions for auth.

Define redux authentication actions to communicate with the API, handle login and register flows, store user details in local storage, and navigate to the dashboard.

Connect login and register actions to the login page using react-redux connect and map actions to props, then use the history object to navigate after dispatching login or register actions.

Test login and registration flows by communicating with the server from a React app, verify local storage and Redux state updates, and navigate to the dashboard.

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.

Explain how to attach a JWT token to every API request using axios interceptors, enabling secure routes and automatic logout on unauthorized responses in the Discord clone.

Fixes to Axios headers by adding the authorization token to the request config and configuring the API client interceptors, returning config and properly rejecting errors to ensure dashboard creation proceeds.

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 a React dashboard by composing four blocks: the main sidebar, the friends sidebar, the messenger, and the top bar, styled with Material UI.

Create the main page button for the Discord Clone app using Material UI, import the group icon, install Material UI icons, and style the button for the sidebar.

Add a friend button in the Discord clone MERN app's friends sidebar, using the shared custom primary button and opening the friend invitation dialog.

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.

Learn to build a material UI add friend dialogue in a Discord clone MERN app by implementing a dialogue with input validation, state management, and open/close controls using React hooks.

Implement dialog actions with a custom primary button to send invitations, disable it when the form is invalid, and prepare for real-time invitations via socket.io in the next module.

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.

Create an online indicator in the friends list using a green Material UI box and the FiberManualRecord icon, updating in real time via websockets.

Create a dummy invitations list for the discord clone by mapping invitations into pending items, showing sender name and email with accept and reject handlers.

Showcases a pending invitations list using invitation decision buttons to accept or reject invitations, with props-driven disabled states, check and clear icons, and click handlers.

Build a Material UI dropdown logout menu with an icon button, wiring a shared logout function to clear local storage. Ensure token expiry redirects to login and guards the dashboard.

Check the dashboard for a token in local storage, load user details via useEffect, dispatch set user details, and gate access by token validity, paving the way for socket.io integration.

Build a real-time discord clone by wiring an express and socket.io server to mongodb, and connect a react frontend to enable online presence and real-time friend invitations.

Install and wire socket.io on the server, create a dedicated socket server file, register it with the express app, and test the real-time connection from the React client.

Connect a React frontend to a socket.io server using the socket.io client, establishing bidirectional event sharing and handling user tokens from local storage.

Attach a JWT token to the initial socket.io connection to verify the user, manage online status, and handle disconnects on the server.

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.

Restart the server and the React app to store the connected user's info in the server store, verify Socket.IO reconnection, and map the user's socket ID for future direct messages.

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.

Learn to implement the friends logic in a MERN app using Redux: manage online users, friends, and pending invitations, and wire the send invitation action.

Learn to implement a redux-thunk action that sends a friend invitation in a MERN app, including preparing data, dispatching alerts, and closing the invitation dialog after a successful API request.

map redux actions to props and connect the send friend invitation dialog, enabling an email invite via a server endpoint in the discord clone course.

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.

Create a friend invitation model and save invitations to the database by wiring sender and receiver as objectId references to the user model, then export for the controller.

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.

Implement custom validations for friend invitations in a MERN stack app, preventing self-invites and handling non-existent users with clear email validation feedback.

Explore custom validation for friend invitations in a MERN app by checking existing invitations, verifying sender and receiver IDs, and managing a friends list in MongoDB.

Save a friend invitation to the database after validation using the friend invitation model, creating a document with sender and receiver ids and returning a success status.

Test the friend invitation workflow in a Discord-like mern app by sending invitations, validating database entries, handling conflicts, and outlining real-time invitation updates for invited users.

Prepare Socket.IO client event listeners to receive real-time friend invitations, dispatch actions to update pending invitations, and render updates in the React frontend.

Prepare the server to push real-time updates for pending friend invitations using socket handlers, online connection tracking, and user and invitation models with populate for sender and receiver details.

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.

Test real-time updates of friend invitations in a Discord clone built with the MERN stack, WebRTC and SocketIO, including server restarts, socket connections, and pending invitation flows.

Fix bugs in pending invitations by correctly iterating the connected users map to expose active connections, and test real-time updates across separate browsers to avoid local storage conflicts.

Learn to render and auto-update a real pending invitations list in a MERN stack app using Socket.IO, Redux state mapping, and real-time friend invitations in the dashboard.

Fixes rendering of pending invitations by wiring the friends producer into the store and restarting the app, enabling the initial invitations list to appear via socket io on login.

Trigger the initial update of pending invitations via socket.io on the MERN stack, using the server backend, the user ID from a decoded JWT, and real-time friend list updates.

Test initial pending invitations update and real-time delivery by enforcing the friends update in the socket handlers, then invite a user and use decision buttons to accept or reject.

Learn to implement frontend support for accepting or rejecting friend invitations by wiring two action handlers in React-Redux, dispatching async API calls, and updating UI based on server responses.

Develop decision controllers for invite handling in a MERN app, validating invite decisions with middleware and a decision schema, and implementing post accept and post reject routes and controllers.

Implement the post reject controller to remove a friend invitation, update pending invitations, and broadcast the rejection to online users, returning a 200 status when successful.

Test the rejection flow for friend invitations in a mern stack app, verify database updates remove the invitation from the invitations collection, and prepare the post-accept controller.

Implement accept invitation logic on the server by finding the invitation by id, updating both users' friends arrays, deleting the invitation, and returning 200 with error logs for 500.

Test the friend invitation acceptation flow in a Discord clone; register two accounts, send and accept invites, observe life updates to friends lists and the online indicator.

Prepare the React client for live updates by wiring the socket connection, listening for friends invitations and the friends list, and dispatching actions to update the store with server data.

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.

Test real-time friends updates and online indicators using socket io, as invitations are sent, accepted, and reflected in both users' friend lists.

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.

Implement a real-time online indicator in the React frontend of a MERN discord clone, using online user data, dispatch actions to sync online status, and highlight online friends.

Build a real-time chat feature in a MERN stack app using React UI, socket.io, and database integration to save and retrieve messages between friends.

Discover how to prepare a redux store for chat by implementing chat actions like set chosen chat details and set messages, with socket-based message fetch.

Learn to manage active conversations in a MERN chat app by updating the chat reducer with a default case, dispatching set chosen chat details, and wiring actions with react-redux connect.

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.

Wiring the messenger container to chat details via mapStateToProps renders a welcome message when no chat is chosen, and the messenger content with messages when a chat is selected.

Create a messages container by wiring useEffect to fetch chat history from the server, integrate material UI wrapper, and connect Messages and new message input for the chosen chat.

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.

Render the chat by mapping dummy messages to a message component under the header. Pass content, username, and date as props and render the avatar only when the date differs.

Implement a new message input component for the chat app, wired to Redux to access the selected chat details and manage input state. Handle changes and enter-to-send to send messages.

Fix the input width by correcting the height prop on the custom messaging input, setting it to 44 pixels, so the input fills the parent and the chat works again.

Learn to enable real-time direct messaging in a React app using socket.io, sending messages to the server, saving them in the database, and delivering to online receivers.

Set up a server-side direct message handler for a discord-like MERN app using socket.io. Validate JWT, create or find a two-user conversation, save messages, and broadcast real-time updates.

Test the direct message handler in a MERN stack app, verify server and MongoDB data for messages and conversations, and demonstrate real-time updates when users are online.

Prepare real-time chat updates by implementing a socket-based update handler that populates chat history with nested message data, broadcasts to online participants, and supports initial and subsequent updates.

Implement the initial direct chat history update by wiring the socket server listener to receive chat history requests, locate the conversation by participants, and emit updates to the client.

Test real time chat updates end-to-end using a MERN stack with socket.io and WebRTC, fetching direct chat history, listening for direct messages, and rendering live conversations between two users.

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.

Render real messages by comparing each message with the previous message to detect the same day and outer id, then format dates to human readable from the server.

Debug and fix author username display in a Discord clone chat app by tracing Redux state, server socket handlers, and MongoDB messages collection field for author to enable real-time messaging.

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.

Stun server helps clients discover their public IP address and NAT type to establish media connections, with the information exchanged through the signaling server and the C9 server.

Discover how a turn server relays traffic between peers when direct connections fail, using signaling to exchange internet connection details, and how the turn server forwards data without inspecting it.

Session Description Protocol describes multimedia sessions for announcements and invitations and negotiates between peers on audio and video codecs and timing information; offers pass via signaling server to establish connections.

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.

Learn how two users establish a direct WebRTC connection through a signaling server by exchanging SDP offers and answers and ICE candidates, with TURN servers as fallback for connectivity.

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.

Add a create room button to the left sidebar using a Material UI button and add icon, wired to a create new room handler that sends room info to server.

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.

Create a main room component in a React MERN app, manage minimized state with useState, and use styled components for full screen and minimized layouts, mounted from the dashboard.

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.

Create the room dialog structure by building video containers and room buttons with responsive containers, and prepare dummy controls for muting, leaving the room, and screen sharing.

Develop a Discord clone room buttons component for the MERN stack with WebRTC and SocketIO; implement screen share, mic, camera, and close room buttons with stateful toggles and import updates.

Create a room on the server side for a MERN stack app using socket.io and WebRTC. Emit room create, update active rooms, and notify the creator with room details.

Test the room creation flow end-to-end in a MERN app with socket.io and WebRTC, validating room details, creator, participants, room ID, and real-time updates from server to client.

Broadcast active rooms to all online users and the room creator via socket events, updating server data and syncing Redux with the front-end room handler.

Save active rooms to the Redux store by listening for the update active rooms event, filtering by friends, and dispatching set active rooms for rendering.

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.

Test and debug the room joining flow in a MERN stack app using socket.io, focusing on the room join handler, dispatching open room, and updating room state across clients.

Fix bugs in the socket room join flow by correctly passing the socket and room data to the join handler, and handling disconnections to update active rooms and participants.

Implement leave room functionality in the Discord clone, emitting a room leave event via socket, updating active rooms and participants on both client and server sides.

Test the leave room functionality by removing participants from the server, observe room count dropping to zero, and ensure disconnected users are removed from the participants list.

Handle disconnect events in the MERN stack app with socket.io by removing the user from the active users array and updating the room state via the room leave handler.

Fix missing active rooms by sending an initial active rooms array on connection. Use a socket update with a timeout to emit consolidated friends, invitations, and rooms data.

Get the local stream preview using a WebRTC handler and navigator.mediaDevices.getUserMedia with audio and video constraints. Dispatch set local stream on success and handle errors for permission issues.

Create a local video preview by wiring a video element to the local stream in a room, using React Redux state, useEffect, and useRef, with Material UI styling.

Implement local preview when joining a room and reuse the same room creation logic with a success callback function, and test device access across normal and incognito modes.

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.

Explore mesh architecture theory for peer-to-peer video, audio, and data exchanges and direct connections in small groups, including MCU and SFU considerations for browser-based deployments.

Install and use the simple peer package to wrap WebRTC functions, simplifying cross-browser negotiation and candidate exchange for real-time connections in the React app.

Learn how to manage room creation and joining with socket.io events in a MERN app. Signaling readiness and broadcasting updates to establish direct WebRTC peer connections among room members.

Save the participant in the room, then broadcast a connection prepare signal to existing users' sockets (excluding the joiner) for the upcoming WebRTC connection.

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.

Learn how to implement a server-side socket handshake to initialize WebRTC connections in a Discord clone, emitting connection events to targeted sockets and exchanging signaling data and ice candidates.

Test the peer connection workflow with two users, create a peer connection object, and outline signaling data exchange to establish a direct WebRTC connection for video and audio.

Learn to exchange signaling data between two peers using Socket.IO, handling SDP and ICE candidates to establish a direct WebRTC connection in a MERN stack app.

Test the signaling data exchange between two users by configuring the socket connection, importing the signaling module, and verifying that remote streams establish a direct connection.

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.

Render remote streams by associating each incoming stream with the connected user socket ID and updating the remote streams store, then display them in the dashboard video container.

Close all rtc connections and stop local tracks when leaving a room, then remove the remote streams and update the server and remaining participants about the departure.

Fixes a server crash when last user leaves room in a MERN stack discord clone, using WebRTC and socket.io, by safely handling room lookup and returning null when not found.

Connects room controls to the local media stream by wiring mute and camera toggles to the video track, using map state to props to pass the stream to controls.

Toggle the mic button to control the local audio track in the media stream using the first audio track. Hide the video button when no camera to prevent crashes.

Configure and manage screen sharing by saving the screen sharing state, obtaining a screen sharing stream with video-only constraints, and swapping video tracks for connected peers.

Learn to switch outgoing video tracks across all active peer connections by iterating senders and calling replaceTrack on each to enable screen sharing.

Fixes for screen sharing in Discord clone by adding the missing room producer action, updating the screen sharing active state, and correcting track handling to enable start, stop, and preview.

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.

Stop all tracks on local and screen sharing streams when leaving the room, then update room state to clear screen sharing and preserve access for remaining participants.

Enable room owners to rejoin rooms they created after leaving, while disabling the create room button when already in a room and syncing server-side rooms into the sidebar.