MoodMate

Journaling app yang ubah curhatmu jadi karya seni mingguan dan insight personal

Comment

💭 Inspiration

I once journaled for two weeks straight, then quit. Not because I was lazy — but because I wrote, and then... what? Everything just vanished into the void. Nothing changed. I learned nothing new about myself.

I tried the popular mood-tracking apps — Daylio, Reflectly, Finch. They all had the same problem: tedious mood checklists, hollow output, and zero "ah, so that's the pattern of my life" moments. My moods became data points — not stories.

Then I thought: what if journaling could give something back? Not just a place to write, but a mirror that reveals the hidden patterns of who we are.

In Indonesia, many young adults aged 20-35 desperately need a safe space for reflection but aren't ready (or can't afford) therapy. Stigma still exists, costs are high, and sometimes all we need is a friend who listens without judgment.

MoodMate was born from that question. Not to replace therapists, but to be a bridge — a daily reflection companion that helps us know ourselves better.

🎨 What it does

MoodMate is an AI journaling companion that transforms daily conversations into weekly visual art and deeply personal insights.

🌿 Natural Conversations with Mira

No rigid mood checklists. Users talk to Mira — an AI companion with a warm personality — just like they would to a close friend. Mira is designed with the philosophy "Acknowledge → Reflect → Ask gently", not the lecturing problem-solver mode.

Example interaction:

User: "Today was really rough. My presentation completely bombed."
Mira: "Oof, that's heavy. Especially after all the prep you put in. Want to talk through what happened, or just distract yourself for now? Both are totally fine."

Mira speaks casual Indonesian (or English) — uses contractions, slang, mixes languages naturally. She has a strict emoji budget (max 1-2 per response) and never resorts to toxic positivity.

🎨 Weekly Mood Art

Every Sunday night, MoodMate automatically generates an SVG artwork representing the week's emotional landscape:

  • Color = mood (deep blue for sadness, terracotta for passion)
  • Shape = topic (circles for social moments, stars for achievements, crescents for reflection)
  • Size = emotional intensity
  • Position = chronology across 7 days

The result: Instagram-shareable output — beautiful to share, privacy-safe (the actual journal content is never visible in the art, only visual abstractions).

Users can pick from 4 art styles: Abstract Modern, Watercolor, Geometric, or Organic Nature.

✨ Personal Weekly Insight Letters

A weekly letter written by Mira based on patterns she's noticed. Not generic templates — letters that reference specific details:

"Hi, Rina 🌿 This week was a lot, huh. I noticed you mentioned being 'tired' six times — and three of those came right after Tuesday and Thursday meetings. Might be worth looking at what's happening on those two days. But here's something that made me smile: Saturday morning, when you talked about having coffee with your mom on the porch — that was the only time this week you used the word 'peaceful'..."

🌌 Mood Constellation

Long-term visualization — each week becomes a star in your personal galaxy. The longer you journal, the more your emotional map forms — a constellation of your life you can revisit. This isn't a cold statistics chart; it's a visual story of your journey.

🛡️ Safety Mechanism

