MediCare Clinic: Design and Implementation of a Responsive Web Application for Clinic Appointment Management

Small clinics and independent medical consultation centres across India continue to rely on manual telephone-and-register systems for patient appointment management, resulting in scheduling conflicts, poor patient experience, and limited administrative oversight. This paper presents the design, implementation, and evaluation of MediCare Clinic, a responsive web-based appointment booking system that digitizes the complete patient–doctor appointment lifecycle for small healthcare facilities. The focus of this paper is on the user interface engineering, responsive design architecture, frontend state management, and usability design decisions that collectively determine whether a digitization solution is practically adoptable by non-technical clinic staff and patients. The system is implemented as a self-contained single-page web application using HTML5, CSS3, and vanilla JavaScript, requiring no software installation, no backend server, and no internet connection for operation. Three distinct user roles — Admin, Doctor, and Patient — are served through dedicated dashboards, role-specific navigation, and permission-controlled action interfaces. A CSS custom properties design system provides consistent professional healthcare aesthetics across all screen sizes through CSS Grid responsive layouts. Patient-facing features include self-registration, doctor browsing with card-based UI, date-based time slot selection with automatic conflict prevention, and one-click appointment cancellation. Doctor-facing features include a real-time appointment schedule with status management controls. Admin-facing features include doctor registration and removal, patient oversight, and a live statistics dashboard. The system was evaluated through ten structured functional test cases achieving 100% pass rate, and through a usability comparison demonstrating a reduction in appointment booking time from 5–10 minutes by telephone to under 100 milliseconds digitally. Deployment requires only a single HTML file, making the system practically accessible to small clinics with minimal technical resources.