Case study
Corporate Dashboard
A multi-department dashboard for a newborn screening center: sample and facility KPIs, laboratory turnaround tracking, patient follow-ups, IT job orders, an intranet file system, and team chat in one app.
Built for internal use at Newborn Screening Center - Southern Luzon, so the source code is private. The demo runs the real frontend with mock data: every patient, staff member, and number in it is made up.
Role: Design and full-stack development, from database queries to the desktop build
The problem
- The center's legacy laboratory system was no longer supported, and each department pulled its numbers by hand from different places.
- Program, laboratory, follow-up, and IT staff needed live views of their own work: samples received, turnaround times, recalls, and tickets.
- Data lived in two databases, Oracle for laboratory records and MySQL for the newer internal apps, so nobody had one picture of operations.
Quick tour (silent, sample data)
Screens (demo, sample data)
What it does
Program (PDO) KPIs
Samples received and screened, unsatisfactory rates, facility performance, visits, and per-province totals, with year-over-year charts that export to image or Excel.
Laboratory tracking
Daily received samples, a turnaround pipeline from collection to release (average, median, and mode days), data-entry statistics and speed per encoder, and the most common entry errors.
Follow-up
Recall activity per follow-up nurse, patient details by test result, logbook endorsements between departments, urgent cases, and a shared calendar.
IT job orders
Tickets move from pending approval to queued, assigned, in progress, resolved, and closed. Department approvers sign off, and a floating tracker shows the status of your open tickets.
Intranet files
Categories and folders for shared documents, with starring, sharing between staff, previews, and PDF stamping.
Real-time and desktop
Socket.IO powers team chat and notifications, and the same app also ships as an Electron desktop build for workstations.
Architecture
A request
React + TypeScript (web or Electron)
TanStack Query caches and refreshes each module's data
Express API
JWT middleware, then routes grouped by department (PDO, Laboratory, Follow-up, IT, Intranet, Admin)
Oracle and MySQL connection pools
Laboratory records from Oracle; users, job orders, and intranet data in MySQL
Background and real-time
Socket.IO
Chat messages and notifications pushed to connected staff
Hourly sync (node-cron)
Keeps facility status fields such as last sample sent up to date
Security decisions
Hashed passwords
User passwords are stored as bcrypt hashes; a one-time migration script converted the old stored passwords.
Token auth
API routes check a signed JWT, and the frontend keeps the user's role and department to decide which menus and approval actions they see.
Department permissions
Each module checks the user's department: its own staff can create, edit, delete, and export, and everyone else gets a read-only view. Job order approvals go to the requesting department's approvers.
A demo with no real data
The portfolio build swaps the HTTP layer for an in-browser mock with made-up fixtures, and hides real staff names behind labels like 'Encoder A'. It never connects to the center's databases.
How it was built
- Organized by department: each module has its own routes, controllers, services, and React Query hooks.
- Charts export to PNG (html2canvas) and tables to Excel (xlsx); the backend generates PDFs with PDFKit.
- A mock mode, switched on with one environment variable, routes every API call to local fixtures so the full UI runs without a server.
- 117 commits over five months, with the same codebase deployed as a web app and an Electron desktop app.