Technologies Used
IT 305W Version
- React
- Bootstrap
- Firebase
Capstone (EchoVax)
- Next.js
- TypeScript
- Tailwind CSS
- Supabase
- PostgreSQL
- Web Speech API
- Google Gemini API
- SMS Gateway
- Resend
- Monorepo Architecture
- PWA
- Vercel
I contributed to this project as team leader and main developer. The CIS for Dr. Pau Animal Bite Center is a group web application developed to accomplish the requirements of IT 305W - Advance Web Application.
About the Project
The Clinic Information System is designed to solve a common problem for medical clinics: the inefficient and decentralized management of patient records and appointments. This initial version focuses on the core Patient Management Module, which allows patients to register, log in, and book their own appointments online, while also empowering clinic staff to manage walk-in patients and view the daily appointment schedule.
The application utilizes the Create, Read, Update & Delete (CRUD) method for all data operations, with all information securely stored and managed using Firebase services as required by the project specifications.
Key Features
Patient Portal
- Secure Authentication: User registration with email verification and login using Firebase Authentication.
- Personal Dashboard: View profile information and appointment history.
- Appointment Booking: A multi-step form to book new appointments for either a New Bite Incident or a Follow-up/General Consultation.
Staff Portal
- Daily Appointments: A comprehensive dashboard displaying the list of patient appointments for the day.
- Patient Search: Functionality to search for existing patients.
- Walk-in Registration: A dedicated form for staff to register walk-in patients directly.
Technologies Used
This project is built using modern web technologies to ensure a responsive, efficient, and scalable application.
- Front-End Framework: ReactJS (with Functional Components and Hooks)
- Styling: Bootstrap
- Icons: Font Awesome
- Backend as a Service (BaaS): Firebase
- Authentication: Firebase Authentication for user registration and login.
- Database: Firebase Realtime Database to store and manage all application data.
- Storage: Firebase Storage for user profile pictures.
- Hosting: Firebase Hosting for final deployment.
- Google ReCAPTCHA: reCAPTCHA v2 (Checkbox) for client-side anti-bot verification on sensitive forms.
- Email Service: EmailJS for sending email notifications.
Continued as Capstone: EchoVax
This IT 305W project served as the direct foundation for our capstone thesis, EchoVax: A Web-Based Application for Dr. Pau Animal Bite Center Using Voice-to-Text and Natural Language Processing, with the same client, Dr. Pau Animal Bite Center (Pandi Branch), as our partner institution.
The capstone evolved the initial CIS into a full-scale, AI-assisted clinic operations platform, replacing the clinic's manual logbooks, fragmented spreadsheets, paper vaccination cards, manual SMS follow-ups, and paper-based end-of-day reporting with a structured digital workflow for clinic staff and registered patients.
What changed from IT 305W to Capstone:
- Replaced Firebase with a Next.js + Supabase (PostgreSQL) architecture for a more robust, relational data model.
- Added Voice-to-Text patient intake powered by speech recognition APIs.
- Integrated NLP entity extraction to automatically map Taglish/English dictations into structured database fields.
- Built automated PEP vaccination schedule calculation (Day 0, 3, 7, 14/28) with SMS reminders.
- Developed a branch-level mini-inventory module for vaccine and asset tracking.
- Added a payment transaction ledger with proof-of-payment attachments.
- Implemented automated End-of-Day (EOD) report generation with PDF export.
- Delivered a Patient Access Portal for self-service record viewing, digital vaccination card, and appointment requests.
Capstone Tech Stack: React, Next.js (App Router), TypeScript, Tailwind CSS, Supabase (PostgreSQL + Auth + Storage), Google Gemini API (NLP extraction), Web Speech API (voice-to-text), SMS Gateway for Android, Resend (email), Vercel (hosting), dotPH (domain), Monorepo architecture, PWA (offline-first).
Here is a preview of the EchoVax system screens:
| Screen | Preview | Description |
|---|---|---|
| Staff Dashboard |  | Daily KPI widgets, active vaccination queue, and quick actions for clinic staff. |
| EOD Report |  | Automated end-of-day report with daily census, revenue, and inventory reconciliation. |
| Digital Vax Card (Front) |  | Digital vaccination card front, replacing the clinic's physical paper card. |
| Digital Vax Card (Back) |  | Vaccination card back showing the complete multi-dose PEP schedule and dose tracking. |
Developed as the Capstone Project for BS Information Technology at Bulacan State University.