Inspiration

We wanted to create a lightweight mental wellness tool that anyone could use instantly, without logins, sign-ups, or app store downloads. Mental health tracking can often feel overwhelming or invasive, so we aimed for something quick, stigma-free, and encouraging.

What It Does

MoodMate is a simple mood-logging and self-care web app. Users select how they feel each day (happy, stressed, anxious, etc.), and the app displays a friendly, mood-based self-care tip. It records each entry and visualizes mood changes over time using a clean line chart.

How We Built It

We built MoodMate using HTML, CSS, and JavaScript for the front-end.
We integrated Chart.js to visualize mood data dynamically.
For hosting, we used GitHub Pages to provide a free, permanent link that works without any sign-in.

Challenges We Ran Into

  • As a beginner, figuring out free, reliable hosting without paid domains took time.
  • Learning how to integrate Chart.js for the first time and mapping moods to chart values.
  • Keeping the design simple and mobile-friendly in a short time frame.

Accomplishments That We’re Proud Of

  • Building a functional, clean web app in just a few days.
  • Learning new tools while creating something that can genuinely help people.
  • Completing a project from concept to deployment as a beginner.

What We Learned

  • How to structure a basic website using HTML, CSS, and JavaScript.
  • How to implement Chart.js for visual data representation.
  • The importance of focusing on minimal, core features to deliver quickly.

What's Next for MoodMate

We plan to:

  • Add more mood categories and customizable moods.
  • Allow exporting mood history to a file.
  • Introduce daily reminders.
  • Build a community section for encouragement and shared resources.
Share this project:

Updates