Final Hospital Management System Report-3
Final Hospital Management System Report-3
1
DECLARATION
We hereby declare that the project work being presented in the project
proposal entitled “Future Medical Care System” in partial fulfilment of the
requirements for the award of the degree of MASTER OF COMPUTER
APPLICATION at Maulana Abul Kalam Azad University of Technology
, West Bengal, is an authentic work carried out under the guidance of Prof.
Sourav Kundu. The matter embodied in this project work has not been
submitted else where for the award of any degree of our knowledge and
belief.
Date:
Name of the Students:
SATYABRATA SAMANTA,
LAKSHMAN PAL,
SUPROKASH GHOSH,
ARGHYA GOSWAMI,
SAMRIDDHA GHOSH
2
FUTURE INSTITUTE OF ENGINEERING AND MANAGEMENT
Sonarpur Station Road, Kolkata – 700150
MCA-DEPT
CERTIFICATE FOR PROJECT WORK
We do hereby certifying that the work which is being presented in the Major Project Report entitled
“Future Medical Care System”, in partial fulfillment of the requirements for the award of Master of
Computer Applications submitted to the MCA-Dept. of Future Institute of Engineering and
Management, Kolkata, WB is an authentic record of our own work carried out during the period
from ......./......./2025 to ....../....../2025 under the supervision of Prof. Sourav kundu.
The matter presented in this thesis has not been submitted by us for the award of any other degree
elsewhere.
This is to certify that the above statement made by the students, is correct to the best of my
knowledge.
Date:
3
ABSTRACT
Our project Future Medical care system (FMCS) includes registration of patients, storing
their details into the system, and also booking their appointments with doctors. Our software
has the facility to give a unique id for every patient and stores the details of every patient
and the staff automatically. User can search availability of a doctor and the details of a patient
using the id. The Hospital Management System can be entered using a username and
password. It is accessible either by an administrator or receptionist. Only they can add data
into the database. The data can be retrieved easily. The interface is very user-friendly. The
data are well protected for personal use and makes the data processing very fast.
It is having mainly two modules. One is at Administration Level and other one is of user I.e.
of patients and doctors. The Application maintains authentication in order to access the
application. Administrator task includes managing doctors information, patient’s information.
To achieve this aim a database was designed one for the patient and other for the doctors
which the admin can access. The complaints which are given by user will be referred by
authorities.
4
INDEX
Sl.No Table of Contents Page No
1. Introduction 6
➢ Relevance of the Topic
➢ Problem Definition
➢ Project Objective
2. Methodology 7
➢ Technology Stack
➢ Development Phases
3. Feasibility Study 9
➢ Technical Feasibility
➢ Economic Feasibility
➢ Operational Feasibility
➢ Legal and Ethical Feasibility
4. SYSTEM SPECIFICATIONS 10
5. Diagram 11
➢ DFD
➢ Use Case diagram
➢ ER diagram
6. User Interface 13
7. Admin Panel 18
8. Database 21
9. Code 23
10. Future plans and Conclusion 75
11. REFFERENCE 76
5
INTRODUCTION
2.1 Relevance of the Topic
In today’s digital world, hospitals need to keep up with technology to serve patients better. Traditional
manual systems are slow, require more staff, and can lead to mistakes in patient care and data. A
web-based HMS can help hospitals become faster, more accurate, and better organized. Especially
after the COVID-19 pandemic, the need for online health services, digital records, and remote
access to hospital systems has become more important than ever.
Many hospitals still rely on manual processes for managing appointments, storing patient records,
handling billing, and tracking medicine inventory. These outdated methods cause problems like:
There is a clear need for a centralized, automated system that can handle all hospital operations
smoothly.
The main goal of this project is to develop a user-friendly, web-based Hospital Management
System that:
• Automates key functions like registration, appointment scheduling, billing, and record-
keeping.
• Allows doctors, patients, and staff to access relevant data securely from anywhere.
• Reduces paperwork and manual errors.
6
METHODOLOGY
This Future Medical Care System is developed using the MERN stack, a modern JavaScript-
based framework that provides a full-stack solution for building web applications. The project
follows a modular and systematic development approach to ensure scalability, maintainability, and
efficiency.
• MongoDB: A NoSQL database used to store hospital data such as patient records, doctor
profiles, appointments, billing, and more.
• Express.js: A lightweight Node.js web application framework used to build the backend
RESTful APIs.
• React.js: A frontend JavaScript library for building dynamic and responsive user interfaces.
• Node.js: A JavaScript runtime used for writing server-side logic and managing API
communication with the database.
1. Requirement Analysis
• Gather functional and non-functional requirements from hospital staff and stakeholders.
• Define user roles (admin, doctor, patient, receptionist).
• Identify key features like appointment booking, patient registration, billing, inventory, and
report generation.
2. System Design
• Design database schema in MongoDB for various modules like users, appointments,
medical records, and billing.
• Plan frontend structure with React components (e.g., dashboard, forms, lists).
7
4. Frontend Development (React.js)
• Use React Router for navigation between modules (Home, Dashboard, Appointments,
Reports, etc.).
Tool/library Purpose
MongoDB compass Cloud-based NoSQL database
Express.js API and backend logic
React.js Frontend UI
Node.js Server-side runtime
Bootstrap / Tailwind UI styling
8
FEASIBILITY STUDY
A feasibility study evaluates the project's practicality from various perspectives before full-scale
development. The feasibility study for the FUTURE MEDICAL CARE SYSTEM (FMCS) includes
the following components:
• It uses widely supported technologies such as the MERN stack (MongoDB, Express.js,
React.js, Node.js), which supports fast development, scalability, and responsiveness.
• Open-source libraries, frameworks, and existing HMS templates can accelerate
development and reduce complexity.
• Developers are familiar with JavaScript and the MERN stack, making it easier to build and
maintain the system.
• It improves workflow and allows staff to focus more on patient care rather than
paperwork.
• User-friendly design ensures that staff with minimal computer skills can use the system
efficiently.
• The system can operate 24/7 with remote access for authorized users.
9
SYSTEM SPECIFICATIONS
SOFTWARE REQUIREMENTS:
➢ FRONT END: HTML, CSS
➢ DATABASE SERVER: Mongo DB
HARDWARE REQUIREMENTS:
➢ Core i3 processor
➢ 4GB Ram.
➢ 512GB of hard disk
KEY FEATURES
Patients:
1. User Registration
Patients can sign up with personal details like name, email, phone, NIC, DOB, gender, and
password.
2. Login/Logout
Secure login and logout functionality using role-based access.
3. Book Appointment
Patients can book appointments by selecting date, time, doctor, and department.
4. View My Appointments
See a list of all appointments booked, including doctor and department details.
Admin:
1. Admin Login/Logout
Only authenticated admins can access the dashboard.
2. Dashboard Overview
View total appointments and registered doctors with real-time dynamic data.
3. Manage Appointments
View all appointments and update their status (Accept / Reject / Pending).
10
4. Add New Doctor
Register new doctors by entering all necessary details and uploading a profile image.
11
USECASE DIAGRAM:
ER DIAGRAM
12
User Interface:
13
Home Page
14
Login page
Register page
15
User login page
Appoinment page
16
My Appointment status page
About us page
17
Message page
Admin Panel:
18
Admin Login page
19
All Register doctor page
20
Admin Message recive page
DATABASE:
21
22
CODING
FRONTEND:
App.jsx
import React, { useContext, useEffect } from "react";
import "./App.css";
import "react-toastify/dist/ReactToastify.css";
useContext(Context);
useEffect(() => {
try {
"http://localhost:5000/api/v1/user/patient/me",
withCredentials: true,
);
setIsAuthenticated(true);
setUser(response.data.user);
} catch (error) {
setIsAuthenticated(false);
23
setUser({});
};
fetchUser();
}, [isAuthenticated]);
return (
<>
<Router>
<Navbar />
<Routes>
</Routes>
<Footer />
</Router>
</>
);
};
Main.jsx
import React, { createContext, useState } from "react"; const AppWrapper = () => {
24
isAuthenticated, };
setIsAuthenticated,
user, ReactDOM.createRoot(document.getElementById("roo
t")).render(
setUser,
<React.StrictMode>
}}
<AppWrapper />
>
</React.StrictMode>
<App />
);
</Context.Provider>
);
Homepage.jsx
import React, { useContext } from "react"; "Welcome to ZeeCare Medical Institute | Your
Trusted Healthcare Provider"
import Hero from "../components/Hero";
}
import Biography from "../components/Biography";
imageUrl={"/hero.png"}
import MessageForm from
"../components/MessageForm"; />
<MessageForm />
const Home = () => {
</>
return (
);
<>
};
<Hero
title={
export default Home;
Appoinment.jsx
import React from "react"; title={"Schedule Your Appointment | ZeeCare
Medical Institute"}
import Hero from "../components/Hero";
imageUrl={"/signin.png"}
import AppointmentForm from
"../components/AppointmentForm"; />
<AppointmentForm/>
return ( );
<> };
<Hero
25
AboutUs.jsx
imageUrl={"/about.png"}
import React from "react";
/>
import Hero from "../components/Hero";
<Biography imageUrl={"/whoweare.png"} />
import Biography from "../components/Biography";
</>
const AboutUs = () => {
);
return (
};
<>
<Hero
export default AboutUs;
title={"Learn More About Us | ZeeCare Medical
Institute"}
Register.jsx
import axios from "axios"; e.preventDefault();
setEmail("");
setNic("");
26
setGender(""); value={lastName}
placeholder="Email"
if (isAuthenticated) {
value={email}
return <Navigate to={"/"} />;
onChange={(e) => setEmail(e.target.value)}
}
/>
<input
return (
type="number"
<>
placeholder="Mobile Number"
<div className="container form-component
register-form"> value={phone}
<p> </div>
27
<select value={gender} onChange={(e) => <p style={{ marginBottom: 0 }}>Already
setGender(e.target.value)}> Registered?</p>
}}
export default Register;
>
Login.jsx
import axios from "axios"; const [confirmPassword, setConfirmPassword] =
useState("");
import React, { useContext, useState } from "react";
e.preventDefault();
"http://localhost:5000/api/v1/user/login",
const [email, setEmail] = useState("");
{ email, password, confirmPassword, role:
const [password, setPassword] = useState(""); "Patient" },
28
{ <input
} value={email}
toast.success(res.data.message); <input
setIsAuthenticated(true); type="password"
navigateTo("/"); placeholder="Password"
setEmail(""); value={password}
gap: "10px",
return (
justifyContent: "flex-end",
<>
flexDirection: "row",
<div className="container form-component login-
}}
form">
>
<h2>Sign In</h2>
<p style={{ marginBottom: 0 }}>Not
<p>Please Login To Continue</p>
Registered?</p>
<p>
<Link
Lorem ipsum dolor sit amet consectetur
to={"/register"}
adipisicing elit. Placeat culpa
style={{ textDecoration: "none", color:
voluptas expedita itaque ex, totam ad quod
"#271776ca" }}
error?
>
</p>
Register Now
<form onSubmit={handleLogin}>
</Link>
29
</div>
<button type="submit">Login</button>
</div>
</form>
</div>
</>
);
};
"Oncology",
}, []);
const departmentsArray = [
30
const handleAppointment = async (e) => { setAppointmentDate(""),
e.preventDefault(); setDepartment(""),
try { setDoctorFirstName(""),
"http://localhost:5000/api/v1/appointment/post", setAddress("");
{ } catch (error) {
firstName, toast.error(error.response.data.message);
lastName, }
email, };
phone,
nic, return (
dob, <>
setPhone(""), />
setNic(""), </div>
setDob(""), <div>
setGender(""), <input
31
type="text" type="date"
value={email} value={appointmentDate}
32
<option value="">Select Doctor</option> lastName: doctor.lastName,
{doctors })}
33
</>
);
};
Biography.jsx
import React from "react";
<p>
</p>
34
},
Department.jsx
{
import React from "react";
name: "Dermatology",
import Carousel from "react-multi-carousel";
imageUrl: "/departments/derma.jpg",
import "react-multi-carousel/lib/styles.css";
},
{
const Departments = () => {
name: "ENT",
const departmentsArray = [
imageUrl: "/departments/ent.jpg",
{
},
name: "Pediatrics",
];
imageUrl: "/departments/pedia.jpg",
},
const responsive = {
{
extraLarge: {
name: "Orthopedics",
breakpoint: { max: 3000, min: 1324 },
imageUrl: "/departments/ortho.jpg",
items: 4,
},
slidesToSlide: 1, // optional, default to 1.
{
},
name: "Cardiology",
large: {
imageUrl: "/departments/cardio.jpg",
breakpoint: { max: 1324, min: 1005 },
},
items: 3,
{
slidesToSlide: 1, // optional, default to 1.
name: "Neurology",
},
imageUrl: "/departments/neuro.jpg",
medium: {
},
breakpoint: { max: 1005, min: 700 },
{
items: 2,
name: "Oncology",
slidesToSlide: 1, // optional, default to 1.
imageUrl: "/departments/onco.jpg",
},
},
small: {
{
breakpoint: { max: 700, min: 0 },
name: "Radiology",
items: 1,
imageUrl: "/departments/radio.jpg",
slidesToSlide: 1, // optional, default to 1.
},
},
{
};
name: "Physical Therapy",
imageUrl: "/departments/therapy.jpg",
35
return (
<>
<h2>Departments</h2>
<Carousel
responsive={responsive}
removeArrowOnDeviceType={[
// "superLargeDesktop",
// "desktop",
"tablet",
"mobile",
]}
>
return (
<div className="depart-
name">{depart.name}</div>
<img src={depart.imageUrl}
alt="Department" />
</div>
);
})}
</Carousel>
</div>
</>
);
};
36
{
Footer.jsx
id: 6,
import React from "react";
day: "Saturday",
import { Link } from "react-router-dom";
time: "9:00 AM - 3:00 PM",
import { FaLocationArrow, FaPhone } from "react-
icons/fa6"; },
{ <footer className={"container"}>
37
</div>
<div>
<h4>Contact</h4>
<div>
<FaPhone />
<span>999-999-9999</span>
</div>
<div>
<MdEmail />
<span>[email protected]</span>
</div>
<div>
<FaLocationArrow />
<span>Toronto, Canada</span>
</div>
</div>
</div>
</footer>
</>
);
};
Hero.jsx
Future Medical Institute is a state-of-the-art
import React from "react";
facility dedicated
38
</p> {
} catch (error) {
export default Hero;
toast.error(error.response.data.message);
MessageForm.jsx }
<>
placeholder="First Name"
const handleMessage = async (e) => {
value={firstName}
e.preventDefault();
onChange={(e) =>
try {
setFirstName(e.target.value)}
await axios
/>
.post(
<input
"http://localhost:5000/api/v1/message/send",
type="text"
{ firstName, lastName, email, phone, message },
placeholder="Last Name"
39
value={lastName} export default MessageForm;
onChange={(e) =>
setLastName(e.target.value)}
/>
</div>
<div>
<input
type="text"
placeholder="Email"
value={email}
/>
<input
type="number"
placeholder="Mobile Number"
value={phone}
/>
</div>
<textarea
rows={7}
placeholder="Message"
value={message}
/>
<button type="submit">Send</button>
</div>
</form>
</div>
</>
);
};
40
return (
Navber.jsx
<>
import React, { useContext, useState } from "react";
<nav className={"container"}>
import { Link, useNavigate } from "react-router-dom";
<div className="logo">
import { GiHamburgerMenu } from "react-icons/gi";
<img src="/logo.png" alt="logo"
import axios from "axios";
className="logo-img" />
import { toast } from "react-toastify";
</div>
import { Context } from "../main";
<div className={show ? "navLinks showmenu" :
"navLinks"}>
</Link>
.get("http://localhost:5000/api/v1/user/patient/logout", {
<Link to={"/about"} onClick={() =>
withCredentials: true, setShow(!show)}>
}) About Us
toast.success(res.data.message); </div>
setIsAuthenticated(false); {isAuthenticated ? (
</button>
const goToLogin = () => { )}
navigateTo("/login"); </div>
}; <div className="hamburger" onClick={() =>
setShow(!show)}>
<GiHamburgerMenu />
41
</div>
</nav>
</>
);
};
BACKEND:
App.js
import express from "express"; );
app.use("/api/v1/user", userRouter);
const app = express();
app.use("/api/v1/appointment", appointmentRouter);
config({ path: "./config.env" });
dbConnection();
app.use(
cors({
app.use(errorMiddleware);
origin: [process.env.FRONTEND_URL_ONE,
export default app;
process.env.FRONTEND_URL_TWO],
credentials: true,
})
42
Server.js
import app from "./app.js";
dotenv.config();
cloudinary.v2.config({
cloud_name:
process.env.CLOUDINARY_CLOUD_NAME,
api_key: process.env.CLOUDINARY_API_KEY,
api_secret:
process.env.CLOUDINARY_API_SECRET,
});
app.listen(process.env.PORT, () => {
});
AppointmentController.jsx
import { catchAsyncErrors } from
nic,
"../middlewares/catchAsyncErrors.js";
dob,
import ErrorHandler from "../middlewares/error.js";
gender,
import { Appointment } from
"../models/appointmentSchema.js"; appointment_date,
doctor_firstName,
43
!email || const patientId = req.user._id;
!nic || firstName,
!dob || lastName,
!gender || email,
!appointment_date || phone,
!department || nic,
!doctor_firstName || dob,
!doctor_lastName || gender,
!address appointment_date,
){ department,
});
if (isConflict.length > 1) {
});
return next(
new ErrorHandler(
export const getAllAppointments =
"Doctors Conflict! Please Contact Through Email
catchAsyncErrors(async (req, res, next) => {
Or Phone!",
const appointments = await Appointment.find({});
400
res.status(200).json({
)
success: true,
);
appointments,
}
});
const doctorId = isConflict[0]._id;
44
});
const { id } = req.params;
if (!appointment) {
appointment = await
Appointment.findByIdAndUpdate(id, req.body, {
new: true,
runValidators: true,
useFindAndModify: false,
});
res.status(200).json({
success: true,
});
);
const { id } = req.params;
if (!appointment) {
await appointment.deleteOne();
res.status(200).json({
success: true,
});
});
45
MessageController.jsx
import { catchAsyncErrors } from
"../middlewares/catchAsyncErrors.js";
res.status(200).json({
success: true,
});
});
res.status(200).json({
success: true,
messages,
});
});
46
UserController.jsx
email,
import { catchAsyncErrors } from
"../middlewares/catchAsyncErrors.js"; phone,
role: "Patient",
req.body;
export const login = catchAsyncErrors(async (req, res,
if (
next) => {
!firstName ||
const { email, password, confirmPassword, role } =
!lastName || req.body;
if (isRegistered) {
if (!user) {
return next(new ErrorHandler("User already
return next(new ErrorHandler("Invalid Email Or
Registered!", 400));
Password!", 400));
}
}
lastName, if (!isPasswordMatch) {
47
return next(new ErrorHandler("Invalid Email Or firstName,
Password!", 400));
lastName,
}
email,
if (role !== user.role) {
phone,
return next(new ErrorHandler(`User Not Found With
nic,
This Role!`, 400));
dob,
}
gender,
generateToken(user, "Login Successfully!", 201, res);
password,
});
role: "Admin",
});
export const addNewAdmin = catchAsyncErrors(async
(req, res, next) => { res.status(200).json({
const { firstName, lastName, email, phone, nic, dob, success: true,
gender, password } =
message: "New Admin Registered",
req.body;
admin,
if (
});
!firstName ||
});
!lastName ||
!email ||
export const addNewDoctor = catchAsyncErrors(async
!phone || (req, res, next) => {
!nic || if (!req.files || Object.keys(req.files).length === 0) {
!dob || return next(new ErrorHandler("Doctor Avatar
Required!", 400));
!gender ||
}
!password
const { docAvatar } = req.files;
){
const allowedFormats = ["image/png", "image/jpeg",
return next(new ErrorHandler("Please Fill Full
"image/webp"];
Form!", 400));
if (!allowedFormats.includes(docAvatar.mimetype)) {
}
return next(new ErrorHandler("File Format Not
Supported!", 400));
const isRegistered = await User.findOne({ email });
}
if (isRegistered) {
const {
return next(new ErrorHandler("Admin With This
firstName,
Email Already Exists!", 400));
lastName,
}
email,
phone,
const admin = await User.create({
nic,
48
dob, cloudinaryResponse.error || "Unknown Cloudinary
error"
gender,
);
password,
return next(
doctorDepartment,
new ErrorHandler("Failed To Upload Doctor Avatar
} = req.body;
To Cloudinary", 500)
if (
);
!firstName ||
}
!lastName ||
const doctor = await User.create({
!email ||
firstName,
!phone ||
lastName,
!nic ||
email,
!dob ||
phone,
!gender ||
nic,
!password ||
dob,
!doctorDepartment ||
gender,
!docAvatar
password,
){
role: "Doctor",
return next(new ErrorHandler("Please Fill Full
doctorDepartment,
Form!", 400));
docAvatar: {
}
public_id: cloudinaryResponse.public_id,
const isRegistered = await User.findOne({ email });
url: cloudinaryResponse.secure_url,
if (isRegistered) {
},
return next(
});
new ErrorHandler("Doctor With This Email Already
Exists!", 400) res.status(200).json({
); success: true,
if (!cloudinaryResponse || cloudinaryResponse.error)
export const getAllDoctors = catchAsyncErrors(async
{
(req, res, next) => {
console.error(
const doctors = await User.find({ role: "Doctor" });
"Cloudinary Error:",
res.status(200).json({
49
success: true,
doctors,
});
});
res.status(200).json({
success: true,
user,
});
});
res
.status(201)
.cookie("adminToken", "", {
httpOnly: true,
})
.json({
success: true,
});
});
res
.status(201)
.cookie("patientToken", "", {
50
DBConnection.js
import mongoose from "mongoose";
dotenv.config();
mongoose.connect(process.env.MONGO_URI)
.then(() => {
console.log("Connected to database!");
})
.catch((err) => {
});
};
Auth.js
import { User } from "../models/userSchema.js";
req.user = await User.findById(decoded.id);
import { catchAsyncErrors } from
"./catchAsyncErrors.js"; if (req.user.role !== "Admin") {
import ErrorHandler from "./error.js"; return next(
import jwt from "jsonwebtoken"; new ErrorHandler(
import dotenv from "dotenv"; `${req.user.role} not authorized for this resource!`,
dotenv.config(); 403
// Middleware to authenticate dashboard users )
export const isAdminAuthenticated = );
catchAsyncErrors(async (req, res, next) => {
}
const token = await req.cookies.adminToken;
next();
if (!token) {
});
return next(new ErrorHandler("Dashboard User is
not authenticated!", 400));
51
if (!token) {
return next(
new ErrorHandler(
403
);
next();
);
if (!roles.includes(req.user.role)) {
return next(
new ErrorHandler(
);
next();
};
};
52
catchAsyncError.js
export const catchAsyncErrors = (theFunction) => {
Promise.resolve(theFunction(req, res,
next)).catch(next);
};
};
Error.js
}
class ErrorHandler extends Error {
if (err.name === "CastError") {
constructor(message, statusCode) {
const message = `Invalid ${err.path}`,
super(message);
err = new ErrorHandler(message, 400);
this.statusCode = statusCode;
}
}
}
const errorMessage = err.errors
? Object.values(err.errors)
export const errorMiddleware = (err, req, res, next) =>
{ .map((error) => error.message)
53
httpOnly: true,
})
.json({
success: true,
});
});
AppointmentSchema.js
import mongoose from "mongoose";
required: [true, "Phone Is Required!"],
import { Mongoose } from "mongoose";
minLength: [10, "Phone Number Must Contain Exact
import validator from "validator";
10 Digits!"],
}, gender: {
}, appointment_date: {
54
}, enum: ["Pending", "Accepted", "Rejected"],
type: String, },
},
},
lastName: {
type: String,
},
},
hasVisited: {
type: Boolean,
default: false,
},
address: {
type: String,
},
doctorId: {
type: mongoose.Schema.ObjectId,
},
patientId: {
type: mongoose.Schema.ObjectId,
ref: "User",
},
status: {
type: String,
55
MessageSchema.js
import mongoose from "mongoose";
required: true,
import validator from "validator";
minLength: [10, "Phone Number Must Contain Exact
10 Digits!"],
const messageSchema = new mongoose.Schema({
maxLength: [10, "Phone Number Must Contain
firstName: { Exact 10 Digits!"],
type: String, },
type: String, },
email: {
type: String,
required: true,
},
phone: {
type: String,
UserSchema.js
import mongoose from "mongoose"; type: String,
import bcrypt from "bcrypt"; minLength: [3, "First Name Must Contain At Least 3
Characters!"],
import jwt from "jsonwebtoken";
},
import dotenv from "dotenv";
lastName: {
dotenv.config();
type: String,
56
}, },
email: { role: {
}, },
phone: { doctorDepartment: {
type: String,
userSchema.pre("save", async function (next) {
required: [true, "NIC Is Required!"],
if (!this.isModified("password")) {
minLength: [12,"NIC Must Contain Only 13 Digits!"],
next();
maxLength: [12,"NIC Must Contain Only 13 Digits!"],
}
},
this.password = await bcrypt.hash(this.password, 10);
dob: {
});
type: Date,
}, userSchema.methods.generateJsonWebToken =
function () {
password: {
return jwt.sign({ id: this._id },
type: String,
process.env.JWT_SECRET_KEY, {
required: [true, "Password Is Required!"],
expiresIn: "1h",
minLength: [8, "Password Must Contain At Least 8
});
Characters!"],
};
select: false,
57
export const User = mongoose.model("User",
userSchema);
AppointmentRouter.js
import express from "express";
import {
deleteAppointment,
getAllAppointments,
postAppointment,
updateAppointmentStatus,
} from "../controller/appointmentController.js";
import {
isAdminAuthenticated,
isPatientAuthenticated,
} from "../middlewares/auth.js";
router.post("/post", isPatientAuthenticated,
postAppointment);
router.get("/getall", isAdminAuthenticated,
getAllAppointments);
router.put("/update/:id", isAdminAuthenticated,
updateAppointmentStatus);
router.delete("/delete/:id", isAdminAuthenticated,
deleteAppointment);
messageRouter.js
import express from "express"; const router = express.Router();
import {
58
export default router; export default router;
UserRouter.js
import express from "express";
import {
addNewAdmin,
addNewDoctor,
getAllDoctors,
getUserDetails,
login,
logoutAdmin,
logoutPatient,
patientRegister,
} from "../controller/userController.js";
import {
isAdminAuthenticated,
isPatientAuthenticated,
} from "../middlewares/auth.js";
router.post("/patient/register", patientRegister);
router.post("/login", login);
router.post("/admin/addnew", isAdminAuthenticated,
addNewAdmin);
router.post("/doctor/addnew", isAdminAuthenticated,
addNewDoctor);
router.get("/doctors", getAllDoctors);
router.get("/patient/me", isPatientAuthenticated,
getUserDetails);
router.get("/admin/me", isAdminAuthenticated,
getUserDetails);
router.get("/patient/logout", isPatientAuthenticated,
logoutPatient);
router.get("/admin/logout", isAdminAuthenticated,
logoutAdmin);
59
jwttoken.js
import dotenv from "dotenv";
dotenv.config();
res
.status(statusCode)
.cookie(cookieName, token, {
Date.now() + process.env.COOKIE_EXPIRE * 24
* 60 * 60 * 1000
),
httpOnly: true,
})
.json({
success: true,
message,
user,
token,
});
};
60
{
DASHBOARD
withCredentials: true,
App.jsx }
import React, { useContext, useEffect } from "react"; );
import { setIsAuthenticated(true);
BrowserRouter as Router, setAdmin(response.data.user);
Routes, } catch (error) {
Route, setIsAuthenticated(false);
Navigate, setAdmin({});
} from "react-router-dom"; }
import Dashboard from "./components/Dashboard"; };
import Login from "./components/Login"; fetchUser();
import AddNewDoctor from }, [isAuthenticated]);
"./components/AddNewDoctor";
</Router>
useEffect(() => { );
const fetchUser = async () => { };
try {
61
const [dob, setDob] = useState("");
Main.jsx
const [gender, setGender] = useState("");
import React, { createContext, useState } from "react";
const [password, setPassword] = useState("");
import ReactDOM from "react-dom/client";
e.preventDefault();
}
AddnewAdmin.jsx
)
import React, { useContext, useState } from "react";
.then((res) => {
import { Context } from "../main";
toast.success(res.data.message);
import { Navigate, useNavigate } from "react-router-
dom"; setIsAuthenticated(true);
setLastName("");
setDob("");
const [firstName, setFirstName] = useState("");
setGender("");
const [lastName, setLastName] = useState("");
setPassword("");
const [email, setEmail] = useState("");
});
const [phone, setPhone] = useState("");
} catch (error) {
const [nic, setNic] = useState("");
toast.error(error.response.data.message);
62
} value={email}
/>
if (!isAuthenticated) { <input
} placeholder="Mobile Number"
value={phone}
63
value={password} const [gender, setGender] = useState("");
</form>
const departmentsArray = [
</section>
"Pediatrics",
</section>
"Orthopedics",
);
"Cardiology",
};
"Neurology",
"Oncology",
export default AddNewAdmin;
"Radiology",
"Physical Therapy",
AddNewDoctor.jsx "Dermatology",
reader.readAsDataURL(file);
const AddNewDoctor = () => {
reader.onload = () => {
const { isAuthenticated, setIsAuthenticated } =
setDocAvatarPreview(reader.result);
useContext(Context);
setDocAvatar(file);
};
const [firstName, setFirstName] = useState("");
};
const [lastName, setLastName] = useState("");
64
const formData = new FormData(); };
formData.append("firstName", firstName);
formData.append("phone", phone); }
.then((res) => { }
setIsAuthenticated(true); />
65
value={lastName} <option value="Female">Female</option>
/> <select
<input value={doctorDepartment}
value={phone} }}
<option value="Male">Male</option>
66
export default AddNewDoctor; }
};
fetchAppointments();
}, []);
); `http://localhost:5000/api/v1/appointment/update/
${appointmentId}`,
};
{ status },
DashBoard.jsx { withCredentials: true }
import React, { useContext, useEffect, useState } from );
"react";
setAppointments((prevAppointments) =>
import { Context } from "../main";
prevAppointments.map((appointment) =>
import { Navigate } from "react-router-dom";
appointment._id === appointmentId
import axios from "axios";
? { ...appointment, status }
import { toast } from "react-toastify";
: appointment
import { GoCheckCircleFill } from "react-icons/go";
)
import { AiFillCloseCircle } from "react-icons/ai";
);
toast.success(data.message);
const Dashboard = () => {
} catch (error) {
const [appointments, setAppointments] =
useState([]); toast.error(error.response.data.message);
useEffect(() => { };
setAppointments(data.appointments);
return (
} catch (error) {
<>
setAppointments([]);
67
<section className="dashboard page"> <tr>
<div> <th>Status</th>
<h5> </tr>
`${admin.firstName} <tbody>
${admin.lastName}`}{" "}
{appointments && appointments.length > 0
</h5>
? appointments.map((appointment) => (
</div>
<tr key={appointment._id}>
<p>
<td>{`${appointment.firstName}
Lorem ipsum dolor sit, amet consectetur ${appointment.lastName}`}</td>
adipisicing elit.
<td>{appointment.appointment_date.sub
Facilis, nam molestias. Eaque molestiae string(0, 16)}</td>
ipsam commodi neque.
<td>{`${appointment.doctor.firstName}
Assumenda repellendus necessitatibus ${appointment.doctor.lastName}`}</td>
itaque.
<td>{appointment.department}</td>
</p>
<td>
</div>
<select
</div>
className={
<div className="secondBox">
appointment.status === "Pending"
<p>Total Appointments</p>
? "value-pending"
<h3>1500</h3>
: appointment.status ===
</div> "Accepted"
<h3>10</h3> }
</div> value={appointment.status}
68
<option value="Pending" </div>
className="value-pending">
</section>
Pending
</>
</option>
);
<option value="Accepted"
};
className="value-accepted">
Accepted
export default Dashboard;
</option>
<option value="Rejected"
className="value-rejected">
Rejected
</option> ReactDOM.createRoot(document.getElementById("roo
t")).render(
</select>
<React.StrictMode>
</td>
<AppWrapper />
<td>{appointment.hasVisited === true ?
<GoCheckCircleFill className="green"/> : </React.StrictMode>
<AiFillCloseCircle className="red"/>}</td>
);
</tr>
))
</tbody>
</table>
{}
Doctor.jsx
import axios from "axios";
useEffect(() => {
69
alt="doctor avatar"
/>
<h4>{`${element.firstName}
${element.lastName}`}</h4>
<div className="details">
<p>
Email: <span>{element.email}</span>
const fetchDoctors = async () => {
</p>
try {
<p>
const { data } = await axios.get(
Phone: <span>{element.phone}</span>
"http://localhost:5000/api/v1/user/doctors",
</p>
{ withCredentials: true }
<p>
);
DOB: <span>{element.dob.substring(0,
setDoctors(data.doctors);
10)}</span>
} catch (error) {
</p>
toast.error(error.response.data.message);
<p>
}
Department:
}; <span>{element.doctorDepartment}</span>
fetchDoctors(); </p>
}, []); <p>
NIC: <span>{element.nic}</span>
if (!isAuthenticated) { </p>
} Gender: <span>{element.gender}</span>
return ( </p>
<h1>DOCTORS</h1> </div>
<div className="banner"> );
<div className="card"> )}
<img </div>
70
}; .then((res) => {
setIsAuthenticated(true);
navigateTo("/");
Login.jsx
setEmail("");
import React, { useContext, useState } from "react";
setPassword("");
import { Navigate, useNavigate } from "react-router-
dom"; setConfirmPassword("");
{ value={email}
} <input
) type="password"
71
placeholder="Password" const fetchMessages = async () => {
value={password} try {
</div> if (!isAuthenticated) {
</form> return <Navigate to={"/login"} />;
</section> }
</>
); return (
}; <section className="page messages">
<h1>MESSAGE</h1>
export default Login; <div className="banner">
messages.map((element) => {
import axios from "axios";
return (
import React, { useContext, useEffect, useState } from
"react"; <div className="card" key={element._id}>
import { toast } from "react-toastify"; <div className="details">
import { Context } from "../main"; <p>
import { Navigate } from "react-router-dom"; First Name:
<span>{element.firstName}</span>
</p>
const Messages = () => {
<p>
const [messages, setMessages] = useState([]);
Last Name:
const { isAuthenticated } = useContext(Context);
<span>{element.lastName}</span>
useEffect(() => {
</p>
72
<p> import { Context } from "../main";
</p>
Phone: <span>{element.phone}</span>
</p>
<p>
Message:
<span>{element.message}</span>
</p>
</div>
</div>
);
})
):(
<h1>No Messages!</h1>
)}
</div>
</section>
);
};
Sidebar.jsx
import React, { useContext, useState } from "react"; const [show, setShow] = useState(false);
73
.then((res) => { return (
toast.success(res.data.message); <>
setIsAuthenticated(false); <nav
navigateTo("/admin/addnew");
export default Sidebar;
setShow(!show);
};
74
FUTURE PLANS
1. Appointment Notification System
Send SMS or email notifications to patients and doctors on appointment creation, confirmation, or
cancellation.
2. Payment Integration
Add online payment options for appointment booking (e.g., Razorpay, Stripe, PayPal).
CONCLUSION
This Hospital Management System efficiently streamlines the interaction between patients and
administrators by providing a centralized platform for appointment booking, doctor management, and real-
time status tracking. With separate interfaces for patients and admins, the system enhances user experience,
improves operational efficiency, and reduces manual overhead. By utilizing the MERN stack, the project offers
a scalable, responsive, and secure solution suitable for modern healthcare environments. This project lays a
solid foundation for future enhancements such as payment integration, medical records management, and
analytics dashboards, making it a valuable tool for digital healthcare management.
75
REFFERENCE:
2. Padam Sinha, Shipra Chaubey, Varenya Pratap Singh, Sonal Maurya, Priyanshu Chaurasia,
Kapil Verma,” Transforming Healthcare: Building an Advanced Web Application with the
MERN Stack”, International Journal of Intelligent Communication and Computer Science,Vol.
2, 2024,
3. Padam Sinha, Shipra Chaubey, Varenya Pratap Singh, Sonal Maurya, Priyanshu Chaurasia,
Kapil Verma “Revolutionizing Healthcare: A MERN Stack Approach to Comprehensive Web
Application Development”, International Journal of Intelligent Communication and computer
Science, Vol. 1, 2023
5. Subhi, Ari, Dara Jalal, and Muhammed Samal. "Doctor Appointment System." Ph. D.
dissertation 2023.
6. Ismaeel A. Sikiru, Rafiat A.Oyekunle , ” Web-Based Hospital Management System”, Adeleke
University Journal of Engineering and Technology,2021
8. Untung Rahardja , Qurotul Aini, Nuke Puji Lestari Santoso, Marviola Hardini, Aulia Edliyanti,
” Financial Management System Integrated by Web-Based Payment Cash Link Solution to
Invent Smart Reconciliation”, International conference on industrial engineering and
operations management. 2021
9. Kotapati Saimanoj, Grandhi Poojitha, Khushbu Devendra Dixit, Laxmi Jayannavar, “Hospital
Management System using Web Technology”, ICAIT. 2020.
11. Peng Zhao, Illhoi Yoo, Jaie Lavoie, Beau James Lavoie, Eduardo Simoes,” Web-Based
Medical Appointment Systems:A Systematic Review”, Journal of medical Internet research
2017.
76
14. K M Akkas Ali, Israt Jahan, Md. Ariful Islam, Md. Shafa-at Parvez,”Blood Donation
Management System”, American journal of engineering research ,2015.
15. Balaraman, Premkumar, and Kalpana Kosalram. "E-hospital management & hospital
information systems-changing trends." International Journal of Information Engineering and
Electronic Business,2013.
16. Kaur, Harpreet, and Dinesh Grover. "Design and Development of Online Hospital
Management Information System." Int J Comput Sci Eng Inf Technol Res 2013.
17. YJ Siew, Renard, Maria CA Balatbat, and David G. Carmichael. "A review of
building/infrastructure sustainability reporting tools (SRTs)." Smart and Sustainable Built
Environment, 2013.
21. Khan, Abdur Rashid, and Muhammad Shuaib Qureshi. "Web-based information system for
blood donation." International Journal of Digital Content Technology and its Applications
,2009
22. Faraja IGIRA, Ola TITLESTAD, Juma LUNGO, Vincent SHAW, Yahya SHEIKH, Masoud
MAHUNDI, Omar SULEIMAN, Maryam KHAMIS , Asha MAKUNGU, Jørn BRAA,” Designing
and Implementing Hospital Management Information Systems: Experiences from Zanzibar”,
Maputo, Mozambique: IIMC International Information Management Corporation 2007
77