Moodmate

Inspiration

In a fast-paced world, it’s easy to lose touch with how we’re really feeling. Moodmate was born out of the desire to create a simple and accessible tool that encourages emotional awareness and self-care. We wanted to design something that doesn’t feel like a chore, but rather like a daily check-in quick, intuitive, and meaningful.

What it does

Moodmate is a responsive web application designed to help you track your mood. Moodmate allow s users to select their mood using emojis and track their daily emotions. This application has a clean interface and seamless to use, it acts as a daily emotional check-in tool. It enables users to uncover patterns in emotions and promote mental wellness through daily reflections.

How we built it

Moodmate was built using the following technologies :

React for building dynamic UI components
Tailwind CSS for responsive, and modern styling
JavaScript, HTML5, and CSS3 as the foundation
GitHub Pages for hosting the live demo

We used Figma to create the layout and user flow. After that started building each component using React, keeping the UI clean and mobile responsiveness.

Challenges we ran into

Making the UI feel engaging without cluttering it
Designing a simple user flow for mood selection and submission
Tailoring the layout to work well on both mobile and desktop
Managing state effectively in a lightweight React app without external libraries

Accomplishments that we're proud of

Built and deployed a fully functional mood tracking app in a short time
Created a visually engaging, intuitive experience with a minimal tech stack
Designed a tool that can genuinely help users reflect on their emotions

What we learned

How to create highly responsive layouts using Tailwind CSS
Improved our understanding of React component structure and state handling
Gained insight into designing user-centric experiences with minimal distractions
The importance of balancing form and function in mental health apps