React and WebRTC 2023 & Sharing Location App with Video Chat

8h 11m 54s
English
Paid

Course 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.

Read more about the course

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)

  • JavaScript

  • SocketIO

  • Express.js

  • Node.js

  • React

  • Google Maps API

We 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 environment

  • Build frontend of our application with React

  • Connect our Application with Google Maps

  • Create chat functionality with SocketIO

  • Create functionality to share with other users our location

  • Connect own PeerJS Server

  • Implement direct calls with PeerJS

I 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

Watch Online

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 86 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing

Watch Online React and WebRTC 2023 & Sharing Location App with Video Chat

0:00
/
#1: Application Preview

All Course Lessons (86)

#Lesson TitleDurationAccess
1
Application Preview Demo
03:19
2
Node.js installation
02:15
3
Creating Server Project
02:23
4
Creating Express Server
06:53
5
Adding Socket.IO Server
05:37
6
Testing Connection with Postman
02:56
7
Disconnected Event Handler
04:31
8
More about Events Handlers
01:00
9
Creating React Application
04:12
10
Connecting with Redux State Management
08:21
11
Routing with react-router-dom
05:39
12
Creating Login Page View
07:26
13
Handling Username Input
04:02
14
Handling Login Button
06:26
15
Code Refactoring
03:48
16
Getting Geo Location
07:23
17
Disabling Button on Location Error
01:52
18
Saving Location In Store
03:47
19
Redux Store Debugging
05:07
20
Getting Fake Location
05:52
21
Connection with Socket.IO Server
09:45
22
Storing Online Users
07:27
23
Login functionality
08:33
24
Emitting Event with Online Users
11:38
25
Saving Online Users In Store
07:46
26
Removing Disconnected User From Store
06:11
27
Testing Functionality Of Removing Disconnected User
03:30
28
Rendering Google Map
08:25
29
Rendering Map Markers
13:06
30
Rendering Username Label
02:30
31
Creating User Card
04:34
32
Connecting User Info Card
06:49
33
Calculating Distance Between Two Coordinates
05:21
34
Converting Number to Two Decimals
04:20
35
Creating Chat Button
05:05
36
Preparing Store For Messages
07:03
37
Creating Dummy Chatboxes
06:47
38
Adding Nav Bar to Chatbox
06:19
39
Adding Messages Container
01:45
40
Adding New Message Input
02:06
41
Handling User Input
05:27
42
Rendering Dummy Messages
06:31
43
Displaying Real Chatboxes
06:19
44
Closing Chatboxes
03:22
45
Appending Local Messages
18:29
46
Fixing Bug With Messages
02:56
47
Sending Messages To Other Users
09:45
48
Displaying Messages At Server Side
04:28
49
Automatically Opening Chatboxes
04:50
50
Messages Scroll Automatically
04:02
51
Introduction To Video Rooms
00:55
52
Preparing Store For Video Rooms
05:23
53
Create Room Button
07:03
54
Creating Join Room Buttons
07:02
55
Informing Server About New Room Created
10:48
56
Fixing Bug With Emitting Event With New Room
02:27
57
Broadcasting Rooms List to All Users
06:17
58
Setting Real Rooms In Store
03:28
59
Rendering Real Rooms
04:48
60
Getting Access To Local Stream
13:57
61
Displaying Local Video
08:38
62
PeerJS Introduction
04:03
63
Creating Peer Object
04:31
64
How Peer Server Works
08:11
65
Connecting With Peer Server
08:18
66
Preparing Peer Implementation For Calling
07:51
67
Joining Video Room
11:00
68
Updating Rooms At Server Side
09:17
69
Testing Broadcasting Rooms After Login Event
01:08
70
Connecting (Calling) With Second User
03:36
71
Displaying Remote Stream
04:03
72
Creating Video Room Buttons
06:37
73
Leaving Room At Initiator Side
05:10
74
Testing Leaving Room
01:39
75
Server Side Logic Of Leaving Room
07:36
76
Closing Peer Connection At Both Sides
11:17
77
Handling Case Of ,,Dirty Leave"
12:28
78
Microphone and Camera Buttons
10:19
79
Muting And Switching Camera Off
03:19
80
What is WebRTC ?
01:39
81
What is Signaling Server ?
01:17
82
What is STUN Server ?
01:11
83
What is TURN Server ?
02:07
84
What is SDP ?
01:37
85
What are ICE Candidates ?
01:44
86
How To Establish Direct Connection Between Peers
03:12

Unlock unlimited learning

Get instant access to all 85 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

Building Large Scale Web Apps | A React Field Guide

Building Large Scale Web Apps | A React Field Guide

Sources: Addy Osmani, Hassan Djirdeh
CODE SMART, SCALE FAST, CONQUER CHALLENGES. Learn tools and techniques to build and maintain large-scale React web applications. “Building Large Scale Web Apps” is a toolkit to ...
Go Full Stack with Spring Boot and React

Go Full Stack with Spring Boot and React

Sources: udemy
Welcome to this Amazing Course on Full Stack Web Development with React and Spring Boot. This course is designed to be a Perfect First Step as an Introduction to React and Full ...
11 hours 43 minutes 36 seconds
Learn React 19 with Epic React v2

Learn React 19 with Epic React v2

Sources: Kent C. Dodds
Ready for the React 19 revolution? The most in-demand JavaScript framework has received a major update! You are already familiar with React, but in React 19 the
26 hours 51 minutes 3 seconds
React Hooks

React Hooks

Sources: ui.dev (ex. Tyler McGinnis)
If you never develop a convincing answer for both of those questions, you won’t have a solid enough foundation to build upon when you dive into the specifics. These questions ar...
3 hours 47 minutes 48 seconds
Bedrock: Jumpstart your next SaaS product

Bedrock: Jumpstart your next SaaS product

Sources: Max Stoiber (@mxstbr)
The modern full-stack Next.js & GraphQL boilerplate with user authentication, subscription payments, teams, invitations, emails and everything else you need.