Inspiration

We found lots of meaning in the theme "sustainability", many of them relating to protecting our world and our environment. But our team also found a sort of "personal sustainability" that we believe is important to protect: our mental and physical well-being. The pace of life is rapidly accelerating, which some find to be better and more productive, but it is important to realize how unsustainable this busy lifestyle is. Rates of employee burnout have risen over 9% since Covid-19 according to some statistics, and the rise of remote work and a shrinking work-life separation is only contributing. Mental sustainability to our team meant emphasizing the importance of taking breaks and giving the mind time to rest.

We wanted to promote mental health sustainability, but we also wanted to link that with protecting the environment. Taking breaks and meditating is a huge part of mental health, and we took inspiration from the tranquility of nature, specifically the ocean, as the theme of our web app.

What it does

Our app is meant to be a general mental well-being app that emphasizes the importance of taking a break for our health. We have a timer on the page that allows the user to set an interval of time to be mindful. The timer page is a space for the user to take a walk, read a book, or simply do nothing at all. We hope to encourage the user to dedicate a portion of their day, even if just a small interval of time, to be present and aware with their thoughts, not necessarily to get rid of them, but to just be more mindful of them.

If a user finishes a timer within the app, the user can collect a currency we called pearls. Once a user has collected enough pearls, they can redeem them for charitable donations to companies dedicated to protecting our oceans. We found a number of partners with a history of charitable donations towards these causes that may be willing to assist us in these goals.

How we built it

We built our project using React with JS/HTML/CSS. We used node to manage dependencies and build/run our app, and we worked with a public GitHub repository to easily collaborate share changes with one another.

Challenges we ran into

This was our first time using React, and we definitely ran into a bunch of challenges with it. In fact, we have a tally on the board behind us of the number of times react was a pain to work with (current total: 21). Despite all the issues however, it was interesting to discover the methodologies behind another framework and the Makeathon was an awesome opportunity to learn something new.

Accomplishments that we're proud of

Alistair: I'm proud of making functional slides that had incredibly smooth transitions.

Lily: I'm proud of the consistent art style I was able to create for the project, and how I was able to make an otter model that would be able to hold any object I gave it!

Nick: I'm proud of actually (for once) using my math education to do some basic trig to get the circle to rotate around the timer :p

Parker: I am proud that I was able to teach the knowledge I had of CSS and that we kept a somewhat consistent styling in the site. Also, the wave animation is awesome!

Team: Merging! Many of us were used to making solo projects, so successfully using GitHub to collaborate and to merge all three pages almost seamlessly at the end was a huge time save and very rewarding.

What we learned

We learned a lot about different web frameworks, and how to combine HTML, CSS, JS and react to make a complete and functional Single Page Application. We also learned a lot about collaboration, and how to efficiently work with other people in a way that allows us to take advantage of each others' skills. Seeing all the art, and all three of our pages come together in the end was spectacular, and I know that we all contributed to Flow in the ways that we all could have best.

What's next for Flow

We really want to implement all of the icons that our incredible artist Lily made, so that long-pressing on the timer allowed you to choose the category that you were taking a break for. Ideally, Flow would be an app, with homescreen widgets delivering a daily message, and notifications urging you daily to spend some time to rest. If Flow had a userbase, we also hoped to implement a "how did this break make you feel system", where users count their mood before and after taking a break, and we could show them statistics after a while that would show them how taking breaks has (hopefully positively) affected them :D

...

Now, it's time to take a break. It's a good thing we have Flow 😴

Share this project:

Updates