Inspiration- Millions of people with conditions like Thalassemia and blood cancer require frequent, life-saving transfusions. Yet, finding available blood units nearby is often chaotic, unreliable, and time-consuming. I wanted to create a tool that could:

Simplify access to blood availability data

Use AI to assist in donor-donee matching (future expansion)

Bridge the gap between users and real-time blood bank data

The idea was born from a real-world healthcare challenge—how do we quickly find the nearest available unit of a specific blood type?

What it does

BloodLink.AI is a web app where users can:

Geocode any address into coordinates

Check blood bank stock in real-time (or simulated data)

Use a clean, responsive UI built with modern tech

Communicate seamlessly with a Python backend

(Coming soon): Match donors with AI based on features

How we built it

The project has a frontend–backend architecture:

Frontend React.js (with Vite)

Tailwind CSS for styling

Connects to backend APIs using fetch

Backend Flask web server

Flask-CORS for CORS handling

API endpoints for:

geocode_address: Uses OpenCage API to convert address → latitude/longitude

blood_stock: Simulates or scrapes blood stock info (from e-RaktKosh)

AI Component (WIP) TensorFlow model trained to rank donors based on:

Distance

Blood type compatibility

Urgency level

Challenges we ran into

CORS conflicts between frontend (localhost:5173) and backend (localhost:5000)

Managing frontend routing and Vite build system

API key handling and rate limits

Setting up TensorFlow with Python (version compatibility!)

e-RaktKosh scraping challenges (page load delay, form POST issues)

Accomplishments that we're proud of

Successfully built a full-stack AI-powered app in a short timeframe, connecting a React frontend with a Flask backend.

Resolved major CORS and integration issues, enabling smooth communication between different servers and ports.

Integrated TensorFlow AI model into a real-time web application—a big leap from just a Python script!

Created a clean and functional interface to access critical blood bank data, which can potentially save lives.

Designed the app to be modular and scalable, with clear separation between frontend, backend, and AI logic.

Learned and applied API geocoding, form validation, and async frontend workflows.

Built the entire project with self-configured environments, without relying on Docker or Anaconda GUI tools.

What we learned

Connecting React frontend to Flask backend locally

Solving CORS errors and using flask_cors

How to build and structure full-stack apps

Scraping data and handling dynamic HTML requests

Building AI pipelines using TensorFlow and model integration

What's next for BloodLink.AI

Add login + donor registry

Integrate real-time donor availability

Push to cloud / Dockerize

Build native app with React Native or Flutter

Add map info from the exact location to closest center for blood bank stock

Built With

  • api
  • css
  • e-raktkosh
  • flask
  • flask-cors
  • geocoder
  • india)
  • mohfw
  • opencage
  • react.js
  • tailwind
  • tensorflow
Share this project:

Updates