Skip to content
theo m edited this page Apr 20, 2021 · 6 revisions

wtrcoolr

wtrcoolr

wtrcoolr is a web app which allows group socialization and bond building through randomized videochats.

Background and Overview

With the prevalence of remote work

We will need to:

  • Make a Chrome extension that collects data
  • Build a database to store user and browsing data
  • Construct a Web application for visualization of and interaction with the collected browser data
  • Decide how to handle privacy issues: ideally, store data on user machines and give them options to delete unwanted data

Functionality & MVP

  • Web Application
  • User authorization: sign up and log in
  • Users can create and join organizations that they are a part of
  • Users with created organizations will be able to moderate their organizations
  • Live video chatting for an initial 90 seconds with the option to extend for up to 5 minutes
  • Both users must decline the call end to extend the call
  • Pairing and scheduling algorithm
  • Production README

Bonus Features

  • Chat functionality (Coming Soon)
  • Organization Pages

WireFrames

User Auth Modal

User Auth Modal

Dashboard

Dashboard

Admin Dashboard

Admin Dashboard

Technologies & Technical Challenges

wtrcoolr’s core application is a Chrome extension, with a back end built on MongoDB to save user auth and browsing data. The extension will populate the database. The data will be collected using methods from various Chrome API’s: Tabs, History, Sessions, Windows and Storage are the most likely candidates.

Google Chrome Extension
Backend: MongoDB/Express
Frontend: React/Node.js and D3 visualization library

Pairing Algorithm

Organizations set 'coolr time' where users can log in and be randomly paired with other members of their organizations.

Technical challenges:

Time synchronization User location data

Backend: MongoDB/Express

The user data will be stored as documents. Each user document object will contain the following properties:

  • name
  • email
  • password_digest
  • interests
  • non-starters
  • organizations as array of objectId references
  • administrated organizations as array of objectId references

The organization data will be stored as documents. Each organization document object will contain the following properties:

  • name
  • coolr_hours (organization's active hours)
  • administator(s) as array of objectId reference(s)
  • members as array of objectId references
  • previous day member count

Technical challenges:

Maintaining accurate timezone and location data within database

Frontend: React/Node.js

The data will be visualized in a Web application using the React library. Users will have a dashboard showing administrated organizations. Users will also be able to see coolr hours of organizations they are a part of. Video chat components.

Technical challenges:

  • Reading data from MongoDB database and organizing for display
  • WebRTC video chat components

Accomplished over the Weekend

  • All members of the team read MERN tutorials
  • Set up database
  • Wrote proposal Readme and planned work for the week
  • Implement basic setup of project.

Group Members & Work Breakdown

Theo Mantz, Everett Smith, Jack Egbert, Gino Reyes

Schedule:

Day 1 - April 19. 2021:

Backend: Jack setting up database/server and user auth Frontend: Gino working on getting UI wireframe setup Research: Theo looking into Socket.IO video chat function Generalist: Everett Socket.IO research.

Day 2 - April 20, 2021:

Backend: Jack and Theo implement backend routes/models for WebRTC connections Frontend: Gino Work on dashboard / session form / chat window / splash page Generalist: Everett TBD / helping with frontend

Day 3 - April 21, 2021:

All Hands: Feature testing / Final implementations.

Day 4 - April

Day 4 - Last Minute Styling / Debugging