Let's build and Connect together 🌈

Facetime - A Microsoft Teams Clone

Whether it’s chat, calls, or video, anyone can engage at any time, bringing everyone closer.
Your docs, photos, videos, chat history and meeting notes are always there, so it’s easier to work together.

View Deployed WebSite Here 🌐 https://microsoft-teams-clone-bysejal.netlify.app/

Vision ✨

Microsoft Teams is used to help teams work together remotely. You can find chat, video calls, and other tools within this application. It allows you to work effectively online with others alongside anytime anywhere. In my clone you just need to sign up with your Google or Facebook accounts then you can use any feature.

This Project repository Contains 2 folders :

Frontend In this the user authentication and group chat feature is deployed.

Backend The Video call feature that is the backend of this project is built in this folder.

Table of Content 📑:

• Agile Development
• Tech Stack/Tools
• Features
• Installation
• Screeshots
• Learning From The Project
• Challenges Faced

Adopt Agile Methodology 💻

To make this application I use Agile Development and Work on 4 sprints of 1 week each.

Phase 1 - Requirement Analysis Phase: Where I understand the requirements to develop this project and plan accordingly. Read all the documentation of the tech stack I planned to used in my project and document them properly.

Phase 2 - Designing Phase: I tranform my requiremnts into a suitable structure for implementation of programming languauge. So, it becomes easy for me to code.

Phase 3 - Building Phase: Here I start working on the mandatory feature of the project that is to make video call with peers. For this part I used WebRTC Peer to peer library, Nodejs, Socket.io, Express. After that I work on the Group Chat Feature which I made using React, Chatengine.io.

Phase 3 - Work on refining my codebase and UI of the project.

Tech Stack/Tools 🔧

• Reactjs
• Nodejs
• WebRTC Peer to Peer library
• Socket.io
• Express
• Html
• CSS
• JavaScript
• Ejs
• ChantEngine
• Firebase

Features 🌟

✅ User authentication from google or facebook account

✅ call feature

✅ Inviting people with the invite button

✅ Unique room id for every meeting

✅ Camera on or off functionality

✅ Microphone mute/unmute functionality

✅ Screen sharing feature

✅ In-meeting Chat

✅ Group chatting or make Groups

✅ Add anyone or remove people from the group

✅ Who saws the messages

✅ Sharing image or file in the group chat

✅ Customize our text in Group Chat

✅ Saw who are the part of this group

✅ Log out option

Installation

To use this project follow these steps:

For Frontend of the project

  npm init

  npm start
  
  run on localhost:3000

For Backend of the project

  npm install express ejs socket.io uuid peer
  
  npm install — dev nodemon
  
  peerjs --port 443 --path /peerjs
  
  nodemon server.js

ScreenShots 📸

Learning From the Project

It's an amazing experience to be part of this amazing Microsoft Engage Program'2021. From working on the frontend to become a person to deploy a full stack web application, I learned alot through this journey and under the guidance of my mentors Ashutosh Parija Sir and Saahiljeet Sir.

• I learn backend programming which I never did before.

• Get to know about Agile methodology and how it work in industries from Agile workshops.

• Get knowledge about different libraries and APIs.

• Learned Reactjs and Nodejs both are new to me.

• Did so many errors while implementing even a mandatory feature but debugging my code is also a great way of getting knowledge.

• Happy that I prepared a whole full stack project for my own with so many features which is not possible without these deadlines.

Challenges

• Previously I don't have any knowledge about any webrtc and peerjs libraries or working with API so its kinda tough to go through their documentation and then learn and implementing that stuff.

• Faced difficulty in storing chat history.