Microsoft-Team-clone

The project was built as a part of the Microsoft Engage '21 Program. Contributors were required to build a clone of the Teams app with the mandatory feature of connecting via video call and incorporate Agile Methodology into our work. Within a span of 4 weeks the participants were also given a adopt phase of incorporating a chat feature.

Solved Problem: This clone application aims to offer a quick and easy way to connect with your friends, family and teammates by utilising the power of javascript and WebRTC.

Learnings: Through the Microsoft Engage Mentorship Program 2021,I was able to learn to about new Technologies, get the habit of working using Agile Methodology and deploy a Full stack webapp.

Try the MS Teams Clone Web App here.

Watch the Demo on YouTube

Table of contents

• Features of the Application
• Installation
• Tech Stack Selection
• Usage of Agile Methodology
• Challenges Faced
• Future Scope

Features of the Application

1. Prompt to enter Username
2. Unique room IDs for every new meeting
3. Copy invite link using Invite Button
4. Mandatory Feature (Video Call)
5. Group video calling
6. Participant video calling sidebar
7. Click a participant's video to pin it to the large video area
8. Microphone mute/unmute
9. Video on/off
10. Functional Leave Meeting Button (redirects to Home Page)
11. In-meeting chat
12. Collapse Chat Button
13. Screen Share Button
14. Chat with Username

(Back to top)

Installation

To use this project, follow the steps below:

Initialise git on your terminal.

git init

Clone this repository.

git clone https://github.com/24sristi/Microsoft-Team-clone.git

Change the directory.

cd Microsoft-Team-clone

Open the repository with your code editor. In case you do not have a code editor, it is recommended you use Visual Studio Code.

code .

Open the terminal in Visual code by pressing Ctrl+J (Windows) and run the following command:

nodemon server.js

Go to: http://localhost:3030/ in your Browser to access.

(Back to top)

Tech Stack Selection

• FRONTEND
  I have used HTML, CSS and EJS. I have used Figma to Design the UI. I tried to make sure that the UI of the app was different from Basic Teams to make sure that MILO is unique.

• BACKEND
  I have used NODE JS and EXPRESS SERVER

• VIDEO CALL SDK
  I research between various SDKs and finally arived at the decision to use Web RTC.
  I have used SOCKET IO for real time Communication and PEER JS for peer to peer connection in video call.

• HOSTING PLATFORM
  I have used HEROKU as the hosting platform.

(Back to top)

Usage of Agile Methodology

Through the 4 week span of the project, I undertook weekly sprints and made sure that small features get implemented in an efficient and time bound manner. Having a usable version of the product from the very beginning and seeing it evolve through the days and weeks was a joyful experience.

(Back to top)

Challenges Faced

During the development process I faced the following challenges:

1. Deciding the type of Web SDK to use.
2. Resolving the constant bugs and learning Backend Development from scratch as before the project I only knew basic HTML and CSS.
3. Implementing the Adapt feature. I was able to implement the in-meeting chat but since I had less time I wasn't able to implement the before and after display of chats.

(Back to top)

Future Scope

1. Record the meeting feature can be added
2. Caption generation
3. User authentication
4. Invite link being automatically sent via mail/whatsapp
5. Raise hand and other reactions
6. Waiting rooms

(Back to top)