Teams Clone Project

Website 1 : Vercel (preferred)
Website 2 : Heroku (takes time to load)
Video Demo

Microsoft Teams Clone is an attempt to bring the features to life of the robust and popular video conferencing application - Microsoft Teams. This project was done as a part of 1 month Microsoft Engage program 2021 , in which all candidates were given a task to make a video calling application and last week had a surprise adopt feature to add chatting feature.

Problem: The world has crumbled down because of the ongoing pandemic, there is minimal connectivity between people and it is getting hard to perform tasks in which group discussions , gathering are required. Eg :- Conducting Interviews , Normal School/College routines , Community Meetings Etc:-

Solution: This application uses a quick and easy way to connect two or more people (upto 50 ). You can create Channels ( Place were a group of people can chat and share important messages ). Do anonymous meetings and send unique meeting ID to make others join your meeting and do video-conferencing. Simple , easy to use UI has been used and webpage is compatible with any device (so that there is noone restricted from being able to use this application ).

Learnings: I would like to thank my mentors - Ankur Singh and Ayush Meghwani , With their help and timely guidance , I was able to progress myself from just knowing very few or nothing about web development to making a fully responsive React application. Their valuable opinions after each sprint helped me make this application reach its current potential. Moreover , I'm grateful to the entire Microsoft team for allowing me this great oppurtunity to learn under their guidance.

Features and Installation

These details have been been given in DesignDocument.pdf in an elaborate manner.

Technological Stack Selection

My aim was to be able to create an application that can serve purpose to maximum amount of users. Hence a web application suited the purpose as a browser is something that is common in almost any smart device. Moreover , there are very few web applications that are able to run a video call perfectly in a mobile device.

Language and Frameworks used - React framework using HTML, CSS, Javascript, JSX - Redux for local user state management

Twilio Programmable Video SDK - video, audio, and data streams management - for seamless data transfer between a group of users.

Google Firebase and Firestore database - user authentication system - for handling user data, messages, channel history

AWS Amplify console (primary deployment)

Heroku Cloud Platform (backup deployment)

Why Twilio?

Its WebRTC based.

All Video , Audio , Screen and user data tracks can be controlled by you.

Can help me connect upto 50 participants easily.

Highly customizable

Highly Documented

Provides access to their STUN/TURN servers

Can set your own server option , (Peer-to-peer or Server based group call)

Basically , anything that we could do using WebRTC API , but in a much easier and manageable manner.

It provide you support at both frontend and backend to listend various activity like people joining and leaving call, their tracks like audio and video and many more. It gives you a JWT token which is used for sessions to add people in a video conference.

Why AWS Amplify ? (For Deployment)

It doesn't sleep your application servers (This is one of the main issues with Heroku)

Hence the load times and connection times are significantly less. This therefore improves the user experience drastically.

Usage of Agile Methodology

After taking the session on Agile 101, I understood how modern software is developed and how agile methodologies are applied in Microsoft to deliver great products.

I set up sprint period of one week each and focused on finishing a certain task each week perfectly. Review the product towards the end of the sprint and add necessary changes as per the mentor suggestions before the next sprint begins. This disciplined process upon MS Teams Clone development gave me the following benefits:

It made my development process highly efficient.

It made my development process easy to handle, flexible .

Allowed me to easily adapt during the adopt phase. (where we had to add a chat functionality).

Challenges faced ( My Journey )

https://github.com/shobitnair/TeamsClone/commits/main

Being inclined in doing competitive programming most of my time , it was a very new for me to enter into software development. I had to begin everything from scratch and learn JavaScript and React during the first week. I couldn't initially understand any documentation and I could feel the pressure soaring. However , doing one fixed task at a time really worked out in long run (Using Agile Methodology) .

My second week was inclined in setting up the minimum features demanded by the program. Once it was executed and tested rigourously , I took feedback from my mentors and added additional features and made sure it works well without any bugs before the next phase.

Although we had limited time , I wanted to make sure that the application should be usable in any device. I gave intense care during building the UI/UX features of the application (during 3rd week) and tested the application in mobile , Tablets as well as large screen computers. It was very challenging to set up a grid based flexbox system to arrange each components to work perfectly in any device dimension. The CSS files are highly customizable and adding a new theme or editing an existing components is now a peice of cake , whether it be resizing it or changing its nature.

Deployment was a very new thing for me and it was hard to figure out initially , however everything went smooth once i got hold of how to set up the express server.

During the Adopt phase , I was happy that the additional feature was to set up a chat since I already had it. However , being able to chat before and after the meet was something I did not have already set in my application, neither was I expecting. My Mentors assisted me greatly with their suggestions during this phase to motivate me to build the feature using Firebase. ( Learned the basics and about handling the database using the first 2-3 days of Week 4). After Learning Firebase and Firestore , I set up a google Authentication system and a Groupchat (Channel) feature which works on and off the video conferencing without affecting its flow.

All these challenges were less of challenges and more of lessons, lessons to help me have an even better development process in the future so that I can incorporate the customers' requests and requirements easily and efficiently in near future.