(SYS.01) — CLIENT SYSTEM — YOUTH & EVENT OPERATIONS PLATFORM
SK Balite Plus
Full-stack barangay youth engagement, live attendance, and digital administration.
(01) — System Overview
PROJECT
CONTEXT.
A modern full-stack web platform and PWA designed to streamline Sangguniang Kabataan and barangay youth operations. Centralizes event management, live Supabase Realtime attendance, tokenized guest access, digital certificates, evaluations, sports festival leaderboards, and gamified community rewards.
The Operational Bottleneck / Problem
Barangay and SK youth initiatives traditionally depended on disconnected spreadsheets, paper sign-in sheets, manual certificate formatting, and unorganized social media messaging, leading to lost participant records and slow administrative reporting.
Engineering Solution
Engineered an integrated web application and PWA centralizing registration, attendance, evaluations, certificates, and youth records into one unified database with server-enforced role-based access control.
(02) — Architecture & Pipeline
SYSTEM
ARCHITECTURE.
Next.js App Router and React Server Components communicating with Supabase PostgreSQL via Server Actions and stored RPC procedures, with Cloudflare edge protection and Supabase Realtime event channels.
Data & Execution Pipeline
(03) — Technical Focus
ENGINEERING
HIGHLIGHTS.
18 → 1 Dashboard Round-Trip RPC Optimization
Consolidated an initial 18 separate PostgREST queries per admin dashboard load into a single optimized PostgreSQL RPC function, aggregating attendance metrics and trend graphs database-side.
Live Attendance with Database Pagination
Engineered live event attendance leveraging Supabase Realtime for operational check-in/out updates while enforcing database-level pagination on large participant registries.
Tokenized Guest Access Architecture
Implemented secure server-side session and tokenized guest access flows, allowing non-registered participants to check in, evaluate events, and receive certificates without exposing auth credentials.
Domain-Based Architecture & Shared Caching
Structured feature domains with domain-tagged runtime cache invalidation for stable configuration data (categories, venues) while keeping identity and auth state verified against live database state.
(04) — Implemented Capabilities
CORE
FEATURES.
Admin Dashboard with PostgreSQL RPC metrics aggregation
Live Event Attendance with Supabase Realtime synchronization
Secure Guest Attendance Portal with tokenized access
Authenticated Resident Portal with point rewards and QR attendance
Digital Certificate Generator with Creative Studio design selection
Event Evaluation Forms with database-level response pagination
Sports Festival / Olympics Module with cached live leaderboards
Raffle draw engine optimized against N+1 query patterns
Katipunan ng Kabataan (KK) youth demographic profiling
Administrative Participation & Demographic Reports
(05) — Technology Stack
STACK
ARCHITECTURE.
Frontend & UI
Backend & Database
Realtime & Services
Infrastructure & Edge
(06) — Problem Solving
TECHNICAL
CHALLENGES.
Admin Dashboard Query Overhead
Initial dashboard rendering triggered 18 separate PostgREST requests. Resolved by developing a unified PostgreSQL stored procedure that executes aggregations directly in the database engine, returning a single structured JSON payload.
High-Volume Attendance Table Scalability
Replaced client-side array filtering with server-side pagination and query pushdown, omitting heavy base64 signatures from list payloads to maintain responsive sub-100ms transitions during active events.
(07) — Reliability & Governance
SECURITY & TESTING.
Privacy & Security Model
Enforces server-side authorization guards and PostgreSQL Row Level Security (RLS). Secret service-role keys remain strictly on the server; guest sessions use secure HTTP-only cookies and token verification.
Quality Assurance & Tests
45 targeted automated regression tests covering cache safety, RPC integrity, and auth boundaries.
EXPLORE MORE WORK