Software · PWA · Supabase · Netlify

Project Alaga v2.11.3

Household Enumeration & Census System — Northern Samar

A fully offline-capable Progressive Web App used by field enumerators to register and manage households for census and aid profiling. Data queues on-device and auto-syncs the moment connectivity returns.

Visit Live App
Project Alaga Dashboard — flagged records, pending follow-ups, and statistics
0 COMELEC Records
0 Municipalities
0 User Roles
0 Enrollment Steps
Presentation

Full Project Deck

All 16 slides from the Project Alaga portfolio presentation. Use the arrows, dot nav, or keyboard ← → to navigate.

1 / 16
Project Alaga — Census & Household Enumeration System, Northern Samar
Technical Overview
Architecture
Frontend
  • Single HTML PWA — no build step, no frameworks
  • 3,200+ lines Vanilla JS + CSS — zero dependencies
  • Service Worker + IndexedDB — offline-first
  • 5 responsive breakpoints from iOS to desktop
Database
  • PostgreSQL via Supabase — Row-Level Security on all tables
  • pg_trgm fuzzy search across 252,536 voter records
  • Custom JWT auth — not Supabase Auth
Hosting & CI/CD
  • Netlify — auto-deploys on every GitHub push
  • GitHub Actions revert workflow — one-click rollback
  • scripts/release.ps1 — commit → tag → push → deploy
252,536COMELEC Records
14Municipalities
3User Roles
5Enrollment Steps
User Roles
  • Enumerator — field data collection, 5-step form
  • Supervisor — review, approve, manage reports
  • Admin — full system: users, audit, backup, export
v2.11.3 · projectalaga.netlify.app · Clark Carpio
Product Overview
What is Project Alaga?
📱
Works on Any Device
PWA runs on phone, tablet, or desktop — no app store needed.
🗳️
252,536 Voter Records
Full COMELEC 2025 database for 14 Northern Samar municipalities.
☁️
Cloud Sync + Offline
Submissions sync live to Supabase; queue on-device with no signal.
🏠
Door-to-Door Enumeration
5-step form: leader, members, aid, classification, and needs.
👥
Three Role System
Enumerator · Supervisor · Admin — each sees only what they need.
🔒
Secure & RA 10173
JWT auth, RLS, private photo storage, audit trail, watermarking.

Built on: HTML/JS PWA · Supabase PostgreSQL · Netlify hosting

Access Control
Three User Roles
🟢 Enumerator
Front-line field worker
  • Enrolls households door-to-door
  • Searches 252K COMELEC voters list
  • Fills 5-step enrollment form
  • Sees only their own submissions
  • Reports unlisted persons to supervisor
🔵 Supervisor
Oversees enumerator activity
  • Views all records across all barangays
  • Reviews & approves UR-XXXXX reports
  • Assigns official NS-XXXXX Household IDs
  • Monitors Enumerator Activity panel
  • Full dashboard & statistical reports
👑 Admin
Full system access
  • Manages all user accounts
  • Opens/closes enumerator registration
  • Views complete searchable audit log
  • Downloads full JSON data backup
  • Forces password reset on any account
Enumerator Flow
Field Workflow
1
Arrive at Household
Knock, introduce the Program and data collection purpose.
2
Open Project Alaga
Log in, tap "New Household" to begin.
3
Search Voters List
Type leader's name — auto-fills from 252,536 COMELEC records.
4
Fill 5-Step Form
Complete all sections: leader, members, aid, classification, needs.
5
Take Leader Photo
Capture household leader photo (optional but recommended).
6
Submit
Tap Confirm & Submit → NS-XXXXX Household ID assigned.
📱 LIVE APP
Voters List — 252,536 COMELEC records
Voter list search · 5-step progress bar · Auto-fills from COMELEC
Enrollment Process
The 5-Step Enrollment Form
Step 1
Household Leader
Search 252K records · auto-fills · photo
Step 2
Members
All household members by name, barangay, precinct
Step 3
Aid & Employment
14 aid programs · employer type & name
Step 4
Classification
Class A · B · C + free-text notes
Step 5
Hopes & Requests
Infrastructure · Health · Jobs · Housing
✅ After Step 5 → Confirm & Submit → NS-XXXXX Household ID assigned → Completed if fully filled, Pending Follow-up if anything is missing
Supervisor Role
Responsibilities & Workflow
📋 Daily Tasks
  • Check Dashboard for new submissions and pending items
  • Review Unlisted Reports — verify identities
  • Monitor Enumerator Activity panel — set or clear flags
