🏥 Healthcare Management System Frontend UI

A clean and intuitive user interface design for a Hospital Management System, focused on streamlining patient records, appointment scheduling, staff management, and medical billing. This project aims to enhance hospital operational efficiency through easy navigation and user-friendly layouts built with modern web technologies.

🚀 Project Overview

This repository contains the frontend UI for a Hospital Management System, developed using modern web technologies to provide a seamless and responsive user experience. The system manages various aspects of hospital operations including patient information, appointments, and staff management.

---

📸 Screenshots

Hospital.System.mp4

---

✨ Features

• 📱 Responsive Design — Works well on desktops, tablets, and mobile devices.

• 🔒 User Authentication — Secure login and registration.

• 🧑‍⚕️ Patient Management — View and manage patient records efficiently.

• 📅 Appointment Scheduling — Book, update, and cancel appointments.

• 👩‍⚕️ Staff Management — Manage hospital staff and schedules.

• 💰 Medical Billing — Generate and handle medical bills.

---

🛠️ Technologies Used

• ⚛️ React.js

• 🎨 Tailwind CSS

• 🚀 Vite

• 📝 ESLint

• ⚙️ PostCSS

📦 Getting Started

• Prerequisites

• Make sure you have installed:

  • 🟢 Node.js

  • 📦 npm (comes with Node.js)

---

Installation

git clone https://github.com/MuaddhAlsway/Healthcare-Management-System-Frontend-UI.git
cd Healthcare-Management-System-Frontend-UI
npm install

Running the Project

npm run dev

Then open http://localhost:3000 in your browser.

📁 Project Structure

Healthcare-Management-System-Frontend-UI/
├── public/                 # Static assets
├── src/                    # Source code
│   ├── assets/             # Images and icons
│   ├── components/         # Reusable UI components
│   ├── pages/              # Pages of the app
│   ├── App.jsx             # Main app component
│   └── index.jsx           # Entry point
├── .gitignore              # Files to ignore in git
├── eslint.config.js        # Linting config
├── index.html              # HTML template
├── package.json            # Dependencies and scripts
├── postcss.config.js       # PostCSS config
├── tailwind.config.js      # Tailwind CSS config
└── vite.config.js          # Vite config

🎓 Instructor & Course

Appointment scheduling interface.

🤝 Contributing

Contributions are welcome! Please:

🔗 Link Post :