🩸 Blood Bank Management System

A modern web application connecting donors, hospitals, and blood banks

🚀 Live Demo • 📖 Documentation • 🐛 Report Bug

An academic project by IIT Jodhpur + LeapStart following SDLC & FRD principles

📖 Overview

The Blood Bank Management System is a comprehensive web application designed to streamline blood donation and distribution processes. Built as an academic mini-project, it demonstrates modern web development practices while addressing real-world healthcare challenges.

🎯 Problem Statement

Traditional blood bank management faces several challenges:

❌ Lack of real-time inventory visibility
❌ Inefficient communication between donors and hospitals
❌ Manual request tracking and approval processes
❌ No integration with public health infrastructure data

✅ Our Solution

A centralized platform that:

✨ Provides real-time blood availability tracking
🏥 Enables instant hospital blood requests
👥 Facilitates donor registration and management
📊 Integrates public health infrastructure data
🤖 Offers AI-powered assistance via chatbot

🌟 Key Features

1. 🏠 Interactive Homepage

Real-Time Blood Inventory Dashboard

📊 Live blood availability for all blood groups (A+, A-, B+, B-, O+, O-, AB+, AB-)
🔍 Smart filtering by blood group
📈 Visual status indicators (OK / Low / Critical)
🔄 Auto-updates from Firebase Firestore

Public Health Integration

🏥 State-wise hospital and bed capacity data
📡 Integration with Rootnet COVID-19 Hospitals & Beds API
📊 Hospital load indicators
🗺️ Rural vs Urban distribution stats

Navigation Hub

Quick access to Donor Registration
Hospital Portal entry
Admin Panel login

2. 👥 Donor Module

Smart Registration System

📝 Comprehensive donor information capture:
- Personal details (Name, Age, Gender)
- Contact info (Phone, Email, City)
- Blood group selection
- Last donation date tracking
- Current availability status

Intelligent Validation

✅ Age verification (≥18 years)
✅ Email format validation
✅ Phone number validation
✅ Date consistency checks
✅ Mandatory field enforcement

User Experience

🎨 Clean, intuitive interface
⚡ Real-time validation feedback
✉️ Success confirmation messages
📱 Mobile-responsive design

3. 🏥 Hospital Portal

Secure Authentication

🔐 Firebase Authentication (Email/Password)
🆕 New hospital registration
🔑 Secure login system
👤 Session management

Comprehensive Dashboard

Request Management

📋 Create blood requests with:
- Blood group specification
- Units required
- Patient information/reason
- Urgency level
📊 Real-time request tracking
🔔 Status notifications

Request Tracking

📈 View all submitted requests
🕐 Timestamp tracking
🎯 Status monitoring (Pending/Approved/Rejected)
📄 Detailed request history

Availability Checker

🔍 Real-time inventory view
📊 Stock levels per blood group
⚠️ Low stock alerts
📈 Availability trends

4. 🛡️ Admin Panel

Administrative Authentication

🔐 Secure admin login
👨‍💼 Role-based access control
🔒 Protected routes

Inventory Management

📦 Manage stock for all blood groups
➕ Add/Update units
💾 Instant Firestore sync
📊 Visual stock indicators

Request Administration

📋 View all hospital requests
✅ Approve/Reject requests
📝 Update request status
👀 Monitor system activity
📊 Request analytics

5. 🤖 AI-Powered Chatbot

Smart Assistant - "BloodBot"

💬 Floating chat interface
🧠 Rule-based natural language understanding
❓ Common queries support:
- Donor registration process
- Hospital request procedures
- Admin panel features
- Blood availability checks
- Eligibility criteria

Features

🎯 Context-aware responses
📱 Non-intrusive design
🚀 Instant help access
🌐 Available on all pages

📸 Screenshots

Homepage Dashboard

Real-time blood inventory and public health integration

Hospital Portal

Secure hospital authentication and request management

