0% found this document useful (0 votes)
23 views77 pages

Final Hospital Management System Report-3

The 'Future Medical Care System' project report outlines the development of a web-based Hospital Management System (HMS) aimed at automating patient registration, appointment scheduling, and data management. Utilizing the MERN stack, the system features user-friendly interfaces for patients and administrators, ensuring secure access and efficient data handling. The project addresses the limitations of traditional manual systems, aiming to enhance hospital operations and patient care post-COVID-19.

Uploaded by

niickmadeit
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
23 views77 pages

Final Hospital Management System Report-3

The 'Future Medical Care System' project report outlines the development of a web-based Hospital Management System (HMS) aimed at automating patient registration, appointment scheduling, and data management. Utilizing the MERN stack, the system features user-friendly interfaces for patients and administrators, ensuring secure access and efficient data handling. The project addresses the limitations of traditional manual systems, aiming to enhance hospital operations and patient care post-COVID-19.

Uploaded by

niickmadeit
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 77

FUTURE MEDICAL CARE SYSTEM

Project Report Submitted for the Approval


of Major Project (MCAN- 482)
In
Master of Computer Application
Satyabrata Samanta (MAKAUT Roll No- 14871023016)
Lakshman Pal (MAKAUT Roll No- 14871023011)
Suprokash Ghosh (MAKAUT Roll No- 14871023026)
Arghya Goswami (MAKAUT Roll No-14871023004)

Samriddha Ghosh (MAKAUT Roll No-14871023015)

Under the guidance of


Prof. Sourav Kundu

FUTURE INSTITUTE OF ENGINEERING AND MANAGEMENT


Maulana Abul Kalam Azad University of Technology
University, West Bengal

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.

Name &Signature of the Candidate(s)

Satyabrata Samanta __________________________

Lakshman Pal _______________________________


Suprokash Ghosh _____________________________

Arghya Goswami _____________________________

Samriddha Ghosh ______________________________

This is to certify that the above statement made by the students, is correct to the best of my
knowledge.

Date:

Signature of the Supervisor


Prof. Sourav Kundu

Prof. Ashoktaru Pal Signature of the External Examiner


Head of CA-DEPT & Panel Members
Future Institute of Engineering and Management
Kolkata, WB

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.

2.2 Problem Definition

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:

• Long waiting times for patients.

• Difficulty in finding patient records.


• Delays in billing and report generation.

• Errors in data entry and reporting.

• Lack of coordination between departments.

There is a clear need for a centralized, automated system that can handle all hospital operations
smoothly.

2.3 Project Objective

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.

• Speeds up hospital services and improves communication between departments.

• Provides an admin dashboard for monitoring activities and generating reports.

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.

3.1 Technology Stack

• 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.

3.2 Development Phases

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

• Create ER diagrams, flowcharts, and UI wireframes.

• 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).

3. Backend Development (Node.js + Express.js)


• Develop secure RESTful APIs to handle CRUD operations.

• Implement user authentication (JWT-based login system).

• Connect APIs with MongoDB using Mongoose ORM.

7
4. Frontend Development (React.js)

• Build interactive and responsive user interfaces.

• Integrate React components with backend APIs.

• 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:

3.1 Technical Feasibility

This project is technically feasible because:

• 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.

3.2 Economic Feasibility


From a cost-benefit perspective:

• Development costs are manageable using open-source technologies.


• Minimal hardware requirements for end users (desktop/mobile with internet)
• Long-term operational costs are reduced due to digital record-keeping, and online
communication.
• Hospitals can expect improved efficiency, reduced human errors, and increased patient
satisfaction—translating to potential revenue growth.

3.3 Operational Feasibility


The system is operationally feasible because:
• It addresses key administrative and clinical issues such as appointment booking,
billing, patient record management, and pharmacy tracking.

• 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.

3.4 Legal and Ethical Feasibility


• Patient data is stored securely using authentication and authorization (e.g., JWT).
• The system can be designed to comply with healthcare data protection laws like HIPAA (in
applicable regions).
• Data privacy and user permissions are properly handled.

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.

5. Check Appointment Status


Monitor status updates for each appointment: Pending, Accepted, or Rejected.

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.

5. Add New Admin


Grant admin access to new users by creating admin accounts.

6. View All Doctors


Get a list of all doctors currently registered in the system.

7. Track Visit Status


Check if the patient has visited or not (marked via icons).

ZERO LEVEL DFD

ONE LEVEL DFD

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:

Admin Login page

18
Admin Login page

New Doctor register page

19
All Register doctor page

New Admin Add Page

20
Admin Message recive page

DATABASE:

21
22
CODING
FRONTEND:
App.jsx
import React, { useContext, useEffect } from "react";

import "./App.css";

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

import Home from "./Pages/Home";

import Appointment from "./Pages/Appointment";

import AboutUs from "./Pages/AboutUs";

import Register from "./Pages/Register";

import Footer from "./components/Footer";

import Navbar from "./components/Navbar";

import { ToastContainer } from "react-toastify";

import "react-toastify/dist/ReactToastify.css";

import axios from "axios";

import { Context } from "./main";

import Login from "./Pages/Login";

