Case Study - Product Design + PWA Development
Recovery Calendar
structure for sobriety.
A free progressive web app for people in recovery. Search 59,000+ meetings by location, build a personal weekly calendar, track sobriety, export to iCal, get AI-generated "What to Expect" guides for new meetings, and email your schedule. All wrapped in a warm, handcrafted interface that feels like a physical planner, not a clinical tool.
Visit recoverycalendar.appThe Challenge
Recovery needed a planner, not another app.
People in recovery rely on meetings - AA, NA, Recovery Dharma - as the foundation of their daily structure. But finding meetings is fragmented across dozens of regional websites with inconsistent data, broken links, and no way to save anything. The existing tools feel clinical or institutional. Nobody had built something that lets you search 59,000 meetings by location, save them to a personal calendar, export to iCal, track your sobriety date, and get a warm AI-generated guide about what to expect at a new meeting. The goal: build a personal planner for sobriety that treats the user like a human being, not a patient.
59K
Meetings aggregated from 237+ national sources across AA, NA, and Recovery Dharma - searchable by location, day, time, and fellowship
0
Dependencies and build tools. The entire app is a single HTML file - no framework, no bundler, no node_modules. Just vanilla JS, CSS, and the browser
14K
Lines in one file. All CSS, HTML, and JavaScript live in index.html - a deliberate architectural choice that keeps deployment instant and complexity low
Brand Identity
Warm paper, not cold pixels.
The design system was built around one question: what if your recovery planner felt like a physical notebook you carried with you? Warm paper tones, ink-dark text, a gold accent that feels handwritten rather than highlighted. The grid lines, the rounded-nothing borders, the Futura PT uppercase labels - everything says "personal planner," not "health tech startup." Users can customize their accent color, paper tone, and ink mood, making the app feel like theirs.
Color Palette
Ink
#313131
Ink Light
#5a4a32
Accent
#E49B1D
Paper
#EAE4DD
Kraft
#c8a96e
Headlines - Futura PT
Your meetings. Your schedule. Your recovery.
Body & UI - System Sans-Serif
Find nearby meetings, build your weekly calendar, and track your sobriety - all in one place. Free, private, works offline.
UI Labels & Navigation
Week · Month · All Meetings · My Meetings · Find Nearby
Voice & Tone
Warm, private, never clinical.
Recovery is personal. The app's voice reflects that - supportive without being preachy, helpful without being condescending. It speaks like a friend who's been there, not a doctor reading from a clipboard.
Privacy as a default, not a feature
The app works without an account. Demo mode lets you explore everything with data stored only in your browser. Sign-in is optional and only exists for cloud sync. No tracking, no analytics on user behavior, no data sold. Recovery is anonymous by tradition - the app honors that.
"Try it first. No account needed. Your meetings stay on your device until you decide otherwise."
Structure, not surveillance
The sobriety tracker counts days without judgment. No streaks, no gamification, no sad notifications when you reset. The calendar shows your meetings without asking why you missed one. The app provides structure - what you do with it is yours.
"Your sobriety date is yours to set, change, or keep private. The calendar is here when you need it."
Nervous is normal
The "What to Expect" feature generates a short, warm guide for any meeting. It describes the room, the format, whether you'll need to speak, what to bring. The tone is always reassuring without being saccharine. It meets people at the moment of highest friction: the gap between wanting to go and actually walking through the door.
"Most people just listen for the first few meetings. You don't have to share. Arrive a few minutes early and someone will probably say hello."
Design Decisions
What made it work.
Single-file architecture
The entire PWA lives in one 14,000-line HTML file. No framework, no build step, no node_modules. This wasn't laziness - it was a deliberate choice. Deployment is a file copy. There's no build to break. The service worker caches one file. For a free tool maintained by one person, simplicity is a feature, not a compromise.
Analog aesthetic
Every design choice reinforces the planner metaphor. Paper-toned backgrounds with subtle grid lines. Ink-dark text. Gold accents that feel stamped, not highlighted. The 3px border radius on everything. Users pick their own accent color and paper tone - making the app feel personal in a space where personalization carries real emotional weight.
Privacy by architecture
Demo mode stores everything in localStorage - no account, no server, no trace. Signed-in users sync to Firebase, but the app works fully without it. There's no analytics tracking user behavior. Recovery is anonymous by tradition. The architecture respects that by making privacy the default state, not an opt-in setting.
"What to Expect" AI guides
Nervous about a new meeting? Tap any meeting card and hit "What to Expect" for a warm, AI-generated guide tailored to that specific fellowship, format, and setting. It tells you what the room will feel like, whether you need to speak, and what to bring. It's the feature that turns "I'll go next week" into "I'll go today."
Geolocation-powered search
The Find Meetings modal lets users search by city or zip code, set a radius, and filter by day, fellowship, and format. Results come back with distance and a match-confidence score. Behind it, a separate Next.js aggregator crawls 237+ national sources into a unified Postgres database and serves a search API.
iCal export and email delivery
Export any single meeting or your entire schedule as a standards-compliant .ics file, with options for one-time or recurring weekly events. Or skip the file and email your formatted schedule directly from the app via EmailJS. Two paths to get your meetings into whatever calendar you already use.
Under the Hood
Simple surface, serious infrastructure.
Meeting Aggregator
A separate Next.js 14 + Prisma + Neon Postgres application that crawls 237+ national meeting sources. Aggregates ~59,000 meetings across AA, NA, and Recovery Dharma into a unified search API. Crawls run locally to avoid Netlify's 10-second function timeout.
Firebase Auth + Realtime DB
Google sign-in and email/password authentication. User meetings and sobriety dates sync to Firebase Realtime Database at /users/{uid}/. Data also mirrors to localStorage for offline access. Sign-in is optional - the app works fully in anonymous demo mode.
EmailJS - No Backend Needed
Welcome emails and schedule delivery sent directly from client-side JavaScript via EmailJS. Branded HTML templates match the app's warm aesthetic. No server, no email infrastructure to maintain. Sends from hello@recoverycalendar.app.
PWA + Service Worker
Installed as a home screen app on any device. The service worker aggressively caches for offline access - meetings are available even without a connection. Manifest, icons, and meta tags make it indistinguishable from a native app.
AI-Powered Meeting Import
Users can photograph a meeting schedule or upload a document, and a Netlify function parses the image or file using AI to extract meeting details - names, days, times, locations - and adds them to the calendar automatically.
Themeable Design System
Users customize accent colors, paper tones, and ink moods via data attributes on the body element. CSS custom properties cascade the theme through every component. The app feels personal - not one-size-fits-all - in a space where that matters.
OpenAI Integration
Powers two features: "What to Expect" generates personalized guides for any meeting based on its fellowship, format, and setting. The AI chat helper answers recovery-related questions directly in the app. Both run through Netlify serverless functions.
Guided Onboarding
New users see a Getting Started modal that walks through every feature: adding meetings, finding nearby, using the sobriety tracker, exporting to calendar. Revisitable anytime from Settings so nothing feels permanent or pressured.
59K
Meetings Indexed
237+
Sources Crawled
3
Fellowships
14K
Lines, One File
0
Dependencies