Discord Clone - Learn MERN Stack with WebRTC and SocketIO

19h 29m 29s
English
Paid
October 6, 2024

Learn how to connect MERN Stack with WebRTC and SocketIO.  We will go through all of the steps to create application with group call functionality. We will create WebRTC implementation to show how you can develop WebRTC application thanks to simple-peer.  We will use  SocketIO as our signaling server for our application and for realtime communication. After this course you will be able to create own application which will be using WebRTC.

More

It does not matter if that will be the realtime communication game or video chat. You will know the process how to establish connection between peers(users).

We will combine MERN Stack which stands for: MongoDB, Express, React, Node with WebRTC and SocketIO for realtime communication possibility.

In this course we will build project from scratch and we will go through all of steps together. Functionality which we will create will be:
Login / Registration (Authentication with JWT Token)
Friends / Friends Invitation System
Realtime chat functionality (SocketIO and MongoDB)
Creating Video Group Call Rooms

Course requirements:
Basic knowledge about React
Basics about Node
Would be great to have some knowledge about websockets (SocketIO). It is not required but would be definitely easier to understand part with chat and videochat functionality.

Watch Online Discord Clone - Learn MERN Stack with WebRTC and SocketIO

Join premium to watch
Go to premium
# Title Duration
1 Application Presentation 02:59
2 Technology Stack Introduction 05:21
3 Introduction 01:33
4 Node.js installation 01:50
5 Creating project structure and initializing a Project 03:21
6 Installing necessary packages with NPM 06:18
7 Creating Express Server 06:25
8 Nodemon - adding script to automatically restart server after changes 02:05
9 Creating MongoDB Database in Cloud 02:49
10 Preparing for connection with database 06:42
11 Connecting with database from our server and testing connection 04:13
12 Creating folder structure and authentication routes 08:24
13 Testing routes with Postman 01:29
14 Moving handlers to controllers folder 05:49
15 Adding request validation with Joi 05:33
16 Testing Route validations with Postman 04:20
17 More about Joi 02:26
18 Creating User Model 02:54
19 Creating Register functionality 10:30
20 Testing Registration Route 03:02
21 Creating Login functionality 06:20
22 Testing login functionality 04:03
23 Creating JWT Token 05:44
24 Testing if token is being returned by server 02:37
25 Creating middleware to check if token is valid and not expired 08:38
26 Trying to access protected route 07:25
27 Module introduction 03:20
28 Initializing React Application with Redux 03:53
29 Installing necessary dependencies 04:53
30 Starting React App and removing unnecessary files 03:28
31 Configuring Redux Store 09:24
32 Adding Routing to App 07:29
33 Creating Authentication Box Component with MaterialUI 11:34
34 More about MaterialUi and Creating Login Page Header 06:10
35 Creating custom input component 12:50
36 Creating Custom Button 08:48
37 Creating Redirect Component 08:05
38 Creating Tooltip Message On Mouse Over 03:42
39 Creating Custom Validator 11:44
40 Creating Register Page 18:50
41 Preparing for connection with our server (API) 04:19
42 Preparing Authentication Actions 10:29
43 Dispatch Actions from React Components 06:09
44 Testing Login Actions and Registration Actions and explaining redux flow 09:49
45 Creating Custom Alert 06:03
46 Preparing Store for Alert Messages 08:16
47 Displaying Server Messages 08:02
48 Adding JWT token to Requests 09:13
49 Quick Fix for Axios Headers 01:25
50 Module introduction - Dashboard UI 02:15
51 Creating Dashboard Structure 11:24
52 Creating Main Page Button 06:48
53 Add Friend Button 04:34
54 Sidebar 07:23
55 Material UI - Add Friend Dialog 16:27
56 Dialog Buttons 02:27
57 Preparing Friends List 12:46
58 Online Indicator 04:14
59 Creating Dummy Invitations List 11:07
60 Invitations List - Decision Buttons 06:54
61 Dropdown Menu with logout functionality 06:32
62 Checking if token exists on Dashboard Page 07:10
63 Module Introduction 01:23
64 Connecting SocketIO to our Server 06:17
65 Connecting to SocketIO Server From Client Side 06:54
66 Adding JWT Token to Event Emitted To Server 03:04
67 Validating JWT Tokens at Server Side 06:58
68 Server Store - Saving Information About Connected Users 09:11
69 Testing Server Store 01:51
70 Creating Disconnect Handler 07:19
71 Redux - Preparing Actions And Reducers for Friends Logic 06:31
72 Preparing Action To Send Friend Invitation 06:58
73 Connecting Send Friend Invitation Action To Dialog 05:06
74 Creating Server Routes - Friends Invitations 13:20
75 Creating Friend Invitation Model 03:16
76 Custom Friend Invitation Validation 05:50
77 Testing Friends Invitations Custom Validations 01:14
78 More Custom Validation Related With Friend Invitations 08:41
79 Saving Friend Invitation In Database 04:08
80 Testing Friend Invitations 03:35
81 Preparing SocketIO Client Event Listeners for Realtime Friends Invitations 04:34
82 Preparing at Server Pending Friend Invitations 08:14
83 Emitting Events to Clients of Specific ID 14:13
84 Testing Real Updates of Friends Invitations 05:16
85 Fixing Bugs and Retesting 04:39
86 Rendering Real Pending Invitations List 04:12
87 Fixing Bug With Pending Invitations Rendering 03:00
88 Initial Update Of Pending Invitations 02:50
89 Testing Initial Invitations 03:44
90 Preparing Client Side To Accept Or Reject Friend Invitation 09:25
91 Preparing Decision Controllers 09:14
92 Creating Logic Of Rejecting Invitation 05:56
93 Testing Rejection Of Friend Invitation 01:24
94 Accepting Friend Invitation Logic 10:50
95 Testing Friend Invitation Acceptation 03:40
96 Preapring Client Side For Friends Updates 06:00
97 Creating Server Logic For Real Friends Updates 09:30
98 Testing Friends Updates 03:48
99 Connecting Online User Indicator 08:25
100 Online Indicator at React Side 08:19
101 Module Introduction 03:49
102 Preparing Redux Store For Chat Functionality 07:31
103 Choosing Active Conversation 06:36
104 Creating Chat Label 06:27
105 Creating Messenger UI 05:45
106 Creating Messages Container 04:49
107 Creating Message Header 09:40
108 Rendering Single Messages 15:19
109 Creating New Message Input 10:10
110 Fixing Input Width 00:44
111 Emitting Event With Direct Message 06:04
112 Creating Handler For Direct Message Event 17:19
113 Testing Direct Message Handler 04:21
114 Preparing Realtime Chat Updates 12:37
115 Adding Initial Chat Update 04:55
116 Testing Real Chat Updates 11:50
117 Updating Store Messages 10:35
118 Fixing Bug With Messages Store State 05:08
119 Rendering Real Messages 08:33
120 Debugging Author Username 06:01
121 Fixing Bug With Update Of First Message 03:10
122 Creating Date Separator 06:34
123 What is WebRTC ? 01:39
124 How WebRTC is working ? 01:17
125 What is STUN Server ? 01:11
126 What is TURN Server ? 02:07
127 What is SDP ? 01:37
128 What are ICE Candidates ? 01:44
129 How to establish connection between Peers ? 03:12
130 Module Introduction 06:42
131 Preparing Store State 06:56
132 Creating Room Button 03:26
133 Changing State if User is in Room 10:16
134 Creating Main Room Component 07:54
135 Adding Resize Functionality To Room 06:51
136 Creating Structure of Room Dialog 05:40
137 Creating Room Buttons 15:04
138 Creating Room at Server Side 17:15
139 Testing Room Create Events 06:38
140 Broadcasting Active Rooms To All Online Users 11:50
141 Saving Active Rooms in Store 06:23
142 Fixing Bug With Setting Active Rooms 02:26
143 Rendering Active Rooms 13:51
144 Joining Active Room at Server Side 12:49
145 Testing Joining Room Functionality 06:17
146 Fixing Bugs and Retesting 03:30
147 Creating Leave Room Functionality 14:22
148 Testing Leave Room Functionality 02:48
149 Handling Leaving Room at Disconnect Event 06:12
150 Initial Update of Active Rooms 04:14
151 Getting Local Stream Preview 15:05
152 Creating Local Video Preview 09:07
153 Getting Local Preview When Joining Room 02:54
154 Adding Only Audio Functionality 10:11
155 Fixing Bug With Audio Only 01:48
156 Stopping All Tracks When Leaving a Room 03:50
157 Mesh Architecture Theory 04:44
158 Installing Simple Peer package 03:13
159 Events Related With Connection 06:46
160 Preparing for Incoming WebRTC Connection 06:33
161 Preparing Peer Connection Object 14:54
162 Emitting Event to Initialize Connection 06:48
163 Testing Creating Peer Connection Objects 02:19
164 Exchanging Signaling Data 09:30
165 Testing Signaling Data Exchange 02:51
166 Fixing Simple Bug And Testing RTC Connection 03:29
167 Rendering Remote Streams 08:31
168 Closing RTC Connection and Removing Remote Streams 20:11
169 Fixing Bug When Last User Will Leave Room 03:24
170 Connecting Logic To Video Button 05:12
171 Connecting Logic To Mute Button 02:38
172 Preparing Logic For Screen Sharing 11:39
173 Switching Outgoing Video Tracks in Active Peer Connections 07:11
174 Fixing Switching Off Screen Sharing 03:55
175 Showing Preview of Screen Sharing 02:14
176 Stopping All Tracks when User is Leaving Room 02:40
177 Hidding Buttons Depends if Audio Only is Enabled 08:33
178 Giving Room Owner Possibility to Re-join Room which he created 07:36

