Discord Clone - Learn MERN Stack with WebRTC and SocketIO

19h 29m 29s
English
Paid

Course description

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.

Read more about the course

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

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

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

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

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

React JS 19 Crash Course | Build an App and Master React in 2 Hours

React JS 19 Crash Course | Build an App and Master React in 2 Hours

Sources: jsmastery.pro, Adrian Hajdin
This course offers a practical approach: clear explanations, real tasks, and necessary tools, so you can not only understand but also immediately apply the new.
2 hours 7 minutes 16 seconds
Web Performance Fundamentals

Web Performance Fundamentals

Sources: Nadia Makarevich
"The Fundamentals of Web Performance" focuses on the key aspects of improving the speed and responsiveness of web applications in the context of React...
Scale React Development with Nx

Scale React Development with Nx

Sources: egghead
On the surface, starting a project sounds easy. First you make some directories, install some dependencies, then you write some code. But there's a bit more to
1 hour 34 minutes 10 seconds
Build and Deploy a Lovable Clone

Build and Deploy a Lovable Clone

Sources: Code With Antonio
In this course, you will create an AI platform for generating applications from scratch. You will learn how to build fully functional full-stack applications...
10 hours 34 minutes 16 seconds
Next.js 14 & React - The Complete Guide

Next.js 14 & React - The Complete Guide

Sources: udemy, Academind Pro
I created the bestselling Udemy course on React, now I'm super excited to share this course on NextJS with you - an in-depth course about an amazing React frame
36 hours 13 minutes 15 seconds