A modern hospital management and patient queue system built with React, TypeScript, Vite, and Zustand. This project is a role-based healthcare dashboard designed to model real hospital operations across patient, receptionist, doctor, and admin workflows.
HealSync Pro helps manage a healthcare facility by combining:
- patient appointment booking
- live queue tracking
- walk-in patient intake
- receptionist queue management
- doctor consultation workflows
- hospital analytics and reporting
- secure-feeling role-based portal navigation
This app is built as a frontend-first hospital management dashboard and is designed to be extended into a full production platform later.
This version improves the application from a pure demo mockup into a more realistic frontend foundation.
- validated login credentials instead of always-authenticated mock access
- persistent session handling for login state
- improved role-based behavior for patient, receptionist, doctor, and admin views
- fixed route consistency issues for patient history navigation
- added triage logic for walk-in patient intake
- queue items can now carry red/yellow/green priority status
- basic regression testing added to protect auth and triage logic
- project documentation improved for easier onboarding
The triage feature is part of the receptionist workflow.
When a patient arrives without a scheduled appointment, the receptionist can assess their condition and classify the patient into one of these categories:
- Red Flag: immediate attention required
- Yellow Flag: urgent but not critical; faster review needed
- Green Flag: routine / non-urgent handling
The app evaluates urgency using values such as:
- chief complaint
- pain score
- systolic blood pressure
- pulse
- oxygen saturation
- In the receptionist portal, open the Walk-In Registration page.
- Enter patient information.
- Fill the triage fields.
- The app calculates triage severity automatically.
- The triage result is attached to the queue ticket.
- The queue management page shows the status with a badge.
This ensures the live queue reflects triage urgency and not just the normal waiting order.
- dashboard
- appointment booking
- live queue status
- upcoming visits
- appointment history
- notifications
- profile
- queue management
- walk-in registration
- appointments
- patient directory
- doctor availability
- triage-based intake assessment
- consultation queue
- schedule
- patient details
- profile status
- executive dashboard
- analytics
- doctor management
- patient management
- appointments data
- departments
- reports
- system settings
- React 19
- TypeScript
- Vite
- React Router DOM
- Zustand
- Tailwind CSS
- Lucide React
- Recharts
- Axios
- Socket.IO Client
- Vitest
Make sure the following are installed on your machine:
- Node.js 18 or newer
- npm
- Git
This project uses seeded mock data and is primarily a frontend-first hospital management demo. It does not require a backend API to work locally, but the architecture is structured so it can later connect to a real database and server.
git clone <your-repository-url>
cd medical-queuenpm installThis installs all frontend dependencies required to run the app.
npm run devThis starts the Vite dev server.
Open the app here:
npm run buildThis creates a production-ready build in the dist folder.
npm test -- --runThis validates the core auth and triage logic using Vitest.
These are the built-in seeded user accounts for the app:
- Patient:
alexander.w@example.com/password123 - Receptionist:
clara.reception@citycare.org/password123 - Doctor:
sarah.jenkins@citycare.org/password123 - Admin:
raymond.admin@citycare.org/password123
Use them to switch between the different dashboards.
medical-queue/
├── src/
│ ├── App.tsx # route setup and portal layout
│ ├── components/ # reusable UI components
│ ├── data/
│ │ └── mockData.ts # seeded hospital, doctor, patient, queue data
│ ├── layouts/ # public and portal layouts
│ ├── pages/
│ │ ├── patient/
│ │ ├── receptionist/
│ │ ├── doctor/
│ │ └── admin/
│ ├── services/
│ │ ├── api.ts # API wrapper setup
│ │ └── socketService.ts # simulated live queue updates
│ ├── store/
│ │ ├── useAuthStore.ts # authentication/session state
│ │ ├── useQueueStore.ts # queue and triage logic
│ │ ├── useThemeStore.ts # dark/light mode
│ │ └── useToastStore.ts # toast notifications
│ ├── types/
│ │ └── index.ts # app data models and enums
│ └── main.tsx
├── package.json
├── vite.config.ts
├── tsconfig.json
├── index.html
├── README.md
└── dist/ # production build output
This app is a strong frontend foundation for a real hospital management platform. The next production stages would typically include:
- backend API integration
- database persistence
- JWT authentication and refresh tokens
- patient record management
- audit logging
- role-based permission enforcement
- deployment pipeline and cloud hosting
- EMR integration for prescriptions and consultations
- The app uses mock data for a realistic demo experience.
- Queue updates are simulated in the frontend for demonstration purposes.
- The triage logic is rule-based and designed for UI validation and demo workflows.
- This is a strong base before connecting to a real hospital backend system.
This project is intended for learning, prototyping, and internal demo usage unless a separate license is added by the repository owner.
Status: demo-to-production frontend foundation completed, with improved auth flow, triage assessment, and queue workflow updates for a more realistic hospital management experience.