Church Attendance System

To modernize attendance tracking across multiple locations for a church network, I built a highly secure, offline-first attendance tracking system. The goal was to replace paper-based processes with an automated system featuring dual-mode QR code scanning (using either camera scanning or hardware device capture) and strict role-based access control, allowing ushers and local admins to manage attendance even without an active internet connection.

Developing an offline-first system required a robust client-side storage architecture using IndexedDB with AES-GCM encryption via the Web Crypto API, plus a custom SyncCoordinator to manage background syncing and resolve conflicts. I also faced hurdles designing a cross-tab safe syncing mechanism using localStorage locks, implementing frontend-driven audit logging with accurate field-level diffs, and capturing hardware QR scanner input as keyboard events without interfering with input forms.

The tailored solution uses Next.js 16 (App Router), React 19, and Tailwind CSS v4, backed by Supabase. To ensure low Supabase egress cost and fast page renders, the app serves data cache-first from IndexedDB with a 60-second fetch cooldown. Members can check in via their unique QR codes using a custom dual scanner utility. We implemented a role-based access control system (Superadmin, Localadmin, Usher) to restrict page-level view and action access, and automated Personal Information Sheet (PIS) eligibility by detecting ongoing members with 14+ attendance records.

Manual tracking time was slashed by 90%, allowing church leaders and volunteers to focus on ministry instead of paperwork. The offline-first capability ensured zero attendance data loss during district-wide outages, backed by a 30-day queue TTL. Leadership now enjoys real-time visibility into district metrics, attendance trends, and automated PIS eligibility tracking across all campuses.