React and WebRTC & Sharing Location App with Video Chat

Install node.js from nodejs.org to run server side JavaScript for your front end and back end. Add to path, verify with node --version and npm --version, and prepare the server side setup.

Create the server side for the Geo Call app by setting up a dedicated backend folder, initializing a node project with npm init, and preparing index.js for the server.

Set up an express server with socket.io and CORS, install dependencies, create an http server, define a hello route, and run on a port from env for local or deployment.

Add a socket.io server to your express app to enable bidirectional, low-latency communication over websockets with http long polling fallback, handle connections via the connection event, and log socket ids.

Test the socket.io server using Postman, restart the node server manually after changes, and verify bidirectional communication by connecting and disconnecting clients on port 3003.

Listen for the disconnect event on every connected socket and log the disconnected user's ID to track connections, implementing a socket.io server handler.

Move from server-side state management to the React client, tackling events with socket handlers, tracking online users, broadcasting user connections and disconnections, and routing chat messages step by step.

Create a React application with the Redux template using npx create react app my app template Redux, then remove unused files and build a simple Hello component.

Configure and wire a Redux store using Redux Toolkit, create a map slice with a set my location action, and connect it to manage location and online users.

Configure routing with react-router-dom to render login page at localhost 3000 and map page at /map by creating login page and map page components and defining routes in app.js.

Create a login page view in a React app, style with login page CSS, and implement logo, login input, and login button to connect to socket.io and the map page.

Manage the login username with React useState, initializing to an empty string. Pass username and setUsername to the login input and update state with an onChange handler.

Handle login with useNavigate to move to the map page on click. Validate the username so the login button disables unless it is 1–10 characters with no spaces.

Refactor the login page by moving the login button, login input, and logo into separate files, updating imports, while preserving app functionality for upcoming location sharing with other users.

Obtain the user's geo location in a react app using navigator.geolocation.getCurrentPosition inside a useEffect, with options for enable high accuracy and timeout to access latitude and longitude.

Define a location error state in a react login page and disable the login button when the username is invalid or geolocation access fails, using useState and useEffect.

Dispatch the set my location action with latitude and longitude from the position to update the map slice in the Redux store for location tracking.

Use Chrome redux devtools to inspect redux store and map slice, verify the set my location action, and remove strict mode to prevent duplicate useEffect, using dummy locations for development.

Generate a random fake location from a fake locations array and apply it at login. The location updates the map and enables sharing with online users.

Learn to connect a React app to a Socket.IO server using socket.io-client, wiring a connection at localhost:3003 with Redux-driven location data and bidirectional, real-time communication.

Set up a socket.io server to listen for the user login event, store online users by socket ID with username and coordinates, and remove them when the user disconnects.

Implement client-side login in a React app by emitting a login event to the socket server with username and coordinates, updating online users and map markers for real-time location sharing.

Register a user on the server, join online users room, and emit the online users array (socket IDs, usernames, coordinates). On client, listen for the event and render map markers.

Receive online user data from the server, implement a redux-based online users handler, and dispatch set online users to render map markers, marking self and managing disconnects.

Broadcasts the disconnected user details to all logged-in users when a socket disconnect occurs, then removes that user from online users in store by filtering out matching socket id.

Test the remove disconnected user functionality in the React and WebRTC sharing location app, ensuring the map slice action is exported and the disconnect event updates the online users list.

Render a live map using the google map react package, showing markers for online users at their coordinates, centered on the stored location with a configurable zoom.

Create a marker component to display users on the map, passing socket id, username, and coordinates; render with a location icon and fix marker jumps by downgrading to React 17.

render username labels under each location marker, showing me for the current user or the username for others, and enable distance dialogue with future chat and video calls.

Create a user info card on the map page showing the username and distance, with chat via marker click. Use a label component and fetch location with use selector.

Implement a set card chosen option action, dispatch it on marker click, and render a user info card using use selector to pass socket id, username, and location for chat.

learn to calculate the straight-line distance between two coordinates in kilometers using a reusable JavaScript function, and integrate it into the map page and user info card.

Round numbers to two decimals in JavaScript using a Math.round-based approach and backtick injection, citing Stack Overflow suggestions in a location-sharing app with video chat.

Create an action buttons component and a chat button in the user info card, rendering a chat icon, wiring an on click handler, and props for socket id and username.

Develop a messenger module to enable chat from map markers, create a messenger slice with chat boxes and history, and wire actions to open and remove chats in the store.

Create and style dummy chat boxes in the messenger using a css file and a chat box component, and map dummy data with socket IDs onto the map page.

Create and integrate a chat box nav bar component that shows the username and a close button, using props spreading and proper imports, with username passed from the messenger.

Create a functional messages container in the chat box, receive the socket ID as a prop, and apply flex-grow to occupy available space for future messages.

Add a new message input component to the chat box, wiring the input to the socket id prop and chat messages, and prepare for future state management and message submission.

Use useState to track the message and bind it to the input; on enter, send via socket.io after validating length, update the local store, and reset the input.

Render dummy chat messages in the chatbox by creating a dummy data array, a single message component, and right/left message variants, then map and display them for testing.

Replace dummy chat boxes with real ones by rendering chat boxes from the messenger slice in Redux using useSelector, and dispatch ADD_CHAT_BOX when a chat with a user opens.

Close chat boxes by wiring the nav bar's close button to dispatch removeChatBox with the chat's socket id using useDispatch from the messenger slice.

