eMediCard

Digital Health Certificate & Sanitary Permit Platform

Role

Capstone Project Lead & Full-Stack Developer

Timeline

2025

Status

Completed & Defended

Deliverable

GitHub

React Native Expo Next.js TypeScript Convex Clerk Auth Maya Tailwind CSS

eMediCard Digital Platform Landing Interface

Project Overview

eMediCard is a full-stack civic health management system developed as our senior Capstone project at STI College Davao. Built to modernize the Davao City Health Office (CHO) annual health card renewal process, it replaces manual venue queues with a cross-platform mobile application for citizens, an automated Maya payment gateway, and a real-time administrative web portal for city health inspectors.

The Problem

The Bottleneck: 71,000+ In-Person Renewals & Mall Queues

Every year, thousands of food handlers, hospitality workers, and commercial employees in Davao City must obtain or renew mandatory health certificates. Field data collected from the City Health Office (CHO) processing venue at Victoria Plaza revealed severe operational bottlenecks:

In Q1 2024 alone, over 71,000 workers queued in person (23,489 in January, 29,185 in February, and 18,788 in March), with peak daily traffic exceeding 1,400 applicants stretching far outside mall premises.
Applicants endured repetitive physical trips: submitting lab specimens (chest X-ray, urinalysis, stool/fecalysis), paying cashiers, waiting for manual record lookups, and attending physical seminars.
Administrative staff manually verified thousands of physical paper forms and decentralized binders, causing processing delays and high risks of misplaced medical records.
Sanitary field inspectors lacked an instant, tamper-proof method to verify card validity during on-site business compliance checks, opening vulnerabilities to forged paper cards.

how we built it

SDLC Methodology: 5-Stage Modified Waterfall

We followed an Iterative Modified Waterfall Model across 5 disciplined phases, allowing structured milestones with validation feedback loops between stages:

Stage 01 Field Research

CHO Stakeholder Interviews & Field Research

Conducted formal interviews with Davao City Health Office personnel at Victoria Plaza and surveyed frequent applicants from local establishments (McDonald's Buhangin Pag-IBIG Branch & Three J Watch Service Center at Gaisano Grand Ilustre) to map the exact 3-tier card classification and document verification bottlenecks.

Stage 02 System Design

UML Modeling & Serverless Schema Design

Engineered comprehensive Use Case, Activity, Sequence, and Domain Class diagrams alongside interactive Figma prototypes. Architected a document-based schema in Convex 1.27.3 to store hierarchical applicant records, document uploads, and orientation bookings without brittle SQL joins.

Stage 03 Full-Stack Build

Mobile App & Web Admin Portal Development

Developed the citizen client in React Native 0.81.4 (Expo SDK 54) with Clerk authentication and Maya payment integration (with automatic ₱10 processing fee). Built the responsive administrative dashboard in Next.js with reactive Convex queries for instant multi-device synchronization.

Stage 04 Verification

Multi-Suite Testing & Clinical Referral Flows

Executed 9 structured test suites covering user registration (URTC), logins (ULTC), 10MB document uploads (DUTC), Maya checkouts (PPTC), and orientation bookings (OBTC). Implemented clinical referral handling for abnormal lab findings (e.g. PTB or UTI) with 3-month re-test monitoring.

Stage 05 EAS Release

User Acceptance Testing & Production EAS Deployment

Conducted comprehensive User Acceptance Testing (UAT) with CHO personnel and sample applicants. Automated Android production package compilation via Expo Application Services (EAS Build) targeting Android 8.0 through 13 with verified QR check-in/check-out at Magsaysay Complex Door 7.

the architecture

The System: End-to-End Digital Permitting Architecture

We designed and delivered an end-to-end digital ecosystem that eliminates physical queuing through automated classification, digital verification, and instant QR authentication:

01.

Color-Coded Health Card Classification

Dynamic triage into Yellow (Food Handlers requiring food safety seminars), Green (Non-Food workers), and Pink (Direct Skin Contact occupations) with customized lab requirement checklists.

02.

Multi-Document Upload & Validation Pipeline

Client-side image compression and secure Convex file storage supporting PDF, JPG, and PNG uploads (up to 10MB) for X-rays, urinalysis, stool examination, valid IDs, and Cedulas.

03.

Clinical Findings & Doctor Referral Tracking

Back-office clinical referral workflow allowing CHO medical staff to flag abnormal findings (e.g., PTB, UTI), record attending physicians, set a 3-month monitoring period, and require cleared re-tests before approval.

04.

Orientation Scheduling & Dual QR Attendance

Yellow card applicants book real-time seminar slots at Magsaysay Complex Door 7. On-site sanitary inspectors scan applicant QR codes for both check-in and check-out, eliminating paper roll calls.

05.

Hybrid Payment Gateway (Maya & Cashier Receipts)

Integrated Maya digital checkout API for instant online fee settlement, with a fallback receipt verification flow for manual over-the-counter payments at designated city cashier stations.

06.

Tamper-Resistant Digital Health Card & QR Scanner

Dynamically generates official digital health cards with city branding, registrar signatures, and cryptographically verifiable QR codes scanned in sub-seconds by inspectors during field audits.

selected screens