This web app is my version of a collaboration app that helps your team stay organized and have conversations—all in one place. The main objective is to provide a feeling of working in-office while working remotely with co-workers and friends. You can visit the website on the following URL: https://teams-clone-client.netlify.app
- Frontend is implemented using React JS.
- Backend of the projec is implemented using Node JS.
- MongoDB is used as a NoSQL database.
- Agora.IO and Socket.IO are used for real-time communication.
- Git is used for version control.
- The server code is present in the
serverfolder of the root directory - front-end of the project is present inside the
clientdirectory - all the individual pages can be found inside
client/pagesdirectory - all react components can be found inside
client/componentsdirectory
| 1. Login with Email and Password | 7. Event Scheduling on Calendar |
| 2. Login with Microsoft | 8. Syncing with Microsoft Outlook Calendar |
| 3. Group Video Calling | 9. Chat |
| 4. Screen Sharing | 10. GitHub Integration |
| 5. Screen Pinning | 11. Collaborative Blackboard |
| 6. Audio/Video Mute/Unmute | 12. Voice Assistant |
- User information is saved in the MongoDB database.
- The password is hashed first and then stored.
- Authentication is done using JSON Web Token (JWT).
- The calendar after successful login would be an empty one.
- User signs-in with their Microsoft Account.
- Authentication is done using Microsoft Authentication Library(MSAL).
- The calendar after successful login will be synced with user's Outlook Calendar.
- The group video call is implemented using Agora Web SDK NG.
- Agora Web SDK NG enables audio and video real-time communications.
- It has a Selective Forwarding Unit(SFU) Architecture.
- All clients connected on a particular channel publish their audio and video tracks to the server.
- The server is then broadcasting the received tracks to the other participants present in the call.
i. Mesh Networking
- Suppose A, B and C are connected through a video call. Then each person is sending their audio and video stream to every other person.
- High upload speed required (which is not common)
- Maximum of 4 people can connect through video call.
ii. Selective Forwarding Unit (SFU)
- Suppose A, B and C are connected through a video call. Then each person is sending their audio and video stream only once to the server.
- The server is then broadcasting the received stream to the other participants.
- High download speed required (which is common)
- More than 10 people can connect through video call.
- Screen Share functionality is also implemented with Agora Web SDK NG.
- It is achieved through replacing the video track of the user with ze's screen track.
- And vice-versa when the user wants to stop screen sharing.
- A user can pin other user's video or screen whenever is required.
- Pinning a user's video/screen means making ze's video/screen fullscreen.
- This is done by unpublishing user's audio/video stream to the server.
- The server relays this information to all other clients.
- Syncfusion scheduler is used for implementing the calendar.
- An events collection is created in the MongoDB database which serves as the data source for the calendar.
- API requests to the database are made to do Create, Read, Update and Delete(CRUD) operations on the events collection through the calendar.
- A user can add attendees to the event, when ze is creating an event.
- That event is then visible on the attendee's calendar as well.
- A meeting link for the video conference is automatically generated when an event is created.
- Microsoft Graph API is used for syncing the syncfusion scheduler with the Outlook Calendar.
- Authentication is done using Microsoft Authentication Library(MSAL).
- CRUD operations are performed through the Graph API.
- Whenever a user schedules an event on the calendar, a particular chat space for that event is created.
- The creator of the event and all the attendees are added to that particular chat space.
- They can chat before the event begins, during the event as well as they can continue their chat after the event ends.
- The chat participants can share both text and images with each other.
- A user can also create individual as well as group chats themselves by adding other participants to the chat.
- A user can explore and look upon other users profiles and their public repositories by searching for the user.
- Ze can also look at ze's private repositories.
- All the folders and files of the repository are accessible.
- Commit history in the repository can also be seen.
- Moreover you can see the repository issues, create new issues and comment on existing issues.
- You can do all this even while being in a meeting and discussing the product issues with your team.
- GitHub V3 API has been used to achieve this functionality.
- Draw collaboratively with your team while being in a video conference.
- User can still create a collaborative drawing space even if ze's not in a meeting and share link of the board with ze's team.
- A user can download the board as an image after ze's done drawing.
- Alan AI is used to integrate a voice assistant into the application.
- Navigation in the web app can be done using voice commands.
- Events/Meetings on the calendar can be scheduled, updated and deleted using voice commands.
- All simple conversations
- Ask about what this application does
- Schedule a meeting on specific date and time
- Schedule a meeting now
- Postpone/Prepone a meeting
- Delete a meeting
- Navigate through the application
- Agora Video Calling and Screen Sharing: https://docs.agora.io/en/Video/landing-page?platform=Web
- GitHub V3 API: https://docs.github.com/en/rest
- Microsoft Graph API: https://docs.microsoft.com/en-us/graph/api/resources/calendar?view=graph-rest-1.0
- Socket.IO: https://socket.io/docs/v3