Built-in detection for risky content (self-harm, suicidal ideation, crisis expressions). When detected, Mira automatically directs users to 119 ext 8 (Indonesia's mental health hotline) and Into The Light Indonesia — never pretending to handle serious crises herself. Building mental health tools comes with serious responsibility.

🛠️ How we built it

Built entirely on MeDo during a hackathon sprint.

Tech Stack

Frontend:

  • React 18 + TypeScript
  • Tailwind CSS with custom design tokens
  • Framer Motion for smooth micro-interactions
  • Lucide React for icons
  • React Router v6 + Context API

Backend:

  • Node.js REST API
  • PostgreSQL for data persistence
  • LLM integration for Mira's chat & metadata extraction
  • Custom SVG generation engine for mood art

Design System:

  • Color palette: warm cream base (#FAF7F2) with terracotta, sage, lavender, rose, and golden accents
  • Typography: Playfair Display (serif) + Inter (sans-serif)
  • Aesthetic: artistic & mature — a fusion of Notion + art gallery + lo-fi vibes

Data Architecture

5 interconnected database tables:

  1. users — profile + preferences (art style, theme)
  2. messages — all conversations with Mira
  3. journal_entries — extracted metadata (mood, emotions, topics, people mentioned)
  4. weekly_arts — generated SVG art + insight letters
  5. safety_incidents — monitoring for risky content

Development Process

Phase 1: Foundation
Set up project structure, design system, routing for 10 pages, and global components (Button, Card, Modal, Toast, etc.).

Phase 2: Mira's Soul
Iterated Mira's system prompt over 15 times until her personality felt consistent. Tested hundreds of conversation scenarios to ensure she felt like a friend, not a chatbot.

Phase 3: Mood Art Algorithm
Built a generative art engine with algorithmic mapping:

  • Mood score (1-10) → 7 color ramps
  • 7 topic categories → 7 shape types
  • 3 intensity levels → 3 size ranges
  • 7 days → 7 zone positions (with ±30px jitter for organic feel)
  • 4 art styles with different SVG filters

Phase 4: Demo Mode
Generated 4 weeks of realistic sample data for demo user "Rina" — so judges could explore everything without onboarding friction.

Phase 5: Polish & Safety
Implemented safety detection layer (keyword matching + AI response template), animations, responsive testing, deployment.

🚧 Challenges we ran into

1. Making Mira feel like a FRIEND, not a generic chatbot

This was the hardest and most rewarding challenge. Early iterations of Mira felt too "AI assistant" — too helpful, too templated, too "I'm sorry to hear that."

What worked:

  • Set a specific persona: "close friend in their late 20s," not "supportive AI"
  • Banned motivational template phrases ("everything happens for a reason")
  • Enforced a 3-step pattern: Acknowledge → Reflect → Ask gently
  • Speech style: casual Indonesian/English with natural contractions ("tbh," "anyway," "literally")
  • Strict emoji budget: max 1-2 per response, chosen for subtlety (🌿✨🤍)
  • Tested prompt injection attempts ("Ignore previous instructions") to ensure Mira stays Mira

We tested 10+ tricky scenarios:

  • User shares light happiness
  • User shares deep sadness
  • User shares conflict
  • User asks "are you human?"
  • User mentions self-harm (must trigger safety protocol)
  • User shares an essay-length story
  • User just says hi

Each scenario was iterated on until Mira's response felt alive.

2. Mood Art that ACTUALLY feels like art

The visual challenge: how do you transform numerical data (mood scores, emotion arrays) into something Instagram-worthy?

Early iterations looked like dashboards — rigid grids, generic shapes, flat colors. Nobody would share that on Instagram.

What worked:

  • Asymmetric composition (not a 7-day chart grid)
  • Organic shapes with random jitter for hand-crafted feel
  • SVG filters for watercolor texture (feTurbulence + feGaussianBlur)
  • Overlap with blend modes for depth
  • A consistent warm-toned palette (not rainbow chaos)

The final output feels like abstract art, not data visualization.

3. Privacy & Safety that isn't just an afterthought

Journaling = the most sensitive type of data. Mishandling it could be both legally and morally catastrophic.

What we implemented:

  • Mood art never displays journal content — only visual abstractions
  • Share formats designed so private content never leaks
  • Safety mechanism hardcoded with Indonesian crisis resources (119 ext 8, Into The Light)
  • Clear disclaimers in onboarding and settings: Mira is not a therapist
  • Anti prompt-injection: Mira stays Mira even when prompted to "become DAN" or bypass rules

4. Triggering safety responses correctly, not paranoidly

Initially, keyword detection was too aggressive — the word "die" triggered safety responses even in contexts like "the battery died."

The fix: combining keywords with context analysis. Mira only triggers the safety response when the context is genuinely crisis-level, not figurative language. But we kept the bias toward better safe than sorry — over-triggering is far better than missing someone who genuinely needs help.

🏆 Accomplishments that we're proud of

✅ AI that feels genuinely empathetic

Mira passed our informal "Turing test of warmth" — we had friends test it without telling them it was AI. Common response: "Is this a bot or a person? She feels so warm."

✅ Mood Art that's genuinely beautiful

Every mood art is unique and screenshot-ready for Instagram without any modification. We tested output against the criterion: "Would I share this on my Story?" — the answer became yes.

✅ A safety net that actually works

Tested 10 different crisis scenarios — every single one correctly triggered the safety response with proper resources. No false negatives missed serious situations.

✅ Full Indonesia-first experience

UI, AI persona, hotline resources, examples — everything designed for Indonesian users. Mira's language uses casual phrasing that resonates with urban millennial/Gen Z Indonesians, not a translation of an English app.

✅ Frictionless demo mode

Judges can explore every feature without signing up. The 4-week sample data (Week of New Beginnings → Storms → Recovery → Reconnection) showcases a realistic emotional range.

✅ Built solo during a hackathon sprint

From concept to design to build to deploy — all during the hackathon timeframe. Proof that AI tools like MeDo genuinely democratize app development.

📚 What we learned

About building AI products

1. A system prompt is a character, not an instruction list
Early on, we treated the system prompt like a "list of rules" — Mira felt robotic. The moment we treated it as a character bible — personality, speech style, dos and don'ts, example dialogues — Mira came alive.

2. Small details create massive differences
The gap between "Aww poor you!" and "Oof, that's heavy ya" seems small, but the first feels like fake-empathy chatbot while the second feels like a real friend. These tiny details are worth iterating on dozens of times.

3. Safety isn't an afterthought
Safety mechanisms must be built from day one, not bolted on at the end. When safety is foundational, every other feature gets designed with awareness of edge cases.

About generative art

4. Algorithmic art needs "imperfection"
Perfect grids and exact positions = robotic feel. Add jitter, random rotation, opacity variation — only then does it feel crafted by a human (or an artistic AI).

5. Constraints birth creativity
Limiting ourselves to 7 colors + 7 shapes + 4 styles actually made output more consistent and recognizable as "MoodMate art."

About mental health tech

6. Not a replacement, but a complement
MoodMate will never replace therapy. But it can be a daily reflection space that helps users know themselves better — which actually makes therapy sessions (when needed) more effective.

7. Responsibility > innovation
Mental health tools must be over-cautious, not under-cautious. When in doubt between "appearing as helpful AI" vs "redirecting to professionals," always choose the latter.

About ourselves (builder's reflection)

8. Building for problems you relate to = the best fuel
I could build MoodMate during the hackathon because I personally needed this product. Every feature was born from the question, "what do I wish existed in my old journaling app?"

Built With

Share this project:

Updates

Submission history