About This Architecture

FocusLock MVP is an offline-first PWA built with Next.js, Service Workers, and IndexedDB that tracks user commitments and sends Telegram notifications to enforce accountability. The architecture separates concerns across UI (PWA Screens), Application Logic (Contract Manager, Record Manager, Streak Engine, Failure Engine), and Persistence (IndexedDB stores for contracts, records, and metadata) with a Service Worker managing offline caching and the Failure Engine as the critical orchestrator. Data flows from the Dashboard through business logic modules into IndexedDB, while the Failure Engine triggers notifications via Next.js API routes to the Telegram Bot API, creating a pressure feedback loop. This pattern demonstrates how to build resilient, offline-capable accountability apps without backend infrastructure during MVP phase, scaling to PostgreSQL and Auth in Phase 2. Fork this diagram to customize notification channels, add social leaderboards, or extend to browser extensions and device sync.

People also ask

How do you build an offline-first PWA with Service Workers and IndexedDB that syncs with external APIs like Telegram?

FocusLock's architecture uses Service Workers for offline caching, IndexedDB for local persistence (contracts, records, metadata), and a Failure Engine that orchestrates notifications via Next.js API routes to Telegram Bot API. This pattern enables full offline functionality while maintaining external integrations for accountability pressure.