Building Slurp: A Fruit-Themed AI Mood Tracker with Supabase and Next.js

Arka — Fri, 20 Jun 2025 22:51:40 +0000

One week in March, I hit a wall.
Couldn’t sleep. Couldn’t think straight. Just spiraling.
I knew I needed to log what I was feeling, but all the apps I found were either:
Too clinical
Too sterile
Too “rate your emotion on a scale of 1–5”
That’s not how my brain works when it’s fogged up. I needed something softer, visual, and playful.
Something that didn't make me feel worse for checking in.

So I built Slurp — a mood tracking app that uses fruit metaphors (e.g., Strawberry Bliss, Sour Lemon) instead of standard emotion labels. The goal? Make emotional journaling playful, visual, and easy to stick with.

Core Features
✅ Mood Logging
Choose from 16 “fruity moods”, each linked to emotion tags (e.g., happy, anxious, neutral)
Add journal entries, optional location, and privacy mode
Entries are saved in real time to Supabase with RLS for user isolation

📊 Emotional Analytics
View pie charts of mood frequency
Track energy scores over a 7-day window
See “mood density” with color intensity on a calendar grid
Streak tracking encourages habit-building

🤖 AI Journaling with OpenAI
I wanted the journal to feel heard. So every journal entry runs through:
OpenAI fallback → deeper insight generation
You get:
Dominant emotions
Energy scores
Personalized prompts

🧘‍♂️ Wellness Tools
When it’s too much to write, Slurp still shows up:
Breathing animation exercises
Grounding techniques (5-4-3-2-1)
Short meditations
Crisis resources (international coverage)

🔧 Tech Stack
Layer Tools
Frontend Next.js 14 (App Router), TypeScript, Tailwind CSS, Shadcn UI
Animations Framer Motion
Backend Supabase (Auth + File Storage)
AI OpenAI
Design System Neubrutalism + Pastel fruit palette
Hosting Vercel

💡 What I Learned
RLS in Supabase is powerful but punishing if you don’t model your data right from the start

Microinteractions matter — animating a “fruit squish” on log saves increased my journaling streak days by 3x

GitHub: github.com/ItsMysterix/Slurp

This is a passion project — but also a very real experiment in emotional UX.
If you’re building something for mental health or just want to connect, feel free to DM or open issues.

And if you ever feel like a sour lemon, you’re not alone. Log it. Reflect. Slurp it.

DEV Community: Arka

Building Slurp: A Fruit-Themed AI Mood Tracker with Supabase and Next.js