Discord Clone - Learn MERN Stack with WebRTC and SocketIO

19h 29m 29s
English
Paid

Embark on an exciting journey to master the MERN Stack alongside WebRTC and SocketIO. This course guides you step-by-step to develop an application equipped with group call functionality, leveraging WebRTC with simple-peer for seamless development. You'll employ SocketIO as a signaling server to facilitate real-time communication. By the end of this course, you'll be empowered to create your own WebRTC applications.

Course Objectives

Your newfound knowledge will transcend simple applications, enabling you to develop anything from real-time communication games to video chat platforms. You will learn to establish connections between peers (users) and integrate efficient communication systems.

Technologies Used

This course integrates the MERN Stack—comprising MongoDB, Express, React, and Node—with WebRTC and SocketIO for real-time communication capabilities.

What You Will Build

Throughout the course, you will construct a project from the ground up. Key functionalities include:

  • Login / Registration: Manage authentication using JWT Tokens.
  • Friends / Friends Invitation System: Establish and manage connections.
  • Realtime Chat Functionality: Utilize SocketIO and MongoDB for real-time interactions.
  • Creating Video Group Call Rooms: Develop rooms for video conferencing.

Course Requirements

This course is designed for learners with:

  • Basic knowledge of React
  • Basic understanding of Node
  • Some experience with websockets (SocketIO) is beneficial, but not mandatory; it will aid in comprehending the chat and video chat functionalities.

About the Author: udemy

udemy thumbnail
By connecting students all over the world to the best instructors, Udemy is helping individuals reach their goals and pursue their dreams. Udemy is the leading global marketplace for teaching and learning, connecting millions of students to the skills they need to succeed. Udemy helps organizations of all kinds prepare for the ever-evolving future of work. Our curated collection of top-rated business and technical courses gives companies, governments, and nonprofits the power to develop in-house expertise and satisfy employees’ hunger for learning and development.

Watch Online 178 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 178 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Application Presentation
All Course Lessons (178)
#Lesson TitleDurationAccess
1
Application Presentation Demo
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
Unlock unlimited learning

Get instant access to all 177 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription