mindquark

MindQuark is a CBT-informed mental sanctuary combining 7-step cognitive reframing, somatic breathwork, and real CALL-E AI phone calls. Local-first and crisis-safe for private emotional first aid.

Comment

Inspiration

Low moments rarely happen at convenient times — usually late at night, in between therapy sessions, when no one is around to listen. We wanted a calm corner of the internet that is always there: a place to breathe slowly, untangle a thought, and feel heard without judgment. That's why we built MindQuark.

What it does

MindQuark is a CBT-informed mental wellbeing companion:

  • Chat with two AI companions — Maya (warm, empathetic) and Liam (calm, analytical), with voice input and spoken replies.
  • Guided CBT reframing — a 7-step wizard turns an automatic negative thought into a balanced perspective, plus a 10-question cognitive assessment with a radar-chart report.
  • Breathing & grounding — 7 evidence-based techniques (4-7-8, box breathing, physiological sigh, 5-4-3-2-1 sensory grounding…) guided by an animated mandala and Web-Audio-synthesized singing bowl chimes.
  • Mood journal — a 2D energy-vs-valence mood map with delightful scratch-to-reveal cards.
  • AI phone check-ins — ask for a real supportive phone call from your companion.
  • Crisis safety gateway — high-risk messages never reach the AI; the app immediately shows verified hotlines (988, findahelpline.com).
  • Private by design — profiles stay on your device, nothing is stored server-side. Fully bilingual (English / Chinese).

How we built it

  • Frontend: React 19 + TypeScript + Vite + Tailwind CSS v4, animated with GSAP (liquid-wave intro, springy page transitions) and a draggable SVG companion bot with a custom 2D motion engine.
  • Backend: a Serverless Express API on Tencent CloudBase with a dual-LLM failover chain (primary model → OpenRouter fallbacks → local offline replies).
  • Assessment engine: we fuse a deterministic local keyword engine with LLM semantic scoring: $$\text{score} = 0.5 \times \text{deterministic} + 0.5 \times \text{semantic}$$
  • Speech: iFlytek speech-to-text / text-to-speech with a Web Speech API fallback.
  • Security: crisis keyword interception on both client and server, rate limiting, strict CORS allowlist, and Tencent captcha.

Challenges we ran into

  • Safety came first, and it reshaped everything. We had to guarantee that risky text short-circuits the LLM entirely, so we built identical pre-inference filters on both ends and verified them with tests.
  • LLMs fail at the worst time. We added a provider failover chain and gentle offline replies so the conversation never dies.
  • "Butter-smooth" is hard. The scratch card alone took several rounds of fixing lost pointer capture, canvas resets, and stuttering modal springs.
  • Secrets in git history. We found old API keys in past commits, rotated everything, and moved all credentials to environment variables.

Accomplishments that we're proud of

  • 97/97 tests passing, 0 TypeScript errors, 0 known production vulnerabilities — and a live deployed demo.
  • Crisis paths verified end-to-end: the API returns isCrisis: true without ever calling a model.
  • A cohesive White & Emerald design where motion, sound, and character all feel like one product.

What we learned

  • Safety is an architecture decision, not a prompt tweak — interception layers, rate limits, and fallbacks must be designed in from day one.
  • Deterministic local fallbacks keep an AI product usable when networks and models fail.
  • Motion quality is a feature: reduced-motion support, GPU rasterization, and pointer-capture details are what users actually feel.

What's next for MindQuark

  • Route-level code splitting to shrink the main bundle.
  • In-app voice conversations, not just phone calls.
  • Opt-in encrypted cloud sync for journal history.
  • More personas and long-term mood/assessment trend insights.

Built With

Share this project:

Updates

Submission history