Bubbles

• 

  Landing Page

• 

  Main Player View

Inspiration

We wanted to watch videos together as a social activity during the pandemic but were unable as many platforms were hard to use or unstable. Therefore our team decided to create a platform that met our needs in terms of usability and functionality.

What it does

Bubbles allow people to create viewing rooms and invite their rooms to watch synchronized videos. Viewers no longer have to conduct countdowns on their play buttons or have a separate chat while watching!

How I built it

Our web app uses React for the frontend and interfaces with our Node.js REST API in the backend. The core of our app uses the Solace PubSub+ and the MQTT protocol to coordinate events such as video play/pause, a new member joining your bubble, and instant text messaging. Users broadcast events with the topic being their bubble room code, so only other people in the same room receive these events.

Challenges I ran into

• Collaborating in a remote environment: we were in a discord call for the whole weekend, using Miro for whiteboarding, etc.
• Our teammates came from various technical backgrounds, and we all had a chance to learn a lot about the technologies we used and how to build a web app
• The project was so much fun we forgot to sleep and hacking was more difficult the next day

Accomplishments that I'm proud of

The majority of our team was inexperienced in the technologies used. Our team is very proud that our product was challenging and was completed by the end of the hackathon.

What I learned

We learned how to build a web app ground up, beginning with the design in Figma to the final deployment to GitHub and Heroku. We learned about React component lifecycle, asynchronous operation, React routers with a NodeJS backend, and how to interface all of this with a Solace PubSub+ Event Broker. But also, we learned how to collaborate and be productive together while still having a blast

What's next for Bubbles

We will develop additional features regarding Bubbles. This includes seek syncing, user join messages and custom privilege for individuals.

Built With

• figma
• javascript
• node.js
• react
• solace