PocketPal

Inspiration

Mental health support for teens is either clinical and cold, or generic and forgettable. We wanted to build something that actually feels like a friend — something a teenager would open every day, not just when things get bad.

The idea: what if your daily mood check-in became a story? Not a chart. Not a score. A chapter of your life.

What it does

PocketPal is a daily wellness journal for teens powered by AI.

• Daily check-in — pick your mood, write what's on your mind. Takes 30 seconds.
• AI response — a warm, peer-style acknowledgment and one actionable tip. Never clinical. Never diagnosing.
• Memory engine — the AI remembers recurring themes (school, friends, soccer) and references them naturally over time.
• Chapters — every month becomes a narrative chapter: main challenge, turning point, growth arc.
• Wrapped — a 5-slide immersive monthly recap inspired by Spotify Wrapped.
• Movie Recap — your month as a cinematic poster: starring you, supporting cast: your life.
• Core Memories — collectible milestone cards (first great day, longest streak, biggest mood jump).
• Future Me — write a sealed message to yourself. Unlocks in 30 days, 90 days, or 1 year.
• Support Map — real mental health resources near you via OpenStreetMap, mood-aware and location-aware.
• Crisis helplines — auto-detected by OS timezone (works through VPN), with manual country override.

How we built it

Frontend: React 18 + Vite + Tailwind CSS v4. Neumorphic design system with dark cinematic hero sections. Vanilla Leaflet for the support map (react-leaflet was incompatible with React 18). Canvas-based confetti, typewriter AI responses, breathing circle animation, scroll-reveal with IntersectionObserver, haptic feedback via the Vibration API.

Backend: Node.js + Express. Local JSON file storage — no database, no accounts, no cloud sync. Privacy-first by design.

AI: ASI-1 (asi1-mini) via OpenAI-compatible API. Used for check-in responses, weekly pattern summaries, monthly chapters, movie recaps, and wrapped reflections. The API key never leaves the server.

Location: OS timezone detection (VPN-proof) → IP geolocation fallback → GPS → locale. Crisis helplines auto-match to the user's country with zero permissions required.

Challenges

• react-leaflet v5 / React 18 incompatibility — dropped it entirely, rewrote the map using vanilla Leaflet imperatively inside a useEffect.
• VPN-proof location — IP geolocation always returned US for our test user. Solved by reading Intl.DateTimeFormat().resolvedOptions().timeZone — the OS timezone is unaffected by VPN.
• AI guardrails — carefully prompt-engineered every AI call to never diagnose, never speculate, never reference raw user quotes — only topic categories.

What we learned

Teenagers don't want a therapist in their pocket. They want to feel heard. The hardest design problem wasn't the UI — it was finding the tone. Every word in every AI response had to feel like a supportive friend, not a clinical tool.

What's next

• Streak sharing (opt-in, privacy-preserving)
• Offline PWA support
• Guardian view (teen controls what's shared)
• Multi-language support

Built With

• asi-1-(asi1-mini)
• express.js
• intl
• leaflet.js
• node.js
• nominatim
• openstreetmap
• overpass-api
• react-18
• recharts
• tailwind-css-v4
• vite