LifeFlow is a modern, responsive, and offline-resilient web application designed to connect blood donors, recipients, hospitals, and camp organizers. Built with React, TypeScript, Supabase, and styled with custom premium Tailwind CSS, it features E2E automated test coverage and interactive widgets.
🌐 Production Link: https://life-flow-amber-ten.vercel.app/
- Recipient & Donor Views: Toggle between "Can Receive From" and "Can Give To" perspectives.
- Smart Antigens Visualization: Interactively select any blood type grid button to highlight compatible matches with a red pulsing glow.
- Educational Explanations: Understand ABO/Rh antigen relationships (e.g., O- as the Universal Donor and AB+ as the Universal Recipient).
- Milestone Achievements: Unlock celebratory badges on your profile based on your donation contributions:
- 💧 First Drop: Awarded upon your first pledge or donation.
- ❤️ Life Saver: Awarded for completing 3 or more donations.
- 🏆 LifeFlow Hero: Awarded for 5 or more donations.
- ⭐ Universal Champion: Awarded to O- donors with a history of saving lives (3+ donations).
- Locked/Unlocked States: Unlocked badges glow dynamically with red/green gradient borders; locked badges remain in grayscale with a lock indicator.
- Split Layout Dashboard: Submit new blood requests on the left, and view active emergency requests on the right.
- Real-time Progress Bars: Track the percentage of units pledged versus needed.
- One-Click Pledges: Log a pledge to instantly increment the progress bar, generate a celebration toast, update your profile stats, and record a completed appointment in your donation history.
- Dynamic Maps: OpenStreetMap (via Leaflet) plots approved database camps alongside your locally created camps.
- Camp Organizer Dashboard: Host new camp drives with detailed location geocoding, contact details, and dates. View and track your hosted camps directly inside the Profile tab.
- Supabase Local Storage Fallbacks: If the database is unreachable, all personal details, donor opt-ins, scheduled appointments, hosted camps, and pledges fallback to a local storage transactional cache. They are automatically merged once connectivity resumes.
- Frontend: React 18, TypeScript, Vite, React Router DOM v6
- Database & Auth: Supabase (PostgreSQL, Row-Level Security, Auto-Profile Triggers)
- Styling: Tailwind CSS, Radix UI primitives, Lucide React icons
- Testing: Puppeteer (E2E headless browser testing)
- Maps: Leaflet & React-Leaflet v4 (React 18 compatible)
npm install --legacy-peer-depsnpm run devThe local server will spin up at http://localhost:8080.
To execute E2E headless Puppeteer tests (calculators, registration, profile settings, and pledge boards):
node scratch/test_automation.jsThe results will be written to scratch/test_report.json.
To hook the project up to your custom Supabase backend:
-
Paste SQL Script: Go to your Supabase Dashboard -> SQL Editor -> New Query, copy the contents of the
supabase/supabase_setup.sqlfile, and click Run. This creates all tables (profiles,donors,appointments,blood_donation_camps,blood_requests,feedback,blood_inventory,testimonials), sets up Row Level Security (RLS) policies, seeds data, and registers an auth trigger to automatically create profiles on user sign-up. -
Configure API Keys: Open
src/integrations/supabase/client.tsand add your project keys:const SUPABASE_URL = "YOUR_SUPABASE_PROJECT_URL"; const SUPABASE_PUBLISHABLE_KEY = "YOUR_SUPABASE_ANON_PUBLIC_KEY";
This project is optimized for deployment on Vercel:
- SPA Routing Rules: Configured inside
vercel.jsonto redirect all page refreshes (/*) toindex.htmlto prevent 404 errors. - Auto-deployments: Link your GitHub repository to Vercel for continuous integration and deployments on every push.