CF

Discord Clone - Learn MERN Stack with WebRTC and SocketIO

19h 29m 29s
English
Paid

Discord Clone - Learn MERN Stack with WebRTC and SocketIO is a 178-lesson 19 hours 29 minutes self-paced course by Udemy. Embark on an exciting journey to master the MERN Stack alongside WebRTC and SocketIO .

Course facts

Lessons
178
Duration
19 hours 29 minutes
Level
All levels
Language
English
Updated
Instructor
Udemy
Price
Premium

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.

Who teaches Discord Clone - Learn MERN Stack with WebRTC and SocketIO? Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

What lessons are included in Discord Clone - Learn MERN Stack with WebRTC and SocketIO?

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

What courses are similar to Discord Clone - Learn MERN Stack with WebRTC and SocketIO?

More courses by Udemy

Frequently asked questions

What prerequisites are needed to take this course?
This course requires a basic knowledge of React and a foundational understanding of Node.js. While some experience with websockets, specifically SocketIO, is beneficial, it is not mandatory. The course will guide you through the necessary concepts to ensure you can follow along with the applications being developed.
What will I build during the course?
During the course, you will build a Discord-like application with functionalities such as login and registration using JWT Tokens, a friends invitation system, real-time chat using SocketIO and MongoDB, and video group call rooms leveraging WebRTC. This project provides practical experience with building real-time communication features.
Who is the target audience for this course?
The course is designed for learners who have a foundational understanding of React and Node.js, and are interested in building real-time communication applications. It is suitable for those looking to enhance their skills in the MERN stack and learn about integrating WebRTC and SocketIO into their projects.
How does the depth of this course compare to similar courses?
This course offers a focused approach on using the MERN stack combined with WebRTC and SocketIO to build real-time communication features. Unlike general full-stack development courses, it dives deep into establishing peer connections and creating efficient communication systems, providing specific insights into building applications like video chat platforms.
Which specific tools and platforms will I learn to use?
Throughout the course, you will learn to use the MERN stack, which includes MongoDB, Express, React, and Node.js. Additionally, you'll work with WebRTC for real-time communication and SocketIO for signaling and data exchange. Tools like Postman for API testing and MaterialUI for UI components are also covered.
What topics are not covered in this course?
The course does not cover advanced topics outside the scope of the MERN stack and real-time communication, such as building mobile applications, handling large-scale deployments, or integrating with third-party services beyond the mentioned tools. It focuses specifically on the technologies and project outlined in the curriculum.
What is the expected time commitment for completing this course?
The course consists of 178 lessons. While the total runtime is not specified, the comprehensive nature of the content suggests a significant time investment. Students should be prepared to spend several hours per week on lessons, coding exercises, and project development to fully grasp the concepts and complete the application build.