Remote HQ

A Shared Space for All Your Team’s Resources
Timeline
1 month(December 2020)
Technologies
React, Firebase, Dialogflow, Google APIs.
Team

Remote HQ is a collaborative workspace for teams to create, edit, and find shared documents through visual, voice, and chat interfaces.

My Role
This was part of a final project in the Software Usable Interfaces course at Carnegie Mellon. I led the efforts of designing the state management and site infrastructure in React and connecting our platform to a backend in firebase.

Features

Store All The Teams Files and Links in One Place

Have a virtual common area where teams can organize and store their resources, such as Google Drive or Figma files, or even websites.

Create New Google Drive Files from Within The Platform

You can create new google docs, sheets, and slides from inside group folders. You no longer have to open multiple tabs and search for the right location to create your document.

Utilize Chat and Voice to Perform Basic Functionalities

You can do all of the basic navigating and file manipulation files through a chat and voice interface shown in the corner. These shortcuts can speed up your workflow, helping you to get more done.

Process

Context
Our final project for the class was to create a user interface that incorporated voice and chat functionalities. We have a little under a month to propose a project and build a working version of our proposal. For our project, we created a remote workspace, similar to google drive, that could be controlled through chat and voice using dialogflow.

My Contribution
My main contribution to this project was making the back-end architecture to support the functionalities of the site and to connect it to the front end. On the back end I used Firebase Firestore to store the user data and Firebase Functions(with node.js) and Google Drive APIs to create and modify the google drive files.

System Architecture

I designed the flow of data through our platform. I was familiar with Firebase services and google apis from other projects and utilized them for our project. Firebase functions enable us to run secure backend functions like creating new files and connecting to the dialogflow api.

Data Structure

After multiple iterations, I determined that the data structure shown would work best for our use case.

Users and teams are the top level collections. This allows for users to join multiple teams under the same account. The teams then have folder and link subcollections nested within each one. These two subcollections are easily searchable within the team pages and isolated from other teams.