Similar courses to Discord Clone - Learn MERN Stack with WebRTC and SocketIO

Build a React & Redux App w CircleCI CICD, AWS & Terraform

Build a React & Redux App w CircleCI CICD, AWS & Terraform

Duration 25 hours 45 minutes 21 seconds
10 Mega Responsive Websites with HTML, CSS, and JavaScript

10 Mega Responsive Websites with HTML, CSS, and JavaScript

Duration 21 hours 54 minutes 19 seconds
Building Applications with React 17 and ASP.NET Core 6

Building Applications with React 17 and ASP.NET Core 6

Duration 19 hours 28 minutes 31 seconds
NodeJs: Build The Complete E-Commerce Web API

NodeJs: Build The Complete E-Commerce Web API

Duration 5 hours 4 minutes 44 seconds
MERN Stack React, Socket io, Next.js Express,MongoDb, Nodejs
MERN Stack From Scratch

MERN Stack From Scratch

Duration 13 hours 32 minutes 38 seconds
Real-time chat with Node.js, Socket.io and Vue.js
React and Django: A Practical Guide with Docker

React and Django: A Practical Guide with Docker

Duration 6 hours 50 minutes 20 seconds
React Node FullStack - Ecommerce from Scratch to Deployment

React Node FullStack - Ecommerce from Scratch to Deployment

Duration 16 hours 15 minutes 14 seconds