IJARCCE ISSN (O) 2278-1021, ISSN (P) 2319-5940

International Journal of Advanced Research in Computer and Communication Engineering

ISO 3297:2007 CertifiedImpact Factor 8.102Peer-reviewed / Refereed journalVol. 12, Issue 7, July 2023
DOI: 10.17148/IJARCCE.2023.12708

Online Platform for Blood donation and

Reception
Rajat Kinlekar1, Devendra Sutar2, Smita Sancolkar3
Under graduate B.E. student, Dept. of E&TC, Goa College of Engineering, Farmagudi, Goa-India1
Assistant Professor, Dept. of E&TC, Goa College of Engineering, Farmagudi, Goa-India2
Under graduate B.E. student, Dept. of E&TC, Goa College of Engineering, Farmagudi, Goa-India3
Abstract: The Online Blood Donation Website is a transformative platform designed to address the critical challenges
faced in maintaining a consistent and reliable blood supply. The platform serves as a vital link between blood donors and
patients in urgent need, facilitating swift and efficient blood donation processes.
In today's fast-paced world, traditional methods of blood donation face limitations in reaching potential donors and
coordinating donations effectively. The Online Blood Donation Website aims to revolutionize the blood donation
landscape by providing an intuitive and user-friendly interface that connects donors with patients seamlessly.
In conclusion, the blood donation web page stands as a testament to the power of technology in uniting humanity for a
common purpose—to provide the gift of life through blood donation. Its impact is not limited by geographical boundaries,
transcending borders to bring hope and healing to individuals in dire need. Together, we can build a world where blood
donation is not merely a responsibility but an act of compassion that transforms lives and forges a brighter, healthier
future for all.

Key Words: React JS, Node JS, CSS, HTML, MongoDB, Mongoose, Redux, Nodemon, VsCode, Netlify.

I. INTRODUCTION

The Online Blood Donation Website is a transformative platform designed to address the critical challenges faced in
maintaining a consistent and reliable blood supply. The platform serves as a vital link between blood donors and patients
in urgent need, facilitating swift and efficient blood donation processes. In today's fast-paced world, traditional methods
of blood donation face limitations in reaching potential donors and coordinating donations effectively. The Online Blood
Donation Website aims to revolutionalize the blood donation landscape by providing an intuitive and user-friendly
interface that connects donors with patients seamlessly.

II. LITERATURE SURVEY

1. “A survey on Blood Bank management system” by professor Animesh Tayal, Harshad Gahre, Akshay Patel,
Sagar Jog, Pratik Jain, Jaya Dhawale [5]. They have developed a website and an android app by which a solution to the
ever-growing requirements of blood supply can be fulfilled. They have used JSP, Bootstrap Java for the frontend MYSQL
for the backend
2. “CBBR Centralised Blood Bank Repository” by Ibrahim Fawze Akar, Tukur Anas Mohammad, Mohammad
Ismail Z. They have developed a centralized web-based system using HTML5/CSS JSP on WWW Platform [6]. H2
Database is used by them and has hosted it on Apache Web Server. This also supports transactions on both acceptors and
donor’s side, an acceptor can pay for the transfusion fee and Centers fee and a donor can also be paid for his services.
3. “Blood Donation Management System” by KM Akkas Ali, Israt Jahan, Md. Ariful Islam, Md. Shafaat pravez[7]
have developed a web-enabled and mobile-based application to maintain day to day transaction in the blood bank. It
creates an einformation about the donor and the organization that is related to donating the blood. They have used ASP.net
for the entire front-end and SQL server 2008 for the backend.
4. “Implementation of Blood Donation Application using android Smartphone” by Monika Mandole, Pradnya
Jagtap, Prachi Mhaske, Sonali Vidhate [8] . They have developed an android application that is designed to store, process,
retrieve and analyze the information concerned with the admin. They have used Java, JDK, GCM, database in their project
5. React officially released as an open-source project by Facebook in May 2013. It was presented as "React.js" at
the JSConf US conference in 2013.
6. Node.js (v0.1.0) released in May 2009. Was built on the Chrome V8 JavaScript engine, which is also used in
the Google Chrome browser. The V8 engine provides high-performance execution of JavaScript code.
7. HTML hypertext dates back to the 1940s, coined by Ted Nelson in the 1960s. The idea was to create a system
where users could navigate through interconnected documents using hyperlinks.