⚠ Unlisted Report Review
  • Enumerator submits unlisted person → UR-XXXXX generated
  • APPROVE → assigns official NS-XXXXX Household ID
  • REJECT with note → enumerator notified to follow up
  • MORE INFO → enumerator resubmits with clarification
👨‍💼 SUPERVISOR VIEW
Supervisor records view
⚠ Needs Attention 📋 Unlisted queue 📊 Status overview
Workflow
The Submission Loop
👤
Enumerator
submits in the field
→
☁️
Auto-Sync
NS-XXXXX assigned
→
👨‍💼
Supervisor
reviews on Dashboard
→
✔
Completed
Person not in COMELEC voters list?
👤
Enumerator files UR
→
👨‍💼
Supervisor verifies
→
✔
APPROVE → NS-XXXXX
Records
Records Management
🔍 Search & Filter
Search by name, ID (NS-XXXXX), barangay, or municipality. Filter by status, enumerator, classification, and date range.
📷 QR ID Scanner
Open the camera and scan a printed ID card QR code to instantly pull up any record in seconds.
☑️ Bulk Actions
Select multiple records → Print IDs, Set Class, Set Status, Reassign, or Delete in one operation. Export to CSV anytime.
📋 RECORDS LIST
Records list — household IDs, status, and classification
Personal names, household data, and voter records are redacted for privacy.
Analytics
Dashboard & Reports
📍 Needs Attention
Flagged + Pending Follow-up households highlighted at dashboard top.
📊 Classification Totals
Class A / B / C totals — full political breakdown across all municipalities.
⬇ CSV Export
Download the full dataset as a spreadsheet for external analysis or submission.
Dashboard — flagged records and classification stats
Reports — per-barangay totals
Personal names, household data, and voter records are redacted for privacy.
Architecture
How Data Flows Through the System
👤
Field Enumerator
→
📱
Project Alaga App
PWA
→
☁️
Supabase Cloud DB
PostgreSQL
→
👨‍💼
Supervisor Dashboard
→
🏠
Official NS-XXXXX Record
🗳️
252K COMELEC Records pre-loaded
📸
Photos → Supabase Storage
📝
Audit Log — every action tracked
📊
CSV Export for reporting
Admin
Full System Control
👥 User Management
Add, deactivate, or reset passwords. Bulk-select and deactivate multiple accounts at once.
🔓 Registration Toggle
Open or close new enumerator self-registration with a single toggle.
📝 Audit Log
Every system action — filterable by category, user, and date range with full-text search.
💾 Backup & Restore
Download full JSON backup. Upload to restore all data — preview shown before overwriting.
👥 USER MANAGEMENT
User Management panel
Personal names, household data, and voter records are redacted for privacy.
Changelog
What's New — v2.0 → v2.11.3
🔐
JWT-Secured Backend
Custom JWT auth layer + RLS on every table; photos via signed URLs.
🕵️
Forensic Accountability
On-screen forensic watermark, every login recorded in audit log.
📱
Mobile Overhaul
Fully responsive iOS & Android; PWA auto-updates itself on deploy.
🔎
Audit Log Filters
Category chips, searchable user filter, date range — lazy-rendered.
📶
Fully Offline ID Cards
QR generator bundled in-app — ID preview and printing with zero internet.
🆕 AUDIT LOG FILTERS
Audit log with category chips, date range filter
Security & Privacy
Built Secure from the Ground Up
📜 RA 10173 Compliant
Privacy Notice on every enrollment form. Data for authorized Northern Samar government enumeration only.
🎭 Role-Based Access
Enumerators see only their records. Supervisors see all. Enforced in-app and at database Row-Level Security.
🔐 JWT Session Security
Database access secured by custom JWT. Accounts lock after repeated failed logins.
🕵️ Forensic Watermark
On-screen watermark ties every view to the logged-in account — leaked screenshots are traceable.
📋 Full Audit Trail
Every action — logins, edits, deletes — logged with user, PHT timestamp, and record snapshot.
🌐 HTTPS + Strict CSP
All traffic encrypted on Netlify CDN. Strict Content-Security-Policy; all libraries bundled.
Quick Reference
Getting Started
🟢 For Enumerators
  1. 1.Open projectalaga.netlify.app on your phone
  2. 2.Tap browser menu → "Add to Home Screen" to install
  3. 3.Log in with your username & password
  4. 4.Tap "New Household" to begin enrolling
  5. 5.Search voters list → select the household leader
  6. 6.Complete all 5 steps, then tap Confirm & Submit
