Bubble

Inspiration

With summer coming to a close, we students will inevitably be trapped in a whirlwind of assessments, deadlines, and stress. To preserve our deteriorating mental health, I created Bubble so students can bring the relaxation of summer with them into the school year.

What it does

Bubble is a meditation web app that uses the 4-7-8 breathing technique to help users release stress. Upon navigating to the website, users will be directed to a private meditation space where they can listen to a curated Spotify playlist while following calming breathing exercises.

Building Process

I drew all the icons on the website using sketch.io. To create the animations on the website, I used CSS keyframes and SVG to curve the text. For the Spotify integration, I utilized the Spotify API's embed feature.

Challenges

Working with SVG was challenging, as there was a lot of fine-tuning involved in getting the UI to look right. This was also my first time working with CSS animations, and it was fun to get everything working.

Accomplishments

I am very proud of Bubble's UI. There were a lot of moving parts, so many adjustments were needed to get everything to look just right.

Insights

While creating Bubble, I learned a lot about the process of designing UI. I am much more familiar with CSS animations and SVG after working on this product.

What's next for Bubble

In the future, we will expand the meditation spaces to make them more customizable. We hope to offer accounts so that users can save their customizations to enhance their experience.

Built With

• css
• github
• html
• replit
• spotify
• svg