Tanisha Madan, et. al.

International Journal of Engineering Research and Applications

www.ijera.com
ISSN: 2248-9622, Vol. 11, Issue 3, (Series-III) March 2021, pp. 21-27

RESEARCH ARTICLE OPEN ACCESS

Blood Donation Management with Modern Engineering

Tanisha Madan
Assistant Professor Computer Science and Engineering, BPIT, Rohini, New Delhi, INDIA

Narender Bhardwaj
Computer Science and Engineering, Scholar of BPIT Rohini, New Delhi, INDIA

Shivam Kumar Mishra

Computer Science and Engineering, Scholar of BPIT, Rohini, New Delhi, INDIA

ABSTRACT
This paper is focused on Blood blank and donor management system using modern engineering which is a
modern React application named Rudhiram. Rudhiram is a web-based application which creates a link between
donor and patients who needs blood. Rudhiram is built on using modern java-script front-end framework
React.js, with modern state management tools like Redux and uses Node (Express.js) for back-end with new-age
database like MongoDB. Rudhiram provides donors a list of nearby blood camps from its database where a
person can schedule a visit and donate blood easily with no paperwork. Rudhiram also provides a list of nearby
hospitals and users from its database who can provide and donate blood respectively, when a patient needs the
blood of a particular type with an advanced searching algorithm it also checks for compatible blood type in
hospitals and registered user too. Rudhiram provides an easy registration process for hospitals, blood banks, and
blood camps with self-created API. Users can register on Rudhiram using the sign-up form, google using OAuth
and can update their profile and also check their schedules and history of donated blood if, donated to get help in
future. Rudhiram also provides email, message, and location services using Google-API or third-party
applications for all registered hospitals, blood camps, and users so that they can be contacted when needed. It
also provides a search option for users in the same state and an article page where blood information is
displayed. Rudhiram can also provide the data in a categorized and standard form for further data mining which
can be useful for blood camps awareness etc. The goal of this paper and web application is to reduce the latency
in the process of blood donation by reducing the complexity of the management system and making blood
donation and finding blood donors a smooth process.
Keywords: Online blood donation, React.js, Redux, Restful API, Node, Mailing, Express.js, OAuth, Google,
Web application, Cloud Computing, Data Analysis, JSX.
---------------------------------------------------------------------------------------------------------------------------------------
Date of Submission: 26-03-2021 Date of Acceptance: 09-04-2021
--------------------------------------------------------------------------------------------------------------------------------------
the help of this application as a platform where any
I. INTRODUCTION person who is willing to donate blood or any person
Rudhiram, it’s a Sanskrit word that means who needs blood (patient) can help each other. The
blood, It is a web app that acts as an intermediate application keeps the track of the blood available in
between the donor and recipient of blood. According the hospital or the blood bank, as soon as there is
to research in every 2 seconds, a person needs blood any update in the hospital database, it will also be
in India. Besides vital need, getting the right blood reflected on the application with the help of API.
at the right time is also important to save a life. In The application can keep donor information and the
today's life, we came across many situations where stock of blood in the hospitals and the blood bank.
we need blood for the survival of the patient, it The paper presents a dynamic full-stack [MERN]
could be an emergency accident, delivery of a baby, web-application with the use of the following
or any other possibility. In all these situations we technology:
need blood on an urgent basis to save the life of the 1. React.js: It’s a JavaScript framework used to
person. This is where Rudhiram comes into play, the create the front-end (UI/UX) of Rudhiram [1].
web app links all the hospitals, blood banks, blood Implemented the v17.0.1 with new tools like Hooks
camps, and users with their detailed information on etc.
a single platform which we called "Rudhiram". With 2. Redux: A Predictable State Container for JS Apps

www.ijera.com DOI: 10.9790/9622-1103032127 21 | P a g e

