Microsoft Engage 2021 - Video Chat App

VIDEO DEMO - Microsoft Teams Clone - Video Demo

Architecture

The index.js file contains all the back-end functionality.

Inside the client folder which contains all the front-end functionality - >

1. The public folder has an index.html file which is the basic skeleton of the web application.
2. The src folder contains ->
   1. App.js - Integrates all the components into a web app.
   2. index.js - Renders the App.js file.
   3. SocketContext.js - Contains all the socket logic pertaining to the video calling feature.
   4. styles.css - Custom stylesheet for index.js.
   5. Components folder ->
      1. AlertDialog.jsx - Alert dialog box component.
      2. CallOptions.jsx - Call options card component.
      3. ChatDrawer.jsx - Chat Drawer Component.
      4. EmailDialog.jsx - Email Dialog box component.
      5. VideoGrid.jsx - Video Player component.
      6. scrollbar.css - Custom redesigned scroll bar stylesheet.

WEBAPP LINK - Microsoft Teams Clone