Mood Booster

Use Mood Booster to get a positive boost when you are feeling down or engage in a journaling session to promote gratitude and mindfulness

Comment

Inspiration

Mental wellness is an area where all of us can need some help during this pandemic. Focusing on the positive and journaling are the main areas we address. We thought of Mood Booster as a way to give users different types of positive boosts when they feel down. We combined this with a journaling feature to practice gratitude and mindfulness. We realized that when we are feeling down, we tend to start scrolling on our phones, so we built a mobile-first web app to help recovering from low moments with a quick positive boost or a journaling session.

What it does

Mood booster has 3 parts: The user selects between 4 negative moods (angry, anxious, lonely and sad) to access different ways to get a positive boost. The options are a “cute boost”, which is a picture of a puppy, cat, or relaxing nature; a “funny boost”, which is a joke; a “musical boost”, which is a song from Youtube; or a “wise boost”, which is a famous inspirational quote. The user can keep getting boosts until they feel better. Users who create an account on Mood Booster have access to the journaling section, where they receive a prompt to write in the journal. They can also access their saved entries, edit and delete as needed. On all pages Mood Booster has a quick access button to Mental Health Helplines in case the user wants to talk to a professional.

How we built it

We made the initial frameworks and the high fidelity designs with Figma. Then we built a responsive Web App using HTML, CSS, Bootstrap, Javascript on the front end and Express and Node.js on the backend, with MongoDB as our database. The app is hosted on Heroku. We used APIs to provide most of the content. Pictures are from the Unsplash API, jokes are from DKatz' official Joke API (https://github.com/15Dkatz/official_joke_api), and the famous quotes are from Quotes Free API (https://type.fit/api/quotes). The music tracks are displayed from Youtube in an embedded player.

Challenges we ran into

For most of us this was the first time working on a team on such a large project, as we are three self-taught developers and a self-taught designer. Distributing the tasks and coordinating the work were challenging in the beginning. On the technical side, we had to figure out how to use APIs and select the most appropriate ones; we had to deal with environment variables and work with .ejs files rather than html files. Finally, making the pages responsive to as many mobile phone screens as possible has proven a significant challenge. Also, with Heroku's free hosting the loading time is longer than ideal.

Accomplishments that we're proud of

We are proud to present a working web app that includes the majority of the features that we had planned to include. This is a great achievement for a team that is still new to hackathons, working together for the first time and completely self-taught. We are proud of how we managed to work together smoothly as a team across different time zones and help each other out when anyone got stuck on some tricky problem.

What we learned

Kseniia: I have learned a lot at this hackathon! It was the first time working with the developers as a designer and now I know much more about how to do that. After I've seen how my design ideas are being brought to life I've learned what could I do better as a designer to help the developer do his job easier. The whole interaction with the remote team members was so fascinating! We were on different continents but managed to make everything work really good. I’m happy to meet these wonderful people and hope we’ll make much more together.

Luis: As someone without any prior team experience, this hackathon was a phenomenal learning opportunity! I got to work with some really fancy, bright, and creative people, all from completely different timezones! Although my contributions were mostly in backend, I learned so much from my teammates about how to communicate design through frameworks, namely figma. I also learned backend technologies that were new to me, like axios. Unexpectedly, a major lesson I learned from this project is that I didn't know Github like I thought I knew it. Most Importantly, I learned how to work and communicate as a team to get our beautiful project done. I am grateful for this opportunity and I am proud of our team. And though our journey had it's challenges, I truly enjoyed the whole thing.

Maya: this was the first time for me to get deeply involved in the coding side of a hackathon, rather than idea generation or project management. I enjoyed every bit because I was able to put what I learned about web development in practice in a big project. More specifically, I learned how to work with axios and APIs, how to work with Github when there are several contributors, and learned the basics of backend work. I also learned to build a complex feature, like our navbar, by searching for information and tutorials online and then combining them into creating what we needed.

Patrick: Since this was my first Hackathon and my first bigger project there was so many that I have learned! I was mainly making the implementation of the design for all pages and their behaviour on other screens. I had the feeling like I was thrown into the cold water with that, but every moment was worth it. It was a really intense month between css, html and me. But we are better than we have ever been before! Next to that I found a team with a super unique spirit. Everyone was learning from each other and pushing each other. Threw all the different time zones from which we are coming, there was always someone working on the project. That kind of team dynamic I never met before and I’m happy that I was a part of this.

What's next Mood Booster

We plan to add some features which we could not finish like:

  • A splash page to welcome the users and an animated transition page that uses our drop logo.
  • In the “wise boost” add the option to view positive entries from the user’s journal to remind them of the positive things they have going on in their lives.
  • optimize loading time of the site and optimize the experience on all screen sizes.

On a longer term we plan to:

  • Provide more personalized content to the users based on their preferences. For example by adding a “Like” button for the content we provide, or based on user location, demographic etc.
  • Curate the content for quality and potentially moving away from some of the APIs to avoid restrictions in access to the content.
  • Work with mental health professionals to provide content that is designed for people with specific mental illnesses.

Built With

Share this project:

Updates