MACROHARD TEAMS: A MICROSOFT TEAMS CLONE

🔗 https://macrohard-teams.web.app/ - (Built for Microsoft Engage 2021 Challenge )

▶️Demo Video: https://www.youtube.com/watch?v=CZY8IjJVv-U

⭐ Adopt Feature Implemented ✔️

⭐Special Feature: Live Video Call Transcription using Speech-to-Text Recognition NLP

🚀Solution Functionalities :~

🔷 Multi-user Video Calling + Realtime Chat

The Video Chat includes following functionalities:

1. Multiple participants can join and the video call is rendered in a split screen view depending on the number of participants
2. Live Video Transcription using Speech-to-Text Recognition (Natural Language Processing)
3. Email participants using EmailJS
4. Screen Sharing
5. Realtime Chat
6. Audio mute/unmute
7. Video on/off
8. Record screen (in development)
9. Start a meeting or Join with URL

---

📹 Adopt Feature:

💥 Users have the option to create a room to start a conversation whenever they want
💥 Start a video call feature is available both within the chat room itself and under the Call tab
💥 It is not compulsory to create a chat room from prior, a new chat room is created as soon as a meeting is started under the Call tab and if no chat room is pre-existing for it
💥 Conversations are recorded in the database before the meeting, during the meeting and after the meeting without any interruption and the realtime chat within meeting is stored in the database and available in the room even after meeting is ended

---

🔷 Chatting

1. Group Chat Rooms to allow multiple participants to chat
2. Create new rooms real-time
3. Start video meeting from within chat with multiple participants
4. Uploading and sending files as link easily with a click
5. Emoji Picker to use during chatting

🔷 Drive for Files

1. Easily upload files of any format to the drive with just 2-3 clicks
2. All the files uploaded and shown in order of time uploaded with file name, user name, size of file and date of last modification
3. The files are presented in both grid (card) and list form
4. Users can view the file by just clicking on name or card

🔷 Tasks

✔️ Full CRUD Functionality(Create, Read, Update & Delete)

1. Add new tasks to database
2. Edit/Update the tasks in database
3. Delete tasks from database

🔷 Events

1. Add Events using Datepicker, then events are arranged in order of descendance
2. Delete the events as required
3. Events are shown in card form in grid view. We can view full details on clicking view
4. Ability to add meeting link in details
5. Organizer name added automatically

🚀Roadmap:~

1.Implement Dark Mode on all pages
2. Complete Screen sharing feature
3. Implement permissions to view files
4. Implement User typing... in chat
5. Add ability to send show image files as photos in chat instead of link

🚀Solution Design:~

🚀Tech Stack Used :~

• React.js
• Node.js
• JavaScript
• WebRTC
• Socket.io
• HTML
• CSS
• Firebase

🚀Details:~

Your solution should be a fully functional prototype with at least one mandatory functionality - a minimum of two participants should be able connect with each other using your product to have a video conversation.

🚀Credits :~

Video Meeting component was open-sourced and re-purposed from Video Meeting. Additional features such as inviting participants via email etc. were added externally.

Video chat functionalities were implemented using WebRTC API and Socket.IO

Todo App reference: react-firebase-materialui-todo-app

Discussed project ideation with Ananya Thapliyal

This project was bootstrapped with Create React App

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open https://macrohard-teams.web.app/ to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

npm run eject

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

Code Splitting

This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting

Analyzing the Bundle Size

This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

Making a Progressive Web App

This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

Advanced Configuration

This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration

Deployment

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

npm run build fails to minify

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify