Pembangunan Modul Productivity NFE

Overview

A production single-page app for designing Non-Formal Education (NFE) training modules. Companies log in and build structured curricula: programme details, ISCED level, hours, and per-topic content covering learning outcomes, WIL activities, dimension splits (PQCDSM, Flex, Moral), and methodology weighting. A compliance checker validates topic count, total hours, and percentage balances against a V.A.R.I.F checklist before a module can be submitted. Admins get a cross-company view, a paginated activity log, and user management. Fields auto-save with debounce, Supabase Realtime keeps collaborators in sync without reloads, and a presence bar shows who is currently online.

Contribution summary

• Built the whole frontend as a modular vanilla-JS SPA (NFEApp, UIManager, ModuleManager, TopicManager, DashboardManager, RealtimeManager, PresenceManager) with no framework.
• Built the Supabase data layer: PostgreSQL schema for modules, topics, activity log, and user profiles, with email/password auth and Realtime subscriptions for live editing.
• Implemented two-tier access control at the application level: company users are scoped to their own modules, admins reach every company's data, the activity log, and user management.
• Deployed two Vercel Edge Functions. One serves Supabase credentials at runtime to keep secrets out of source. The other handles privileged admin user CRUD behind JWT and role checks.
• Built a compliance checker against the V.A.R.I.F validation criteria: minimum 5 topics, 80+ hours, dimension splits that sum to 100%, and full topic completion before submission.
• Implemented auto-save (1.2s debounce on module fields, immediate on topic fields) with 'syncing → synced' feedback, and made realtime updates skip DOM writes on a field while it is being edited to avoid clobbering input.
• Hardened security: XSS escaping on user content, a CORS origin allowlist on the edge functions, X-Frame-Options and X-Content-Type-Options headers, and the service-role key kept server-side.