bonsai

Habits Home Page
Habits Home Page Expanded
Profile Page

Inspiration

bonsai was greatly inspired by the habit-forming strategies covered in the New York Times bestseller book, Atomic Habits by James Clear. Atomic Habits is all about making habit-forming easy by breaking down habits to their core, simplest parts. Just like a bonsai tree, habits must be properly groomed and taken care of initially. After being fully developed, however, they become beautiful trees that bring great benefits, such as better air quality and improving general well-being.

One of the most prominent strategies is habit stacking, which chains habits together. The completion of the previous habit becomes the motivation for the next one. A sample habit stack would be:

After I make coffee, I will meditate for 2 minutes.
After I meditate, I will read 2 pages of my book.
After I finish reading, I will stretch.

Many of us who read the book found huge benefits to incorporating habit stacking into our daily lives, and we wanted to create an app that could help visually track our habits!

What it does

Our app first uses user login and authentication to tie the habits to the current user. The user will then be greeted with the home page, which is filled with their current habit stacks. When a habit stack is tapped, it will expand to show the title of the habit stack along with all the associated habits. The user has the ability to add a new habit stack or a habit to a current stack using the plus button. Each habit stack has a "streak" associated with it, which indicates the number of days it has been completed in a row. Additionally, there is a profile page where the user can see their details. Lastly, there is a "Quote of the Day" tab with iconic quotes from Atomic Habits for people to read and enjoy!

How we built it

The app was first designed using Figma, where we decided on the page designs, font, and colors. We then developed it using React Native and Expo. We used Django and SQLite as our backend framework and database to store users and habits data, respectively.

Challenges we ran into

One of the challenges that took up more time than we had expected was animating the habit stacks when they expanded and collapsed. There was not that much documentation on how to accomplish it in a streamlined way, so there was a lot of trial and error to get it to work.

On the backend side, we had trouble with making sure the user was logged in and adapting the views according to each scenario. We also were stuck on how to integrate the backend with the frontend due to differences in IP address.

Accomplishments that we're proud of

We were really proud of how slick the app turned out due to the design aesthetic and animations! For the most part, the app's features turned out to be very similar to how we envisioned them to be initially. We were also glad that we were able to complete a semi-finished app despite the short time limit of a hackathon.

What we learned

We learned a lot about team collaboration and splitting/delegating work equally. We also learned not to be too overzealous with what we wanted to be accomplished. We had many other ideas for different features, such as a friends system, that we couldn't get to.

What's next for bonsai

Naturally, we want to continue to refine the habit stack system by finishing the habit/stack creation and streaks features. We also really want to add a friends feature that allows you to compare and compete with others close to you. Finally, we want to make user authentication/login more secure. We're all really passionate about this app and are excited to see it through!