MoodMirror — Judge Pitch Guide

Don't panic! Here is a simple, easy-to-understand breakdown of what you built, how it works, and why it's awesome. You can use this as your "script" or cheat sheet when talking to the judges.

🎯 The Elevator Pitch (What is it?)

"MoodMirror is an AI-powered emotional journal. Instead of just writing down what happened today, the AI reads your entry, figures out exactly how you're feeling, tracks your mood over time, and gives you personalized motivational advice."


🛠️ The Tech Stack (What is it built with?)

Keep it simple. When they ask "What did you use to build this?", say:

  1. Frontend: Vanilla JavaScript, HTML, and CSS (Vite is used just to bundle it fast). No heavy frameworks like React — just pure, fast web tech.
  2. Design: A modern "Glassmorphism" UI with a dark theme. It looks premium and calming.
  3. Storage: localStorage — everything runs entirely in the user's browser for maximum privacy. No backend database required.
  4. Data Visualization: Chart.js — used to create beautiful mood trend charts, radar maps, and heatmaps.
  5. The Brain (AI): NVIDIA NIM (GLM 5.1 model) and Google Gemini (Flash Lite). The user can switch between them!

✨ The Core Features (What does it do?)

1. Multi-Mood Percentage Analysis (The Coolest Feature)

Instead of just saying "You are Happy," the AI provides a percentage breakdown (e.g., 60% Happy, 30% Calm, 10% Anxious). People's emotions are complex, and this captures that reality.

2. Personalized AI Coaching

When you save an entry, the AI immediately gives you three things:

  • A brief summary of your emotional state.
  • A personalized motivational message.
  • A daily affirmation (e.g., "I am strong enough to face difficult days").

3. Beautiful Dashboard Analytics

The dashboard visually tracks your mental health:

  • Mood Trend: A line chart showing how your mood score goes up or down.
  • Emotional Composition: A stacked bar chart showing what percentage of your week was spent in different emotional states.

4. Deep Insights Page

  • Emotion Radar: A radar chart showing your overall emotional "shape" (are you leaning more towards stressed or calm?).
  • Weekly Heatmap: Shows which days of the week are the most intense for certain emotions.
  • AI Weekly Summary: The AI looks at all 7 days of entries and writes a custom "weekly review" celebrating your wins and identifying stress triggers.

5. Dual AI Providers

You built a flexible abstraction layer so the app isn't locked into one AI. Users can go to the Profile page and toggle seamlessly between NVIDIA NIM and Google Gemini.


⚙️ Under the Hood (How it actually works)

If the judges ask technical questions about how it works, here is your simple explanation:

  1. How does the AI understand emotions?

    • When the user hits "Save", we send their journal text to the NVIDIA NIM API (or Gemini).
    • We use a carefully crafted Prompt that tells the AI: "Act as an emotional intelligence analyst. Read this text and return a strict JSON object with percentages for Happy, Sad, Stressed, etc."
    • We parse that JSON and save it.
  2. How is the data saved?

    • It's saved locally in the browser using localStorage. We have a singleton service called storage.js that handles saving and retrieving entries.
  3. How did you handle the AI integration?

    • We built an "Abstraction Layer" (aiProvider.js).
    • Instead of the app directly calling NVIDIA or Gemini, the app calls aiProvider.analyzeEmotion().
    • The provider checks the user's settings, sees which AI they prefer, and routes the request to either nim.js or gemini.js. This makes the code very clean and scalable.
  4. How did you fix CORS issues with the NVIDIA API?

    • Browsers block direct calls to the NVIDIA API for security (CORS). We solved this by configuring a Vite Proxy in development and a Vercel Rewrite in production. The browser talks to our local server (/api/nim), which secretly forwards it to NVIDIA.

🏆 Why this project wins

  • Privacy-first: Uses local storage.
  • Complex UI: Beautiful charts, glassmorphism, and responsive design.
  • Advanced Prompt Engineering: Forcing the AI to return strict JSON percentage distributions instead of just plain text.
  • Multi-Model Support: Proving you can integrate both NVIDIA and Google seamlessly.

Built With

  • chart.js
  • gemini-api
  • glm-5.1-model
  • local-storage
  • vanilla-css
  • vanilla.js
  • vite
Share this project:

Updates

Submission history