React and WebRTC Sharing Location App with Video Chat

React and WebRTC & Sharing Location App with Video Chat, available at $59.99, has an average rating of 4.45, with 90 lectures, based on 22 reviews, and has 285 subscribers.

You will learn about 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 Build entire project from Scratch This course is ideal for individuals who are Students who want to learn how to create Sharing Location Application or Students who want to create Realtime Application or Students who want to know how to Create Video Chat or Students who want to know how to create Chat Functionality It is particularly useful for Students who want to learn how to create Sharing Location Application or Students who want to create Realtime Application or Students who want to know how to Create Video Chat or Students who want to know how to create Chat Functionality.

Enroll now: React and WebRTC & Sharing Location App with Video Chat

Summary

Title: React and WebRTC & Sharing Location App with Video Chat

Price: $59.99

Average Rating: 4.45

Number of Lectures: 90

Number of Published Lectures: 90

Number of Curriculum Items: 90

Number of Published Curriculum Objects: 90

Original Price: $124.99

Quality Status: approved

Status: Live

What You Will 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

Build entire project from Scratch

Who Should Attend

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

Target Audiences

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

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)

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

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

Instructors

Marek Gryszkiewicz
Web Developer

Rating Distribution

1 stars: 0 votes

2 stars: 1 votes

3 stars: 0 votes

4 stars: 5 votes

5 stars: 16 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!