DEV Community

Cover image for Moodmate — Track Your Emotions with Ease
Keshan Gamage
Keshan Gamage

Posted on

Moodmate — Track Your Emotions with Ease

Moodmate is a responsive web application that helps users track their mood daily using emoji-based inputs. Designed with simplicity and clarity in mind, it acts as a daily emotional check-in tool to promote mental well-being through reflection and pattern recognition.

Moodmate Home Page

🛠️ Built With:
⚛️ React – for building dynamic, component-based UI

🎨 Tailwind CSS – for responsive and modern styling

🌐 JavaScript, HTML5, CSS3 – core technologies

🚀 GitHub Pages – for hosting the live demo

🧩 Figma – for designing user flows and layouts

📱 Features:

  • Emoji-based mood selection

  • Clean and intuitive UI

  • Mobile and desktop responsive

  • Reflect on emotional patterns over time

🔍 Challenges Faced:

  • Keeping the UI engaging without clutter

  • Designing a simple and user-friendly mood submission flow

  • Ensuring full mobile responsiveness

  • Managing state effectively in React without external libraries

🔗 Project Links:
🌐 Live Website: https://keshangamage.github.io/Moodmate

💻 GitHub Repository: https://github.com/keshangamage/Moodmate

🎥 Demo Video: https://www.youtube.com/watch?v=UCE-qWV3Eb8

💡 Why I Built This
Moodmate was born from a simple idea: help users understand their emotional trends in a clean, unobtrusive way. Whether you're checking in for mental wellness or just curious how you feel day to day, Moodmate makes it effortless.

Top comments (0)