Mind and Mood(M&M)

A lightweight web app that visualizes mood, stress, and energy to support mental health.Track your mood. Understand your mind. Heal a little every day.

Comment

Inspiration

Mental health struggles are often silent. Many people hesitate to talk openly about their feelings, even when they need support the most. I wanted to create a safe, judgment-free space where users can not only track their mood but also talk and feel heard. This project was inspired by the belief that small moments of self-reflection and conversation can positively impact mental well-being.

What it does

Mind and Mood (M&M) is an interactive mental well-being web application that allows users to:

  • Select and track their current mood using intuitive emojis
  • Monitor emotional factors such as energy and sleep
  • Visualize mental states like happiness, calmness, stress, and energy in real time
  • Receive personalized music and self-care suggestions
  • Chat with an AI in the “Talk to Me” section, offering a supportive and non-judgmental conversational space

The application focuses on emotional awareness, gentle guidance, and accessibility.

How I built it

I built Mind and Mood (M&M) using HTML, CSS, and vanilla JavaScript, focusing on simplicity and performance.
Key technical aspects include:

  • Client-side state management for mood selection and updates
  • Use of localStorage to persist mood data across sessions
  • Dynamic DOM manipulation for real-time visual feedback
  • Integration of an AI-powered chat interface to encourage emotional expression

I intentionally avoided heavy frameworks to keep the application lightweight and easy to use.

Challenges I ran into

One of the main challenges was managing frontend state correctly, especially synchronizing temporary mood selections with persistent data stored in localStorage.
Designing the AI chat experience required careful consideration to ensure responses felt supportive and appropriate.
Debugging these issues helped me better understand real-world frontend application behavior.

Accomplishments that I'm proud of

  • Built a fully functional mood-tracking system with persistent data storage
  • Successfully integrated an AI-based “Talk to Me” feature
  • Designed a calming and user-friendly interface
  • Created personalized experiences without relying on large external libraries

What I learned

Through this project, I learned:

  • The importance of clean state management in frontend development
  • How empathetic UI/UX design improves user experience
  • Practical use of localStorage in production-like applications
  • How conversational AI can be used responsibly in mental health-related tools

What's next for Mind and Mood (M&M)

In the future, I plan to:

  • Add mood history and emotional trend visualization
  • Improve AI responses with better context awareness
  • Introduce optional user profiles
  • Further enhance accessibility and mobile responsiveness

Mind and Mood (M&M) is intended to grow into a supportive digital companion for everyday mental wellness.

Built With

Share this project:

Updates