Inspiration
In our hectic everyday lives, health trackers, todos, and journals can be all scattered around. We have decided to combine everything you need to reflect upon your physical, emotional, and social wellbeing into one web application, called WELLBEAN.
What it does
Users can log in to WELLBEAN and record health goals such as water, sleep, stress level, and even create their own health goals. They can also click on their emotional status and have it reflected on the bean! Finally, there is a todo list on the side that can keep track of any ideas to later actions you want to keep track of.
How we built it
After much discussion, our team decided to settle on a web application as it is accessible everywhere and makes for easy use. (In the future, we could also create an app for those that like a mobile app experience!) We split the project into several parts: UI Design, Frontend, and Backend. The beans and title are hand-drawn and animated by yours truly (Ivy) in Procreate! We combined these visual elements into React to build a Front-end that was both easy to use and aesthetically pleasing!
Challenges we ran into
This was the first time we used CockroachDB and while there was an initial learning curve, once we got past the initial errors and figured out how it worked we were able to implement it effectively in our project. We also had to figure out the most effective way to display animations on our website, settling with GIFs due to its smaller file size and higher quality.
Accomplishments that we're proud of
We are especially proud of how our website looks visually, with a lot of hand drawn elements and everything custom styled to fit the overall theme. Although it took a lot of extra time and effort, the end result was worth it!
What we learned
We learned a lot about overall web development and design from building a functioning website from scratch. We also learned how to collaborate effectively by creating a detailed plan, splitting up work, and communicating throughout the whole process.
What's next for WELLBEAN - Track your wellbeing!
This is just the start for WELLBEAN! The next steps for us would be to include an overall summary, where users can look at how much they have grown in their health goals or even see if they have maintained a healthy habit, such as sleeping for 8 hours every night! What's more, the summary could include a graph of their mood fluctuations and possibly help the user to identify trends between their health habits and emotions. That's not all, we also hope to make the site much more customizable! From the color of the bean to its outfit, we hope to make the site a fun and exciting way to keep reflecting!
Built With
- cockroachdb
- node.js
- procreate
- react
- tailwindcss
- typescript


Log in or sign up for Devpost to join the conversation.