Mood Quest

Inspiration Most habit trackers feel like chores – checkboxes, spreadsheets, and guilt. I wanted to turn self‑improvement into something playful and rewarding. What if your pet grew stronger every time you logged a mood or completed a habit? What if losing your streak meant your pet looked sad? That emotional hook became Mood Quest – a game where consistency literally makes your companion evolve.

What it does Mood Quest combines mood logging, habit tracking, and gamification:

Daily log – select mood (1–5 emoji slider), check up to 3 custom habits.

XP & leveling – 10 XP per habit, 5 XP per mood. Level up every 100 XP (shows progress bar).

Streak counter – days in a row with at least one habit. Lose streak after 24h skip.

Pixel pet companion – evolves based on streak: sad caterpillar (0–2 days) → normal dog → happy glowing dog → dragon (14+ days). Pet shows encouraging speech bubbles.

Weekly report – mood trend chart + habit completion chart.

Google login – all data saved to Supabase per user.

How we built it One comprehensive prompt in MeDo describing React + Tailwind + Supabase + Google Auth.

Iterated three times:

Added loading spinner on "Save Day" and weekly report fetch.

Implemented collapsible mobile menu (hamburger → left drawer).

Built a 5‑step tour for first-time users (pet area, mood selector, habits, save button, weekly report).

Used Supabase for profiles, user_habits, daily_logs tables with RLS.

No external AI – all game logic (XP, level, streak, pet evolution) handled in frontend + DB.

Deployed with one click to a public URL.

Challenges we ran into Streak calculation across time zones – storing dates in UTC but displaying locally caused off‑by‑one errors. Fixed by storing last_log_date as a DATE type and comparing using UTC midnight.

Pet evolution animation – making the pet change smoothly without re‑rendering the whole dashboard required React state management with useEffect hooks.

First‑time tour overlay – ensuring the tour only triggered after Google login and profile creation, not during auth redirect.

Mobile habit checkboxes – default checkboxes were too small; replaced with custom larger touch targets and labels.

Accomplishments that we're proud of A genuinely fun habit tracker that users want to open every day (tested with 5 friends – 4 kept streaks for a week).

The pet companion creates emotional investment – one user said "I don't want my cat to be sad!"

Fully gamified with levels, streaks, and rewards – all through natural language prompts, no manual coding.

Responsive design works perfectly on phones (where most habit tracking happens).

What we learned MeDo can build complex game mechanics (XP formulas, streak logic, conditional evolution) if you describe the rules clearly.

LocalStorage + Supabase combined is great for tour flags and optimistic UI updates.

Pet art doesn't need fancy assets – emojis and SVG placeholders can be charming and expressive.

Gamification works best when the feedback is immediate (level up animation, pet change on save).

What's next for Mood Quest Multi‑pet selection – users can unlock different pets (cat, fox, owl) at certain levels.

Social leaderboards – compare streaks and XP with friends (optional, privacy‑aware).

Achievements system – badges for "7‑day streak", "100 total habits", "Level 10".

Reminder notifications – browser push notifications to log mood before midnight.

Export your year – generate a "mood calendar" PDF at end of year.

Sound effects – level up chime, pet happy sound on save.

Built With

• ai
• medo