Explore appending local messages in a React and WebRTC chat within a sharing location app, updating chat history, dispatching chat messages, and wiring messenger actions.

Fixes a chat message bug by passing the socket ID to messages and chatbox in a React and WebRTC video chat app, enabling socket.io delivery and disabling input when offline.

Emit chat messages to the server via the socket connection, sending the data object containing the message. Implement a server-side chat message handler to route to online receivers.

Hook the socket.io chat message handler to dispatch add chat message with sender id and content. Enable auto-scroll and automatic chat opening on new messages.

Automatically opens and appends chat boxes when messages arrive by implementing an open chat box function, locating chat by socket ID, and deriving usernames from online users.

Learn to implement automatic chat scrolling in a React app by using a scroll ref and useEffect to scroll the last message into view whenever the message list changes.

Demonstrate turning the chat feature into video rooms by showing two users and a live video call. Open the room panel to connect the second user.

Prepare the Redux store for video rooms by creating a real time communication folder and a video rooms slice with initial state, and define setInRoom and setRooms.

Add a create room button and a rooms list to the video rooms feature in the react and webRTC app, wiring redux selectors and icon assets for the live interface.

Display dummy video rooms by mapping mock data to room join buttons. Pass room id, creator username, and participant count, and render the creator's initial for each room.

Register the created video room on the server by emitting a video room create event with a UUID, then publish the real room data to other users for video calls.

Fixes a bug emitting a new room event by correcting the action dispatch from video room actions, enabling server registration and notifying connected users for video chat.

The server creates a new video room with an id and participants and broadcasts updates to all connected users, while the client updates the room list on video rooms event.

Set and display real video rooms from the server by wiring a video rooms list handler to the socket and dispatching set rooms to the store.

Render the real rooms list by converting video rooms from the store into an array and extracting room id, creator username, and participant count.

Access the local camera and microphone with getUserMedia, store local and remote streams in a redux video room slice, and dispatch actions to manage streams in a WebRTC flow.

Display the local video by attaching the redux local stream to a video element. Render both local and remote streams in the room with muted local playback, autoplay, and playsinline.

Learn to set up a direct peer-to-peer WebRTC connection with PeerJS to exchange video and audio streams for real-time calls, using a connection object and a call object.

Install and import peerjs, create a new peer, and configure a local peer server (host localhost, port 9000, path peer). Open reveals the peer ID for future calls.

Explain how the peer server enables direct WebRTC connections between two users by exchanging signaling data through a socket.io server and a peer.js server for automatic event handling.

Learn to connect an express app to a peer server by installing peer, configuring a dedicated port 9000, and enabling direct WebRTC connections alongside socket.io.

Prepare the peer connection in the web rtc handler, listen for calls, answer with the local stream, and update the remote stream in the store; enable initiating calls via socket.io.

Discover how to join a video room by implementing a join video room function. The flow uses room and peer IDs, local stream access, and socket events to connect users.

Set up a server-side video room join flow with socket.io, validating rooms, updating participants, emitting a video room init to the joiner, and broadcasting updated rooms to logged users.

Test broadcasting rooms after login by restarting the socket.io server and manually registering a new room, then listen for the login event to initialize the second-user video chat.

Wire a socket event for video room init, import the call handler from the WebRTC module, and establish a peer-to-peer connection to exchange remote streams between two users.

Display the remote stream by retrieving it from the store and rendering it in a video element, testing with muted, and plan to add a disconnect button to leave rooms.

Create a video room buttons component to control microphone and camera state, implement a disconnect function, and render icon-based controls in the room interface.

Implement leave room functionality on the initiator side by emitting a leave video room event with the room id, disconnecting the peer, and updating the ui to reflect exit.

Test leaving room in a React and WebRTC video chat app, resolve map loading by restarting the app, and understand Redux store updates and server-side room cleanup when participants leave.

Add a server-side video room live handler that removes the disconnected user, checks the room exists, notifies the remaining participant to close their peer connection, and broadcasts video room lists.

Close peer connections on both sides by handling the video call disconnect event, cleaning all WebRTC peer connections and remote streams for a clean rejoin.

Handle dirty leave on the server by processing disconnect events, removing the user from video rooms, deleting empty rooms, and notifying remaining participants to clear peer connections.

Add microphone and camera toggle buttons in video room of the React WebRTC video chat app, wiring icons and Redux actions to mute and turn the camera on or off.

Learn to mute and switch off the camera in a WebRTC video room by toggling the local stream's audio and video tracks, and preview changes in real time.

Explore how WebRTC enables peer-to-peer communication to exchange video, audio, and data without plugins. Identify the signaling, stun, and turn servers that establish direct connections between two users.

Explore how a signaling server enables a direct WebRTC connection by exchanging network details, codec information, and browser data, with WebSocket or HTTP options.

Stun server helps peers discover their public IP address and NAT type to establish the media connection. Signaling server exchanges details, with a turn server as fallback if stun fails.

Signaling coordinates peers and STUN reveals their internet details, while TURN relays traffic when direct connections fail, not inspecting data, due to traffic costs.

Explain how SDP enables negotiation between peers for audio and video codecs, the source address, and timing, and outline the offer/answer flow via signaling server to establish a WebRTC connection.

Learn how to exchange SDP and network details via signaling, use ICE candidates from a stun server, and fallback to a turn server to establish direct WebRTC connections.

Establish a direct peer connection by exchanging a WebRTC offer, SDP, and ICE candidates via the signaling server, with STUN and optional TURN, enabling video, audio, and data channels.