Web Application
Year 1 (2025-2026)
BBU Hospital Website Project
Note: Source code ZIPs & GitHub links are protected. Please sign in to download source code.
Project Overview
**BBU International Hospital & Medical Center** is a state-of-the-art, responsive web application designed for Build Bright University (BBU) Web Development project showcase. It demonstrates modern web UI/UX aesthetics, client-side data management, interactive medical tools, and patient management features built with pure HTML5, Vanilla CSS3, and JavaScript (ES6+).
Key System Features & Functionalities
## 🚀 Key Features
1. **🏥 Modern Medical UI & Responsive Design System**
- Built with custom CSS custom properties (variables), glassmorphism effects (`backdrop-filter: blur()`), gradient accents, and micro-animations.
- **Dark & Light Mode Switcher**: Seamless theme toggling with automatic persistence in `localStorage`.
- **Multilingual UI Simulation**: Quick switch between English (EN) and Khmer (KM).
2. **📅 Multi-Step Online Appointment Booking Wizard**
- Interactive 3-stage modal:
- **Stage 1**: Select clinical department, specialist doctor, date, and time slot.
- **Stage 2**: Enter patient contact details and symptoms.
- **Stage 3**: Instant generation of a printable **Digital Appointment Pass** complete with a custom QR code canvas.
3. **🩺 Doctor Directory & Live Filter Engine**
- Real-time search by doctor name, specialty, or condition.
- One-click specialty pill filtering (Cardiology, Neurology, Pediatrics, Orthopedics, Oncology).
- Doctor card details featuring ratings, experience, education, schedule, and profile modal.
4. **🛏️ Live Room & ICU Bed Availability Tracker**
- Dynamic capacity meters displaying real-time occupancy percentages for ICU, Emergency ER, General Wards, and VIP Suites.
- Color-coded urgency alerts (Green = Normal, Amber = Moderate, Red = High Occupancy).
5. **📁 Patient E-Health Portal**
- Secured modal interface presenting demo patient records for *Sokha Vathanak* (ID: `BBU-PAT-98421`).
- Tabbed view for **Consultation History**, **Active Prescriptions**, and **Lab Reports** (with PDF download simulation).
6. **🧮 Interactive Health Assessment Calculators**
- **BMI Calculator**: Uses formula $\text{BMI} = \frac{\text{weight (kg)}}{(\text{height (m)})^2}$ to evaluate body mass index with visual result gauges and medical recommendations.
- **Cardiac Risk Evaluator**: Calculates risk profiles based on age, blood pressure, and lifestyle factors.
7. **🚨 24/7 SOS Emergency Alert System**
- Pulsating red SOS button in top bar and header.
- Emergency dispatch modal featuring simulated GPS coordinates (`11.5621° N, 104.8885° E`) and immediate ambulance dispatch notifications.
1. **🏥 Modern Medical UI & Responsive Design System**
- Built with custom CSS custom properties (variables), glassmorphism effects (`backdrop-filter: blur()`), gradient accents, and micro-animations.
- **Dark & Light Mode Switcher**: Seamless theme toggling with automatic persistence in `localStorage`.
- **Multilingual UI Simulation**: Quick switch between English (EN) and Khmer (KM).
2. **📅 Multi-Step Online Appointment Booking Wizard**
- Interactive 3-stage modal:
- **Stage 1**: Select clinical department, specialist doctor, date, and time slot.
- **Stage 2**: Enter patient contact details and symptoms.
- **Stage 3**: Instant generation of a printable **Digital Appointment Pass** complete with a custom QR code canvas.
3. **🩺 Doctor Directory & Live Filter Engine**
- Real-time search by doctor name, specialty, or condition.
- One-click specialty pill filtering (Cardiology, Neurology, Pediatrics, Orthopedics, Oncology).
- Doctor card details featuring ratings, experience, education, schedule, and profile modal.
4. **🛏️ Live Room & ICU Bed Availability Tracker**
- Dynamic capacity meters displaying real-time occupancy percentages for ICU, Emergency ER, General Wards, and VIP Suites.
- Color-coded urgency alerts (Green = Normal, Amber = Moderate, Red = High Occupancy).
5. **📁 Patient E-Health Portal**
- Secured modal interface presenting demo patient records for *Sokha Vathanak* (ID: `BBU-PAT-98421`).
- Tabbed view for **Consultation History**, **Active Prescriptions**, and **Lab Reports** (with PDF download simulation).
6. **🧮 Interactive Health Assessment Calculators**
- **BMI Calculator**: Uses formula $\text{BMI} = \frac{\text{weight (kg)}}{(\text{height (m)})^2}$ to evaluate body mass index with visual result gauges and medical recommendations.
- **Cardiac Risk Evaluator**: Calculates risk profiles based on age, blood pressure, and lifestyle factors.
7. **🚨 24/7 SOS Emergency Alert System**
- Pulsating red SOS button in top bar and header.
- Emergency dispatch modal featuring simulated GPS coordinates (`11.5621° N, 104.8885° E`) and immediate ambulance dispatch notifications.
Ratings & Feedback
Project Ratings & Reviews
Ratings and feedback from students, faculty supervisors, and visitors.
5
out of 5 stars
Based on 1 review
5
1 (100%)
4
0 (0%)
3
0 (0%)
2
0 (0%)
1
0 (0%)
Want to rate or review this project?
Please log in with your Student or Lecturer account to leave star ratings and comments.
Reviews & Feedback (1)
Chhai Lihov
Student
1 month ago
"Outstanding UI design and clean architecture! Highly recommended capstone."
Academic Meta
Lecturer:
Mr. Siem Royal
Subject:
Web Application Development
Degree:
Bachelor of Science in Information Technology
Semester & Year:
Year 1 (2025-2026)
Technologies Used
JavaScript
HTML5
CSS3
GitHub