© IJARCCE This work is licensed under a Creative Commons Attribution 4.0 International License 38
 IJARCCE ISSN (O) 2278-1021, ISSN (P) 2319-5940

International Journal of Advanced Research in Computer and Communication Engineering

ISO 3297:2007 CertifiedImpact Factor 8.102Peer-reviewed / Refereed journalVol. 12, Issue 7, July 2023
DOI: 10.17148/IJARCCE.2023.12708
III. TECHNOLOGIES

Frontend
React: React is a free and open-source front-end JavaScript library for building user interfaces based on UI components
It is maintained by Meta and a community of individual developers and companies It’s used for building interactive user
interfaces and web applications quickly and efficiently with significantly less code that you would with vanilla JavaScript
HTML:The HyperText Markup Language or HTML is the standard markup language for documents designed to be
displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets and scripting languages
such as JavaScript
CSS:Cascading Style Sheet is the style sheet language used for describing the presentation of a document written in a
markup language such as HTML or XML CSS is a cornerstone technology of the World Wide Web, alongside HTML and
JavaScript
BootStrap:Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web
development. It contains HTML, CSS and JavaScript-based design templates for typography, forms, buttons, navigation,
and other interface components.
Backend
Node JS:Cascading Style Sheet is the style sheet language used for describing the presentation of 13 a document written
in a markup language such as HTML or XML CSS is a cornerstone technology of the World Wide Web, alongside HTML
and JavaScript
Express JS:Cascading Style Sheet is the style sheet language used for describing the presentation of 13 a
document written in a markup language such as HTML or XML CSS is a cornerstone technology of the World Wide Web,
alongside HTML and JavaScript
Nodemon:nodemon is a tool that helps develop Node.js based applications by automatically restarting the node
application when file changes in the directory are detected.
nodemon supports local and global configuration files. These are usually named nodemon.json and can be located in the
current working directory or in your home directory. An alternative local configuration file can be specified with the --
config <file> option.
Bcrypt:While submitting a form, there are some sensitive data (like passwords) that must not be visible to anyone, not
even to the database admin. To avoid the sensitive data being visible to anyone, Node.js uses
“bcryptjs”.
This module enables storing passwords as hashed passwords instead of plaintext.
Data Base Management
MongoDb:MongoDB is a source-available cross-platform document-oriented database program. Classified as a NoSQL
database program, MongoDB uses JSON-like documents with optional schemas MongoDB is developed by MongoDB
Inc. and licensed under the Server Side Public License which is deemed non-free by several distribution
Mongoose:Mongoose provides a straight-forward, schema-based solution to model your application data. It includes
built-in type casting, validation, query building, business logic hooks and more, out of the box.
Other
VSCode: Visual Studio Code, also commonly referred to as VS Code, is a source-code editor made by Microsoft with
the Electron Framework, for Windows, Linux and macOS. Visual Studio Code is a streamlined code editor with support
for development operations like debugging, task running, and version control
GitHub:GitHub, Inc. is an Internet hosting service for software development and version control using Git. It provides
the distributed version control of Git plus access control, bug tracking, software feature requests, task management,
continuous integration, and wikis for every project Cascading Style Sheet is the style sheet language used for describing
the presentation of a document written in a markup language such as HTML or XML CSS is a cornerstone technology of
the World Wide Web, alongside HTML and JavaScript
Vercel:Vercel is the platform for frontend developers, providing the speed and reliability innovators need to create at the
moment of inspiration. We enable teams to iterate quickly and develop, preview, and ship delightful user experiences.
Vercel Inc., formerly Zeit, is an American cloud platform as a service company. The company maintains the Next.js web
development framework. Vercel's architecture is built around Jamstack, and deployments are handled through Git
repositories
Netlify:Netlify is a remote-first cloud computing company that offers a development platform that includes build, deploy,
and serverless backend services for web applications and dynamic websites.

