E-Absensi
E-Absensi is an extension module of Sadulas that digitizes student attendance for SDN Sunter Agung 12 PG (Jan–Feb 2026), with an offline-first approach, RBAC, and print-ready PDF reports.
SDN Sunter Agung 12 PG
Web Developer
Jan 2026 - Feb 2026
1 · Solo Full-stack Developer
Impact
Offline-first attendance sync
Reliability
Print-ready PDF exports
Reporting
Problem
Attendance recording and monthly summaries were fragile on unstable networks, slow when done manually, and vulnerable to edits after lock.
Research
Mapped teacher, admin, and principal workflows for daily input, attendance locking, class-scoped permissions, and official letterheaded PDF reports.
Constraints
Must work offline, stay lightweight without a heavy framework, support multiple roles, and ship to Firebase Hosting.
Solution
Shipped an offline-first web attendance app with LocalStorage drafts, sync queue + DLQ, multi-tier RBAC, Chart.js stats, and jsPDF daily/monthly reports.
Design & Architecture
Used modular Vanilla JS with a local Tailwind build for a small footprint, Firebase Auth/Firestore for realtime data, and Service Worker + BroadcastChannel for offline and multi-tab reliability.
Development
Product/UI flows, offline sync architecture, RBAC, teacher/admin modules, and PDF report generation.
Challenges
Keeping attendance data durable while offline and consistent after sync, including failure isolation through a Dead Letter Queue.
Lessons Learned
Offline-first design and attendance locking matter more than extra visuals for school attendance systems.
Key Modules
Daily Attendance
Per-class attendance input, realtime draft autosave, and lock controls to prevent retrospective edits.
RBAC Access
Super Admin, Admin/Duty Teacher, Teacher, and Viewer roles with class-scoped access via kelas_ids.
PDF Reports
Daily and monthly PDF reports via jsPDF/AutoTable with dynamic letterhead and principal signature fields.
Architecture
Frontend
HTML5, modular Vanilla JS, Tailwind CSS, Lucide Icons, and Chart.js.
Data & Auth
Firebase Auth, Cloud Firestore, Storage, and Hosting.
Offline Reliability
LocalStorage drafts, Sync Queue + DLQ, Service Worker, and BroadcastChannel.
Stack