Feni Blood Line
All case studies

Non-profit · Feni District, Bangladesh

Feni Blood Line

A district-wide blood donation platform that replaces scattered Facebook posts with a verified donor network, a live emergency request board, and real management dashboards for the volunteer communities coordinating donations.

Feni Blood Line

When someone needs blood in Feni District, the search usually starts on Facebook. A relative posts in a local group, the post gets shared, and everyone waits. Phone numbers are out of date, nobody knows who donated last month and is still ineligible, and the volunteer groups doing the real work have no shared record of any of it. The information exists — it is just scattered across a dozen group chats at the exact moment a family cannot afford to wait.

Feni Blood Line replaces that scramble with one searchable, verified donor network for the district, and gives the volunteer communities behind it real tools to run on.

The problem

Three separate groups were being failed by the same missing system:

  • Patients and families had no reliable way to find a matching donor quickly, and no way to know whether a phone number from a two-year-old Facebook post was still good.
  • Donors were contacted at random, often for the wrong blood group, and sometimes weeks after donating when they were still ineligible. Their contribution was never formally recorded anywhere.
  • Volunteer blood communities — the local organisations doing most of the coordination — tracked members and donation history in notebooks and spreadsheets, with no shared source of truth.

What I built

A full-stack platform with three connected surfaces: a public donor network, a live emergency request board, and private dashboards for the volunteer communities.

Verified donor network

Donors register with their blood group, location, and contact details, then sign in with Google. Anyone searching can filter the network by blood group and area and reach a donor directly. Because profiles are owned and updated by the donors themselves, contact details stay current instead of decaying inside old social posts.

Live emergency requests

Hospitals and families post urgent requests with patient name, blood group, units needed, urgency level, hospital, and location. The board is filterable by blood group, hospital, and area, and paginated so it stays fast as volume grows. Instead of a request reaching whoever happens to be scrolling, it reaches donors who actually match.

Community dashboards

This is the part that turned the platform into infrastructure rather than a directory. Volunteer organisations register their community, get a private dashboard, and manage:

  • their member roster, with blood groups and contact details
  • a full donation history, recorded per donor
  • live stats and a leaderboard of the community's most frequent donors
  • their public profile — logo, phone, email, website, and Facebook page and group links

Donations logged here build a permanent record, so a community can finally answer "who donated, and when?" without guessing.

Digital donor ID cards

Registered donors and community members can generate a branded digital ID card showing their blood group, donation count, and community logo, then download it as an image. It gives donors something real to carry and share, and it drives organic sign-ups every time one gets posted to a timeline.

Bilingual by default: বাংলা and English

Every screen ships in both Bangla and English, switchable instantly. For a district-level service in Bangladesh, English-only would have excluded a large share of the people who need it most. The language layer is built into the app's context rather than bolted on, so new features get both languages by default.

Technical decisions

Next.js 14 App Router with TypeScript for the frontend, Node.js, Express and MongoDB behind the API, and Tailwind CSS for a design system built around a single blood-red brand colour.

Authentication uses Firebase. Donors sign in with Google, and every authenticated request attaches the user's Firebase ID token as a bearer token through a shared authFetch wrapper. That kept sign-in frictionless — no password to remember for a service you might use twice a year — while the backend still verifies every request.

A stale-while-revalidate cache for slow connections. Most users arrive on mobile data, and blinking loading spinners on every navigation is a bad experience when someone is in a hurry. I wrote a small caching hook that reads from sessionStorage first and paints instantly, then refreshes in the background and revalidates every five minutes. Repeat visits to the donor list and emergency board feel immediate.

Built for search from day one. Sitemap and robots routes, the Next.js Metadata API, Open Graph and Twitter cards. People in an emergency search Google, not an app store — so the platform had to be findable there. A PWA manifest also lets donors install it to their home screen.

Performance discipline. Critical CSS inlining, bundle analysis, and lazy-loaded imagery, because the target user is on a mid-range Android phone on mobile data, not a developer's laptop.

The outcome

Feni Blood Line is live at fenibloodline.com, serving Feni District as a free, non-profit service. Blood requests that used to depend on a Facebook post reaching the right person now reach a filtered, verified list of matching donors — and the volunteer communities coordinating them finally have a shared system of record instead of scattered notebooks.

The part I am most satisfied with is not any single feature: it is that the platform serves patients, donors, and the volunteer organisations at the same time, without asking any of them to change how they already work.

See the live platform

Need something similar built for your organisation? Let's talk.

Built with

Next.js 14TypeScriptFirebase AuthMongoDBExpress.jsTailwind CSSPWA