Tanisha Madan, et. al. International Journal of Engineering Research and Applications
www.ijera.com
ISSN: 2248-9622, Vol. 11, Issue 3, (Series-III) March 2021, pp. 21-27
[2]
. It’s used to create a centralized store for storing mobile-based application to maintain day to day
states of the app. transaction in the blood bank. It creates an e-
3. Express.js (Node v12.18.2): Express is a minimal information about the donor and the organization
and flexible Node.js web application framework [3]. that is related to donating the blood. They have used
It’s used for the development of the back-end and ASP.net for the entire front-end and SQL server
API of Rudhiram. 2008 for the backend.
4. MongoDB (v4.4): A NoSQL database with JSON-
like document schemas [4]. Used for implementing a 4. “Implementation of Blood Donation Application
database for Rudhiram. Robo3t a MongoDB GUI is using android Smartphone” by Monika Mandole,
used for implementing the database. Pradnya Jagtap, Prachi Mhaske, Sonali Vidhate [8].
They have developed an android application that is
The system has 5 modules: Admin module, designed to store, process, retrieve and analyze the
Hospital, Donor, Blood Camps, and Recipient information concerned with the admin. They have
module respectively. The admin module has access used Java, JDK, GCM, database in their project.
to every movement of the application. The Hospital
or blood bank can register to the application, after III. METHODOLOGY
registration, they need to share their database with This paper represents a blood donation
the application, and the admin will verify the data, management system using modern technologies
and then its database will get integrated with our with a step-by-step methodology as discussed
database which eventually reflects on the front-end. below.
The donor can register himself on the application
and can search nearby hospitals to donate blood and a. Concept & Design:
can generate a ticket as an appointment. The With the rise in React framework, the
recipient has to register to the application and after front-end becomes seamlessly fast, more dynamic,
registration, he needs to provide the required blood responsive, and user-friendly. But still, a lot of
group which helps our algorithm to find the nearest websites use aged technologies, this problem is a big
hospitals with the same or compatible blood. Then interruption for a blood management system where
the recipient can contact the user or hospital for the rapid blood transfusion happens. The paper presents
blood. Rudhiram is a fusion of modern technologies the full stack [MERN] blood management system
and algorithms which provide a well-built blood with dynamic API support.
donor and hospital management system to serve
mankind. a.1 Stakeholders of the application
1. Users (Donors): The person who wants to donate
II. LITERATURE REVIEW blood. First-time users need to sign-up with an e-
1. “A survey on Blood Bank management system” mail address and password or by using OAuth, after
by professor Animesh Tayal, Harshad Gahre, sign-up, he/she will receive an email where they
Akshay Patel, Sagar Jog, Pratik Jain, Jaya Dhawale update their profile for further consideration for
[5]
. They have developed a website and an android blood donation. Admin will verify their details and
app by which a solution to the ever-growing add them to the database as donors with respective
requirements of blood supply can be fulfilled. They blood types. A regular user can directly login using
have used JSP, Bootstrap & Java for the frontend & register e-mail and they can easily choose the
MYSQL for the backend nearest blood donation camp to schedule a blood
donation visit as per their convenience with ease as
2. “CBBR Centralised Blood Bank Repository” by it’s a simple and paper-free process.
Ibrahim Fawze Akar, Tukur Anas Mohammad,
Mohammad Ismail Z. They have developed a 2. Users (Patients): The person who needs blood in
centralized web-based system using HTML5/CSS & an emergency. Users also have login/sign-up they
JSP on WWW Platform [6]. H2 Database is used by have to follow the same step as the users (Donor)
them and has hosted it on Apache Web Server. This did. After login they can go to the blood fetch page
also supports transactions on both acceptors and created in the application where they need to
donor's side, an acceptor can pay for the transfusion provide the details of blood type and area after
fee and Centers fee and a donor can also be paid for pressing the search button, they will get the list of
his services. hospitals/users with available compatible blood
type. Then they can contact them to get the blood
3. “Blood Donation Management System” by KM they can also contact us to help them in the delivery
Akkas Ali, Israt Jahan, Md. Ariful Islam, Md. Shafa- process.
at pravez[7] have developed a web-enabled and