const App = () => {

const { isAuthenticated, setIsAuthenticated, setUser } =

useContext(Context);

useEffect(() => {

const fetchUser = async () => {

try {

const response = await axios.get(

"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>

<Route path="/" element={<Home />} />

<Route path="/appointment" element={<Appointment />} />

<Route path="/about" element={<AboutUs />} />

<Route path="/register" element={<Register />} />

<Route path="/login" element={<Login />} />

</Routes>

<Footer />

<ToastContainer position="top-center" />

</Router>

</>

);

};

export default App;

Main.jsx
import React, { createContext, useState } from "react"; const AppWrapper = () => {

import ReactDOM from "react-dom/client"; const [isAuthenticated, setIsAuthenticated] =


useState(false);
import App from "./App.jsx";
const [user, setUser] = useState({});

export const Context = createContext({


return (
isAuthenticated: false,
<Context.Provider
});
value={{

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"; />

import Departments from <Biography imageUrl={"/about.png"} />


"../components/Departments";
<Departments />

<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/>

const Appointment = () => { </>

return ( );

<> };

<Hero

export default Appointment;

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();

import React, { useContext, useState } from "react"; try {

import { toast } from "react-toastify"; await axios

import { Context } from "../main"; .post(

import { Link, Navigate, useNavigate } from "react- "http://localhost:5000/api/v1/user/patient/register


router-dom"; ",

{ firstName, lastName, email, phone, nic, dob,


gender, password },
const Register = () => {
{
const { isAuthenticated, setIsAuthenticated } =
useContext(Context); withCredentials: true,

headers: { "Content-Type": "application/json" },

const [firstName, setFirstName] = useState(""); }

const [lastName, setLastName] = useState(""); )

const [email, setEmail] = useState(""); .then((res) => {

const [phone, setPhone] = useState(""); toast.success(res.data.message);

const [nic, setNic] = useState(""); setIsAuthenticated(true);

const [dob, setDob] = useState(""); navigateTo("/");

const [gender, setGender] = useState(""); setFirstName("");

const [password, setPassword] = useState(""); setLastName("");

setEmail("");

const navigateTo = useNavigate(); setPhone("");

setNic("");

const handleRegistration = async (e) => { setDob("");

26
setGender(""); value={lastName}

setPassword(""); onChange={(e) =>


setLastName(e.target.value)}
});
/>
} catch (error) {
</div>
toast.error(error.response.data.message);
<div>
}
<input
};
type="text"

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}

<h2>Sign Up</h2> onChange={(e) => setPhone(e.target.value)}

<p>Please Sign Up To Continue</p> />

<p> </div>

Lorem ipsum dolor sit amet consectetur <div>


adipisicing elit. Placeat culpa
<input
voluptas expedita itaque ex, totam ad quod
type="number"
error?
placeholder="NIC"
</p>
value={nic}
<form onSubmit={handleRegistration}>
onChange={(e) => setNic(e.target.value)}
<div>
/>
<input
<input
type="text"
type={"date"}
placeholder="First Name"
placeholder="Date of Birth"
value={firstName}
value={dob}
onChange={(e) =>
setFirstName(e.target.value)} onChange={(e) => setDob(e.target.value)}
/> />
<input </div>
type="text" <div>
placeholder="Last Name"

27
<select value={gender} onChange={(e) => <p style={{ marginBottom: 0 }}>Already
setGender(e.target.value)}> Registered?</p>

<option value="">Select Gender</option> <Link

<option value="Male">Male</option> to={"/signin"}

<option value="Female">Female</option> style={{ textDecoration: "none", color:


"#271776ca" }}
</select>
>
<input
Login Now
type="password"
</Link>
placeholder="Password"
</div>
value={password}
<div style={{ justifyContent: "center", alignItems:
onChange={(e) =>
"center" }}>
setPassword(e.target.value)}
<button type="submit">Register</button>
/>
</div>
</div>
</form>
<div
</div>
style={{
</>
gap: "10px",
);
justifyContent: "flex-end",
};
flexDirection: "row",

}}
export default Register;
>

Login.jsx
import axios from "axios"; const [confirmPassword, setConfirmPassword] =
useState("");
import React, { useContext, useState } from "react";

import { toast } from "react-toastify";


const navigateTo = useNavigate();
import { Context } from "../main";

import { Link, useNavigate, Navigate } from "react-


router-dom"; const handleLogin = async (e) => {

e.preventDefault();

const Login = () => { try {

const { isAuthenticated, setIsAuthenticated } = await axios


useContext(Context);
.post(

"http://localhost:5000/api/v1/user/login",
const [email, setEmail] = useState("");
{ email, password, confirmPassword, role:
const [password, setPassword] = useState(""); "Patient" },

28
{ <input

withCredentials: true, type="text"

headers: { "Content-Type": "application/json" }, placeholder="Email"

} value={email}

) onChange={(e) => setEmail(e.target.value)}

.then((res) => { />

toast.success(res.data.message); <input

setIsAuthenticated(true); type="password"

navigateTo("/"); placeholder="Password"

setEmail(""); value={password}

setPassword(""); onChange={(e) =>


setPassword(e.target.value)}
setConfirmPassword("");
/>
});
<input
} catch (error) {
type="password"
toast.error(error.response.data.message);
placeholder="Confirm Password"
}
value={confirmPassword}
};
onChange={(e) =>
setConfirmPassword(e.target.value)}
if (isAuthenticated) {
/>
return <Navigate to={"/"} />;
<div
}
style={{

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>

<div style={{ justifyContent: "center", alignItems:


"center" }}>

<button type="submit">Login</button>

</div>

</form>

</div>

</>

);

};

AppoinmentForm.jsx export default Login;

import axios from "axios"; "Pediatrics",

import React, { useEffect } from "react"; "Orthopedics",

import { useState } from "react"; "Cardiology",

import { toast } from "react-toastify"; "Neurology",

"Oncology",

const AppointmentForm = () => { "Radiology",

const [firstName, setFirstName] = useState(""); "Physical Therapy",

const [lastName, setLastName] = useState(""); "Dermatology",

const [email, setEmail] = useState(""); "ENT",

const [phone, setPhone] = useState(""); ];

const [nic, setNic] = useState("");

const [dob, setDob] = useState(""); const [doctors, setDoctors] = useState([]);

const [gender, setGender] = useState(""); useEffect(() => {

const [appointmentDate, setAppointmentDate] = const fetchDoctors = async () => {


useState("");
const { data } = await axios.get(
const [department, setDepartment] =
"http://localhost:5000/api/v1/user/doctors",
useState("Pediatrics");
{ withCredentials: true }
const [doctorFirstName, setDoctorFirstName] =
useState(""); );
const [doctorLastName, setDoctorLastName] = setDoctors(data.doctors);
useState("");
console.log(data.doctors);
const [address, setAddress] = useState("");
};
const [hasVisited, setHasVisited] = useState(false);
fetchDoctors();

}, []);
const departmentsArray = [

30
const handleAppointment = async (e) => { setAppointmentDate(""),

e.preventDefault(); setDepartment(""),

try { setDoctorFirstName(""),

const hasVisitedBool = Boolean(hasVisited); setDoctorLastName(""),

const { data } = await axios.post( setHasVisited(""),

"http://localhost:5000/api/v1/appointment/post", setAddress("");

{ } catch (error) {

firstName, toast.error(error.response.data.message);

lastName, }

email, };

phone,

nic, return (

dob, <>

gender, <div className="container form-component


appointment-form">
appointment_date: appointmentDate,
<h2>Appointment</h2>
department,
<form onSubmit={handleAppointment}>
doctor_firstName: doctorFirstName,
<div>
doctor_lastName: doctorLastName,
<input
hasVisited: hasVisitedBool,
type="text"
address,
placeholder="First Name"
},
value={firstName}
{
onChange={(e) =>
withCredentials: true,
setFirstName(e.target.value)}
headers: { "Content-Type": "application/json" },
/>
}
<input
);
type="text"
toast.success(data.message);
placeholder="Last Name"
setFirstName(""),
value={lastName}
setLastName(""),
onChange={(e) =>
setEmail(""), setLastName(e.target.value)}

setPhone(""), />

setNic(""), </div>

setDob(""), <div>

setGender(""), <input

31
type="text" type="date"

placeholder="Email" placeholder="Appointment Date"

value={email} value={appointmentDate}

onChange={(e) => setEmail(e.target.value)} onChange={(e) =>


setAppointmentDate(e.target.value)}
/>
/>
<input
</div>
type="number"
<div>
placeholder="Mobile Number"
<select
value={phone}
value={department}
onChange={(e) => setPhone(e.target.value)}
onChange={(e) => {
/>
setDepartment(e.target.value);
</div>
setDoctorFirstName("");
<div>
setDoctorLastName("");
<input
}}
type="number"
>
placeholder="NIC"
{departmentsArray.map((depart, index) => {
value={nic}
return (
onChange={(e) => setNic(e.target.value)}
<option value={depart} key={index}>
/>
{depart}
<input
</option>
type="date"
);
placeholder="Date of Birth"
})}
value={dob}
</select>
onChange={(e) => setDob(e.target.value)}
{/* <select
/>
value={`${doctorFirstName}
</div>
${doctorLastName}`}
<div>
onChange={(e) => {
<select value={gender} onChange={(e) =>
const [firstName, lastName] =
setGender(e.target.value)}>
e.target.value.split(" ");
<option value="">Select Gender</option>
setDoctorFirstName(firstName);
<option value="Male">Male</option>
setDoctorLastName(lastName);
<option value="Female">Female</option>
}}
</select>
disabled={!department}
<input
>

32
<option value="">Select Doctor</option> lastName: doctor.lastName,

{doctors })}

.filter((doctor) => doctor.doctorDepartment >


=== department)
{doctor.firstName} {doctor.lastName}
.map((doctor, index) => (
</option>
<option
))}
value={`${doctor.firstName}
</select>
${doctor.lastName}`}
</div>
key={index}
<textarea
>
rows="10"
{doctor.firstName} {doctor.lastName}
value={address}
</option>
onChange={(e) => setAddress(e.target.value)}
))}
placeholder="Address"
</select> */}
/>
<select
<div
value={JSON.stringify({
style={{
firstName: doctorFirstName,
gap: "10px",
lastName: doctorLastName,
justifyContent: "flex-end",
})}
flexDirection: "row",
onChange={(e) => {
}}
const { firstName, lastName } =
JSON.parse(e.target.value); >
setDoctorFirstName(firstName); <p style={{ marginBottom: 0 }}>Have you
visited before?</p>
setDoctorLastName(lastName);
<input
}}
type="checkbox"
disabled={!department}
checked={hasVisited}
>
onChange={(e) =>
<option value="">Select Doctor</option>
setHasVisited(e.target.checked)}
{doctors
style={{ flex: "none", width: "25px" }}
.filter((doctor) => doctor.doctorDepartment
/>
=== department)
</div>
.map((doctor, index) => (
<button style={{ margin: "0 auto" }}>GET
<option
APPOINTMENT</button>
key={index}
</form>
value={JSON.stringify({
</div>
firstName: doctor.firstName,

33
</>

);

};

export default AppointmentForm;

Biography.jsx
import React from "react";
<p>

Lorem ipsum dolor sit amet consectetur


const Biography = ({imageUrl}) => {
adipisicing elit. Dolores
return (
assumenda exercitationem accusamus sit
<> repellendus quo optio dolorum

<div className="container biography"> corporis corrupti. Quas similique vel minima


veniam tenetur
<div className="banner">
obcaecati atque magni suscipit laboriosam!
<img src={imageUrl} alt="whoweare" /> Veniam vitae minus nihil
</div> cupiditate natus provident. Ex illum quasi
pariatur odit nisi
<div className="banner">
voluptas illo qui ipsum mollitia. Libero,
<p>Biography</p>
assumenda?
<h3>Who We Are</h3>
</p>
<p>
<p>Lorem ipsum dolor sit amet!</p>
Lorem ipsum dolor sit amet consectetur
<p>Coding is fun!</p>
adipisicing elit. Ducimus
</div>
blanditiis sequi aperiam. Debitis fugiat harum
ex maxime illo </div>
consequatur mollitia voluptatem omnis nihil </>
nesciunt beatae esse
);
ipsam, sapiente totam aspernatur porro
ducimus aperiam nisi. Ex };

magnam voluptatum consectetur reprehenderit


fugiat recusandae aut
export default Biography;
similique illum natus velit, praesentium nostrum
nesciunt. Deleniti,

nesciunt laboriosam totam iusto!

</p>

<p>We are all in 2024!</p>

<p>We are working on a MERN STACK


PROJECT.</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 (

<>

<div className="container departments">

<h2>Departments</h2>

<Carousel

responsive={responsive}

removeArrowOnDeviceType={[

// "superLargeDesktop",

// "desktop",

"tablet",

"mobile",

]}

>

{departmentsArray.map((depart, index) => {

return (

<div key={index} className="card">

<div className="depart-
name">{depart.name}</div>

<img src={depart.imageUrl}
alt="Department" />

</div>

);

})}

</Carousel>

</div>

</>

);

};

export default Departments;

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"; },

import { MdEmail } from "react-icons/md"; ];

const Footer = () => { return (

const hours = [ <>

{ <footer className={"container"}>

id: 1, <hr />

day: "Monday", <div className="content">

time: "9:00 AM - 11:00 PM", <div>

}, <img src="/logo.png" alt="logo"


className="logo-img"/>
{
</div>
id: 2,
<div>
day: "Tuesday",
<h4>Quick Links</h4>
time: "12:00 PM - 12:00 AM",
<ul>
},
<Link to={"/"}>Home</Link>
{
<Link
id: 3,
to={"/appointment"}>Appointment</Link>
day: "Wednesday",
<Link to={"/about"}>About</Link>
time: "10:00 AM - 10:00 PM",
</ul>
},
</div>
{
<div>
id: 4,
<h4>Hours</h4>
day: "Thursday",
<ul>
time: "9:00 AM - 9:00 PM",
{hours.map((element) => (
},
<li key={element.id}>
{
<span>{element.day}</span>
id: 5,
<span>{element.time}</span>
day: "Monday",
</li>
time: "3:00 PM - 9:00 PM",
))}
},
</ul>

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>

</>

);

};

export default Footer;

Hero.jsx
Future Medical Institute is a state-of-the-art
import React from "react";
facility dedicated

to providing comprehensive healthcare


const Hero = ({ title, imageUrl }) => { services with compassion and

return ( expertise. Our team of skilled professionals is


committed to
<>
delivering personalized care tailored to each
<div className="hero container"> patient's needs. At
<div className="banner"> ZeeCare, we prioritize your well-being,
ensuring a harmonious
<h1>{title}</h1>
journey towards optimal health and wellness.
<p>

38
</p> {

</div> withCredentials: true,

<div className="banner"> headers: { "Content-Type": "application/json" },

<img src={imageUrl} alt="hero" }


className="animated-image" />
)
<span>
.then((res) => {
<img src="/Vector.png" alt="vector" />
toast.success(res.data.message);
</span>
setFirstName("");
</div>
setLastName("");
</div>
setEmail("");
</>
setPhone("");
);
setMessage("");
};
});

} catch (error) {
export default Hero;
toast.error(error.response.data.message);
MessageForm.jsx }

import axios from "axios"; };

import React, { useState } from "react";

import { toast } from "react-toastify"; return (

<>

const MessageForm = () => { <div className="container form-component


message-form">
const [firstName, setFirstName] = useState("");
<h2>Send Us A Message</h2>
const [lastName, setLastName] = useState("");
<form onSubmit={handleMessage}>
const [email, setEmail] = useState("");
<div>
const [phone, setPhone] = useState("");
<input
const [message, setMessage] = useState("");
type="text"

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}

onChange={(e) => setEmail(e.target.value)}

/>

<input

type="number"

placeholder="Mobile Number"

value={phone}

onChange={(e) => setPhone(e.target.value)}

/>

</div>

<textarea

rows={7}

placeholder="Message"

value={message}

onChange={(e) => setMessage(e.target.value)}

/>

<div style={{ justifyContent: "center", alignItems:


"center" }}>

<button type="submit">Send</button>

</div>

</form>

<img src="/Vector.png" alt="vector" />

</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"}>

const Navbar = () => { <div className="links">

const [show, setShow] = useState(false); <Link to={"/"} onClick={() => setShow(!show)}>

const { isAuthenticated, setIsAuthenticated } = Home


useContext(Context);
</Link>

<Link to={"/appointment"} onClick={() =>


const handleLogout = async () => { setShow(!show)}>

await axios Appointment

</Link>
.get("http://localhost:5000/api/v1/user/patient/logout", {
<Link to={"/about"} onClick={() =>
withCredentials: true, setShow(!show)}>

}) About Us

.then((res) => { </Link>

toast.success(res.data.message); </div>

setIsAuthenticated(false); {isAuthenticated ? (

}) <button className="logoutBtn btn"


onClick={handleLogout}>
.catch((err) => {
LOGOUT
toast.error(err.response.data.message);
</button>
});
):(
};
<button className="loginBtn btn"
onClick={goToLogin}>
const navigateTo = useNavigate(); LOGIN

</button>
const goToLogin = () => { )}
navigateTo("/login"); </div>
}; <div className="hamburger" onClick={() =>
setShow(!show)}>

<GiHamburgerMenu />

41
</div>

</nav>

</>

);

};

export default Navbar;

BACKEND:
App.js
import express from "express"; );

import { dbConnection } from


"./database/dbConnection.js";
app.use(cookieParser()); //get
import { config } from "dotenv"; cookies

import cookieParser from "cookie-parser"; app.use(express.json()); //data parse


json formet
import cors from "cors";
app.use(express.urlencoded({ extended: true })); //
import fileUpload from "express-fileupload";
date string to date fromet
import { errorMiddleware } from
"./middlewares/error.js";
app.use(
import messageRouter from
"./router/messageRouter.js"; fileUpload({ //file upload

import userRouter from "./router/userRouter.js"; useTempFiles: true,

import appointmentRouter from tempFileDir: "/tmp/",


"./router/appointmentRouter.js";
})
import dotenv from "dotenv";
);
dotenv.config();
app.use("/api/v1/message", messageRouter);

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],

method: ["GET", "POST", "DELETE", "PUT"],

credentials: true,

})

42
Server.js
import app from "./app.js";

import dotenv from "dotenv";

dotenv.config();

import cloudinary from "cloudinary";

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, () => {

console.log(`Server listening at port


${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,

import { User } from "../models/userSchema.js"; department,

doctor_firstName,

export const postAppointment = doctor_lastName,


catchAsyncErrors(async (req, res, next) => {
hasVisited,
const {
address,
firstName,
} = req.body;
lastName,
if (
email,
!firstName ||
phone,
!lastName ||

43
!email || const patientId = req.user._id;

!phone || const appointment = await Appointment.create({

!nic || firstName,

!dob || lastName,

!gender || email,

!appointment_date || phone,

!department || nic,

!doctor_firstName || dob,

!doctor_lastName || gender,

!address appointment_date,

){ department,

return next(new ErrorHandler("Please Fill Full doctor: {


Form!", 400));
firstName: doctor_firstName,
}
lastName: doctor_lastName,
const isConflict = await User.find({
},
firstName: doctor_firstName,
hasVisited,
lastName: doctor_lastName,
address,
role: "Doctor",
doctorId,
doctorDepartment: department,
patientId,
});
});
if (isConflict.length === 0) {
res.status(200).json({
return next(new ErrorHandler("Doctor not found",
success: true,
404));
appointment,
}
message: "Appointment Send!",

});
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
});

export const updateAppointmentStatus =


catchAsyncErrors(

async (req, res, next) => {

const { id } = req.params;

let appointment = await Appointment.findById(id);

if (!appointment) {

return next(new ErrorHandler("Appointment not


found!", 404));

appointment = await
Appointment.findByIdAndUpdate(id, req.body, {

new: true,

runValidators: true,

useFindAndModify: false,

});

res.status(200).json({

success: true,

message: "Appointment Status Updated!",

});

);

export const deleteAppointment =


catchAsyncErrors(async (req, res, next) => {

const { id } = req.params;

const appointment = await Appointment.findById(id);

if (!appointment) {

return next(new ErrorHandler("Appointment Not


Found!", 404));

await appointment.deleteOne();

res.status(200).json({

success: true,

message: "Appointment Deleted!",

});

});

45
MessageController.jsx
import { catchAsyncErrors } from
"../middlewares/catchAsyncErrors.js";

import ErrorHandler from "../middlewares/error.js";

import { Message } from


"../models/messageSchema.js";

export const sendMessage = catchAsyncErrors(async


(req, res, next) => {

const { firstName, lastName, email, phone, message


} = req.body;

if (!firstName || !lastName || !email || !phone ||


!message) {

return next(new ErrorHandler("Please Fill Full


Form!", 400));

await Message.create({ firstName, lastName, email,


phone, message });

res.status(200).json({

success: true,

message: "Message Send sucessfully!",

});

});

export const getAllMessages =


catchAsyncErrors(async (req, res, next) => {

const messages = await Message.find();

res.status(200).json({

success: true,

messages,

});

});

46
UserController.jsx
email,
import { catchAsyncErrors } from
"../middlewares/catchAsyncErrors.js"; phone,

import { User } from "../models/userSchema.js"; nic,

import ErrorHandler from "../middlewares/error.js"; dob,

import { generateToken } from "../utils/jwtToken.js"; gender,

import cloudinary from "cloudinary"; password,

role: "Patient",

export const patientRegister = });


catchAsyncErrors(async (req, res, next) => {
generateToken(user, "User Registered!", 200, res);
const { firstName, lastName, email, phone, nic, dob,
});
gender, password } =

req.body;
export const login = catchAsyncErrors(async (req, res,
if (
next) => {
!firstName ||
const { email, password, confirmPassword, role } =
!lastName || req.body;

!email || if (!email || !password || !confirmPassword || !role) {

!phone || return next(new ErrorHandler("Please Fill Full


Form!", 400));
!nic ||
}
!dob ||
if (password !== confirmPassword) {
!gender ||
return next(
!password
new ErrorHandler("Password & Confirm Password
){
Do Not Match!", 400)
return next(new ErrorHandler("Please Fill Full
);
Form!", 400));
}
}
const user = await User.findOne({ email
}).select("+password");
const isRegistered = await User.findOne({ email });

if (isRegistered) {
if (!user) {
return next(new ErrorHandler("User already
return next(new ErrorHandler("Invalid Email Or
Registered!", 400));
Password!", 400));
}
}

const user = await User.create({


const isPasswordMatch = await
firstName, user.comparePassword(password);

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,

} message: "New Doctor Registered",

const cloudinaryResponse = await doctor,


cloudinary.uploader.upload(
});
docAvatar.tempFilePath
});
);

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,

});

});

export const getUserDetails = catchAsyncErrors(async


(req, res, next) => {

const user = req.user;

res.status(200).json({

success: true,

user,

});

});

// Logout function for dashboard admin

export const logoutAdmin = catchAsyncErrors(async


(req, res, next) => {

res

.status(201)

.cookie("adminToken", "", {

httpOnly: true,

expires: new Date(Date.now()),

})

.json({

success: true,

message: "Admin Logged Out Successfully.",

});

});

// Logout function for frontend patient

export const logoutPatient = catchAsyncErrors(async


(req, res, next) => {

res

.status(201)

.cookie("patientToken", "", {

50
DBConnection.js
import mongoose from "mongoose";

import dotenv from "dotenv";

dotenv.config();

export const dbConnection = () => {

mongoose.connect(process.env.MONGO_URI)

.then(() => {

console.log("Connected to database!");

})

.catch((err) => {

console.log("Some error occured while connecting


to database:", 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));

} // Middleware to authenticate frontend users

const decoded = await jwt.verify(token, export const isPatientAuthenticated =


process.env.JWT_SECRET_KEY); catchAsyncErrors(

async (req, res, next) => {

const token = req.cookies.patientToken;

51
if (!token) {

return next(new ErrorHandler("User is not


authenticated!", 400));

const decoded = jwt.verify(token,


process.env.JWT_SECRET_KEY);

req.user = await User.findById(decoded.id);

if (req.user.role !== "Patient") {

return next(

new ErrorHandler(

`${req.user.role} not authorized for this


resource!`,

403

);

next();

);

export const isAuthorized = (...roles) => {

return (req, res, next) => {

if (!roles.includes(req.user.role)) {

return next(

new ErrorHandler(

`${req.user.role} not allowed to access this


resource!`

);

next();

};

};

52
catchAsyncError.js
export const catchAsyncErrors = (theFunction) => {

return (req, res, next) => {

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)

err.message = err.message || "Internal Server Error"; .join(" ")

err.statusCode = err.statusCode || 500; : err.message;

if (err.code === 11000) { return res.status(err.statusCode).json({

const message = `Duplicate success: false,


${Object.keys(err.keyValue)} Entered`,
// message: err.message,
err = new ErrorHandler(message, 400);
message: errorMessage,
}
});
if (err.name === "JsonWebTokenError") {
};
const message = `Json Web Token is invalid, Try
again!`;
export default ErrorHandler;
err = new ErrorHandler(message, 400);

if (err.name === "TokenExpiredError") {

const message = `Json Web Token is expired, Try


again!`;

err = new ErrorHandler(message, 400);

53
httpOnly: true,

expires: new Date(Date.now()),

})

.json({

success: true,

message: "Patient Logged Out Successfully.",

});

});

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!"],

maxLength: [10, "Phone Number Must Contain


const appointmentSchema = new Exact 10 Digits!"],
mongoose.Schema({
},
firstName: {
nic: {
type: String,
type: String,
required: [true, "First Name Is Required!"],
required: [true, "NIC Is Required!"],
minLength: [3, "First Name Must Contain At Least 3
minLength: [12,"Must Contain Only 13 Digits!"],
Characters!"],
maxLength: [12,"NIC Must Contain Only 13 Digits!"],
},
},
lastName: {
dob: {
type: String,
type: Date,
required: [true, "Last Name Is Required!"],
required: [true, "DOB Is Required!"],
minLength: [3, "Last Name Must Contain At Least 3
Characters!"], },

}, gender: {

email: { type: String,

type: String, required: [true, "Gender Is Required!"],

required: [true, "Email Is Required!"], enum: ["Male", "Female"],

validate: [validator.isEmail, "Provide A Valid Email!"], },

}, appointment_date: {

phone: { type: String,

type: String, required: [true, "Appointment Date Is Required!"],

54
}, enum: ["Pending", "Accepted", "Rejected"],

department: { default: "Pending",

type: String, },

required: [true, "Department Name Is Required!"], });

},

doctor: { export const Appointment =


mongoose.model("Appointment",
firstName: {
appointmentSchema);
type: String,

required: [true, "Doctor Name Is Required!"],

},

lastName: {

type: String,

required: [true, "Doctor Name Is Required!"],

},

},

hasVisited: {

type: Boolean,

default: false,

},

address: {

type: String,

required: [true, "Address Is Required!"],

},

doctorId: {

type: mongoose.Schema.ObjectId,

required: [true, "Doctor Id Is Invalid!"],

},

patientId: {

type: mongoose.Schema.ObjectId,

ref: "User",

required: [true, "Patient Id Is Required!"],

},

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, },

required: true, message: {

minLength: [3, "First Name Must Contain At Least 3 type: String,


Characters!"],
required: true,
},
minLength: [10, "Message Must Contain At Least 10
lastName: { Characters!"],

type: String, },

required: true, });

minLength: [3, "Last Name Must Contain At Least 3


Characters!"],
export const Message = mongoose.model("Message",
}, messageSchema);

email: {

type: String,

required: true,

validate: [validator.isEmail, "Provide A Valid Email!"],

},

phone: {

type: String,

UserSchema.js
import mongoose from "mongoose"; type: String,

import validator from "validator"; required: [true, "First Name Is Required!"],

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,

required: [true, "Last Name Is Required!"],


const userSchema = new mongoose.Schema({
minLength: [3, "Last Name Must Contain At Least 3
firstName: {
Characters!"],

56
}, },

email: { role: {

type: String, type: String,

required: [true, "Email Is Required!"], required: [true, "User Role Required!"],

validate: [validator.isEmail, "Provide A Valid Email!"], enum: ["Patient", "Doctor", "Admin"],

}, },

phone: { doctorDepartment: {

type: String, type: String,

required: [true, "Phone Is Required!"], },

minLength: [11, "Phone Number Must Contain Exact docAvatar: {


11 Digits!"],
public_id: String,
maxLength: [11, "Phone Number Must Contain
url: String,
Exact 11 Digits!"],
},
},
});
nic:{

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,

required: [true, "DOB Is Required!"],


userSchema.methods.comparePassword = async
},
function (enteredPassword) {
gender: {
return await bcrypt.compare(enteredPassword,
type: String, this.password);

required: [true, "Gender Is Required!"], };

enum: ["Male", "Female"],

}, 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";

const router = express.Router();

router.post("/post", isPatientAuthenticated,
postAppointment);

router.get("/getall", isAdminAuthenticated,
getAllAppointments);

router.put("/update/:id", isAdminAuthenticated,
updateAppointmentStatus);

router.delete("/delete/:id", isAdminAuthenticated,
deleteAppointment);

export default router;

messageRouter.js
import express from "express"; const router = express.Router();
import {

getAllMessages, router.post("/send", sendMessage);


sendMessage, router.get("/getall", isAdminAuthenticated,
getAllMessages);
} from "../controller/messageController.js";

import { isAdminAuthenticated } from


"../middlewares/auth.js";

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";

const router = express.Router();

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();

export const generateToken = (user, message,


statusCode, res) => {

const token = user.generateJsonWebToken();

// Determine the cookie name based on the user's


role

const cookieName = user.role === "Admin" ?


"adminToken" : "patientToken";

res

.status(statusCode)

.cookie(cookieName, token, {

expires: new Date(

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";

import Messages from "./components/Messages";


return (
import Doctors from "./components/Doctors";
<Router>
import { Context } from "./main";
<Sidebar />
import axios from "axios";
<Routes>
import { ToastContainer } from "react-toastify";
<Route path="/" element={<Dashboard />} />
import "react-toastify/dist/ReactToastify.css";
<Route path="/login" element={<Login />} />
import Sidebar from "./components/Sidebar";
<Route path="/doctor/addnew"
import AddNewAdmin from element={<AddNewDoctor />} />
"./components/AddNewAdmin";
<Route path="/admin/addnew"
import "./App.css"; element={<AddNewAdmin />} />

<Route path="/messages" element={<Messages


/>} />
const App = () => {
<Route path="/doctors" element={<Doctors />} />
const { isAuthenticated, setIsAuthenticated, admin,
setAdmin } = </Routes>
useContext(Context); <ToastContainer position="top-center" />

</Router>
useEffect(() => { );
const fetchUser = async () => { };
try {

const response = await axios.get( export default App;


"http://localhost:5000/api/v1/user/admin/me",

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";

import App from "./App.jsx";


const navigateTo = useNavigate();

export const Context = createContext({


isAuthenticated: false }); const handleAddNewAdmin = async (e) => {

e.preventDefault();

const AppWrapper = () => { try {

const [isAuthenticated, setIsAuthenticated] = await axios


useState(false);
.post(
const [admin, setAdmin] = useState({});
"http://localhost:5000/api/v1/user/admin/addnew
",

return ( { firstName, lastName, email, phone, nic, dob,


gender, password },
<Context.Provider
{
value={{ isAuthenticated, setIsAuthenticated,
admin, setAdmin }} withCredentials: true,

> headers: { "Content-Type": "application/json" },

}
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);

import { toast } from "react-toastify"; navigateTo("/");

import axios from "axios"; setFirstName("");

setLastName("");

const AddNewAdmin = () => { setEmail("");

const { isAuthenticated, setIsAuthenticated } = setPhone("");


useContext(Context);
setNic("");

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}

}; onChange={(e) => setEmail(e.target.value)}

/>

if (!isAuthenticated) { <input

return <Navigate to={"/login"} />; type="number"

} placeholder="Mobile Number"

value={phone}

return ( onChange={(e) => setPhone(e.target.value)}

<section className="page"> />

<section className="container form-component </div>


add-admin-form">
<div>
<img src="/logo.png" alt="logo"
<input
className="logo"/>
type="number"
<h1 className="form-title">ADD NEW
ADMIN</h1> placeholder="NIC"
<form onSubmit={handleAddNewAdmin}> value={nic}
<div> onChange={(e) => setNic(e.target.value)}
<input />
type="text" <input
placeholder="First Name" type={"date"}
value={firstName} placeholder="Date of Birth"
onChange={(e) => value={dob}
setFirstName(e.target.value)}
onChange={(e) => setDob(e.target.value)}
/>
/>
<input
</div>
type="text"
<div>
placeholder="Last Name"
<select value={gender} onChange={(e) =>
value={lastName} setGender(e.target.value)}>
onChange={(e) => <option value="">Select Gender</option>
setLastName(e.target.value)}
<option value="Male">Male</option>
/>
<option value="Female">Female</option>
</div>
</select>
<div>
<input
<input
type="password"
type="text"
placeholder="Password"
placeholder="Email"

63
value={password} const [gender, setGender] = useState("");

onChange={(e) => const [password, setPassword] = useState("");


setPassword(e.target.value)}
const [doctorDepartment, setDoctorDepartment] =
/> useState("");

</div> const [docAvatar, setDocAvatar] = useState("");

<div style={{ justifyContent: "center", alignItems: const [docAvatarPreview, setDocAvatarPreview] =


"center" }}> useState("");

<button type="submit">ADD NEW


ADMIN</button>
const navigateTo = useNavigate();
</div>

</form>
const departmentsArray = [
</section>
"Pediatrics",
</section>
"Orthopedics",
);
"Cardiology",
};
"Neurology",

"Oncology",
export default AddNewAdmin;
"Radiology",

"Physical Therapy",
AddNewDoctor.jsx "Dermatology",

import React, { useContext, useState } from "react"; "ENT",

import { Navigate, useNavigate } from "react-router- ];


dom";

import { toast } from "react-toastify";


const handleAvatar = (e) => {
import { Context } from "../main";
const file = e.target.files[0];
import axios from "axios";
const reader = new FileReader();

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("");

const [email, setEmail] = useState("");


const handleAddNewDoctor = async (e) => {
const [phone, setPhone] = useState("");
e.preventDefault();
const [nic, setNic] = useState("");
try {
const [dob, setDob] = useState("");

64
const formData = new FormData(); };

formData.append("firstName", firstName);

formData.append("lastName", lastName); if (!isAuthenticated) {

formData.append("email", email); return <Navigate to={"/login"} />;

formData.append("phone", phone); }

formData.append("password", password); return (

formData.append("nic", nic); <section className="page">

formData.append("dob", dob); <section className="container add-doctor-form">

formData.append("gender", gender); <img src="/logo.png" alt="logo"


className="logo"/>
formData.append("doctorDepartment",
doctorDepartment); <h1 className="form-title">REGISTER A NEW
DOCTOR</h1>
formData.append("docAvatar", docAvatar);
<form onSubmit={handleAddNewDoctor}>
await axios
<div className="first-wrapper">
.post("http://localhost:5000/api/v1/user/doctor/add
new", formData, { <div>

withCredentials: true, <img

headers: { "Content-Type": "multipart/form-data" src={


},
docAvatarPreview ? `${docAvatarPreview}`
}) : "/docHolder.jpg"

.then((res) => { }

toast.success(res.data.message); alt="Doctor Avatar"

setIsAuthenticated(true); />

navigateTo("/"); <input type="file" onChange={handleAvatar}


/>
setFirstName("");
</div>
setLastName("");
<div>
setEmail("");
<input
setPhone("");
type="text"
setNic("");
placeholder="First Name"
setDob("");
value={firstName}
setGender("");
onChange={(e) =>
setPassword("");
setFirstName(e.target.value)}
});
/>
} catch (error) {
<input
toast.error(error.response.data.message);
type="text"
}
placeholder="Last Name"

65
value={lastName} <option value="Female">Female</option>

onChange={(e) => </select>


setLastName(e.target.value)}
<input
/>
type="password"
<input
placeholder="Password"
type="text"
value={password}
placeholder="Email"
onChange={(e) =>
value={email} setPassword(e.target.value)}

onChange={(e) => setEmail(e.target.value)} />

/> <select

<input value={doctorDepartment}

type="number" onChange={(e) => {

placeholder="Mobile Number" setDoctorDepartment(e.target.value);

value={phone} }}

onChange={(e) => setPhone(e.target.value)} >

/> <option value="">Select


Department</option>
<input
{departmentsArray.map((depart, index) => {
type="number"
return (
placeholder="NIC"
<option value={depart} key={index}>
value={nic}
{depart}
onChange={(e) => setNic(e.target.value)}
</option>
/>
);
<input
})}
type={"date"}
</select>
placeholder="Date of Birth"
<button type="submit">Register New
value={dob}
Doctor</button>
onChange={(e) => setDob(e.target.value)}
</div>
/>
</div>
<select
</form>
value={gender}
</section>
onChange={(e) =>
</section>
setGender(e.target.value)}
);
>
};
<option value="">Select Gender</option>

<option value="Male">Male</option>

66
export default AddNewDoctor; }

};

fetchAppointments();

}, []);

const handleUpdateStatus = async (appointmentId,


status) => {

<App /> try {

</Context.Provider> const { data } = await axios.put(

); `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(() => { };

const fetchAppointments = async () => {

try { const { isAuthenticated, admin } =


useContext(Context);
const { data } = await axios.get(
if (!isAuthenticated) {
"http://localhost:5000/api/v1/appointment/getall",
return <Navigate to={"/login"} />;
{ withCredentials: true }
}
);

setAppointments(data.appointments);
return (
} catch (error) {
<>
setAppointments([]);

67
<section className="dashboard page"> <tr>

<div className="banner"> <th>Patient</th>

<div className="firstBox"> <th>Date</th>

<img src="/doc.png" alt="docImg" /> <th>Doctor</th>

<div className="content"> <th>Department</th>

<div> <th>Status</th>

<p>Hello ,</p> <th>Visited</th>

<h5> </tr>

{admin && </thead>

`${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"

<div className="thirdBox"> ? "value-accepted"

<p>Registered Doctors</p> : "value-rejected"

<h3>10</h3> }

</div> value={appointment.status}

</div> onChange={(e) =>

<div className="banner"> handleUpdateStatus(appointment._id


, e.target.value)
<h5>Appointments</h5>
}
<table>
>
<thead>

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>

))

: "No Appointments Found!"}

</tbody>

</table>

{}

Doctor.jsx
import axios from "axios";

import React, { useContext, useEffect, useState } from


"react";

import { toast } from "react-toastify";

import { Context } from "../main";

import { Navigate } from "react-router-dom";

const Doctors = () => {

const [doctors, setDoctors] = useState([]);

const { isAuthenticated } = useContext(Context);

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>

return <Navigate to={"/login"} />; <p>

} Gender: <span>{element.gender}</span>

return ( </p>

<section className="page doctors"> </div>

<h1>DOCTORS</h1> </div>

<div className="banner"> );

{doctors && doctors.length > 0 ? ( })

doctors.map((element) => { ):(

return ( <h1>No Registered Doctors Found!</h1>

<div className="card"> )}

<img </div>

src={element.docAvatar && </section>


element.docAvatar.url}
);

70
}; .then((res) => {

export default Doctors; toast.success(res.data.message);

setIsAuthenticated(true);

navigateTo("/");
Login.jsx
setEmail("");
import React, { useContext, useState } from "react";
setPassword("");
import { Navigate, useNavigate } from "react-router-
dom"; setConfirmPassword("");

import { toast } from "react-toastify"; });

import { Context } from "../main"; } catch (error) {

import axios from "axios"; toast.error(error.response.data.message);

const Login = () => { };

const [email, setEmail] = useState("");

const [password, setPassword] = useState(""); if (isAuthenticated) {

const [confirmPassword, setConfirmPassword] = return <Navigate to={"/"} />;


useState("");
}

const { isAuthenticated, setIsAuthenticated } =


return (
useContext(Context);
<>

<section className="container form-component">


const navigateTo = useNavigate();
<img src="/logo.png" alt="logo" className="logo"
/>
const handleLogin = async (e) => {
<h1 className="form-title">WELCOME TO
e.preventDefault(); ZEECARE</h1>

try { <p>Only Admins Are Allowed To Access These


Resources!</p>
await axios
<form onSubmit={handleLogin}>
.post(
<input
"http://localhost:5000/api/v1/user/login",
type="text"
{ email, password, confirmPassword, role:
"Admin" }, placeholder="Email"

{ value={email}

withCredentials: true, onChange={(e) => setEmail(e.target.value)}

headers: { "Content-Type": "application/json" }, />

} <input

) type="password"

71
placeholder="Password" const fetchMessages = async () => {

value={password} try {

onChange={(e) => const { data } = await axios.get(


setPassword(e.target.value)}
"http://localhost:5000/api/v1/message/getall",
/>
{ withCredentials: true }
<input
);
type="password"
setMessages(data.messages);
placeholder="Confirm Password"
} catch (error) {
value={confirmPassword}
console.log(error.response.data.message);
onChange={(e) =>
}
setConfirmPassword(e.target.value)}
};
/>
fetchMessages();
<div style={{ justifyContent: "center", alignItems:
"center" }}> }, []);
<button type="submit">Login</button>

</div> if (!isAuthenticated) {
</form> return <Navigate to={"/login"} />;
</section> }
</>

); return (
}; <section className="page messages">

<h1>MESSAGE</h1>
export default Login; <div className="banner">

Messege.jsx {messages && messages.length > 0 ? (

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";

Email: <span>{element.email}</span> import { useNavigate } from "react-router-dom";

</p>

<p> const Sidebar = () => {

Phone: <span>{element.phone}</span>

</p>

<p>

Message:
<span>{element.message}</span>

</p>

</div>

</div>

);

})

):(

<h1>No Messages!</h1>

)}

</div>

</section>

);

};

export default Messages;

Sidebar.jsx
import React, { useContext, useState } from "react"; const [show, setShow] = useState(false);

import { TiHome } from "react-icons/ti";

import { RiLogoutBoxFill } from "react-icons/ri"; const { isAuthenticated, setIsAuthenticated } =


useContext(Context);
import { AiFillMessage } from "react-icons/ai";

import { GiHamburgerMenu } from "react-icons/gi";


const handleLogout = async () => {
import { FaUserDoctor } from "react-icons/fa6";
await axios
import { MdAddModerator } from "react-icons/md";
.get("http://localhost:5000/api/v1/user/admin/logout
import { IoPersonAddSharp } from "react-icons/io5";
", {
import axios from "axios";
withCredentials: true,
import { toast } from "react-toastify";
})

73
.then((res) => { return (

toast.success(res.data.message); <>

setIsAuthenticated(false); <nav

}) style={!isAuthenticated ? { display: "none" } : {


display: "flex" }}
.catch((err) => {
className={show ? "show sidebar" : "sidebar"}
toast.error(err.response.data.message);
>
});
<div className="links">
};
<TiHome onClick={gotoHomePage} />

<FaUserDoctor onClick={gotoDoctorsPage} />


const navigateTo = useNavigate();
<MdAddModerator
onClick={gotoAddNewAdmin} />
const gotoHomePage = () => {
<IoPersonAddSharp
navigateTo("/"); onClick={gotoAddNewDoctor} />

setShow(!show); <AiFillMessage onClick={gotoMessagesPage}


/>
};
<RiLogoutBoxFill onClick={handleLogout} />
const gotoDoctorsPage = () => {
</div>
navigateTo("/doctors");
</nav>
setShow(!show);
<div
};
className="wrapper"
const gotoMessagesPage = () => {
style={!isAuthenticated ? { display: "none" } : {
navigateTo("/messages"); display: "flex" }}
setShow(!show); >
}; <GiHamburgerMenu className="hamburger"
onClick={() => setShow(!show)} />
const gotoAddNewDoctor = () => {
</div>
navigateTo("/doctor/addnew");
</>
setShow(!show);
);
};
};
const gotoAddNewAdmin = () => {

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).

3. Doctor Panel / Portal


Build a dedicated login panel for doctors to:

View their appointments

4. Medical Records Module


Allow patients and doctors to upload/view past reports, prescriptions, or test results.

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:

1. Kamal Acharya,” Advanced hospital management system project report”, Authorea,2024

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

4. Lakshya Arora, Feroz Ikbal,” Experiences of implementing hospital management information


system (HMIS) at a tertiary care hospital, India”, Vilakshan-XIMB Journal of
Management,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

7. Raju, Saravanan, S. Soundararajan, and V. Loganathan. "Mern stack web application."


Annals of the Romanian Society for Cell Biology ,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.

10. Dr. R. Naveen,S. A. Sivakumar,M.Cholavendan,T. Aswini,V. Elango,R.Elangovan,S.


Koushika, ” Automated Patient Monitoring and Hospital Management System Using
Embedded Systems”, International Journal for Research in Applied Science & Engineering
Technology (IJRASET), Volume 6 Issue II,2018

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.

12. Shakhovska, Natalya. “Advances in intelligent systems and computing”. Springer


International Pu, 2017.
13. Adebisi O.A, Oladosu D.A, Busari O.A and Oyewola Y.V,” Design and Implementation of
Hospital Management System” International Journal of Engineering and Innovative
Technology (IJEIT),2015

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.

18. Agnes, OGBOBE NK

19. ECHI. "Automated Hospital Management System." ,2011


20. Wenjun Cao, Yi Wan, Haibo Tu, Fujun Shang, Danhong Liu, Zhijun Tan, Caihong Sun, Qing
Ye, Yongyong Xu,” A web-based appointment system to reduce waiting for outpatients: A
retrospective study”, BMC health services research, 2011

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

You might also like