🔰 MS Teams Clone 🔰

An attempt to make a clone of existing MS Team for Micorsoft Engage 2021🔗.

It was a challenge given by Microsft to build a replica of MS Team with a mandatory feature where atleast 2 people can join a room and have video call. On my way of building this I used MERN stack for building its frontend and backend. I tried and added more featrues by myself to make it user-friendly

How to run in local system 💻

This project containns 2 folder 📁 "client" and "server"
Client conatins frontend part and server contains backend part for this website

Prerequisites

‼️ You should have node version higher than 8
‼️ Get a free account of Twilio and pen down your Account sid, API key and API sid
‼️ Get a free account of Chat Engine and note down your project ID and API key

In client's .env.local file

REACT_APP_CHAT_ENGINE_API_KEY=XXXXXXXXXXXXXXXXXXXXX
REACT_APP_PROJECT_ID=XXXXXXXXXXXXXXXXXXXXX
REACT_APP_BACKEND_URL=XXXXXXXXXXXXXXXXXXXXX

Deploy your backend on heroku and save the URL or write http://localhost:5000 if your are running it locally

In server's .env file

TWILIO_ACCOUNT_SID = XXXXXXXXXXXXXXXXXXXXX
TWILIO_API_KEY = XXXXXXXXXXXXXXXXXXXXX
TWILIO_API_SECRET =XXXXXXXXXXXXXXXXXXXXX
PORT=XXXXXXXXXXXXXXXXXXXXX
MONGO_URL=XXXXXXXXXXXXXXXXXXXXX
CHAT_ENGINE_API_KEY =XXXXXXXXXXXXXXXXXXXXX
CHAT_ENGINE_PROJECT_ID =XXXXXXXXXXXXXXXXXXXXX
MAIL_ID=XXXXXXXXXXXXXXXXXXXXX
MAIL_SECRET=XXXXXXXXXXXXXXXXXXXXX

Create a database in Mongo Atlas and note the secret and url of the cluster

✔️1. Clone this repository

 git clone https://github.com/AdityaKumar-01/MS-Teams-clone.git

✔️2. cd into client and then run

 cd client
 npm install

✔️3. cd into server and then run

 cd server
 npm install

This will install all the dependencies required and your are good to go 💯

---

Working 🛠

Frontend

For frontend I used React to build components like form teams and other things. React is a go to option for projects like this where you have multiple repeating components and lot of rendering of components is required. Frontend was supported by lots of other NPM packages too to make the work easy and nice.

Here is a list of those NPM packages 📝

📍 Material UI core
📍 Material UI icons
📍 Axios
📍 React Avatar
📍 React Chat Engine
📍 React Scroll To Bottom
📍 Use Animations
📍 Twilio
📍 UUID

Backend

For backend I used NodeJS for creating servers and routes. I used node for backend because it has support from a big community for its packages and twilio and chat Engine is very easy to integrate. For database I used MongoDB Atlas which is cloud based data storage.

Here is a list of those NPM packages 📝
📍 Axios
📍 Twilio
📍 UUID
📍 Cors
📍 Express
📍 Mongoose
📍 Nodemon
📍 SHA256

Tools in Spotlight🔆

Chat Engine

Chat Engine helps you to build chat app. You dont have to write all the componets from scratch and every part of it is customizable. In this project I reconfigured most of the components like created own form to send message, created own custom styled chat messages and added functionality like sending pictures and starting a video call with memebers of chat room and many more. It also has its REST API with which you can interact with teh database it has.

Twilio

Twilio is a very superb tool for communication. It has various feature like bulk message sender, audio and video call and many more. I used its video calling API which is a wrapper around WebRTC. 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.