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
Published 2/2023
MP4 | Video: h264, 1280×720 | Audio: AAC, 44.1 KHz
Language: English | Size: 4.41 GB | Duration: 8h 11m

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

Homepage

https://www.udemy.com/course/react-and-webrtc-2023-sharing-location-app-with-video-chat/