Inspired by productivity apps such as Forest and our own recent personal research into the importance of water to our lives, we decided to create an app that utilizes a progress-based productivity mechanic, similar to Forest but with our own water twist. We also wanted something that would educate users on water and its importance. So, we combined these two factors together to create Waterfull!

What it does

Waterfull is a Chrome extension that a user can install and use at any time. By clicking on the icon in the extensions bar, a popup window will appear. There, the user can set a session time in minutes. Once the session starts, Waterfull will monitor the user's tab activity on Chrome, putting their tab domains against list of distracting websites. As the user spends time on Chrome without using these distracting websites, the "reservoir" (progress bar) will continue to fill. As the reservoir fills, the surrounding "desert" will bloom with life. However, if the user opens a distracting website, progress will reset and the desert will wither. If the user can make it through the entire session without going on any of the distracting websites, the desert will fully bloom into a special paradise! After the time is elapsed, the user is free to go on whatever websites they want until they choose to grow a new paradise.

How we built it

Waterfull was built using HTML, CSS, JavaScript, and JSON- the standard languages for a Chrome extension. It was the first time we had set up an SSH server to work collaboratively on, and we successfully connected to GitHub as well!

The extension's assets were all added via our HTML script, while our CSS script managed the animations, text and image formatting, and the animation for our desert and progress image layers. We used JSON in the manifest file to set our basic information, permissions, icons, and our default popup. Furthermore, the CSS was a vital part of our progress bar, buttons, and our waterfall animation. Finally, the background JS script managed our event listeners, waterfall animation, timer, button functions, fact randomizer, and website blocklist and tab detection functions. We used many of Chrome's available APIs.

The popup's graphics were made on Krita, while our logo was created on Figma.

Challenges we ran into

We ran into many challenges along the way- from setting up the timer, understanding Manifest V3 and modal content, setting up our progress layers, and configuring our progress bar. However, the greatest challenge was probably developing an entirely different product than what we were used to. Both of us have had prior experience in hackathons, but due to limited experience and skills, we mostly stuck to web development. Developing a Chrome extension was a first for us and we had an interesting time figuring out how exactly Chrome extensions worked. There were many errors with the loading of the extension locally, as well as getting our tab detection functions to work. It was challenging trying to find our way around MV3 when most online resources were still on MV2! :')

Accomplishments that we're proud of

We feel very proud that we successfully created a working timer and progress bar, along with layers of "bloom" in the desert that are added incrementally throughout the session. We are also extremely proud of being able to load the unpacked extension at all, since we had a lot of trouble getting that to work. It was very satisfying to be able to see the actual popup load on our own web browsers! Even if there were many errors being thrown with not much reason why, we were so glad to see the fruits of our labour coming to life. Most importantly, we are so happy that the waterfall and the reservoir work! They were key features of our project.

What we learned

We learned so much about Chrome extensions and how they work. They seem really interesting and not too hard to code, so we will continue to work hard and see if we can get Waterfull fully implemented. We also learned a lot of JavaScript along the way. Content listeners and events were also big things that we learned and implemented somewhat successfully. Since they are key components of Chrome extension development, we are so happy that we are starting to grasp these concepts. We also learned how important having separate JS scripts is: we didn't fully understand how they worked and the differences between having content.js, background.js, and other JS scripts. However, we know now it means a world of difference! :')

What's next for Waterfull

Waterfull would like to partner with water organizations if we could somehow generate revenue (if this was a real extension). Based on user productivity, we could take our water education to the next level by connecting users with organizations and incentivizing progress by working with water charities to get clean water to countries without. We hope to also get our tab function fully working so that users actually face consequences for not being productive! :') Finally, we would love to polish the UI and offer the ability to customize blocked websites and store these preferences for the user, pause the timer for the session if needed, and offer more than one desert for users to bloom.

Share this project: