Skip to content

Aastha2602/teams-clone

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

OMEGA : THE MS TEAMS CLONE

Microsoft Engage'21 Project

Hey Everyone! Welcome to Omega: The ultimate MS TEAMS CLONE. This is a fully functional Real Time Video Calling Web Application where participants can connect with each other and have video and audio conversation incorporated with firebase authentication. Participants can also have chat before and after the meeting in their specific chat rooms. Users can create the chat rooms by scheduling corresponding events/meetings on the scheduler. Along with the collaborative Whiteboard and Voice to Text feature, which helps in not missing any important piece of information.

Hosted App: https://msteams-clone.netlify.app

How I used Agile Methodology

  • I had a clear vision of the key features that I wanted to build and hence used Agile methodology in order to achieve it on time by building it piecewise.
  • I have divided the timeline of 4 weeks into 4 sprints(each consisting of 1 week) and checked my progress at the end of every sprint.
  • Took a look at what feature I need to incorporate next and took constant weekly feedback from my mentor and asked for his precise suggestions and clarified my several doubts.
  • Everything we built could have flaws so the next step was to debug the code and improvise it. And hence, the planning for the next sprint started after the successful completion of the previous one.

Tech Stack Used 💻

  • Node.js with Xpress.js Framework
  • React JS
  • Socket.io
  • Javascript
  • HTML
  • CSS
  • WEBRTC
  • Syncfusion framework
  • Firebase Authentication
  • Firebase Firestore
  • Material UI

Client: React.js

Server: Node.js

Deployment:

  • Frontend on Netlify
  • Backend on Heroku

Features 📝

  • User Authentication using email and password
  • Scheduler for scheduling events/meeting
  • Video Conversation
  • Chat Feature
  • Before Meeting Chat
  • After Meeting Chat
  • Chat Rooms List
  • Collaborative Whiteboard with variable brush size and color palette
  • Voice to Text notes making

How to get Started

(Microphone and camera should be connected)

  • On opening the website on browser the user will be directed to Get Started page from where user will be directed to Login page.
  • On the Login page, user can log-in if already signed-up otherwise can go to signup page to fill in the credentials and can then log-in.
  • Once logged-in, user will be directed to scheduler from where he can schedule a meeting and corresponding to every event scheduled user will find the chat rooms with meeting names.
  • On the left of scheduler, a sidebar is present carrying various features.
  • On selecting the chat icon, user can enter into any chat room present in the left pain and can also create his own chat room by making an enent on the scheduler.
  • User can start chat before the meeting and messages will automatically be saved along with the user name allowing user to continue the chat even after the meeting .
  • From the call icon, user can enter his name and can call to anyone by sharing his Call ID.
  • A collaborative whiteboard feature is implemented to help user make better understanding of anything, having the feature of changing the brush size and choosing any color from the color palette. This feature can be used from the sidebar.
  • A Voice to Text notes making feature is also present to enable the user to take down all the important notes without missing anything by clicking on the start/stop button present there and when the microphone is turned on(shown by removal of red dot icon present with microphone icon) user can easilyu speak what he wants to note down and can save it by clicking on the save button. Saved notes will be shown in the saved notes box!
  • User can Logout by clicking on Avatar present on the header.

Reference Materials:

Hope you have a joyous experience using it!