TabishiSingh06/Engage-21_TeamsClone

Microsoft Teams Clone

This project is a part of the 'Build Phase' of the flagship Microsoft Engage Mentorship Programme 2021.
Full stack MERN Web App with React hooks, Redux, WebRTC, Socket.io & JWT authentication along with Google OAuth.

This is a project that I built under the "Microsoft Engage Mentorship Programme 2021". I have successfully built the basic functionality, surprise feature (chat functionality) and additional functionalities that have been documented below.

I have used the agile methodology and have worked in sprints of 1 week. I've worked on one or two features per Sprint and then got them reviewed in the 1 on 1 meetings with the mentors.

Read below for the complete documentation!

Table of Contents

1. About The Project
   • Project Overview
   • Front End Technologies
   • Back End Technologies
   • Database
   • Structure ✨
2. Functional Features 🌟✨
3. Installation
4. References 📎

About The Project

💻 A MERN Stack Video and Chat Application made using React hooks, Redux, WebRTC, Socket.io & JWT authentication along with Google OAuth.

Project Overview

Landing Page

Sign in Page

Authorisation and Login using JWT. You can also login using GoogleOAuth

Sign up Page

Authorisation and SignUp using JWT. You can also SignUp using GoogleOAuth

Video App and Chat App Page

Video App functionality using WebRTC, Socket.io using UUID for each chat room.

Front end Technologies

Reactjs
Axios : To send asynchronous HTTP requests to REST endpoints
Simple-peer : WebRTC video, voice, and data channels
React router dom
Shortid : To create a UUID
Socket.io-client : To enable real-time bidirectional event-based communication.

Back end Technologies

NodeJs ExpressJs Socket.io

Database

MongoDB

Structure

|-- middlewares
|-- models 
|-- routes
|-- passport-setup
`-- client
    `-- src 
        |-- components
        |   `-- chat 
        |   `-- header
        |   `-- HomePage
        |   `-- Login_Signup
        |   `-- Video_app
        |   `-- alert.js   
        |-- images
        |-- reducers
        |-- routes
        |-- utils
        |-- app.css
        |-- app.js
        |-- index.css
        |-- index.js
        

Functional Features

1. Two people video conferencing
2. Video on/off Button
3. Audio on/off Button
4. Call decline and Accept button
5. Chat Functionality with rooms
6. Authentication using JWT
7. Google OAuth - login & signup
8. Dynamic Error Handling at login and signup

Installation

$ npm install

To run the server (PORT: 5000) and react script (PORT: 3000) concurrently

$ npm run dev

References

JavaScript Mastery : https://github.com/adrianhajdin True Coder : https://github.com/sefyudem DevEd : https://github.com/developedbyed