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

Demo-1.mov

Demo-2.mov

Project Structure

│
├─ 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