Real-Time Surgical Status Tracking System
SurgiTrack is a comprehensive patient status tracking system designed to reduce anxiety for families waiting during medical procedures. Originally scoped as a simple waiting room board, our team delivered a production-ready application with full authentication, role-based access, and a responsive design.
The Problem: Families often spend hours in hospital waiting rooms with little to no information on their loved ones' surgical progress, leading to heightened stress and anxiety.
Our Solution: SurgiTrack provides a real-time status tracking system with a secure patient lookup for families, a comprehensive dashboard for staff, and instant updates displayed on public monitors in waiting rooms.
| Staff Dashboard | Staff Login | Patient Status |
|---|---|---|
 |
 |
 |
- 📺 Public Waiting Room Display - An auto-rotating patient status board designed for public waiting areas.
- 🔍 Patient Status Lookup - A secure, ID-based search for patients.
- 👨⚕️ Staff Dashboard - A complete patient management system for hospital staff.
- 📱 Responsive Design - Optimized for tablets, phones, and large displays.
- 🔐 Multi-Role Authentication - Differentiated access levels for Admin, Surgical Staff, and Guests to ensure data security.
- 🎨 Modern UI/UX - A professional, healthcare-grade interface for an intuitive user experience.
- 🤖 AI Assistant Integration - A Gemini-powered help system to assist users with application and policy questions.
- 🏥 Complete CRUD Operations - Full capabilities for admins to Create, Read, Update, and Delete patient records.
- 🔒 Privacy-First Design - Patient information is protected through secure, unique ID-based lookups.
| Technology | Purpose |
|---|---|
| React 19 | Frontend framework |
| Tailwind CSS | Styling & responsive design |
| React Router | Client-side routing |
| Context API | State management |
| Gemini AI | Chatbot integration |
| Vite | Build tool & dev server |
- Clean & Professional Interface
The application uses a healthcare-grade design system with a consistent color palette, typography, and spacing to ensure a simple and professional user experience.
Guest-facing pages are mobile-first and fully responsive:
| Screen Size | Layout |
|---|---|
| Desktop (≥ 1024px) | Four-column grid |
| Large Screens (≥ 2000px) | Six-column grid (e.g., waiting rooms) |
- Login & Patient Search: Simplified single-column for quick mobile access.
- Public Dashboard: Auto-adjusts layout based on device size.
- Optimized for PC use or desktop mode in mobile browsers.
- Provides a detailed table view with:
- Full patient details
- Pagination
- Management tools
- Not designed for mobile, ensuring staff work efficiently in a larger workspace.
- Node.js 16+
- npm or yarn
-
Clone the repository
git clone https://github.com/chingu-voyages/v56-tier1-team-03.git cd v56-tier1-team-03 -
Install dependencies
npm install
-
Start development server
npm run dev
- Log in with Admin credentials.
- Access the Staff Dashboard to view all active patients.
- Add new patients and edit existing patient information.
- Update patient statuses throughout their entire journey.
- Log in with Surgical Staff credentials.
- Access the Staff Dashboard for an overview of patient statuses.
- Update patient status using a streamlined interface as they move through surgical stages.
- Navigate to the patient lookup page.
- Enter the unique 6-character patient ID.
- View the patient's real-time surgical status and get clear explanations for each stage.
- Admin:
identityNumber: 1|password: adminpass - Surgical Staff:
identityNumber: 3|password: surgical123 - Patient ID:
A312F2
src/
├── components/ # Reusable UI components
│ ├── Layout/ # Header, Footer
│ └── UI/ # Chatbot, Icons
├── contexts/ # State management (Auth, Patients)
├── data/ # Mock data
├── Pages/ # Page components
│ └── admin/ # Admin-specific pages
├── services/ # API integration (Gemini)
├── App.jsx # Main component with routing
├── main.jsx # Application entry point
└── index.css # Global styles
Login → Dashboard → Add/Edit Patient Info → Update Status → Confirm
Login → Dashboard → Select Patient → Update Status → Confirm
Enter Patient ID → View Status → Get Updates
This project was brought to life by JAMBA Team as part of Chingu Voyage 56.
- Lymperis Dimitris: GitHub / LinkedIn
- Aibar Kamashev: GitHub
- Mostafa Elmoalem: GitHub / LinkedIn
- Brittany Haupt: GitHub / LinkedIn
- Mohammed Asif: GitHub / LinkedIn
- Full-Stack Implementation: Add backend + database instead of mock data.
- Real-Time Updates: Use WebSockets instead of auto-refresh.
- Hospital Authentication: Connect with Active Directory / LDAP.
- EHR Integration: Sync with hospital’s main health record system.
- Internationalization (i18n): Multi-language support.
- Staff Notifications: Automatic alerts when patient status changes.
- Patient History & Audit Logs: Track status changes with timestamps and staff info.
- Admin Analytics Dashboard: Metrics on procedure times, recovery, and efficiency.
We welcome contributions to help improve SurgiTrack!
If you'd like to contribute, please follow these steps:
- Fork the repository to create your own copy.
- Create a new branch for your changes (e.g.,
feature/new-buttonorfix/login-error). - Make your changes and commit them with a clear, descriptive message.
- Push your branch to your forked repository.
- Open a Pull Request to the
mainbranch of the original repository, and we'll review it.
A special thank you to Chingu for providing the collaborative platform and opportunity that made this project possible. This project is a testament to the power of teamwork and learning in a supportive environment. We'd also like to thank the open-source community for creating the amazing tools and libraries that powered our development.
Made with ❤️ for families waiting in hospital rooms everywhere.
⭐ Star this repo if you found it helpful!