MindBridge

💡 Inspiration Mental health is the silent epidemic of our generation. According to the WHO, 1 in 4 people will be affected by a mental health condition at some point in their lives — yet most of us have no daily ritual for emotional self-awareness. We track our steps, our sleep, and our calories. But we rarely pause to ask: how am I actually feeling today, and why? I built MindBridge because I believe that small, consistent moments of reflection compound into real resilience. Not therapy. Not a clinical tool. Just a compassionate AI companion that listens, notices patterns, and helps you stay ahead of burnout — two minutes at a time.

🔨 What I Built MindBridge is a daily AI-powered mental wellness companion with three core features:

Daily Check-In Users select their mood on a 5-point scale and write a freeform journal entry. The entry is sent to the Claude API, which returns a personalised, empathetic reflection and four actionable coping strategies — tailored specifically to what the user shared, not a generic response.
Insights Dashboard A mood trend chart visualises emotional patterns over time. Crucially, the Pattern Recognition engine analyses actual journal text using keyword detection — identifying real correlations between entries mentioning sleep, exercise, social connection, or work stress and the user's mood scores. Nothing is hardcoded or fake.
Journal History A full log of every past entry with mood indicators and the AI reflection received that day — turning the app into a genuine emotional record.

🛠 How I Built It LayerTechnologyFrontendReact 18 + ViteRoutingReact Router State & Persistence Zustand with localStorage Anthropic Claude API (claude-sonnet-4-20250514) ChartsRecharts (AreaChart) Styling CSS Modules + CSS Custom Properties DeploymentVercel The Claude API is called directly from the browser using the anthropic-dangerous-direct-browser-access header. The API key is loaded from environment variables at build time, with a runtime fallback that lets users securely enter their own key — stored only in their browser's localStorage and sent nowhere except Anthropic's servers. The streak system is computed live from entry dates using date-fns — no hardcoded values. The pattern recognition engine scans journal text for semantic keyword clusters (sleep, nature, work, social, gratitude) and cross-references the mood scores of matching entries to surface only statistically meaningful insights.

🚧 Challenges Getting Claude to respond in a consistent, parseable format was the first real challenge. I iterated on the prompt structure several times, eventually landing on a STRATEGY: [Title] | [Description] delimiter format that parses reliably while keeping the AI's tone natural and warm. Avoiding "fake data" syndrome was something I cared deeply about. Early versions had hardcoded sample entries and static pattern insights. I rebuilt the entire state layer from scratch so that every metric — streak count, patterns, mood averages — derives exclusively from the user's real entries. The app starts empty and earns its insights. Designing for emotional context meant resisting the urge to make the UI feel like a productivity tool. The typography (Playfair Display + DM Sans), the dark palette, the subdued gradients — every aesthetic decision was made to feel calm, warm, and non-clinical.

📚 What I Learned How to craft AI prompts that balance structure (for parsing) with natural, empathetic tone How to use Zustand's persist middleware for zero-friction local state storage How to build real keyword-based NLP pattern detection without a backend or ML model That the hardest part of a wellness product isn't the tech — it's earning the user's trust

🚀 What's Next Backend + auth so entries persist across devices Weekly AI summary emails — Claude synthesises the week's entries into a personal letter Therapist mode — share your mood history export with a professional before a session Mood prediction — flag when patterns suggest a difficult day ahead