Admin Panel

Comprehensive inventory and request management

🏗️ System Architecture

Architecture Diagram

┌─────────────────────────────────────────────────────────┐
│                    Frontend Layer                        │
│   HTML5 + CSS3 + Vanilla JavaScript (Static Site)       │
└───────────────────┬─────────────────────────────────────┘
                    │
        ┌───────────┼───────────┐
        │           │           │
┌───────▼──────┐ ┌──▼──────┐ ┌─▼────────────────┐
│   Firebase   │ │Firebase │ │  Rootnet API     │
│     Auth     │ │Firestore│ │ (Public Health)  │
└──────────────┘ └─────────┘ └──────────────────┘
        │           │           │
        └───────────┴───────────┘
                    │
        ┌───────────▼───────────┐
        │   Vercel Hosting      │
        │  (Static + Functions) │
        └───────────────────────┘

Technology Stack

Layer	Technology	Purpose
Frontend	HTML5, CSS3, JavaScript (ES6+)	User interface and interactions
Authentication	Firebase Authentication	User login and security
Database	Firebase Firestore	Real-time data storage
External API	Rootnet Hospitals API	Public health data
Hosting	Vercel	Static hosting and serverless functions
Version Control	Git + GitHub	Source code management
Development	VS Code, Ubuntu/VirtualBox	Development environment

Data Architecture

Firestore Collections

1. Inventory Collection

inventory/{bloodGroup}
{
  group: "A+",
  units: 45,
  lastUpdated: Timestamp,
  status: "OK" | "Low" | "Critical"
}

2. Blood Requests Collection

blood_requests/{requestId}
{
  hospitalId: "hospital@example.com",
  bloodGroup: "O+",
  units: 5,
  reason: "Emergency surgery",
  status: "Pending" | "Approved" | "Rejected",
  createdAt: Timestamp,
  updatedAt: Timestamp
}

3. Hospitals Collection

hospitals/{hospitalId}
{
  email: "hospital@example.com",
  name: "City Hospital",
  address: "123 Main St",
  phone: "+91-XXXXXXXXXX",
  registeredAt: Timestamp
}

📁 Project Structure

blood-bank-app/
├── assets/
│   ├── admin-page.png              # Admin panel screenshot
│   ├── logo.png                    # Application logo
│   ├── hospital_login.png          # Hospital portal background
│   ├── hospital_page.png           # Hospital portal screenshot
│   ├── adminpage-background.png    # Admin panel background 
│   ├── mainlogo.png                # Main Application logo
│   └── homepage_screenshot.png     # Homepage screenshot
│
├── css/
│   └── styles.css                  # Global styles and themes
│
├── js/
│   ├── app.js                      # Homepage logic (availability + API)
│   ├── donor.js                    # Donor form validation
│   ├── hospital.js                 # Hospital portal logic
│   ├── admin.js                    # Admin panel logic
│   └── chatbot.js                  # Floating chatbot functionality
│
├── index.html                      # Homepage
├── donor_register.html             # Donor registration page
├── hospital_portal.html            # Hospital login + dashboard
├── admin_panel.html                # Admin login + dashboard
├── README.md                       # This file
└── LICENSE                         # MIT License

🚀 Getting Started

Prerequisites

Before you begin, ensure you have:

✅ Node.js (v14 or higher) - Optional, for local server
✅ Firebase Account (free tier works)
✅ Git installed on your system
✅ Modern Web Browser (Chrome, Firefox, Edge)

1️⃣ Clone the Repository

git clone https://github.com/yourusername/blood-bank-app.git
cd blood-bank-app

2️⃣ Firebase Setup

Create Firebase Project

Go to Firebase Console
Click "Add Project"
Enter project name: blood-bank-management
Follow the setup wizard

Enable Authentication

Navigate to Authentication → Sign-in method
Enable Email/Password authentication
(Optional) Enable Google sign-in

