Mindful Buddy

Inspiration

Our inspiration comes from wanting an app that supports mental health. We wanted to make an app where our users, and also us ourselves, can have a place where we can keep track of how we can keep up with our mental health and have a "buddy" to be there to support us.

What it does done

The website is called Mindful Buddy and it provides people with a fun way to do their daily tasks! Sometimes people who are struggling mentally may have a hard time drinking enough water or eating enough food. This app is directed towards those who may struggle mentally, but anyone can use the website. Nonetheless, Mindful Buddy is a way to provide users motivation towards doing those tasks, hoping that eventually, the to-do lists that they do will become a habit they develop. All the while providing people with information about their condition if necessary. The user has a to-do list to complete their tasks, and whenever a task is completed, the user will get a coin. With the coin that the user gets, a shop will be available with tons of cute animals and the user can use their coins to adopt the animals as their pets. Mindful Buddy wants to address mental health problems that are problematic in one's day-to-day lives. By making self-care tasks a fun game, it encourages the user to perform more personal wants and productive actions which encourages a healthier lifestyle. This in turn improves one's mood, energy, and self-image as they are improving themselves, and spending the time to become more productive. Mindful Buddy has the intention of wanting the user to better their mental health through living a healthier lifestyle.

How we built it

With a combination of HTML, CSS, and JavaScript, Mindful Buddy provides an excellent way for users to get motivation towards completing their daily tasks.

To install and run the project. Download the ZIP main file and unzip that file in a location that will be remembered. When using VSCode, go to file -> open folder -> select the folder in the location that you remembered it in.

You will be introduced with a welcome message and a random motivational quote to help inspire you! The rest of the website is simple! There are three links up on top that direct you to different screens. The main screen is where you get to see how many coins you have, and will have all the navigation parts of the website. The To-Do List screen will provide you with the to-do list for today where you input what you want to do for that day. Each time a task is completed that will count for a coin. The resources page is where the user can find any information/websites that they will need for any type of aid for mental illness or stress. Finally, the a shop where there will be multiple animals where the user can adopt their pets using the coins they gained through completing their tasks.

Challenges we ran into

All of the members in our group were unfamiliar with HTML, CSS, and JavaScript so it was challenging learning all of those platforms in less than 24 hours. Some of the other challenges we ran into was linking increasing the amount of coins in the home page when a user checked off something in their to-do list in the to-do list page. Although it was interesting learning about how local storage was stored in JavaScript, it was very difficult implementing it into our project. Lastly, we struggled to format each page and figure out how to input grid templates.

Accomplishments that we're proud of

Accomplishments that we are proud of is being able to link the HTML, CSS, and Javascript files together to build a website. We are also proud since none of us were familiar with the languages, so being able to build a project with them in such a short amount of time we feel is a big accomplishment. Overall, we are proud that we were able to learn so much and create a project with only a little amount of time and that we were all able to smoothly work together.

What we learned

We learned how to work collaboratively together and overcome obstacles as a group. Within a span of 24 hours, all four of us, who each had very minimal knowledge of javascript, css, and html, were able to put together a working app that we are proud of. On a more technical side, we learned how to use html and javascript, and styling with css. We learned how to debug our code and organize in a way that it can be used in a group setting.

What's next for Mindful Buddy

Having the full implementation of the shop working. So far in our project, we do not have a way to adopt the animals using the coins gained through, completing the to-do list tasks. In the future we want a way so that the animals that we adopt can be interacted with in the main screen, and can further motivate the user with inspirational and motivational quotes. Another thing to come together is a login/signup page where each user can have it’s own individual experience, pets, and coins. This will be done using Firebase, but this is just an idea towards future implementation. We also want to implement a better UI design with Mindful Buddy, having a better user experience, and establishing.

Mindful Buddy is worked on by Albert Huynh, Dana Fakhreddine, Viviana Lopez, and Aleena Mehmood for SparkHacks 2024