back to the dossier — File 00
File 121 // Deployment — Live in Production

When every minute counts,
someone nearby says yes

One Drop is a volunteer blood-donor network for Bangladesh — a student initiative of Notre Dame College, Batch 27. A family posts an emergency, the board counts down live, and matching donors surface nearest-first by blood group, district and distance. I designed and built the whole platform: the donor directory, the emergency board, the moderation workspace and the privacy model behind all of it.

LIVE IN PRODUCTION PWA · OFFLINE-FIRST FIREBASE + FIRESTORE ZERO FRAMEWORK 70 AUTOMATED CHECKS FREE FOREVER
Open One Drop Live Read the Source Try the Matcher
RoleProduct design · front-end · Firestore rules · moderation flow
StackVanilla HTML/CSS/ES modules · Firebase auth · Cloud Firestore · GitHub Pages
StatusLive · installable PWA · student-run
Scale today8 blood groups · 12 districts · every request carries a countdown
donor-net · live matching feed · simulated for this page
▸
One Drop logo
ONE DROPDONOR NETWORK · NDC B27
LIVE
AVAILABLE DONORS48
OPEN REQUESTS6
DISTRICTS COVERED12
REVEALS LEFT / HR25
◉ LIVE EMERGENCY BOARDreal-time
O−Dhaka Medical College Hospital01:42:18
4 donors matchednearest 1.4 kmalerted ✓
Rakib H.O−1.4 km
Dhanmondi · Dhaka01•••-•••52
Tanvir A.O−2.9 km
Mohammadpur · Dhaka01•••-•••18
Sadia K.O+4.3 km
Mirpur · Dhaka01•••-•••77
numbers never in the markup · 25 reveals / hour · no sign-up to search · works offline once installed
↑ the real interface — tap a blood group, then run the matcher below
// THE PROBLEM

In an emergency, finding blood in Bangladesh still runs on Facebook groups and phone trees. A family learns at 9 pm that a parent needs O− by morning, then starts calling strangers from a screenshot three months old. Lists go stale, donors sit 40 km away when a match lives on the next street, and phone numbers are posted in public — which is exactly why many willing donors quietly stop listing themselves at all.

// THE APPROACH

I built it the way a security engineer builds anything: store the minimum, verify what you show, and let the rules — not the interface — enforce the boundary. Anonymous Firebase sessions mean a donor never hands over an email or a password. Every listing is bound to its own UID, and Firestore rules allow writes only to your own record, over an allowlisted field set. Phone numbers are never rendered in the directory markup: they are fetched on demand, one tap at a time, and every browser is capped at 25 reveals an hour. Matching is distance-first, with the district centroid as an honest fallback when GPS is denied.

// THE RESULT

A live, installable PWA that the whole network can use with zero onboarding: search without signing up, alert volunteers within seconds, and a moderation workspace where moderators can approve, verify and publish — but never delete or edit a record. That limit lives in the security rules, not in a hidden button. Seventy automated checks run against a local server with every Google host blocked, so the offline path, the demo dataset and the privacy guarantees are proven on each change — and nothing in the test suite ever touches the live project.

Group + distance matchingSearch by blood group, filter by district, sort by distance — nearest possible help surfaces first, with the compatibility chart one tap away.
Live emergency boardRealtime listeners keep requests on screen the second they are posted, each with its own countdown and an honest status flow: active → fulfilled → cancelled / expired.
Privacy by defaultNo number in the markup, no number in a screenshot. Reveal is per-tap, rate-limited to 25/hour per browser, and GPS stays optional.
Rules-enforced moderationOwner vs moderator split with changedOnly() field restrictions and an audit trail — a moderator account physically cannot delete a donor.
Offline-first PWAVersioned app-shell cache, a dedicated offline page, home-screen install, and a clearly-marked demo dataset instead of a blank screen when Firestore is unreachable.
No surveillanceNo third-party analytics, no ads, no cookies. One anonymous analytics write per visitor per day, and a public privacy policy that says exactly what is stored — and what never is.
File 121 · Interactive // The matcher
Find a donor in three taps

This is the live matching logic — group compatibility, district filter, nearest-first ordering and the reveal rate-limit — running on a simulated dataset. No real donor appears on this page.

TRY THE MATCHER// same rules as donors.html · simulated donors
PATIENT NEEDS
HOSPITAL DISTRICT
MATCH MODE
CONTACT REVEALS
25 / 25 left this hour
demo numbers are placeholders — the live site reveals a real number only after an explicit tap.
File 121 · Build Notes
Engineering decisions
Identity

Anonymous Firebase sessions: a donor can list themselves, edit their listing and log a donation without ever creating an account. The listing is scoped to that anonymous uid, so my-donor.html can only ever touch its own record.

Read vs reveal

The directory query returns name, group, district and an approximate distance — never a phone number. Contact is a separate, deliberate action: one tap, one number, 25 an hour per browser, which is what keeps scrapers and spam out of the network.

Authorisation

Moderation is a role, not a UI state. Moderators can approve requests, verify donors and publish notices, restricted by changedOnly(...) so nothing else in a document can be modified. Deletes belong to the owner account alone — and the rules are published in the repo, so anyone can audit them.

Location

GPS is optional and never shared raw. The public UI shows only a distance; without GPS the app falls back to the district centroid, which is honest about its accuracy instead of pretending to be precise.

Failure modes

If Firestore cannot be reached, the app keeps working from cache; if there is no cache at all, a clearly-labelled demo dataset renders so a visitor is never met with an empty page — and never mistakes demo data for a real donor.

Measurements

Daily counters (visits, requests posted, registrations) are written anonymously — one write per visitor per day. No third-party analytics, no ad pixels, no cookie banner, because there is nothing to consent to. Requests queued offline sync when the connection returns.

foysal@kali:~/onedrop — npm test (all Google hosts blocked)
▶ tests/e2e.js — 51 checks passing
  ✔ directory never renders a phone number
  ✔ the 26th "Show contact" within an hour is refused
  ✔ compatibility chart matches the blood-bank matrix
  ✔ demo dataset renders when Firestore is unreachable
  ✔ emergency board sorts by distance, then newest
  ✔ first-time visitor is never shown an empty page
▶ tests/admin.e2e.js — 19 checks passing
  ✔ anonymous visitor is bounced from the dashboard
  ✔ moderator cannot delete or edit an existing donor
  ✔ approve · verify · publish actions write the audit trail
Checks 70 · Failures 0 · nothing touched the live project ✓

Credits & licence. The idea and initiative belong to the students of Notre Dame College, Batch 27 (Group 11); I developed the platform end to end. It is free to adapt for non-commercial, voluntary blood-donation work — the credits just have to stay. One donation can help up to three patients, which is the only metric on this page that actually matters.