Build a Hospital Management System using ReactJs | MERN Stack Project | Full-Stack Project (2026)

The video introduces a hospital management system built with the MERN stack, suitable for resumes or college projects. It provides a full demo of the site, showcasing the navbar with various navigation links, a banner, certified sections, a medical team display, patient testimonials, and a comprehensive footer.

The demo highlights the doctor's page with a search bar and doctor profiles, including ratings, specialization, qualifications, fees, and availability. It also demonstrates booking a doctor's appointment, showing a login requirement. The services page, populated from the server, details individual service information.

The appointment page allows users to view their bookings for doctors and services. A contact form is shown which, upon submission, redirects to WhatsApp with prepopulated data. Doctor and patient login functionalities are demonstrated using Clerk for authentication.

Detailed steps for booking a doctor's appointment are shown, including date/time selection, patient details, and payment options. Online payments are processed via Stripe checkout, confirming the appointment status upon successful payment. Duplicate booking prevention is also illustrated.

The doctor's login provides access to a dashboard displaying latest appointments, total earnings, and appointment statistics. Doctors can update appointment statuses (e.g., to 'complete') and manage their profiles, including availability and time slots. The responsiveness across devices is also highlighted.

The admin panel offers a comprehensive dashboard with statistics on doctors, users, appointments, and earnings. It allows for adding new doctors (with image upload to Cloudinary), managing existing doctor lists (search, filter, delete), and viewing all appointments. Similarly, services can be added, listed, edited, and deleted. All admin panel pages are responsive.

The video transitions to setting up the frontend development environment. This includes initializing a React project with Vite, integrating Tailwind CSS for styling, installing and configuring React Router DOM for navigation, and setting up Clerk for user authentication, complete with environment variables and provider wrapping.

The backend setup begins with creating an Express.js project. Essential dependencies like `body-parser`, `cloudinary`, `cors`, `dotenv`, `express`, `jsonwebtoken`, `mongoose`, `multer`, `nodemon`, `stripe`, and `validator` are installed. MongoDB Atlas is configured for database connection, and Cloudinary is set up for image storage, including API key handling. Stripe API is configured for payment processing, along with a custom JWT secret for authentication.

The `Doctor` Mongoose schema is defined, including fields like email, password, name, specialization, image, experience, and availability. Helper functions for time conversion and schedule management are introduced. API endpoints are developed for creating, retrieving (all and by ID), updating, and deleting doctor profiles, as well as toggling their availability, and a dedicated login endpoint.

A custom authentication middleware for doctors is implemented using JSON Web Tokens (JWT) to verify user roles and fetch doctor data. Multer is set up as middleware for handling file uploads (specifically images) to a local 'uploads' directory, establishing file filtering and size limits before eventual upload to Cloudinary.

The `Service` Mongoose schema is defined for managing hospital services, including fields like name, description, price, availability, image, and associated appointment statistics. Helper functions are created to parse JSON array fields and normalize time slots. API endpoints are developed for creating, retrieving, updating, and deleting services.

The `Appointment` Mongoose schema is established to store details of doctor appointments, including patient and doctor information, appointment date/time, fees, status (pending, confirmed, completed, cancelled), and payment details (method, status, amount). Helper functions aid in converting time, building frontend URLs, and resolving Clerk user IDs.

`Appointment` API endpoints are implemented for retrieving appointments (all, by patient, by doctor), creating new appointments (with Clerk authentication and duplicate booking prevention), confirming Stripe payments, updating appointment details, cancelling appointments, and fetching general statistics. Stripe checkout sessions are integrated for online payments.

The `ServiceAppointment` Mongoose schema is designed for managing service bookings, capturing patient and service details, appointment specifics, and payment information (similar to `Appointment`). Helper functions assist in number formatting, time parsing, and managing date/time conversions. API endpoints are developed for creating, confirming payments, retrieving, updating, and cancelling service appointments, along with fetching statistics and retrieving appointments by patient.

The frontend of the admin panel is developed using React and Tailwind CSS. The `Navbar` component is built with desktop and mobile navigation, integrating Clerk for authentication. A `Hero` component introduces the admin panel, displaying dynamic welcome messages for doctors and administrators, along with informational cards describing system features.

The `Dashboard` component is created to display key statistics like total doctors, registered users, appointments, and earnings, featuring a UI for filtering and sorting doctor data. The `AddPage` component allows administrators to add new doctor profiles, including image uploads, detailed personal/professional information, and schedule management with time slot validation.

The `ListPage` component presents a searchable and filterable list of doctors, enabling administrators to view doctor details, toggle availability, and delete doctor profiles. The `AppointmentsPage` component provides an interface to manage all appointments, with filtering by status, search by patient/service name, and options to update appointment statuses.

The `ServiceDashboard` component offers an overview of services, appointments, and earnings. `AddServicePage` facilitates adding new services, allowing image uploads, description, pricing, and schedule configuration. The `ListServicePage` displays a list of services with options to filter, search, edit, and delete, similar to the doctor management.

The frontend UI begins with a `Banner` component featuring a dynamic title, star ratings, and call-to-action buttons for appointment booking and emergency calls. A `Certification` component showcases an animated display of recognized certifications and healthcare standards. The `HomeDoctors` section lists verified specialists with options to view their profiles and book appointments.

A `Testimonial` component displays scrolling testimonials from medical professionals and patients, enhancing user trust. The `Footer` component includes company information, quick links, service links, and social media integration, along with copyright details and navigation to external links.

The `DoctorsPage` provides a comprehensive list of medical experts with search and filter functionalities, allowing users to view doctor profiles. `DoctorDetailsPage` displays extensive information about a specific doctor and enables appointment booking with form validation and Stripe payment integration. Service-related pages, including `ServicePage` and `ServiceDetailPage`, showcase available diagnostic services and allow for booking with similar validation and payment capabilities.

The `ContactPage` features a form for user inquiries, integrating with WhatsApp for direct communication, along with clinic information and map location. The `LoginPage` (for doctor admin) provides a dedicated login interface for managing doctor-specific functionalities. Global UI elements like toast notifications, scroll-to-top functionality, and handling horizontal overflow are also managed.

The application's full functionality is tested across the admin panel, doctor's dashboard, and user-facing frontend. This includes adding and managing doctors/services, booking appointments (online and cash), updating statuses, and verifying payments. The responsiveness of all pages across various devices (desktop, tablet, mobile) is rigorously demonstrated.