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
Log in or sign up for Devpost to join the conversation.