React And Webrtc 2023 & Sharing Location App With Video Chat

Create Sharing Location Application with Google Maps and React. Connect App with Video Chats thanks to WebRTC

What you'll learn

Create React Application

Share Location with SocketIO and Google Maps API

Create Video Chat with WebRTC and PeerJS

Implement Realtime Communication

Create Chat Functionality

Create Tracking Online Users System

Requirements

Javascript and Basic React knowledge

Description

Learn technologies like React, WebRTC (PeerJS) , SocketIO and Google Maps API by creating amazing project ,,GeoCall''. In this practical course we will jump straight to the code and explain all necessary things through the course. We will go through all of the steps to create application with possibility of sharing our location on the map with other users. We will create own PeerJS implementation to show how you can develop WebRTC application with direct calls.   After this course you will be able to create own application with Google Maps and calling functionality. You will know the process how to establish connection between peers.In our application we will use:WebRTC (PeerJS)JavaScriptSocketIOExpress.jsNode.jsReactGoogle Maps APIWe will create necessary UI with React and Google Maps and we will proceed with all of the logic related with SocketIO and WebRTC.App creating process:Prepare environmentBuild frontend of our application with ReactConnect our Application with Google MapsCreate chat functionality with SocketIOCreate functionality to share with other users our locationConnect own PeerJS ServerImplement direct calls with PeerJSI hope you will enjoy the course and after finishing it you will feel confident to create own application with Google Maps and chat functionality with direct calls.Also you can find theory module about WebRTC if you would like to know more details what is going behind of implementation of PeerJS

Overview

Section 1: Introduction

Lecture 1 Application Preview

Section 2: Creating Server Side

Lecture 2 Node.js installation

Lecture 3 Creating Server Project

Lecture 4 Creating Express Server

Lecture 5 Adding Socket.IO Server

Lecture 6 Testing Connection with Postman

Lecture 7 Disconnected Event Handler

Lecture 8 More about Events Handlers

Section 3: Creating Client Side Application

Lecture 9 Creating React Application

Lecture 10 Connecting with Redux State Management

Lecture 11 Routing with react-router-dom

Lecture 12 Creating Login Page View

Lecture 13 Handling Username Input

Lecture 14 Handling Login Button

Lecture 15 Code Refactoring

Lecture 16 Getting Geo Location

Lecture 17 Disabling Button on Location Error

Lecture 18 Saving Location In Store

Lecture 19 Redux Store Debugging

Lecture 20 Getting Fake Location

Section 4: Connecting Client App with Server Side

Lecture 21 Connection with Socket.IO Server

Lecture 22 Storing Online Users

Lecture 23 Login functionality

Lecture 24 Emitting Event with Online Users

Lecture 25 Saving Online Users In Store

Lecture 26 Removing Disconnected User From Store

Lecture 27 Testing Functionality Of Removing Disconnected User

Lecture 28 Application Source Code After Section

Section 5: Working with Map

Lecture 29 Rendering Google Map

Lecture 30 Rendering Map Markers

Lecture 31 Rendering Username Label

Lecture 32 Creating User Card

Lecture 33 Connecting User Info Card

Lecture 34 Calculating Distance Between Two Coordinates

Lecture 35 Converting Number to Two Decimals

Lecture 36 Creating Chat Button

Lecture 37 Application Source Code After Section

Section 6: Creating Chat

Lecture 38 Preparing Store For Messages

Lecture 39 Creating Dummy Chatboxes

Lecture 40 Adding Nav Bar to Chatbox

Lecture 41 Adding Messages Container

Lecture 42 Adding New Message Input

Lecture 43 Handling User Input

Lecture 44 Rendering Dummy Messages

Lecture 45 Displaying Real Chatboxes

Lecture 46 Closing Chatboxes

Lecture 47 Appending Local Messages

Lecture 48 Fixing Bug With Messages

Lecture 49 Sending Messages To Other Users

Lecture 50 Displaying Messages At Server Side

Lecture 51 Automatically Opening Chatboxes

Lecture 52 Messages Scroll Automatically

Lecture 53 Application Source Code After Section

Section 7: Video Rooms - Preparation

Lecture 54 Introduction To Video Rooms

Lecture 55 Preparing Store For Video Rooms

Lecture 56 Create Room Button

Lecture 57 Creating Join Room Buttons

Lecture 58 Informing Server About New Room Created

Lecture 59 Fixing Bug With Emitting Event With New Room

Lecture 60 Broadcasting Rooms List to All Users

Lecture 61 Setting Real Rooms In Store

Lecture 62 Rendering Real Rooms

Lecture 63 Getting Access To Local Stream

Lecture 64 Displaying Local Video

Section 8: Video Rooms - Connecting WebRTC Using PeerJS Library

Lecture 65 PeerJS Introduction

Lecture 66 Creating Peer Object

Lecture 67 How Peer Server Works

Lecture 68 Connecting With Peer Server

Lecture 69 Preparing Peer Implementation For Calling

Lecture 70 Joining Video Room

Lecture 71 Updating Rooms At Server Side

Lecture 72 Testing Broadcasting Rooms After Login Event

Lecture 73 Connecting (Calling) With Second User

Lecture 74 Displaying Remote Stream

Lecture 75 Creating Video Room Buttons

Lecture 76 Leaving Room At Initiator Side

Lecture 77 Testing Leaving Room

Lecture 78 Server Side Logic Of Leaving Room

Lecture 79 Closing Peer Connection At Both Sides

Lecture 80 Handling Case Of ,,Dirty Leave"

Lecture 81 Microphone and Camera Buttons

Lecture 82 Muting And Switching Camera Off

Lecture 83 Complete Application - Source Code

Section 9: (Optional) WebRTC Theory

Lecture 84 What is WebRTC ?

Lecture 85 What is Signaling Server ?

Lecture 86 What is STUN Server ?

Lecture 87 What is TURN Server ?

Lecture 88 What is SDP ?

Lecture 89 What are ICE Candidates ?

Lecture 90 How To Establish Direct Connection Between Peers

Students who want to learn how to create Sharing Location Application,Students who want to create Realtime Application,Students who want to know how to Create Video Chat,Students who want to know how to create Chat Functionality