Capstone Project - Chaterio

A React/Express video chat application that allows a user to join a room and chat with other users.

This was a very ambitious task to complete within a two week period, and although the basic video calling is functioning it remains a little buggy, thus development process of this application is ongoing.

Contents

Technologies

Brief

Planning

Installation

Technologies

These are the main technologies used to develop the project.

JavaScript

React

Express

HTML5

CSS3

WebRTC

PeerJS

Brief

For the Capstone project, I worked independently to explore WebSocket technologies, including socket.io and peerjs, by creating a video chat application. A rather ambitious task that went beyond the curriculum and provided a massive learning curve. MVP has been met but is a little buggy here and there. Testing has proved difficult with exploration in https certification, tunnelling via Tailscale, and Chromium. This will remain my passion/experimental project. WIP.

MVP

A user should be able to...

• Users will be able to log on by entering their name.
• Users will be able to join a room via a room name.
• Users will be able to create a room.
• Users will be able to Thave video chat with other users.
• Users will be able to leave a room – which will redirect to homepage.
• A room should be able to host two users.

Extensions:

• Users can join rooms with multiple users.
• Users can text other users with CRUD actions.
• Users can randomly join a room with strangers.
• Users can mute their microphone.
• Users can disable their camera.
• Host website on AWS.

Planning

Learning new technologies was key. YouTube tutorials, documentation for socket.io and peerjs helped explore these technologies. The website most similar to my project is jitsi which provides a reasonable framework in which to explore. Further to this the below wireframes helped structure the look of the project.

It was discovered early on that the main function of the application needs a reletively small amount of code... but indeed very tricky code.

Installation

You'll need socket.io, socket.io-client, peerjs, express, styled-components, uuid installed. Ensure you navigate to the correct folder when installing e.g. socket.io in server folder and socket.io-client in client folder.

Client folder:

npm install socket.io-client styled-components uuid

Server folder:

npm install socket.io peerjs express nodemon

You will need to run the front end, and two backend servers using three terminal windows.

Start React application:

npm start

Start Express server:

npm run server:dev

Start peerjs server:

peerjs --port 9001

Then visit http://localhost:3000/ to view the app.