🔵 For Supervisors & Admins
  1. 1.Log in — extra tabs appear: Audit Log, Users, Settings
  2. 2.Check Dashboard daily for pending items
  3. 3.Go to Records → Unlisted Reports to review UR-XXXXX
  4. 4.Use Reports tab for aid, classification & employment summaries
  5. 5.Press H anywhere for keyboard shortcuts
  6. 6.Press Q to open QR scanner for instant lookup
projectalaga.netlify.app · v2.11.3
Northern Samar · 2026
PROJECT ALAGA

Digitizing Northern Samar's household enumeration — one barangay at a time.

252K+Voter records loaded
14Municipalities covered
3User roles
5Form steps
projectalaga.netlify.app · v2.11.3
Clark Carpio — Developer
Overview

What it does

Project Alaga puts a structured, verifiable census workflow on any phone, tablet, or desktop — no app store required. Field enumerators across Northern Samar fill a 5-step household form, verify residents against 252,536 COMELEC voter records, and submit — even with zero signal.

📱

Works on Any Device

PWA installable on Android, iOS, and desktop directly from the browser — no app store needed.

📡

Offline-First

Submissions, edits, and status changes queue locally in IndexedDB and auto-sync when connectivity returns.

🗳️

252K Voter Records

Full 2025 COMELEC database pre-loaded for instant fuzzy name search and form auto-fill — works offline.

🔒

Secure by Design

Custom JWT auth, Row-Level Security, forensic watermarks, brute-force lockout, and a full audit trail.

👥

Three-Role System

Enumerator, Supervisor, Admin — each sees only what they need, enforced in-app and at the database layer.

📊

Live Dashboard

Real-time classification breakdown, enumerator activity tracking, and exportable CSV for reporting.

Access Control

Three User Roles

Enumerator

Front-line field worker

  • Enrolls households door-to-door with the 5-step form
  • Searches 252K COMELEC voters list — auto-fills name and address
  • Takes household leader photo via device camera
  • Sees only their own submissions — no cross-team data exposure
  • Files unlisted persons for supervisor review via UR-XXXXX queue
  • Installs the app to phone home screen — works fully offline
Project Alaga — Voters List search (252,536 COMELEC records)

Supervisor

Oversees enumerator activity

  • Views all records across every barangay and enumerator
  • Reviews unlisted UR-XXXXX reports — approves, rejects, or requests more info
  • Assigns official NS-XXXXX Household IDs on approval
  • Edits, flags, or completes any household record
  • Monitors Enumerator Activity panel — sets flags, excuses, and dismissals
  • Accesses the full dashboard, reports, and classification breakdown
Project Alaga — Records list showing household IDs, status, and classification

Admin

Full system access

  • Manages all enumerator and supervisor accounts — create, edit, lock, disable
  • Opens or closes new enumerator registration with a PIN guard
  • Views the complete, searchable audit log with category and date filters
  • Downloads full JSON backup and restores from file
  • Forces password reset on any user account
  • Sets role-based login schedule windows (Philippine Time)
Project Alaga — User Management panel showing all accounts and roles
Screenshots

App in Action

Personal names, household data, and voter records are redacted for privacy. Click any screenshot to zoom.

Dashboard — flagged records, pending follow-ups, and classification stats Dashboard
Records — household list with NS-IDs, status pills, and class Records
Voters List — search across 252,536 COMELEC records Voters List
Reports — Class A/B/C breakdown per barangay Reports
User Management — admin account control panel User Management
Audit Log — action history with category filters and date range Audit Log
Technical

Tech Stack

Frontend

PWA — Vanilla JS

  • Single HTML file — no build step, no frameworks
  • 3,200+ lines of hand-written JS & CSS
  • Service Worker — offline cache + auto-update on deploy
  • IndexedDB (alaDB) — write queue, voter cache, draft autosave
  • 5 responsive breakpoints: iOS, Android, tablet ×2, desktop

Database

Supabase PostgreSQL

  • Row-Level Security on all 10 tables
  • Custom JWT auth layer — not Supabase Auth
  • pg_trgm GIN indexes — fuzzy search across 252K rows
  • Record versioning, locking & conflict detection
  • Append-only audit log — every action logged in PHT

Hosting & CI/CD

Netlify + GitHub

  • Netlify — auto-deploys on every GitHub push
  • GitHub Actions — automated backup every 3 days
  • One-click rollback via tagged releases
  • Strict CSP — all libraries bundled, no CDN dependencies
Live at projectalaga.netlify.app

Other Projects

Multi-Level Commercial Building Revit · Architectural Design Multi-Level Commercial Building Urban Road Design AutoCAD · Civil Design Urban Road Design Reinforced Concrete Building AutoCAD · Structural Detailing Reinforced Concrete Building