Microsoft Engage 2021 Challenge

A Microsoft Teams Clone with group video call and team channels!
Video Demo · Live Site

Table of Contents

1. About The Project
   • Overview
   • Features
   • Frameworks and Services
   • Work Methodology
   • Coding Practices
2. Getting Started
   • Prerequisites
   • Installation
3. Database Structure
4. Screenshots
5. Tips for Developers
6. Known Issues and Limitations
7. Contact
8. Acknowledgements

About The Project

Overview

This is a group video call and basic team management web application developed with Vue.js and Firebase. This project is developed as a part of Microsoft Engage 2021 - an Engagement and Mentorship Program by Microsoft in association with AceHacker.

The focus of Engage 2021 was on Agile Development Methodology, a work framework that helps in adapting to uncertainties and emphasizes teamwork. Since this program demanded individual participation, selected individual-level agile practices were chosen and adopted in the development of this project.

Features

Some of the major features of the app include:

• Group Video Call
• User Authentication
• Responsive App
• Join Open Meetings without Login
• Dedicated channels/rooms for teams
• Chats saved permanently in your team room
• Host Controlled Meetings
• Room CheckIns and Waiting Room
• Powerful Jitsi Calls
  • Turn on/off Camera, Mute Mic and Screen share
  • Raise Hands
  • Send messages personally
  • Full Screen support

Other minor features include:

• Navigation Bar
• Invite Link
• Copy to Clipboard for invite
• Instruction Box
• Ability to change user name in meetings and team rooms.
• Tooltips wherever needed

Frameworks and Services

Major Frameworks and Services used in this project:

• Vue.js
• Firebase
• Jitsi
• Bootstrap

Work Methodology

This project is developed using Agile Development Methodology with a Design Thinking approach to test features and prototypes.

The work was organized in 4-day scrum sprints. Tasks or backlogs for a sprint were bucketed in three categories:

1. Features
2. Bugs
3. UI/UX

If a backlog was not cleared in a sprint, it was rolled over to the subsequent sprint.

Project Timeline

After every sprint, the app was given to friends, colleagues and, family members for testing and feedback was taken. This practice of building prototypes very fast and getting user feedback is a standard design thinking practice. After receiving the feedbacks, the work was reviewed and the tasks for the next sprint were decided. One common observation from this activity is that majority of the people wanted the app to be simpler and more intuitive.

Coding Practices

This project uses all the three priority rules recommended by Vue.js community in its official Style Guide

1. Essential Rules (for Error Prevention)
2. Strongly Recommended Rules (for better Readability)
3. Recommended Rules (for minimizing Cognitive Overhead)

Further, it is attempted to maintain consistency in block spacing and identation.

Getting Started

Prerequisites

• Node.js and npm

  • Download the latest stable version of Node.js.

  • If you already have Node.js, update npm

    npm install npm@latest -g

• Firebase

  • Create a Firebase Account.
  • Start a new project.
  • Enable user authentication via Email (Reference)
  • Note SDK configuration code

Installation

Project Setup

1. Clone the repo

   git clone https://github.com/atishayjn/TeamsWebsite.git

2. Install NPM packages

   npm install

3. Enter your Firebase SDK configuration code in db.js in place of environment variables

   let firebaseConfig = { 'ENTER YOUR SDK CONFIG' };

Compile and run for development

npm run serve

Compile and minify for production

npm run build

Database Structure

The Firestore database is organized in a specific manner given below. You can start with an empty Firestore database and the app itself generates the data in the given manner.

Users collection

users: {
  USER_ID: {
  }
}

Rooms collection inside a User document

rooms: {
  ROOM_ID: {
    name: String,
    hostID: String,
    createdAt: Date
  }
}

Attendees collection inside a Room document

attendees: {
  ATTENDEES_ID: {
    displayName: String,
    approved: Boolean,
    createdAt: Date
  }
}

Messages collection inside a Room document

messages: {
  MESSAGES_ID: {
    author: String,
    author_id: String,
    message: String,
    createdAt: Date
  }
}

Screenshots

Home Page

Open Meeting

Your Teams Page

Team CheckIn

Team Room

Tips for Developers

To understand the code, especially if you plan to build this app from scratch.

1. Start with Vue files with names starting with App*.

   • These files contain the base app level code.

2. After this you can follow one of the two ways:

   (i) To understand the minimum functional code (easy), check vue files with name starting with Open*.

   (ii) To explore and understand the main feature (i.e., Team Rooms) of the app, check vue files with name starting with Teams*.

I highly recommended going through Vue Style Guide to follow good coding practices.

Known issues and limitations

• Jitsi Meetings give Host Control to everyone in the meeting, giving privileges like kicking out others.

  • From Jitsi user forum, it was found that they are working on giving an option to pass user "role" as an attribute in the API.
  • This limitation can be overcome by writing opposing commands in listener functions for host control features.

• Google Chrome sometimes give "display-capture" error while loading the meeting.

  • In such a case, clear browsing data and try again.

• Teams deleted by host still appears in other attendees' team list.

Contact

Atishay Jain

Acknowledgements

VueMastery Introductory course on Vue.js, and Vue.js + Firebase Project Course by Ray Villalobos on LinkedIn Learning had been of great help in the development of this project.

Special thanks to Ishant Gupta, Ritik Taneja and Avi Wadhwa to recommend me the right resources and frameworks to get started with Web Development and help me in fixing bugs. They have been as important to this project as Stack Overflow.