Inspiration

We were inspired by the need to help people build positive habits using a gamified mental health game. The idea of nurturing plants in a scenic landscape can help users escape reality and explore the world of Bloom momentarily.

What it does

Bloom is a habit-tracking website that allows users to set, delete, and complete custom habits daily. Completion of tasks leads to full growth of the user's virtual garden. Varying levels of task completion also feature varying levels of garden growth, leading to users completing their tasks, resulting in the setting of good habits.

How we built it

We built Bloom using React, Javascript, and Cascading Style Sheets for the frontend, for a greater emphasis of user experience and aesthetic. We implemented status management and local storage to track user progress locally.

Challenges we ran into

Implementing constraints of the flower stem and flower head above the pots in the pots container in the Garden file; working out requirements of assets that would result in consistency within the project; and utilizing local storage to calculate progression levels for the gamified aspects of Bloom.

Accomplishments that we're proud of

Developing a dynamic and aesthetic task manager with deletion, completion, and creation capabilities; connecting various modules that combine to form a responsive garden growth system with consistent constraints; and producing engaging background, button, sticky note, and flower designs.

What we learned

Effective project and state management in React; creative uses of CSS containers and constraints (to hold the flowers); and the invaluable resource of communication and input from teammates allowing for expedited project progress.

What's next for Bloom

Streaks for users that complete tasks for 3 or more days; friends to make the website more social; more plants and garden themes for customizability; and notification systems to remind users to complete their tasks.

Built With

Share this project:

Updates