MediCare Clinic: A Web-Based Role-Based Clinic Appointment Booking System Using Single-Page Application Architecture

Abstract

The digitization of administrative workflows in small healthcare facilities presents a distinct set of software engineering challenges that extend beyond database design and basic web development. This paper presents the design, implementation, and evaluation of MediCare Clinic, a complete web-based clinic appointment booking system for small independent clinics, with specific emphasis on role-based access control architecture, single-page application design, appointment conflict prevention, and responsive user interface engineering. The proposed system provides a professional browser-based interface through which three distinct user roles — Admin, Doctor, and Patient — each access a dedicated dashboard with role-appropriate features and permissions. Patients can self-register, browse available doctors, select time slots, and book appointments at any time without telephone contact. Doctors receive real-time visibility into their appointment schedule with status management controls. The Admin maintains complete oversight of all doctors, patients, and appointments through a unified dashboard with live statistics. The system is implemented as a self-contained single HTML file using HTML5, CSS3, and vanilla JavaScript, requiring no backend server, no database installation, and no software dependencies. A dynamic time slot blocking mechanism prevents double-booking by querying the in-memory data store before rendering available slots. The appointment lifecycle is managed through four status states — Pending, Confirmed, Completed, and Cancelled — with role-controlled state transitions enforced at the application logic layer. The system was evaluated through ten functional test cases covering all major user flows, achieving 100% pass rate. Performance measurements show role navigation switching under 50 milliseconds and appointment booking completion under 100 milliseconds, representing an improvement factor exceeding 3,000 times over the traditional manual phone-and-register booking process.

Keywords