Back

Deploying Official Offline-First University Systems at ISUFST

When building enterprise-grade web applications, relying purely on constant network connectivity is a massive point of failure. If the Wi-Fi drops, the system halts.

I encountered this exact problem when I was tasked with building official administrative systems for my school, Iloilo State University of Fisheries Science and Technology (ISUFST).

To solve this, I architected, built, and fully deployed two completely distinct Progressive Web Apps (PWAs) utilizing local SQLite databases synchronized with a central Supabase cloud infrastructure. Both of these systems are currently live and officially used by the university.

System 1: Official IT WEEK QR Scan Attendance

During IT WEEK 2026, the university needed a rapid, reliable attendance tracking system capable of handling over 500+ participants simultaneously, while completely replacing the traditional manual logbook at the gates.

I built the official QR Scan Attendance PWA. The system architecture involves several advanced features:

  1. Automated Registration: Students register their names and teams into the portal, which dynamically generates a unique QR code for each student.
  2. Hyper-Fast Gate Scanning: Admins at the gate scan these QR codes for instant Time In and Time Out.
  3. The Offline Queue Tab: Instead of writing every scan directly to the cloud (which causes massive latency spikes on congested networks), every scan is saved instantly to a local SQLite database. If the network goes down, the scans are held in a dedicated Queue Tab. Admins can simply click a "Sync Now" button to batch-push all queued scans to the Supabase cloud once connectivity is restored.
  4. Real-Time Live Scoreboard: The event features an interactive, real-time scoreboard. When admins award merits or demerits to a team on the admin dashboard, the public scoreboard updates instantly via Supabase Realtime websockets.
  5. Cinematic Winner Reveal: At the end of the event, the scoreboard triggers a highly stylized 10-second countdown animation, dynamically revealing the winning team and their total points.
  6. Printable Reporting: The system aggregates all data and allows admins to export clean, printable attendance reports for university records.

System 2: Official OJT QR Pass (DTR Platform)

Following the success of the IT WEEK scanner, I built OJT Track, a highly complex, role-based administrative utility deployed for the CICT Department to track over 50 On-the-Job Training (OJT) interns.

This system completely digitized the department's manual DTR workflow by offering two distinct portals (/admin and /intern) and a massive suite of features:

  1. Printable ID Generator: The system auto-generates standard CR80 physical ID cards with embedded, UUID-encoded holographic QR codes for every intern. These are optimized for direct campus printing.
  2. Offline-Capable HTML5 Scanner: The admin terminal runs a camera-based HTML5 QR scanner that handles Morning and Afternoon sessions, overtime overrides, and manual time entries. Just like System 1, it queues scans locally during offline periods and syncs to Supabase on reconnection.
  3. Intern Dashboard & Leave Requests: Interns log into their own portal to view an animated SVG donut chart tracking their progress against their required 600 OJT hours. They can also submit official excused leave requests directly through the system for admin approval.
  4. Automated Pixel-Perfect DTR PDFs: At the end of the month, the system uses jsPDF and html2canvas to automatically generate pixel-perfect PDF Daily Time Records. These PDFs include the official ISUFST Bagong Pilipinas letterhead, signature blocks, and automatically calculated Late and Undertime flags.
  5. Bulk ZIP Export: To save the faculty hours of administrative work, the admin portal can bundle all 50+ generated DTR PDFs into a single ZIP file (JSZip) for instant downloading and printing.

The Power of Offline Fallbacks

It is one thing to build a project in a local environment, but it is a completely different challenge to deploy it to real users in a production environment.

While both of these systems require the internet to function at full capacity (such as syncing data to Supabase), their true strength lies in their Offline Fallback capabilities. By building them as Progressive Web Apps (PWAs) and moving the primary database writes to the local client, the systems can survive network outages without losing a single piece of critical data. They simply queue the actions locally and wait for the internet to return. This creates an incredibly resilient experience for the university.