BloodKonnekt

Inspiration

BloodKonnekt was born from a deeply personal experience. My mother urgently needed surgery, but her blood level was dangerously low. Before she could go into the operating room, she needed a blood transfusion. Her blood type ,O negative is rare, and the hospital didn’t have any in stock. I had seen people share posters asking for blood donors before, but I never truly understood the struggle until I was the one creating those posters.

I reached out to communities I’m part of, but the process was difficult and slow. Some willing donors were too far away to help. In that moment of fear and helplessness, I thought, “What if there was just one platform, just one, where people could request blood and instantly see nearby donors ready to help?” That’s when the idea for BloodKonnekt was born.

What it does

BloodKonnekt is a smart, real-time platform that connects blood donors with recipients and healthcare organizations anywhere, anytime. It acts as a central hub where individuals can request blood based on blood type, urgency, and location, and get matched with compatible, nearby donors instantly.

The platform supports both individual users and organizations like hospitals, NGOs, and blood banks. It allows them to:

1. Create and respond to blood requests in real time
2. Run and manage donation campaigns
3. Track active donors and requests on a live map
4. Send and receive alerts for urgent needs
5. View and update blood inventory levels
6. Collect feedback and build trust in the donation community
7. Use the app even in low-connectivity areas through offline support

BloodKonnekt bridges the gap between those in need and those who can help, using technology to save lives with speed, transparency, and trust.

How we built it

BloodKonnekt was built using Bolt.new and a modern, real-time tech stack to prioritize speed, reliability, and accessibility especially in emergencies where every second counts. The platform works even in low-connectivity areas and enables smart, location-based donor matching. Our goal was to create a seamless experience for individuals and healthcare organizations to request and manage blood donations in real time.

Tech Breakdown Frontend React + Vite: For fast, component-based UI and rapid build times Tailwind CSS: Utility-first styling for responsive, modern UI Redux Toolkit: Predictable, centralized state management React Query: Handles API calls, caching, and data syncing React Router DOM: Smooth client-side navigation Lucide React: Icon system for a clean visual interface

Backend & Database Supabase: Handles:

• Authentication (user login, roles)
• PostgreSQL database with Row Level Security
• Real-time updates via Supabase Realtime

Supabase Edge Functions (TypeScript/Deno):

• Smart donor matching logic
• Campaign tracking
• Data encryption & analytics processing

Geospatial queries using PostgreSQL (with PostGIS-style features) for mapping donors, requests, and hospitals

Offline Functionality (PWA)

• vite-plugin-pwa: Enables installable app and offline access
• Service Worker: Caches static assets and API calls ('public/service-worker.js')
• IndexedDB: Stores offline user data + syncs when back online ('src/utils/offlineStorage.ts')

Development Tools Mock API & Data: Used for frontend testing ('src/data/mockData.ts', 'src/services/api.ts') This allowed us to iterate quickly while backend logic was still being developed.

Challenges we ran into

Building BloodKonnekt involved several complex challenges, particularly in areas critical for a healthcare-related platform:

1. Offline-First and Data Synchronization: Implementing robust offline capabilities was a significant challenge. This involved designing a system to store and manage pending user actions (like creating requests or updating profiles) locally using IndexedDB, and then reliably synchronizing these changes with the Supabase backend when the user regained internet connectivity. Handling potential data conflicts during this synchronization process, deciding whether client-side or server-side data should prevail, added another layer of complexity.

2. Complex Authentication and Authorization (Row Level Security): Managing different user roles (individual, organization, admin) and ensuring that each user could only access or modify data they were authorized for required intricate Row Level Security (RLS) policies within Supabase. This was crucial for data privacy and security, especially with sensitive information.

3. Real-time Geospatial Matching and Alerts: Developing the core functionality of matching blood donors with recipients based on blood type, urgency, and real-time location was technically demanding. This involved creating efficient geospatial queries and algorithms within Supabase Edge Functions to quickly identify compatible matches and then sending immediate, targeted alerts to relevant users. HIPAA/GDPR Compliance and Data Security: Ensuring the platform adhered to strict healthcare data privacy regulations like HIPAA and general data protection regulations like GDPR was paramount. This necessitated implementing comprehensive audit logging for all sensitive actions, encrypting patient data, and carefully managing data access and retention policies.

4. Performance Optimization for Edge Functions: Achieving low-latency responses for critical operations, such as listing nearby blood banks or performing donor matching, required significant optimization of Supabase Edge Functions. This involved implementing caching strategies and fine-tuning queries to meet stringent performance requirements.

Accomplishments that we're proud of

We’re proud of several key milestones in building BloodKonnekt:

1. Offline-First Design: Built robust offline support with smart sync and conflict resolution for low-connectivity environments.
2. Real-Time Matching & Alerts: Enabled instant, location-based donor-recipient matching using Supabase Edge Functions and geospatial logic.
3. Security & Compliance: Achieved HIPAA/GDPR-level data protection with end-to-end encryption, audit logging, and strict Row Level Security (RLS).
4. Scalable Backend: Designed a high-performance, serverless backend for matching, inventory updates, and notifications.
5. User Engagement Features: Integrated live tracking, profile management, campaign tools, and trust-building feedback systems.
6. Advanced Analytics: Developed real-time dashboards to track requests, donations, campaigns, and platform usage.
7. PWA Ready: Delivered a seamless, app-like experience with offline use, installability, and push notifications.

What we learned

Building BloodKonnekt taught us several key lessons:

1. Serverless Speeds Up Development: Supabase Edge Functions enabled us to deploy complex backend logic like donor matching and inventory updates quickly and at scale, without managing servers.
2. Offline-First Is Complex but Crucial: Designing offline support with reliable sync and conflict resolution required careful planning with IndexedDB, pending queues, and reconnection logic.
3. Security Must Be Baked In: Handling sensitive health data meant prioritizing HIPAA/GDPR compliance from day one encrypting data, enforcing RLS, and logging every sensitive action.
4. Geospatial Data is Powerful (and Tricky): Accurate, real-time matching depended on mastering location data handling, distance calculations, and spatial indexing for performance.
5. Real-Time Requires Architecture Finesse: Features like live tracking and instant alerts demanded thoughtful use of WebSockets and realtime databases to ensure reliability at scale.
6. Design for Urgency and Trust: Life-saving platforms need frictionless, trustworthy UX. We focused on clarity, streamlined flows, and fail-safe UI behavior to support users under pressure.
7. Iterate Quickly, Adapt Often: An agile, feedback-driven approach allowed us to evolve rapidly and address challenges as they emerged leading to a more resilient and effective product.

What's next for BloodKonnekt

We’re preparing to launch our Alpha Test with a group of early users who participated in our survey. Their feedback has guided our development, and they’ll be the first to test the platform in real-world scenarios.

Next, we’re focused on:

• Activating More Core Features including advanced campaign tools, hospital dashboards, and improved donor tracking and finetuning on existing features
• Launching our testnet to the users who participated in the survey and the public
• Rolling Out Our Go-To-Market (GTM) Strategy, targeting user acquisition and ecosystem growth.
• Engaging Existing Communities as key partners to amplify reach, build grassroots support, and accelerate adoption.
• Forging Partnerships with hospitals, NGOs, and blood banks to integrate BloodKonnekt into real healthcare workflows.
• Scaling Awareness and Education through digital campaigns, events, and community engagement to normalize digital blood donation networks.

Built With

• browser-geolocation
• browser-geolocation-for-the-geolocation
• database-supabase
• framework-react?+?vite
• leaflet.js
• lucide-react
• post-css
• post-css-for-styling
• react+vite
• react-leaflet
• supabase
• tailwind
• typescript