© IJARCCE This work is licensed under a Creative Commons Attribution 4.0 International License 39
 IJARCCE ISSN (O) 2278-1021, ISSN (P) 2319-5940

International Journal of Advanced Research in Computer and Communication Engineering

ISO 3297:2007 CertifiedImpact Factor 8.102Peer-reviewed / Refereed journalVol. 12, Issue 7, July 2023
DOI: 10.17148/IJARCCE.2023.12708
IV. FLOW CHART

V. RESULTS

The application was successfully designed and coded to meet the requirements of the project objectives.

© IJARCCE This work is licensed under a Creative Commons Attribution 4.0 International License 40
 IJARCCE ISSN (O) 2278-1021, ISSN (P) 2319-5940

International Journal of Advanced Research in Computer and Communication Engineering

ISO 3297:2007 CertifiedImpact Factor 8.102Peer-reviewed / Refereed journalVol. 12, Issue 7, July 2023
DOI: 10.17148/IJARCCE.2023.12708

© IJARCCE This work is licensed under a Creative Commons Attribution 4.0 International License 41
 IJARCCE ISSN (O) 2278-1021, ISSN (P) 2319-5940

International Journal of Advanced Research in Computer and Communication Engineering

ISO 3297:2007 CertifiedImpact Factor 8.102Peer-reviewed / Refereed journalVol. 12, Issue 7, July 2023
DOI: 10.17148/IJARCCE.2023.12708

VI. CONCLUSION

The application was successfully designed and coded to meet the requirements of the project objectives. Online Blood
donation website was successfully developed using HTML, CSS, JS technology. React JS as frontend Framework.libraries
used are bootstrap for carousal images. The Website is for online blood donation and reception which includes various
features. This web page which will provide an platform for blood donation and reception with a feature of sending request
for messaging and further communication. We have used Node js for backend, mvc architecture, mongoDb and mongoose
for data base management. UseState library is used for state management.
The success of the online blood donation website is a testament to the power of technology in creating positive social
impact. By leveraging digital platforms and integrating with healthcare systems, the website has overcome various
challenges associated with blood donation and donor engagement. The website's emphasis on convenience and
transparency has resonated with users, fostering a sense of trust and loyalty among donors. Through continuous efforts in
donor retention and outreach, the website has been able to sustain a steady flow of contributions, ensuring a reliable blood
supply for patients in need. Moving forward, the online blood donation website will continue to improve and innovate,
harnessing the potential of emerging technologies to enhance user experience and further streamline the donation process.
By building on its success and nurturing a strong sense of community, the website aims to become an enduring platform
for life-saving efforts and a beacon of hope for those facing medical challenges.

VII. FUTURE SCOPE

We would like to work on more features such as infinite pagination. We would also like to improve a more secure way of
communication by using encryption algorithm at the backend AI model can be integrated within the application, which
will allow to filter the donors on the basis of a particular algorithm. Personalization and Donor Engagement: We would
Implement personalized user profiles that allow donors to track their donation history, upcoming appointments, and
receive tailored communications. Introduce a donor loyalty program with incentives, rewards, and recognition for
frequent donors to encourage repeat donations and enhance engagement.
Mobile App Integration: We would like to Develop a mobile app to complement the website, providing users with a
convenient platform for blood donation, appointment booking, and real-time notifications. Utilize mobile app features
like gamification elements and location-based services to further engage potential donors. Social Media Integration and
Outreach: Enhance social media integration to allow users to share their donation experiences, milestones, and challenges,
thus promoting blood donation among their networks. Develop targeted social media campaigns to reach specific
demographics and communities to raise awareness and encourage blood donation.
Virtual Blood Drives and Remote Donations: Explore the possibility of conducting virtual blood drives where individuals
can participate in donation campaigns online or through mobile apps. Facilitate remote blood donations by partnering
with healthcare providers or blood banks to collect blood from eligible donors in remote or underserved areas.
Donor Feedback and Surveys: Integrate feedback mechanisms and conduct regular surveys to gather donor insights and
suggestions for improving the website’s features and services. Use donor feedback to make data-driven decisions and

