React and WebRTC 2023 & Sharing Location App with Video Chat
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.
More
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 React and WebRTC 2023 & Sharing Location App with Video Chat
| # | Title | Duration |
|---|---|---|
| 1 | Application Preview | 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 |
Similar courses to React and WebRTC 2023 & Sharing Location App with Video Chat
Discord Clone - Learn MERN Stack with WebRTC and SocketIOudemy
The Official React Query Course - query.ggui.dev (ex. Tyler McGinnis)
The Complete Guide to Advanced React Patterns (2020)udemy
Microservices with Node JS and ReactudemyStephen Grider
React Query (OLD)ui.dev (ex. Tyler McGinnis)
The Joy of ReactJosh Comeau
MERN Stack From ScratchBrad Traversy
React and Typescript: Build a Portfolio ProjectudemyStephen Grider
Learn React 19 with Epic React v2Kent C. Dodds
