/TeamsClone

Primary LanguageJavaScript

Microsoft Teams Clone

Alt Text

❓ Problem Statement

  • Make a Microsoft Teams Clone

VIEW LIVE DEMO

DOCUMENTATION

Note : Chat feature can be used only with :

  • Username: PrachiBansal, Reena, Aman, Rahul
  • Password: 123123

Note : This website is responsive.

🚧 Technology Stack

  • Frontend - ReactJS, HTML, CSS, Javascript
  • SMS sending - Chatengine.io
  • Video calling - daily.co
  • Deployment - Netlify

⬇️ Installation

  • First, fork this repository 🍴 and follow the given instructions:
# clone the repository to your local machine
$ git clone `git clone https://github.com/<YOUR-GITHUB-USERNAME>/TeamsClone.git`

# navigate to the project's directory and install all the relevant dev-dependencies
$ cd teams && npm intsall

# Start application
$ npm start

Workflow

  • Sign Up Page
  • Login Page
  • Home Page

I have added easy to comprehend icons on the Homepage

  • Microsoft Apps (on clicking grid icon)
  • Logout
  • Home
  • Assignement
  • Teams
  • Chat
  • Calendar
  • Apps page
  • Help

For SignUp page

  • Click on SignUp button to navigate to SignIn page
  • If you want to download the desktop app click on download now button

For SignIn Page

  1. Enter any username
  2. Enter any password
  3. Click on signin to navigate to home page

For Chat Application Login Page

  • Click on chat icon to open chat Login Page
  • Enter the username and password as mentioned above.

For Chat Application

  • Plus icon on top left is to create a new group.
  • You can share text and images and can also download those images.
  • If you are the creater of the group then on the right side you have options from where you can delete the group.
  • You can add new members by clicking on people.

Video Call

  • By clicking on join or create team button on left corner you will be navigated to video call home page
  • click on the start meeting button
  • A link will be displayed share that link with others
  • In the video control panel there is video on/off , mute/unmute , sharing screen , chat and exit option.

Future Scope

  • Organize online classes and meetings.
  • Able to send and receive messages.
  • Able to download and send images from the chat.
  • Able to make groups and delete groups.
  • Able to add people in the group.
  • Able to access the calendar.

Pending Work

  • Able to see messages before and after that are sent during the video call.

Additional Features to be added after deadline

  • Add a Create Team option and able to add users to it.
  • Connect this project with the database so that only authorized Microsoft Teams user can sign in.
  • Option to remove or allow a user in the meeting.

VIDEO DEMO