/Microsoft-Teams-Clone

This project is clone of Microsoft teams under Engage Mentorship'21 by Shashwat Sahu

Primary LanguageJavaScriptMIT LicenseMIT

Microsoft Teams Clone

Hey Code geek, welcome to my project 'Microsoft Teams Clone'. It was under the challenge of Engage Mentorship program 2021 by Microsoft. Its been a great journey and quite insightful too.
Challenge was basically about connecting two people on teams via video calling. On above of that I incorporated following features:

Website Link: teams-clone-shashwat

Youtube Link:: teams-clone-shashwat-youtube

Thanks to symbl.ai for transcript API

Agile Implementation

The Development was a series of continuous Integration and continuous Deployment. Each functionality was divided in weeks under SCRUM. Each sprint’s goal was to build the most important features first and come out with a potentially deliverable product. Testing was done on Selenium IDE. Also even adapt feature which is taken as customer needs, was added in subsequent sprint.
Priorty Level:

  • 1: Lowest Priority
  • 2: Low Priority
  • 3: Medium Priority
  • 4: High Priority
  • 5: Highest Priority
Type Week Description Priority level Status
Setup Week 1 Front End : React
Backend: Nodejs
DBMS: MongoDB
4 Completed
Feature Week 1 Video Calling between two people 5 Completed
Bug 01 Week 1 Peer Connections disrupted 5 Resolved
Feature Week 1 Video Calling between group of people 4 Pending
Bug 02 Week 1 Peers not destroying in group video calling 5 Pending
Feature Week 2 Meeting Chat 3 Completed
Bug 02 Week 2 Peers not destroying in group video calling 5 Resolved
Feature Week 2 Video Calling between group of people 4 Completed
Feature Week 2 Screen Sharing 3 Completed
Feature Week 2 Meeting Chat 3 Completed
Bug 03 Week 2 Scren Sharing not enabled for other people 5 Resolved
Feature Week 3 Screen Recording 3 Completed
Feature Week 3 Transcript Added (Socket implementation remaining) 2 Pending
Feature Week 4 Chat outside meeting (Adapt feature) 5 Completed
Feature Week 4 Authorization 3 Completed
Feature Week 4 Transcript Added (Socket implementation) 2 Completed
Procedure Week 4 Testing Phase (on selenium IDE) 3 Completed
Procedure Week 4 Code cleaning 2 Completed

Pre Requisites

  • Gain Mongo access link from from Mongo DB and paste in .env as MONGO_URI
  • Gain App id and access token from symbl.ai and paste in .env as 'appid' and 'accessToken'

Client Side

Code Prospects

npm install

Install modules mentioned in package.json

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

npm run eject

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

Server Side

npm install

Install modules mentioned in package.json

npm start

Runs the app in the development mode.
Open http://localhost:8000 to run server.

You will also see any errors or information in the console.

E-R Diagram

er

Flow of functionalities

Group Video Call

video-call

Screen share

screen-share-diagram

Screenshots

Sign In

signin

Sign Up

signup

Teams Chats

teams chats

Create Room

create room

Join Room

join room

Home

home before joining

Meeting

meeting

Meeting chats

meeting Chats

Screen Share

screen share

Screen Recorder

meeting Chats

Screen Recorder Example

meeting Chats

Transcript

transcript