Cycle Health PWA

The Problem

Commercial cycle health apps often store sensitive health data in plaintext on vendor servers, and many require account creation before users can even try the product. Users want fast daily logging — marking cycle days, symptoms, and mood — without sacrificing privacy or waiting through multi-screen onboarding flows.

The design goal is a privacy-first PWA: health data stays encrypted on the device behind a PIN or WebAuthn unlock, the backend only ever sees ciphertext, and users can try a full demo mode locally before creating an account. Cycle predictions, calendar views, and insights should all work from the same installable app.

Architecture

The frontend is a vanilla HTML/CSS/ES6+ hash-routed SPA on Cloudflare Workers Static Assets with a service worker for offline shell caching. Authentication is handled by a shared central auth service at auth.builtbyroger.com (app slug pt); the backend data API only verifies JWTs and never handles login routes.

• Encrypted vault: Cycle logs, symptoms, and preferences encrypted client-side with PBKDF2 + AES via Web Crypto; stored in IndexedDB per user.
• Backend API Worker: Validates Bearer tokens, syncs encrypted vault snapshots, and stores non-sensitive cycle settings (length, luteal phase).
• Central auth: Shared login/register UI across personal apps; JWT signed with a secret shared between auth and backend services.
• Neon PostgreSQL: Serverless Postgres via HTTP driver — ciphertext vault snapshots and user cycle settings only; no plaintext health data.
• Optional RAG Worker: Health Q&A chat proxied through the backend, backed by Workers AI, Vectorize, and educational content articles.

Core stack: Vanilla HTML, CSS, ES6+ JavaScript (hash-routed SPA) · Cloudflare Workers Static Assets · Cloudflare Workers (ES modules) · Neon serverless PostgreSQL · Shared central auth · PWA with service worker and install prompt · TypeScript cycle prediction engine bundled via esbuild.

• Neon PostgreSQL — App data only; user credentials live in the central auth database.
• Shared cycle predictions — TypeScript engine in shared/cycle-predictions/ computes phase, fertile window, and next cycle dates.
• Goal modes — Track cycles, conceive, pregnancy, and perimenopause modes tailor 80+ log parameters.
• Demo mode — Full app experience with local-only data; no account required.

Status: Deployed live at pt.builtbyroger.com and in active development. Optional RAG health chat is deployed separately and proxied through the backend API.

Features & Outcome

Key capabilities delivered:

• Daily log with week strip — Quick cycle start/end, customizable symptom, mood, and lifestyle parameters by goal mode.
• Calendar with predictions — Cycle days, fertile window, and predicted next cycle visualized on a month view.
• Insights dashboard — Current phase, cycle day, next cycle estimate, fertile window, averages, and symptom trends.
• Encrypted vault sync — PIN + optional WebAuthn unlock; ciphertext snapshots synced to Neon on save.
• Offline PWA — Service worker shell cache, install banner, and offline log queue replayed on reconnect.
• Optional health Q&A — RAG-powered chat with educational articles for cycle-related questions.

The app gives users private, fast daily cycle logging without trusting a vendor with plaintext health data. Central auth reduces duplication across personal apps while the encrypted vault ensures the backend never sees decrypted cycle information.