Legend281/vitalpulse

VitalPulse is a real-time blood donation coordination platform for Cameroon connecting donors, hospitals, blood banks, and admins during emergencies. Features include smart donor matching, emergency broadcasts, hospital verification, blood inventory tracking, and real-time dashboards powered by Firebase. # VitalPulse - Cameroon Blood Donation Coordination System *Comprehensive Technical & Product Documentation* ## 1. Project Overview & Architecture **VitalPulse** is a mission-critical, real-time coordination web application designed specifically for Cameroon's healthcare infrastructure. It connects verified hospitals, eligible blood donors, and urgent blood requests. The project is structured as a Single Page Application (SPA) driven by Vanilla JavaScript and ESM modules. It employs a **Firebase backend** for real-time capabilities and a **Vite/Tailwind** stack for a highly optimized, low-data frontend footprint. ### Repository Structure The project root `BDMS` is split into two primary components: 1. **`stitch_lifestream_cameroon_coordination_system/`**: The design system repository containing the PRD (`project_prd_blood_donation_system.md`) and high-fidelity prototype folders including: - `admin_panel`, `donor_dashboard`, `donor_management` - `hospital_dashboard_1`, `hospital_dashboard_2` - `login_page`, `signup_page`, `vitalpulse_home_page`, `vitalis_cameroon` - Specific component designs like `new_batch_arrival_modal` and `urgent_request_modal`. 2. **`vitalpulse_app/`**: The live codebase. --- ## 2. Technical Stack Deep-Dive - **Frontend Core:** HTML5, CSS3, Vanilla JavaScript. - **Bundler:** Vite (configured in `vite.config.js`). - **Styling:** Tailwind CSS v4. - The `tailwind.config.js` is highly customized for a healthcare theme. It defines specific color tokens like `primary` (`#af101a`), `primary-container` (`#d32f2f`), `secondary` (`#9f3f39`), `tertiary` (`#005f7b`), and surfaces (`#f9f9f9`). - It utilizes `@tailwindcss/forms` and `@tailwindcss/container-queries` plugins. - Fonts: *Manrope* for headlines, *Inter* for body text. - **Database & Auth:** Firebase v12 (Firestore & Firebase Auth). - **Data Visualization:** Chart.js (v4.5.1) for dashboard analytics. --- ## 3. Database Schema (Firestore Collections) The application uses Firebase Firestore …