## Inspiration

Exam stress

## What it does

Plans a day by organizing tasks and generating breaks evenly spread throughout the day.

## How we built it

We made a website and used JavaScript for our backend

## Challenges we ran into

Trying to use python as our backend and then converting it to JavaScript

## Accomplishments that we're proud of

Being able to colour the schedule

## What we learned

How to organize a website

## What's next for Exam Season Planner

Creating a multi-day schedule, adding and removing tasks after the schedule is generated.
# HackGile

HackGile is a tool that brings the Agile Workflow to hackathons

Our tools lets your team create sprints, assign tasks, and organize your team as you break your hackthon project down into byte-sized pieces.

## Inspiration

A lot of the time, it can be hard staying organized during hackathons. So we thought that bringing in the Agile workflow would ease some of the struggle when it comes to who's doing what

## Technology

We used a lot of cool technology during this hackathon. We're running a WAMP stack, letting us use PHP for our back-end, and Javascript for out front-end. We used Materialize to style our front-end, giving it that sleek, Material UI look.

## What's Next

There are so many opportunities for HackGile. Besides just using it as a workflow tool, it has the capability of supporting proof-of-work blockchain for teams as they confirm the work their colleagues have completed.
# [ugly.video](https://ugly.video/): One-click Zoom meetings in the browser

### Why is Zoom bad?

1. **Everyone is tired of holding meetings and taking classes over zoom calls. It's old and boring af.**
2. **Slow meeting startup**
	* Click meeting link
	* Browser asks to open link in Zoom app
	* Click 'Allow'
	* Desktop app takes a second to load
	* Click 'Join with computer audio' to finally start hearing feedback
3. **Not optimal for creating spontaneous hangout rooms with friends.**
	* Unnecessary friction: why does it require **3 clicks** to obtain the invite link???
		+ Participants
		+ Invite
		+ Copy Invite Link
4. **Sharing images is tedious**
	* Also lots of friction, have to send links over chat
	* Feels so disconnected when everyone views things at different times
	* Screensharing is a possible solution but also brings in more friction
		+ How many times we all heard, **"Hey @host, can you enable participant screensharing?"**

### How does [ugly.video](https://ugly.video/) solve these issues?

1. **Chill aesthetic design**
	* Comic Sans font :D
	* **Surprise!** button populates your whiteboard with **memes**
2. **For non-hosts: Clicking on a room link instantly places you into the meeting**
	* **Zero friction** for entering meeting
	* No desktop apps to open: video streamed through browser
		+ Also more secure
	* Automatically sets up your audio and video connection
	* Only 1 extra click needed if your camera/mic permissions aren't yet enabled
3. **For hosts: Instantly create a meeting by visiting <https://ugly.video/>**
	* Button to copy meeting link is available immediately with **1 click**
4. **Automatic whiteboard for drawing and sharing images**
	* No friction for enabling whiteboards as the whiteboard is available by default

**Note:** Zoom is obviously a very well-made product, but there are many specific video conferencing use cases that could have significant improvements to UI/UX. Zoom is very optimized for business usage but there is a growing trend for more **spontaneous** and **engaging** forms of online socialization (i.e. **Clubhouse**). [ugly.video](https://ugly.video/) is optimized to **decrease friction** in online meetings by **minimizing click flows** and **promoting cheerfulness** in it's design.

### How I built it

WebRTC (Web Real Time Communication) is an open source standard that lets browsers communicate directly with one another. [ugly.video](https://ugly.video/) takes advantage of WebRTC to stream video and send data between meeting participants without using a complex backend server. This also improves **security** and **privacy** for our users as they control who can view their data.

I used [Peer.js](https://peerjs.com/) (a wrapper library for WebRTC API's) to facilitate the connections between browsers. For the whiteboard, I used [Fabric.js](http://fabricjs.com/) to easily interface with canvas elements.

### Challenges we ran into

1. The most challenging part was managing the connections between browsers that send video and whiteboard data. Each connection consists of an **initiator** and a **recipient**, and this requires us to deal with 4 possible scenarios:

	* Initiator sending data
	* Initiator receiving data
	* Recipient sending data
	* Recipient receiving dataMismanaging one of these scenarios was my most common logic error and took me a long time to initially debug because I had to walk through each line of code step by step.
2. The second most challenging thing I had to overcome was reading through the [Fabric.js](http://fabricjs.com/) documentation to figure out how their **Path object** was implemented. The path object is created whenever someone draws a line on the canvas/whiteboard, and I wanted to send data through WebRTC to the other meeting participants so they could reconstruct the path on their end. I had a weird bug where the data was being sent correctly but the reconstructed path wouldn't appear on the recipient's screen. This bug ended up taking me a while to fix because I had to dig into the Fabric.js source code to figure out exactly what was causing the error. Turns out I just needed to deconstruct the path data into a string format instead of in object format was being incorrectly analyzed by the Path constructor.

### Accomplishments that we're proud of

The **Surprise!** button that populates your background with memes

### What we learned

* How to install Node.js and npm properly lol
* WebRTC, Peer.js, and Fabric.js
* Hosting an app on Google Cloud App Engine
* Setting up domain names for our website through Google Domains

## What's next for Ugly Video

I want to enable all content (video and images) to be moveable along the screen. Right now, the videos are shown in an adaptive grid and the images are dispersed randomly. The critical technical challenge will be how to most optimally transmit content updates to the other meeting participants in a way that reduces memory load.