🩸 LifeFlow

One Platform. Every Drop Matters.

Explore a complete, login-free showcase of LifeFlow features across all rolesβ€”Donor, Hospital, Blood Bank, Organizer, and Emergency Requester. Toggle roles to see what each user experiences.

See Features
Accessibility
WCAG-friendly
Multi-language
English + Placeholder
No Backend
Pure static demo

View as

Switch roles anytime. Content is mock data for demonstration only.

Feature Highlights

A snapshot of what each role can do in LifeFlow. This static build simulates core flows so reviewers can evaluate UX without logging in.

Donor

  • Eligibility pre-screening (wizard)
  • Find & schedule drives
  • Donation history & next eligibility
  • Impact, badges, teams, leaderboards
  • Emergency request (quick)

Hospital

  • Place a blood request to blood banks
  • Direct donation appointments
  • Hospital blood inventory

Blood Bank

  • Inventory dashboards & updates
  • Approve / fulfill requests
  • Distribution logistics
  • Transport requests to hospitals
  • Approve community donations

Organizer (NGO)

  • Create & promote events
  • Manage donor signups & volunteers
  • Community leaderboard

Emergency Requester

  • Fast blood request form
  • Live status timeline
  • History of past requests

Cross-cutting

  • Multi-language toggle (demo)
  • Accessibility & dark mode
  • Consent & privacy center (static)

Built to mirror the full spec in the LifeFlow manual. Backend actions are simulated with local state only.

πŸ§‘β€πŸ€β€πŸ§‘

Donor Dashboard

Profile & Digital Donor ID

QR (static preview)

ID:
Name: β€’

Eligibility & Pre‑Screening

Find Donation Centers / Drives

πŸ†˜ Emergency Request (Quick)

Status:

Donation History

Impact & Badges

πŸ… πŸ₯‡ 🀝

Anonymized journey updates appear here after each donation.

πŸ₯

Hospital Dashboard

Place a blood request to blood banks

Track Requests

IDTypeUnitsUrgencyStatus

Direct Donation Appointments

  • πŸ“… 2025-09-21 β€’ Alex Donor (O+) β€’ 10:30
  • πŸ“… 2025-09-22 β€’ Priya Singh (AB-) β€’ 11:00

Hospital Blood Inventory

Donor Summaries (consented)

Shortage Alerts

  • O- (critical)Low
  • AB+Stable
πŸͺ

Blood Bank Dashboard

Inventory

Approve / Fulfill Requests

Req IDTypeUnitsUrgencyStatus

Analytics (demo)

Distribution Logistics (demo)

  • 🚚 Route: Bank β†’ City Hospital β€’ ETA 45m β€’ Temp 4Β°C
  • 🚚 Route: Bank β†’ Metro Center β€’ ETA 30m β€’ Temp 4Β°C

Transport Requests to Hospitals

Req IDHospitalTypeUnitsStatus
REQ-91K2ZCity HospitalO-2Pending
REQ-7ABCDMetro MedAB+1Approved

Approve Community Donations

EventDateOrganizerAction
Tech Park Drive2025-09-15Community Org
City Hall Marathon2025-10-05City NGO

Schedule Drives

🏒

Organizer Dashboard

Create Event

My Events

Community Leaderboard

  1. Tech Park Drive – 86 donors
  2. City Hall Marathon – 72 donors
  3. Campus Challenge – 55 donors

Volunteer Management

🚨

Emergency Blood Request

Quick Request Form

Live Status

Past Requests

FAQ

Is this connected to a backend?βŒ„

No. This is a static demo with simulated data and flows to help reviewers evaluate UX without login.

Can I switch roles on the fly?βŒ„

Yes. Use the role toggle on Home or the Dashboards page.

Is the data accurate?βŒ„

All data here is mock/demo. For production, integrate with real services and follow the full LifeFlow specification.