Create Firestore Database

Navigate to Firestore Database
Click "Create Database"
Start in production mode
Choose your region

Configure Security Rules

In Firebase Console → Firestore → Rules:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    
    // Public can READ inventory, only authenticated can WRITE
    match /inventory/{group} {
      allow read: if true;
      allow write: if request.auth != null;
    }

    // Hospital and Admin can manage requests
    match /blood_requests/{requestId} {
      allow read, write: if request.auth != null;
    }

    // Hospital profiles
    match /hospitals/{hospitalId} {
      allow read, write: if request.auth != null;
    }

    // Default deny
    match /{document=**} {
      allow read, write: if false;
    }
  }
}

Get Firebase Configuration

Go to Project Settings → General
Under "Your apps", select Web (</> icon)
Copy the configuration object

Update Application Files

Update hospital_portal.html and admin_panel.html:

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_PROJECT_ID.appspot.com",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID"
};

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
}

3️⃣ Run Locally

Option A: VS Code Live Server

Open project in VS Code
Install Live Server extension
Right-click index.html → Open with Live Server
Navigate to http://127.0.0.1:5500/

Option B: Python HTTP Server

# Python 3
python -m http.server 8000

# Then open http://localhost:8000/

Option C: Node.js HTTP Server

npx http-server -p 8000

4️⃣ Initial Setup

Create Admin Account

Go to Firebase Console → Authentication → Users
Click "Add User"
Create admin account:
- Email: admin@bloodbank.com
- Password: Choose a secure password

Initialize Inventory

Visit /admin_panel.html
Login with admin credentials
Set initial units for each blood group (e.g., 50 units each)
Click "Save" for each blood group

🌐 Deployment

Deploy to Vercel

1. Push to GitHub

git add .
git commit -m "Initial commit"
git push origin main

2. Import to Vercel

Go to Vercel Dashboard
Click "New Project"
Import your GitHub repository
Configure:
- Framework Preset: Other
- Build Command: (leave empty)
- Output Directory: .
- Install Command: (leave empty)

3. Configure Firebase

In Firebase Console → Authentication → Settings → Authorized domains:

Add your Vercel domain: https://blood-bank-xi-eight.vercel.app

4. Deploy

Click "Deploy" and wait for build completion.

Your app will be live at: https://blood-bank-xi-eight.vercel.app

📖 User Guide

For Donors

Register as Donor
- Visit homepage → Click "Donor Registration"
- Fill in personal details
- Select blood group
- Submit form
Update Availability
- Return to registration page
- Update availability status
- Re-submit form

For Hospitals

Register Hospital
- Visit "Hospital Portal"
- Click "Register New Hospital"
- Enter credentials
- Complete registration
Request Blood
- Login to hospital portal
- Navigate to "Request Blood Units"
- Fill in requirements
- Submit request
Track Requests
- Go to "Track Request Status"
- View all submitted requests
- Monitor approval status
Check Availability
- Visit "View Availability"
- See real-time stock levels
- Plan requests accordingly

For Administrators

Login
- Visit "Admin Panel"
- Enter admin credentials
- Access dashboard
Manage Inventory
- View current stock
- Update units for each blood group
- Save changes
Process Requests
- Review all hospital requests
- Approve or reject based on availability
- Update request status

🔒 Security Best Practices

Implemented Security Measures

✅ Firebase Authentication - Secure user login
✅ Firestore Security Rules - Role-based access control
✅ Client-side Validation - Input sanitization
✅ HTTPS Only - Encrypted communications
✅ Session Management - Automatic timeout

Recommendations for Production

⚠️ Enable reCAPTCHA for registration forms
⚠️ Implement rate limiting on API endpoints
⚠️ Add email verification for new accounts
⚠️ Set up monitoring and alerts
⚠️ Regular security audits of Firestore rules

🗺️ Project Roadmap

✅ Phase 1 - MVP (Completed)