www.ijera.com DOI: 10.9790/9622-1103032127 22 | P a g e

Tanisha Madan, et. al. International Journal of Engineering Research and Applications
www.ijera.com
ISSN: 2248-9622, Vol. 11, Issue 3, (Series-III) March 2021, pp. 21-27

3. Hospitals: Any hospitals can register with us by 2 parts first client-side development i.e.,
providing proper detail and after verification, they React/Redux application, and server-side
get registered. In an emergency, they can contact development i.e., Express (node.js) application both
other hospitals/user for blood. The registered developed on VS code editor on a Linux machine
hospital gets showed up on Rudhiram as a blood (Ubuntu OS). Then finally both apps are deployed
bank if they have compatible blood available. on the same server (Heroku) using distributed client-
server computing technology providing a proxy of
4. Blood Camps: Any blood camp can register with server in a client application.
us by providing proper detail and after verification,
they get registered. The registered camp gets b. Implementation & Method:
showed up on Rudhiram while users search for The paper describes the detailed process of
blood camps near them. building the web application in a different module
such as front-end i.e., client-side development,
back-end i.e., server-side development, and then
finally deployment on Heroku distributed server.

b.1 Front-End or Client-Side Development:

React JS is intensively used for the creation of the

front-end with CSS and some HTML-5. Reacts
component tool is used for the creation of different
custom components such as Home.jsx, Main.jsx,
Loin.jsx, SignUp.jsx, BloodDonate.jsx,
Figure 1: Technical architecture of the proposed BloodFtech.jsx, etc which are interlinked well to
system provide a smooth user experience. CSS and
JavaScript are used for making the app more
5. Administrator: Admin manages and supervises responsive for different size devices. Material-UI [9]
the working of every department and layer of and React Bootstrap [10] are used for special effects,
Rudhiram. Admin control, create, update, delete and buttons, forms, cards, etc. React Router Dom is used
verify the records of users, hospitals, and blood for creating different routes and links which in turn
camps as per need. makes the application seamlessly fast, that a user
All of these different modules are connected gets a native app-like experience on the browser as
together as React components which in turn there is no flashy blank page between route
connected with Redux a state management tool. transitions. Redux Centralized store is used for data
Redux provides a centralized store and the whole connectivity within separate components of React.
app is connected with this store, some components Redux provides a dispatcher that dispatches actions
can update the state in-store and some can receive on the store for state updation which in turn
the state of the components and hence the data can provides consistent data for the whole app. Axios is
easily be shared between different components of used in a client for making an API request
the app.

API requests are handled by the Express server

created using Node JS. Database connectivity is
created with MongoDB using Express and all of the
NoSQL queries are executed and sent back to the
client in JSON format which is rendered smoothly
by React. It’s also used for searching algorithms
handling the compatible blood type HTTP request
query and hospitals or blood camps in user state.
Express is also used for session management and
cookies. All of the data is being stored in the
database using Axios and HTTP requests. This data
can be used further for medical and research related Figure 2: Class Diagram for Rudhiram App.
to blood. E-mail, phone call, location service is
provided to the end-user of registered hospitals and to the server. JSON format is used for exchanging
donors. data between client and server. Many other npm
The paper presents the app development in packages and react library are used to provide better

www.ijera.com DOI: 10.9790/9622-1103032127 23 | P a g e

Tanisha Madan, et. al. International Journal of Engineering Research and Applications
www.ijera.com
ISSN: 2248-9622, Vol. 11, Issue 3, (Series-III) March 2021, pp. 21-27

performance and user experience.

b.2 Back-End or Server-Side Development:

