Managing operational monitoring across ~14 geographical zones for Talimul Quran previously relied on fragmented paper sheets and manual Excel spreadsheets. Zone managers would fill in handwritten reports spanning 7 different domains—educational courses, organizational outreach, personal initiatives, meetings, maktab statistics, travel audits, and qualitative comments—totaling over 250 individual metrics. These were then manually compiled into a city-wide master report, a process plagued by lost progress, calculation errors, and weeks of consolidation overhead.
I designed and built a complete replacement: an enterprise-grade, mobile-first web application on Next.js 16 (App Router), React 19, TypeScript, Supabase PostgreSQL, and Tailwind CSS v4. The platform supports 5 temporal reporting periods—Monthly, Quarterly, Half-Yearly, Nine-Month, and Yearly—with guided, modular data entry across the 7 report sections.
The core engineering challenge was making data entry feel instant and bulletproof. I implemented zero-latency autosave that syncs every field to PostgreSQL the moment a user shifts focus (onBlur), with immediate visual feedback. To eliminate race conditions during report initialization, I wrote a custom PostgreSQL RPC function (get_or_create_report) that atomically seeds the root report and all 7 child tables—handling 50+ category rows—inside a single database transaction, cutting initialization from 8 network requests down to 1.
For city-wide analytics, I offloaded all multi-zone aggregation to 6 specialized PostgreSQL views that compute totals at the storage layer, so the frontend renders consolidated reports instantly without heavy client-side computation. Administrators can inspect and override any aggregated value inline via a View/Edit mode toggle, with corrections stored in a dedicated override table using COALESCE-based injection into the views. The admin dashboard tracks real-time submission status across all zones with KPI panels strictly verifying the is_submitted flag.
Authentication uses Supabase Auth with a middleware-enforced approval gate—new accounts land at a pending state until an administrator explicitly activates them. I implemented anti-enumeration guards using GoTrue's silent email collision detection (identities: []) and bypassed the 1,000-user API cap by synchronizing profiles via PostgreSQL triggers (ADR 003). Row Level Security policies ensure managers can only access their own zone's data, while admins retain global read and override privileges.
The interface features seamless zero-refresh dual-language support (Bengali & English) via React Context, a 4-theme visual suite (Light, Dark, Solarized Light, Solarized Dark) using HSL token contracts, and strict mobile-first touch ergonomics—desktop data grids transform into swipeable step-by-step cards with a fixed bottom navigation bar on mobile. All 12 architectural decisions are formally documented in Architecture Decision Records (ADRs).
Export capabilities include landscape 2-page A4 PDF generation via @react-pdf/renderer—engineered with strict page budgeting to guarantee double-sided single-sheet printing—and Excel exports via exceljs. Both use the universal Kalpurush font to prevent rendering crashes with Bengali typography. Automated zero-cost cloud backups run via a GitHub Actions cron workflow executing encrypted pg_dump to a secure private repository.