© IJARCCE This work is licensed under a Creative Commons Attribution 4.0 International License 42
 IJARCCE ISSN (O) 2278-1021, ISSN (P) 2319-5940

International Journal of Advanced Research in Computer and Communication Engineering

ISO 3297:2007 CertifiedImpact Factor 8.102Peer-reviewed / Refereed journalVol. 12, Issue 7, July 2023
DOI: 10.17148/IJARCCE.2023.12708
tailor the website to better meet donor needs and expectations. Real-time Blood Inventory and Donation Requests:
Develop a system that displays real-time blood inventory levels and requests from healthcare facilities, allowing donors
to see where their blood is needed the most. Implement a notification system to alert donors when there is an urgent need
for specific blood types or during times of low blood supply.
Partnerships and Community Engagement: Strengthen collaborations with local communities, schools, businesses, and
nonprofit organizations to organize blood donation campaigns and events. Foster partnerships with medical institutions,
clinics, and hospitals to facilitate seamless blood donation processes and ensure a steady supply.
Accessibility and Inclusivity: Continuously improve website accessibility features to accommodate users with disabilities,
ensuring that all potential donors can easily access and navigate the platform. Offer multilingual support to reach diverse
language-speaking populations and engage a wider audience.
Data Analytics and Performance Metrics: Implement robust data analytics tools to monitor website performance, donor
behavior, and key performance indicators (KPIs). Use data-driven insights to optimize the website’s design, content, and
functionalities for better user engagement and conversion rates

ACKNOWLEDGEMENT

We would like to thank our mentor, Prof. Devendra Sutar for his ongoing support, direction and profound understanding
of the topic. We want to express our gratitude to him for his suggestions, support and ongoing inspiration, without which
this project would not have been possible. We are grateful to Dr. H. G. Virani, Head of Electronics and
Telecommunication Department, Goa College of Engineering, for his constant support and encouragement. We would
also like to thank Dr. Krupashankara M.S. , Principal, Goa College of Engineering, for allowing us to take up this
project.

REFERENCES

[1]. “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/V3I6-1396.pdf ].
[2]. Blood Donation Management System” by KM Akkas Ali, Israt Jahan, Md. Ariful Islam, Md. Shafa-at pravez. AJER
Volume-4, Issue6, pp-123-136 available at [ http://www.ajer.org/papers/v4(06)/O04601230136.pdf ].
[3]. “CBBR Centralised Blood Bank Repository” by Ibrahim Fawze Akar, Tukur Anas Mohammad, Mohammad Ismail
Z. IJISE Vol. 3 (No.1), April, 2015 available at [ https://www.ftms.edu.my/journals/pdf/IJISE/Apr2015/85-97.pdf ].
[4]. 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 Technology, Management
and Research, Nagpur. IJRTER ISSN: 2455-1457 available at [ https://www.ijrter.com/papers/volume3/issue-1/blood-
bank-managementsystem.pdf ].
[5].MongoDB NoSQL database available at https://www.mongodb.com/.
[6]. Node (Express.js) for back-end available at https://nodejs.org/en/.
[7]. Redux State management tool available at https://redux.js.org/.
[8].React JS framework available at https://reactjs.org/.
[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/.

© IJARCCE This work is licensed under a Creative Commons Attribution 4.0 International License 43