Express is used for the creation of the back-
end with Node. REST full API is created with
support for get, post, delete, and update routes using
Express. The API is used to server the HTTP request
by the client for the transaction of data with the
database. Passport and npm package is used for
session management, cookies management, and
password encryption (salting + hashing). Google
OAuth 2.0 is implemented using passport strategy
for google. Passport local strategy for authenticating
client locally and session management using Figure 3: Data flow Diagram for Rudhiram App.
serializing and de-serializing tokens. A different
algorithm is used for answering different queries, IV. IMPLEMENTATION AND RESULTS
java-script in Express is used for this purpose. The project is deployed and hosted on Heroku
Express is also connected with python sell to public server and anyone can visit this application at
provide data analysis and reports for further research https://rudhiram.herokuapp.com/ . A detailed guide
and medical purpose. All the back-end side code is is given bellow about how the app works for
written in java-script and Express so to handle different users and different purposes.
precise API requests and warnings of deprecated
npm packages. Step 1: Go the https://rudhiram.herokuapp.com/
from any device of your choice. It’s the main page
MongoDB is used as the database for Rudhiram for of the app.
the following reasons as its flexible, dynamic, and
easy to user-friendly work environment for
development. MongoDB Atlas is used to deploy and
scale the database in the cloud. It's free (community
server only) having Multi-cloud data distribution
(75+ cloud regions), secure for sensitive data, and is
designed for developer productivity and optimal
performance [4]. The database is divided into 4
collections hospitals, blood-camps, users, articles.
Each collection has its data, function, and usage
according to need.
Hospital collection is used to provide the
list of registered hospitals with their details and
available types of blood to the recipient of blood
searching on the app. Blood Camps collection is Figure 4: Mobile View of Main Page
used to provide registered blood-camps details,
location, and time so that a donor can schedule a Step 2: In step 2 the user of the app have to go the
visit for donation. Users collection contains the list https://rudhiram.herokuapp.com/reg/bloodcamp and
of all the registered users with us and having all the https://rudhiram.herokuapp.com/reg/hospital to
details so that a person in an emergency can contact register blood-camp and hospital respectively
them. Articles collection contains the list of blood
donation and blood-related articles for general
purpose. NoSQL JSON format is primarily used for
storing and transporting data between the app and
the MongoDB Atlas while Express provides the
platform for the same.

Finally, the app is deployed on Heroku a

PaaS that enables to build, run and operate
applications entirely in the cloud [11]. Using a free
server provided to students.

www.ijera.com DOI: 10.9790/9622-1103032127 24 | P a g e

Tanisha Madan, et. al. International Journal of Engineering Research and Applications
www.ijera.com
ISSN: 2248-9622, Vol. 11, Issue 3, (Series-III) March 2021, pp. 21-27

emergence from the nearest hospital or a registered

donor.

Figure 5: View of the registration page for

hospitals/blood-camps.

Step 3: Login/Signup page for users for verification

and upload of details.

Figure 8: View of donation and blood fetch page of

the application

Step 6: Now if you need blood you can just contact

the hospital or donor. If you want to donate blood
then you need to click on schedule visit and selected
a respective day when you can donate blood after
you will get the mail and appreciation ticket.

Figure 6: LOGIN/SIGNUP page for the user

Step 4: After Login/signup user will enter into the

main page of the application which contains links
for blood donation and blood fetch. Available at
https://rudhiram.herokuapp.com/main.

Figure 9: Scheduling Appointments and generating

Tokens

Step 7: You can visit your profile for updating and

checking your booking history etc. finally you can
logout and close the window.
Figure 7: View of the main page of the application

Step 5: Click Donate for Cause button for blood

donation at the nearest blood camp in your city.
Click Get Vital Blood to receive blood in case of

www.ijera.com DOI: 10.9790/9622-1103032127 25 | P a g e

Tanisha Madan, et. al. International Journal of Engineering Research and Applications
www.ijera.com
ISSN: 2248-9622, Vol. 11, Issue 3, (Series-III) March 2021, pp. 21-27

increase awareness among citizens for regular blood

donation and its benefits as saving lives in
emergencies.

