RedPulse

Inspiration

During emergency medical situations local hospitals frequently experience unexpected blood shortages especially for rare blood types. Current methods involves sharing donor's phone numbers which can lead to spam calls and privacy violations. I built RedPulse to establish a privacy first, direct line of communication between hospital command centers in crisis and nearby community members ready to respond immediately.

What it does

RedPulse is an anonymous, real-time emergency blood donation web network which has dual dashboard access:

Clinic Command Center: Hospital staff dispatch targeted broadcast alerts specifying required blood type, urgency level (Urgent vs. Critical), units needed, hospital location, and deadline hours.
Real-time Emergency Broadcasts: Nearby community donors receive live, color-coded emergency request cards on their dashboard without needing to refresh the page.
One-Click Reservation & Anonymity: Donors click "I Can Donate" to reserve a spot anonymously. The platform generates a unique Digital Match Pass (e.g., #RP-7733) and provides turn-by-turn navigation via Google Maps directly to the hospital intake desk.
Live Command Center Tracking: As donors commit, the hospital dashboard updates en-route counts in real time and transitions status badges (OPEN -> EN ROUTE -> CLOSED).
On-Site Desk Verification: Hospital staff enter the donor's match pass ID upon arrival to verify intake and close out the request.

How we built it

Frontend UI/UX: Built using HTML5, CSS3 (modern glassmorphism, custom CSS variables, and OKLAB dynamic color badges), and modular Javascript (ES6+ Modules).
Real-time Backend & Database: Powered by Firebase Realtime Database using WebSockets (onChildAdded, onChildChanged) and transactions (runTransaction) to handle donor reservations safely without race conditions.
Navigation Integration: Google Maps URL scheme for turn-by-turn donor routing.

Challenges we ran into

Overcoming DOM-Rendering Race Conditions: Deploying our ES module codebase to fast static CDNs like Vercel initially caused race conditions—module scripts evaluated before the DOM fully loaded, resulting in null queries and broken Firebase listeners. We resolved this by dynamically querying DOM nodes inside function execution scopes rather than at the top level.
Preventing Data Collisions with Atomic Transactions: In a fast-moving emergency scenario, multiple donors might attempt to click "I Can Donate" for the same hospital request simultaneously. Using standard database read/write operations would lead to race conditions and desynchronized enRouteCount values. We resolved this by implementing Firebase runTransaction calls to guarantee safe, atomic counter increments across concurrent user sessions.
Balancing Complete Anonymity with Real-Time Tracking: Designing a privacy-first workflow without compromising operational utility for medical staff was critical. Traditional community blood drives often leak personal contact info (like phone numbers) into public chat groups, leading to spam and privacy breaches. We engineered a dual-system UI where personal contact details are completely shielded behind a dynamically generated Digital Match Pass (#RP-XXXX), allowing real-time status updates (OPEN -> EN ROUTE -> CLOSED) on clinic command center screens without ever exposing donor identity.

Accomplishments that we're proud of

Flawless Real-Time Synchronization: We successfully built a live dual-interface platform where hospital dispatch alerts and donor commitments sync instantly across screens without requiring page refreshes or complex polling.
Privacy-First Engineering: We designed a functional healthcare network that solves the pervasive problem of donor contact leaks. By engineering the Digital Match Pass (#RP-XXXX) system, we proved that emergency medical logistics can be fast and reliable without collecting or exposing personal phone numbers to public chat groups or databases.
Resilient Concurrency & DOM Architecture: We overcame difficult static hosting CDN timing issues and race conditions by implementing Firebase atomic transactions and DOM-guarded initialization, ensuring our app runs smoothly on live production deployments like Vercel.
Clean, High-Contrast UI/UX: We designed an intuitive, accessible glassmorphism dark-mode interface with clear urgency badging and color coded statuses so medical staff and donors can process critical emergency information in seconds.

What we learned

Managing dynamic DOM lifecycles and module initialization timing across static web hosts.
Implementing atomic transactions in Firebase Realtime Database to prevent race conditions.
Designing privacy-first, user-friendly emergency healthcare flows for local community impact.

What's next for RedPulse

Migration to React & Component Architecture: Refactor the current ES Module codebase into a React architecture. This will enable component-driven UI development, cleaner state management via custom hooks for Firebase listeners, and seamless integration with modern component libraries.
Push Notification & SMS Gateway: Integrate Twilio or Web Push APIs to alert registered donors via SMS or mobile alerts instantly when a matching blood type emergency is broadcast in their immediate vicinity.
Hospital Verification Portal & OAuth: Add dedicated healthcare provider authentication so verified medical institutions can manage staff accounts securely and streamline intake desk operations.
Eligibility Tracker: Build an automated donation cooldown timer (e.g., 56 days for whole blood donations) that tracks when a volunteer is safely eligible to donate again, ensuring donor health and safety.

AI-Use Disclosure

AI Usage Statement: I used AI coding assistant (Gemini) to aid in brainstorming app architecture, debugging asynchronous Firebase Realtime Database listeners (onChildAdded, onChildChanged, runTransaction), optimizing CSS glassmorphism styles, and reviewing code for race conditions.