Mood Map

Landing Page
Dashboard
Concept Design for Home Page
Concept Design for Dashboard
Second Concept Design for Dashboard
Database

Inspiration

Mental well-being is often overlooked, and many struggle to recognize patterns in their moods. By visualizing emotions over time, MoodMap helps users gain self-awareness, identify triggers, and take proactive steps toward emotional balance. Whether for self-reflection or professional support, our goal is to make mental health tracking intuitive, insightful, and accessible to all.

What it does

First, you need to create and log into your account. Every day, you can log your feelings by selecting between five emotions: Happy, Sad, Anxious, Excited, and Neutral. You can also add a description or note for yourself to look back on later. The program records your entries and displays a pie chart of all your results across several days of data. The program can also analyze trends in your mood and offer personalized suggestions. You will also receive a positive affirmation which can help improve your day.

How we built it

For the front end, we designed the general layout and theming using Figma, and then used HTML and CSS to make that design into a website. For the backend, we used Firebase to help store and retrieve user data.

Challenges we ran into

A major challenge was trying to combine the frontend and backend elements. This was also our first time working with databases so there was a big learning curve. Figuring out how to get the website to interact with the backend database took lots of trial and error.

Accomplishments that we're proud of

We were able to make a very stylized website with the help of Figma, and also able to deliver an application that provides real-world use and impact. We are also proud of being able to make a system that can take data and utilize it in various ways, such as making a pie chart.

What we learned

We learned new ways to style and design websites, as well as how to properly integrate frontend and backend together to make a fully functioning product. We also learned how to properly use databases in applications.

What's Next for MoodMap

The next logical step is to make a version for mobile that can allow for notifications and reminders. We also want to add a calendar that allows you to interactively look through past logs to track your growth. Other scalability functions could be adding AI personalized recommendations or allow users to interact with each other and give each other affirmations.