React and WebRTC & Sharing Location App with Video Chat

Course Curriculum

Chapter 1: Introduction

Lecture 1: Application Preview

Chapter 2: Creating Server Side

Lecture 1: Node.js installation

Lecture 2: Creating Server Project

Lecture 3: Creating Express Server

Lecture 4: Adding Socket.IO Server

Lecture 5: Testing Connection with Postman

Lecture 6: Disconnected Event Handler

Lecture 7: More about Events Handlers

Chapter 3: Creating Client Side Application

Lecture 1: Creating React Application

Lecture 2: Connecting with Redux State Management

Lecture 3: Routing with react-router-dom

Lecture 4: Creating Login Page View

Lecture 5: Handling Username Input

Lecture 6: Handling Login Button

Lecture 7: Code Refactoring

Lecture 8: Getting Geo Location

Lecture 9: Disabling Button on Location Error

Lecture 10: Saving Location In Store

Lecture 11: Redux Store Debugging

Lecture 12: Getting Fake Location

Chapter 4: Connecting Client App with Server Side

Lecture 1: Connection with Socket.IO Server

Lecture 2: Storing Online Users

Lecture 3: Login functionality

Lecture 4: Emitting Event with Online Users

Lecture 5: Saving Online Users In Store

Lecture 6: Removing Disconnected User From Store

Lecture 7: Testing Functionality Of Removing Disconnected User

Lecture 8: Application Source Code After Section

Chapter 5: Working with Map

Lecture 1: Rendering Google Map

Lecture 2: Rendering Map Markers

Lecture 3: Rendering Username Label

Lecture 4: Creating User Card

Lecture 5: Connecting User Info Card

Lecture 6: Calculating Distance Between Two Coordinates

Lecture 7: Converting Number to Two Decimals

Lecture 8: Creating Chat Button

Lecture 9: Application Source Code After Section

Chapter 6: Creating Chat

Lecture 1: Preparing Store For Messages

Lecture 2: Creating Dummy Chatboxes

Lecture 3: Adding Nav Bar to Chatbox

Lecture 4: Adding Messages Container

Lecture 5: Adding New Message Input

Lecture 6: Handling User Input

Lecture 7: Rendering Dummy Messages

Lecture 8: Displaying Real Chatboxes

Lecture 9: Closing Chatboxes

Lecture 10: Appending Local Messages

Lecture 11: Fixing Bug With Messages

Lecture 12: Sending Messages To Other Users

Lecture 13: Displaying Messages At Server Side

Lecture 14: Automatically Opening Chatboxes

Lecture 15: Messages Scroll Automatically

Lecture 16: Application Source Code After Section

Chapter 7: Video Rooms – Preparation

Lecture 1: Introduction To Video Rooms

Lecture 2: Preparing Store For Video Rooms

Lecture 3: Create Room Button

Lecture 4: Creating Join Room Buttons

Lecture 5: Informing Server About New Room Created

Lecture 6: Fixing Bug With Emitting Event With New Room

Lecture 7: Broadcasting Rooms List to All Users

Lecture 8: Setting Real Rooms In Store

Lecture 9: Rendering Real Rooms

Lecture 10: Getting Access To Local Stream

Lecture 11: Displaying Local Video

Chapter 8: Video Rooms – Connecting WebRTC Using PeerJS Library

Lecture 1: PeerJS Introduction

Lecture 2: Creating Peer Object

Lecture 3: How Peer Server Works

Lecture 4: Connecting With Peer Server

Lecture 5: Preparing Peer Implementation For Calling

Lecture 6: Joining Video Room

Lecture 7: Updating Rooms At Server Side

Lecture 8: Testing Broadcasting Rooms After Login Event

Lecture 9: Connecting (Calling) With Second User

Lecture 10: Displaying Remote Stream

Lecture 11: Creating Video Room Buttons

Lecture 12: Leaving Room At Initiator Side

Lecture 13: Testing Leaving Room

Lecture 14: Server Side Logic Of Leaving Room

Lecture 15: Closing Peer Connection At Both Sides

Lecture 16: Handling Case Of ,,Dirty Leave"

Lecture 17: Microphone and Camera Buttons

Lecture 18: Muting And Switching Camera Off

Lecture 19: Complete Application – Source Code

Chapter 9: (Optional) WebRTC Theory

Lecture 1: What is WebRTC ?

Lecture 2: What is Signaling Server ?

Lecture 3: What is STUN Server ?

Lecture 4: What is TURN Server ?

Lecture 5: What is SDP ?

Lecture 6: What are ICE Candidates ?

Lecture 7: How To Establish Direct Connection Between Peers