https://github.com/imrenr/hospitalapp
A React + Vite application for managing hospital appointments. Add patients, view patient lists, and navigate between pages seamlessly.
https://github.com/imrenr/hospitalapp
events hooks-api-react javascript react vitejs
Last synced: 3 months ago
JSON representation
A React + Vite application for managing hospital appointments. Add patients, view patient lists, and navigate between pages seamlessly.
- Host: GitHub
- URL: https://github.com/imrenr/hospitalapp
- Owner: ImrenR
- Created: 2025-02-18T22:14:33.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-09-04T16:37:20.000Z (9 months ago)
- Last Synced: 2025-09-04T18:31:22.847Z (9 months ago)
- Topics: events, hooks-api-react, javascript, react, vitejs
- Language: JavaScript
- Homepage:
- Size: 305 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Porto Care Hospital – Appointment Management App
A simple **React + Vite** hospital appointment management app where you can view doctors, see their patients, and create new appointments.
This project was built to practice **React fundamentals**, **state management**, and **dynamic rendering**.
---
## 🚀 Features
✅ View a list of doctors with profile images
✅ Filter patients by selected doctor
✅ Add new patients dynamically with a form
✅ Simple UI with gradient background and clean layout
✅ Conditional styling based on appointment status (`isDone`)
✅ Icons with `react-icons`
✅ Built using **Vite** for a fast development experience
---
## Tech Stack
- **React** (Hooks, Components, Props, JSX)
- **Vite** (Build tool)
- **JavaScript (ES6+)**
- **CSS3** (Flexbox, gradients, conditional styles)
- **React Icons** for UI icons
- **uuid** for unique patient IDs
---
## Demo
[View](https://github.com/user-attachments/assets/6f0b0837-afa4-417f-8d0b-782bb2cd1285)
[View](https://github.com/user-attachments/assets/36eeab21-25f8-4262-bb2c-4f709971a760)
## Project Structure
```Hospital-App/
│
├─ public/
├─ src/
│ ├─ components/
│ │ ├─ AddPatient.jsx
│ │ └─ PatientList.jsx
│ │
│ ├─ pages/
│ │ └─ Home.jsx
│ │
│ ├─ App.jsx
│ ├─ main.jsx
│ └─ styles.css
├─ package.json
└─ vite.config.js
```
---
## Usage
Navigate to Home to see the welcome page.
Use Add Patient to add new patient records.
Visit Patient List to view all patients.
---
## Dependencies
React – Frontend library
Vite – Fast development build tool
React Router – Routing between pages