Basic homepage with blood availability
Donor registration module
Hospital portal with authentication
Admin panel for inventory management
Request tracking system
Public health API integration
Floating chatbot

🚧 Phase 2 - Enhancements (In Progress)

🔮 Phase 3 - Advanced Features (Planned)

AI-powered demand prediction
Blockchain for donation tracking
IoT integration for blood storage monitoring
Multi-language support
PWA support for offline access
Integration with government health systems

📊 System Metrics

Current Capabilities

🩸 8 Blood Groups supported (A+, A-, B+, B-, O+, O-, AB+, AB-)
🏥 Unlimited Hospitals can register
👥 Unlimited Donors can register
⚡ Real-time inventory updates
📊 State-wise hospital data (28 states + 8 UTs)

Performance Benchmarks

⚡ Page Load Time: < 2 seconds
🔄 Real-time Sync: < 500ms
📱 Mobile Responsive: Yes
🌐 Browser Support: Chrome, Firefox, Safari, Edge

🤝 Contributing

We welcome contributions from the community!

How to Contribute

Fork the repository
Create a feature branch
```
git checkout -b feature/AmazingFeature
```
Commit your changes
```
git commit -m "Add some AmazingFeature"
```
Push to the branch
```
git push origin feature/AmazingFeature
```
Open a Pull Request

Development Guidelines

Follow existing code style
Add comments for complex logic
Test thoroughly before submitting
Update documentation as needed

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

MIT License

Copyright (c) 2025 Blood Bank Management Team

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction...

👥 Development Team

Project Developers

_{kellampalli Saathvik}
_{Backend, API, Deployment}

_{Bashamoni Shiva Kumar}
_Developer

_{Ashwith Thatipally}
_{UI/UX Designer}

_{Abhishek Singh}
_{UI/UX Designer}

_{Akash Akula}
_{Quality Assurance & Testing}

Project Mentors

Academic Institution: IIT Jodhpur x LeapStart
Industry Mentor: Sai Ram Bingi

🙏 Acknowledgments

Special thanks to:

IIT Jodhpur & LeapStart - For providing the learning platform
Firebase Team - For excellent BaaS infrastructure
Rootnet - For public health API access
Vercel - For seamless deployment
Open Source Community - For tools and inspiration
Healthcare Professionals - For domain expertise

📞 Support & Contact

Need Help?

🐛 Bug Reports: GitHub Issues
💬 Discussions: GitHub Discussions

Frequently Asked Questions

Q: Is this system ready for production use?
A: This is an academic project for demonstration. For production use, additional security, compliance, and testing are required.

Q: Can I use this for my institution?
A: Yes! This project is open-source under MIT License. Feel free to fork and customize.

Q: How do I report security vulnerabilities?
A: Please email security@example.com directly rather than opening a public issue.

⚠️ Important Disclaimer

This is an ACADEMIC PROJECT developed for educational purposes only.

⚠️ NOT intended for real medical or clinical use
⚠️ NOT compliant with healthcare regulations (HIPAA, etc.)
⚠️ NOT tested for production deployment
⚠️ NOT certified by any medical authority

For demonstration and learning purposes only.

📚 Additional Documentation

📄 FRD Document - Functional Requirements Specification
📊 Case Study - Problem analysis and solution design
🔄 DevOps Workflow - CI/CD pipeline documentation
🏗️ Architecture Design - System architecture diagrams
📖 API Documentation - Endpoint specifications
🧪 Testing Report - QA and test results

📈 Project Stats

⬆ Back to Top

Made with ❤️ for saving lives

Website • GitHub • Issues

"Every drop counts. Every second matters."

Name		Name	Last commit message	Last commit date
Latest commit History 31 Commits
blood-bank-app		blood-bank-app
project-assets		project-assets
.DS_Store		.DS_Store
README.md		README.md

Folders and files

Latest commit

History

Repository files navigation