← All projects

Full-stack PWA

BabyFlow Tracker

Installable baby tracker PWA with offline sync and caregiver roles.

  • React
  • TypeScript
  • TanStack Router
  • FastAPI
  • +3 more
Problem

Caregivers need a fast phone-first way to log feeds, diapers, sleep, and health events—and share that timeline with partners without losing data when connectivity drops.

Frontend work
  • React 19 SPA with TanStack Router and 20+ file-based routes
  • IndexedDB offline outbox with sync-on-reconnect and client ID remapping
  • HttpOnly cookie auth client with CSRF headers and silent refresh
  • PWA install manifest, shortcuts, and service worker reminders
  • English/Hebrew i18n with RTL and voice log via Web Speech API
Backend & system work
  • FastAPI REST API with 25+ v1 route modules and OpenAPI docs
  • MongoDB repository layer with JWT cookie auth and owner/caregiver/viewer RBAC
  • Web Push reminders (VAPID) with secured external cron job endpoint
  • Production on AWS Lightsail: Docker Compose stack with Caddy reverse proxy/TLS, backend API, and Redis
  • Observability on the VPS: Prometheus, Loki/Promtail, Grafana, Node Exporter, and cAdvisor
  • GitHub Actions CI: pytest (70% coverage gate), Vitest, and Playwright E2E
Key decisions
  • HttpOnly cookie sessions instead of localStorage JWT storage
  • IndexedDB offline outbox for mutation queueing and ID remap after sync
  • Cloudflare Pages frontend with API on AWS Lightsail behind Caddy (ports 80/443 only)
  • External HTTP cron for reminder push dispatch in production
Challenges
  • Offline-first mutation queue with ordered flush and temporary ID remapping
  • Cross-origin cookie auth between Cloudflare Pages frontend and Lightsail-hosted API
  • Multi-caregiver invite flows with viewer read-only enforcement
Tech stack
Frontend
  • React 19
  • TypeScript
  • Vite
  • TanStack Router
  • TanStack Query
  • Tailwind CSS
  • Radix UI
  • i18next
  • vite-plugin-pwa
Backend
  • FastAPI
  • Motor
  • PyMongo
  • Celery
  • Redis
  • pywebpush
  • Resend
Data
  • MongoDB
  • IndexedDB
Infrastructure
  • Docker Compose
  • Cloudflare Pages
  • AWS Lightsail
  • Caddy
  • MongoDB Atlas
  • Prometheus
  • Grafana
  • Loki
  • GitHub Actions
Testing
  • Vitest
  • pytest
  • Playwright
Tooling
  • Bun
  • ESLint
  • Prettier
  • Ruff
Browser APIs
  • Web Speech API
  • Web Push
  • Service Worker