← all projects

Case study · Blood Donation Platform

DooGo

A blood donation app that matches people who need blood with compatible, verified donors nearby.

Role
Project Manager & Full-stack Developer
Year
2026
Type
Web app
Status
Live

01 — my role

Project Manager & Full-stack Developer · Team project

  • Led planning and delivery as Project Manager
  • Built the app on Next.js, TypeScript and Firebase
  • Wrote the shared donation-rules module: compatibility, waiting periods and one unit per donor
  • Moved enforcement into Firestore security rules so every write is validated

02 — key features

  • Blood requests

    Blood type, bags, urgency, hospital, needed-by date and up to 5 cities. Ask one donor or several at once, then track each request from sent to accepted to donated.

  • Real donation rules

    ABO and Rh compatibility, a 12-week (men) or 16-week (women) waiting period, one unit per donor, and one commitment at a time. A recovering donor can still accept if they'll be ready by the needed-by date.

  • Bag-by-bag progress

    A 3-bag request needs 3 donors. The request shows how many agreed and donated, and closes once every bag is given.

  • Verified donors

    Donors upload a medical record before they can appear in searches. Only they can see the document; others see a Verified badge.

03 — key decisions

  1. Use Firestore security rules as the enforcement layer

    The free Firebase plan has no server code, so the rules validate every write instead.

  2. Keep all donation rules in one shared module

    Every screen applies the same compatibility and waiting-period rules.

  3. Check eligibility against the needed-by date, not today

    A recovering donor can still help if they'll be ready in time.

04 — design

  • Figma design: dashboard on mobile
  • Figma design: request blood form on mobile
  • Figma design: compatible donors on mobile
  • Figma design: chat conversation on mobile
Figma designView in Figma
  • Phone and desktop get separate layouts at the same URLs; the desktop one adds a branded header and breadcrumbs.
  • The dashboard gives seekers and donors equal weight, with "Request blood" and "Donate blood" side by side.

05 — stack

  • Next.jsApp Router pages and a proxy that serves the mobile or desktop layout at the same URLs
  • TypeScriptTyped screens, data models and donation rules
  • Firebase AuthEmail and password sign-in with a password policy
  • Cloud FirestoreProfiles, requests, chats and notifications with live updates
  • Firestore Security RulesValidate every write: verified donors, matching names, in-app links only
  • CSS ModulesComponent-scoped styles for the mobile and desktop layouts
  • Phosphor IconsConsistent duotone icon set