MindGarden

• 

  Problem

• 

  Problem and Inspiration

• 

  Audience

• 

  Wireframe and UI

• 

  Features

• 

  Benefits and Alternatives

Inspiration

According to the American College Health Association (ACHA), over 40% of college students report feeling so depressed it was difficult to function, and over 60% report overwhelming anxiety in the past year, making anxiety the #1 mental health concern among college students. We were inspired by the Focus Friend App, an ADHD-friendly focus timer that rewards users for completing focus sessions to furnish a virtual room. By observing how gamification can transform mundane tasks into engaging challenges, we set out to build a platform that replaces the stress of unending responsibilities with the positive reinforcement of a growing "Mind Garden". Our goal was to treat time management not as a chore, but as a rewarding journey where every minute spent in deep work contributes to a tangible, visual representation of personal growth. We introduce to you the website that every college student needs to calm their anxiety, take charge of their life, and actually focus on the tasks that need to be done.

What it does

MindGarden allows students to track how long they study, giving custom-designed garden incentives such as flowers, bushes, and even animals as prizes. We created a to-do list alongside the timer so that the student would be able to allocate time to specific tasks. After the timer starts, classical music plays in the background to calm the mind and create an atmosphere that is optimal for studying. Additionally, we integrated a Firebase backend to save points for every study session to buy features for growing the user's garden.

How we built it

We used Node and Vite to run our apps, and we coded in React, JSX, and Tailwind CSS. For the backend we used Firebase for authentication and data storage.

Challenges we ran into

For frontend, we struggled with incorporating functionality and our original designs into the wireframe, all while maintaining a website that is user-friendly. To fix this, we re-analyzed our vision and For backend, we found it difficult to save the points system for every minute the student studied. Due to this error, for convenience on our side and practicality for the user, we decided to add a countdown button instead so that every time the countdown finished, the user would gain that amount of points.

Accomplishments that we're proud of

The Firebase implementation for points as well as authentication was a great feat for our team. We came in with more frontend experience compared to backend, but through this hackathon, we were able to have a better foundation of full-stack development. Additionally, our team was excited to have custom images and backgrounds for our app, making our app unique and more personal for the user to use. With its soft-screen feel, we hope that the design and overall pleasing aesthetic further help relieve the user in their study session.

What we learned

Building this project provided a deep dive into the practical challenges of creating a synchronized, full-stack React website. Beyond the logic, we gained experience in integrating Firebase for live data updates and authentication, discovering environment variables to keep sensitive API keys secure within our config.js. We also explored balancing user experience and technical constraints, such as implementing a seamless classical music playlist that complies with browser autoplay policies to enhance the "focus mode" environment.

What's next for MindGarden

We hope to expand our website to add a mobile game for the user to interact with during their breaks. Additionally, we considered converting our website into an extension for Camino to display the to-do list based on a student's assignments in their Dashboard. Most of all, we want to continue tweaking the UI and solidify security.

Built With

• firebase
• react