HydroBud

Inspiration

We hoped to build an extension that is easy to use and propels the user to reach their wellness goals in a realistic manner. Honing into one aspect of wellness allowed us to dive into the theme and ensure hydration is achieved. Lastly, we did not want this application to put more work and stress on the user but have it be very easy to incorporate in their daily routines.

What it does

HydroBud is your friendly plant companion designed to help you stay hydrated and healthy. This chrome extension generates an on-screen plant friend whose hydration needs mirror your own, reminding you when it's time to take a sip. Simply set your daily hydration goals and choose your plant seed, then sip away and watch your plant grow! As you reach your hydration milestones, your plant will flourish, eventually blooming into a vibrant flower.

How we built it

We built a Chrome Extension to display and use Hydrobud. We used Javascript, CSS, and HTML to accomplish all the goals of the extension. The manifest.json was used to allow for extension permissions. HTML was used to create the entire UI of the popup and the different screens that come up when using the plant. Javascript allowed us to manage and run timers and reminders in the background to keep track of the current session. Additionally, we used Javascript to store data in local storage and use Chrome API integrations.

Challenges we ran into

We ran into some challenges while implementing this. Initially, It was difficult to display the correct timer and maintain it between sessions, even when the extension was closed. We learned how to maintain different screens that reflect the variables stored. Additionally, we found it difficult to manage each plant state and have user input dictate the current state. Coordinating multiple components across different files posed a challenge and allowed us to become proficient in the new languages we utilized for this project.

Accomplishments that we're proud of

The accomplishments we are proud of include creating a working prototype with our desired functionalities and working as a team to complete all the tasks before the deadline.

What we learned

From this Hackathon, we learned how to use javascript, html, and css, as well as the infrastructure of Chrome extensions, including security issues and how these extensions operate.