6 CONCLUSIONS
The project mainly focuses on the issue of Blood
availability when someone needs it on an urgent basis
and when someone wants to donate blood and don’t
have proper guidance for the same. The Blood
Donation Management System is a 24×7 system that
is essential for different kinds of people like blood
donation system personnel, doctors, donors,
recipients, and other general users [7]. Rudhiram
provides a very efficient and advanced way for blood
transfusion between hospitals/donors and patients.
The purpose of the project is to simplify and automate
the process of searching for blood and to maintain a
centralized record of blood donors, recipients, blood
donation camps, and the availability of stocks of
blood in hospitals and blood banks.

ACKNOWLEDGMENT
Figure 10: user profile page showed only after login The authors are grateful to Bhagwan
Parshuram Institute of Technology, New Delhi for
Robo3t is used as GUI for MongoDB a which providing the platform, resources, and support for
contains four collections each having its own use in this project.
the application.
REFERENCES
[1]. React JS framework available at
https://reactjs.org/.
[2]. Redux State management tool available at
https://redux.js.org/.
[3]. Node (Express.js) for back-end available at
https://nodejs.org/en/.
[4]. MongoDB NoSQL database available at
https://www.mongodb.com/.
[5]. A Survey on Blood Bank Management
System by Prof. Animesh Tayal, Harshad
Gahare, Akshay Patel, Sagar Jog, Pratik Jain
Dhawale Department of Computer Science &
Engineering S. B. Jain Institute of
Figure 11: Database collections representation using Technology, Management and Research,
Robo3 Nagpur. IJRTER ISSN: 2455-1457 available
at [ https://www.ijrter.com/papers/volume-
V. FUTURE WORK 3/issue-1/blood-bank-management-
Although the project provides a modern system.pdf ].
solution for Blood bank and donor management [6]. “CBBR Centralised Blood Bank Repository”
system still there is a chance of improvement. by Ibrahim Fawze Akar, Tukur Anas
Rudhiram can be further improved by implementing a Mohammad, Mohammad Ismail Z. IJISE Vol.
fast-searching algorithm like Dijkstra, A*, etc. to 3 (No.1), April, 2015 available at [
show results faster. Live blood transaction tracking https://www.ftms.edu.my/journals/pdf/IJISE/
can be added so to improve the transparency of the Apr2015/85-97.pdf ].
blood transfusion process. By applying data analytics, [7]. Blood Donation Management System” by
we will get the information that which blood group is KM Akkas Ali, Israt Jahan, Md. Ariful Islam,
rarely available in which area. SMS facilities can be Md. Shafa-at pravez. AJER Volume-4, Issue-
added to notify users and hospitals about the events 6, pp-123-136 available at [
and process. An E-mail newsletter can be created to http://www.ajer.org/papers/v4(06)/O0460123

www.ijera.com DOI: 10.9790/9622-1103032127 26 | P a g e

Tanisha Madan, et. al. International Journal of Engineering Research and Applications
www.ijera.com
ISSN: 2248-9622, Vol. 11, Issue 3, (Series-III) March 2021, pp. 21-27

0136.pdf ].
[8]. “Implementation of Blood Donation
Application using android Smartphone” by
Monika Mandole, Pradnya Jagtap, Prachi
Mhaske, Sonali Vidhate. Available at
IJARIIT Vol 3, Issue 6 available at [
https://www.ijariit.com/manuscripts/v3i6/V3I
6-1396.pdf ].
[9]. Material-UI for styling available at
https://material-ui.com/.
[10]. React Bootstrap for styling available at
https://react-bootstrap.netlify.app/.
[11]. Heroku server is used for hosting, available at
https://dashboard.heroku.com/.

Tanisha Madan, et. al. “Blood Donation Management with Modern Engineering.” International
Journal of Engineering Research and Applications (IJERA), vol.11 (3), 2021, pp 21-27.

www.ijera.com DOI: 10.9790/9622-1103032127 27 | P a g e