What you will learn
How to create MERN Stack Application
How to create Video Chat Functionality
How To Create Realtime Communication System
Login / Registration Proccess
Connecting And Saving Data in Database
Creating Video Group Call Rooms
Connect ReactJS with NodeJS, Express and MongoDB
Build entire project from Scratch
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. 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.
Course is not designed to learn every technology from scratch but how we can connect them together. Although at meantime of creation of application code will be explained step by step.
English
language
Content
Introduction
Application Presentation
Technology Stack Introduction
Preparing server and authentication possibility
Introduction
Node.js installation
Creating project structure and initializing a Project
Installing necessary packages with NPM
Creating Express Server
Nodemon – adding script to automatically restart server after changes
Creating MongoDB Database in Cloud
Preparing for connection with database
Connecting with database from our server and testing connection
Creating folder structure and authentication routes
Testing routes with Postman
Moving handlers to controllers folder
Adding request validation with Joi
Testing Route validations with Postman
More about Joi
Creating User Model
Creating Register functionality
Testing Registration Route
Creating Login functionality
Testing login functionality
Creating JWT Token
Testing if token is being returned by server
Creating middleware to check if token is valid and not expired
Trying to access protected route
Complete code – End of the Module
Creating React Project with Login and Register Functionality
Module introduction
Initializing React Application with Redux
Installing necessary dependencies
Starting React App and removing unnecessary files
Configuring Redux Store
Adding Routing to App
Creating Authentication Box Component with MaterialUI
More about MaterialUi and Creating Login Page Header
Creating custom input component
Creating Custom Button
Creating Redirect Component
Creating Tooltip Message On Mouse Over
Regular Expression Pattern
Creating Custom Validator
Creating Register Page
Preparing for connection with our server (API)
Preparing Authentication Actions
Dispatch Actions from React Components
Testing Login Actions and Registration Actions and explaining redux flow
Creating Custom Alert
Preparing Store for Alert Messages
Displaying Server Messages
Adding JWT token to Requests
Quick Fix for Axios Headers
Complete code – End of the Module
Creating Dashboard UI in React
Module introduction – Dashboard UI
Creating Dashboard Structure
Creating Main Page Button
Add Friend Button
Sidebar
Material UI – Add Friend Dialog
Dialog Buttons
Preparing Friends List
Online Indicator
Creating Dummy Invitations List
Invitations List – Decision Buttons
Dropdown Menu with logout functionality
Checking if token exists on Dashboard Page
Complete code – End of the module
Friend Invitation System and SocketIO Realtime Connection
Module Introduction
Connecting SocketIO to our Server
Connecting to SocketIO Server From Client Side
Adding JWT Token to Event Emitted To Server
Validating JWT Tokens at Server Side
Server Store – Saving Information About Connected Users
Testing Server Store
Creating Disconnect Handler
Redux – Preparing Actions And Reducers for Friends Logic
Preparing Action To Send Friend Invitation
Connecting Send Friend Invitation Action To Dialog
Creating Server Routes – Friends Invitations
Creating Friend Invitation Model
Custom Friend Invitation Validation
Testing Friends Invitations Custom Validations
More Custom Validation Related With Friend Invitations
Saving Friend Invitation In Database
Testing Friend Invitations
Preparing SocketIO Client Event Listeners for Realtime Friends Invitations
Preparing at Server Pending Friend Invitations
Emitting Events to Clients of Specific ID
Testing Real Updates of Friends Invitations
Fixing Bugs and Retesting
Rendering Real Pending Invitations List
Fixing Bug With Pending Invitations Rendering
Initial Update Of Pending Invitations
Testing Initial Invitations
Preparing Client Side To Accept Or Reject Friend Invitation
Preparing Decision Controllers
Creating Logic Of Rejecting Invitation
Testing Rejection Of Friend Invitation
Accepting Friend Invitation Logic
Testing Friend Invitation Acceptation
Preapring Client Side For Friends Updates
Creating Server Logic For Real Friends Updates
Testing Friends Updates
Connecting Online User Indicator
Online Indicator at React Side
Complete Code – End of the Module
Creating Realtime Chat System With SocketIO and MongoDB
Module Introduction
Preparing Redux Store For Chat Functionality
Choosing Active Conversation
Creating Chat Label
Creating Messenger UI
Creating Messages Container
Creating Message Header
Rendering Single Messages
Creating New Message Input
Fixing Input Width
Emitting Event With Direct Message
Creating Handler For Direct Message Event
Testing Direct Message Handler
Preparing Realtime Chat Updates
Adding Initial Chat Update
Testing Real Chat Updates
Updating Store Messages
Fixing Bug With Messages Store State
Rendering Real Messages
Debugging Author Username
Fixing Bug With Update Of First Message
Creating Date Separator
Complete code – End of the Module
WebRTC – Theory Introduction (optional)
What is WebRTC ?
How WebRTC is working ?
What is STUN Server ?
What is TURN Server ?
What is SDP ?
What are ICE Candidates ?
How to establish connection between Peers ?
Creating Video Group Call Rooms
Module Introduction
Preparing Store State
Creating Room Button
Changing State if User is in Room
Creating Main Room Component
Adding Resize Functionality To Room
Creating Structure of Room Dialog
Creating Room Buttons
Creating Room at Server Side
Testing Room Create Events
Broadcasting Active Rooms To All Online Users
Saving Active Rooms in Store
Fixing Bug With Setting Active Rooms
Rendering Active Rooms
Joining Active Room at Server Side
Testing Joining Room Functionality
Fixing Bugs and Retesting
Creating Leave Room Functionality
Testing Leave Room Functionality
Handling Leaving Room at Disconnect Event
Initial Update of Active Rooms
Getting Local Stream Preview
Creating Local Video Preview
Getting Local Preview When Joining Room
Adding Only Audio Functionality
Fixing Bug With Audio Only
Stopping All Tracks When Leaving a Room
Mesh Architecture Theory
Installing Simple Peer package
Events Related With Connection
Preparing for Incoming WebRTC Connection
Preparing Peer Connection Object
Emitting Event to Initialize Connection
Testing Creating Peer Connection Objects
Exchanging Signaling Data
Testing Signaling Data Exchange
Fixing Simple Bug And Testing RTC Connection
Rendering Remote Streams
Closing RTC Connection and Removing Remote Streams
Fixing Bug When Last User Will Leave Room
Connecting Logic To Video Button
Connecting Logic To Mute Button
Preparing Logic For Screen Sharing
Switching Outgoing Video Tracks in Active Peer Connections
Fixing Switching Off Screen Sharing
Showing Preview of Screen Sharing
Stopping All Tracks when User is Leaving Room
Hidding Buttons Depends if Audio Only is Enabled
Giving Room Owner Possibility to Re-join Room which he created
End of the Module – Complete Code