MediCare HMS
The patient-facing half of a hospital management system: browsing doctors, booking appointments, registering, and a protected dashboard behind a login. It began as a plain HTML and Bootstrap site and was rebuilt in React to stop copying the same navbar and footer into every page.
The original build was plain HTML and Bootstrap, which meant the navbar, footer and card markup were copy-pasted across every page. Changing a nav link was a find-and-replace across the whole site, and the pages had already started to drift apart.
So the rebuild was about structure rather than features: shared layout as components, data fetching behind one reusable hook, and routing that moves between views without a page reload.
Component refactor
Persistent layout, the Navbar and Footer, lifted into shared components, and each page reduced to its own concern: doctor listing, single profile, registration, appointment, dashboard.
Data & interaction
A useFetch hook centralises loading and error state; useDebounce holds search input for 500ms before filtering. useMemo keeps the filtered list off the critical path, and pagination renders four doctors at a time instead of the whole set.
Routing & access
React Router 7 drives ten client-side routes. A ProtectedRoute wrapper gates five of them and redirects unauthenticated visitors to login.
| Measure | Result | Method |
|---|---|---|
| Responsive range | 8 widths | 360–1400px, no h-scroll |
| Search debounce | 500ms | useDebounce hook |
| Routes gated | 5 of 10 | ProtectedRoute wrapper |
| List page size | 4 per page | Pagination |
- React 19
- Vite 8
- React Router 7
- Bootstrap 5.3
- Axios
- Font Awesome
- ESLint
- Vercel
Continuously deployed to Vercel from the main branch, with a preview deployment on every push. Doctor data is currently served from a local JSON file. There is no backend yet, and the login is a localStorage flag rather than real authentication.
- Build the backend with Flask or Django over PostgreSQL, so doctors, patients and appointments come from a database instead of a local JSON file.
- Replace the localStorage session with token-based authentication, so protected routes are actually protected rather than gated in the browser.
- Persist form submissions: registration and appointment booking currently validate and then discard.
- Add an admin panel for managing doctors, and email or SMS confirmation on booking.