Dotspot.space

dots_v1.0
lobby_data_menu
dot_map

Inspiration

Study sessions are hard, study sessions with other people are even harder. We wanted to develop a web application that could represent the cluttered mind we so often feel when studying today.

What it does

A google chrome extension will track all websites you visit and close during the session, and send data accordingly to the Firebase backend. Our Angular application is listening to the backend and will dynamically populate the dot space with more or less dots depending on whether tabs were opened/closed. The dots themselves travel along random paths, and when hitting a wall will slowly change colors until it turns black. When black, movement stops and everyone should take a break from studying.

How we built it

The chrome extension was built with Javascript. Our web application itself was built with Angular with AnimeJS as the animations library. The backend was built with Firebase/Firestore.

Challenges we ran into

Animating things on websites is really hard! Like spend 12 hours, get very little result hard! The struggle to debug, diagnose, and implement anything animated with javascript was just a major timesink.

Accomplishments that we're proud of

In the end, our simulation was correct (for the most part), the dots move as expected and not a lot ghost through walls. Also our backend / chrome extension implementation was really quick, quick enough so that we could all face the challenge of working in JS together.

What we learned

Do NOT attempt to do anything related to animation if you're not some JS wizard, it's a frustrating, time consuming, tedious process that generally yields little foundational results.

What's next for Dotspot.space

We want to make study buddies accountable for each other, so we want to turn the dots into fish! When some user clicks on a link that is labeled "off topic" we can kill a fish for everyone to see (its a public aquarium after all)