🩸 Blood Request Live Tracker

A full-stack real-time blood donor matching system built with React, Node.js, Express, MongoDB, and Socket.io.

---

📁 Project Structure

blood-request-tracker/
├── server/                        # Node.js + Express Backend
│   ├── models/
│   │   ├── User.js                # User schema (donor & requester)
│   │   ├── BloodRequest.js        # Blood request schema
│   │   └── Donation.js            # Donation history schema
│   ├── routes/
│   │   ├── auth.js                # POST /register, /login, GET /me
│   │   ├── users.js               # GET/PUT profile, stats, availability
│   │   ├── requests.js            # CRUD + accept + status update
│   │   └── donations.js           # Donation history + rating
│   ├── middleware/
│   │   └── auth.js                # JWT protect + role authorize
│   ├── config/
│   │   └── database.js            # MongoDB connection
│   ├── socket/
│   │   └── index.js               # Socket.io events (location, status)
│   ├── .env                       # Environment variables
│   ├── package.json
│   └── server.js                  # Entry point
│
├── client/                        # React Frontend
│   ├── public/
│   │   └── index.html
│   ├── src/
│   │   ├── components/
│   │   │   ├── Layout/
│   │   │   │   ├── Navbar.jsx     # Responsive navbar
│   │   │   │   └── Footer.jsx
│   │   │   ├── Auth/
│   │   │   │   ├── Login.jsx      # Login form
│   │   │   │   └── Register.jsx   # Register with role selector
│   │   │   └── Common/
│   │   │       ├── Loader.jsx     # Spinner + page loader
│   │   │       └── Alert.jsx      # Alert + Toast notifications
│   │   ├── pages/
│   │   │   ├── Home.jsx           # Landing page
│   │   │   ├── DonorDashboard.jsx # Donor dashboard (requests, history)
│   │   │   ├── RequesterDashboard.jsx
│   │   │   ├── EmergencyRequest.jsx # Blood request form
│   │   │   ├── LiveTracking.jsx   # Real-time map tracking
│   │   │   ├── FindDonors.jsx     # Search/filter donors
│   │   │   └── Profile.jsx        # Edit profile, achievements, history
│   │   ├── context/
│   │   │   ├── AuthContext.jsx    # Auth state (user, token, login/logout)
│   │   │   └── SocketContext.jsx  # Socket.io connection
│   │   ├── services/
│   │   │   ├── api.js             # All Axios API calls
│   │   │   └── socket.js          # Socket.io client helpers
│   │   ├── utils/
│   │   │   └── geolocation.js     # GPS, distance, ETA utilities
│   │   ├── App.jsx                # Routes + guards
│   │   ├── index.js               # React entry
│   │   └── index.css              # Tailwind + custom classes
│   ├── package.json
│   └── tailwind.config.js
│
└── README.md

---

🚀 Getting Started

Prerequisites

• Node.js v16+
• MongoDB (local or Atlas)
• npm or yarn

---

📸 Screenshots

Register Page

Index Page

Requester Dashboard

Donor Dashboard

Find Donors

Live Tracking

Email

---

🔄 User Flow

Donor Flow

Register (role: donor) → Set blood group & location
→ Dashboard: toggle availability
→ Receive real-time notification when blood request matches
→ Accept request → Navigate to hospital
→ Update status: Going → Arrived → Completed
→ Donation recorded in history

Requester Flow

Register (role: requester) → Create emergency request
→ System finds & notifies nearby donors
→ Donor accepts → Live tracking begins
→ See donor moving on map with live ETA
→ Donation completed → Request closed
→ Rate the donor

1. Clone the Repository

git clone https://github.com/your-username/blood-request-tracker.git
cd blood-request-tracker

---

2. Setup the Backend (Server)

cd server
npm install

Start the server:

# Development (with auto-restart)
npm run dev

# Production
npm start

Server runs on → http://localhost:5000

---

3. Setup the Frontend (Client)

cd ../client
npm install
npm start

Client runs on → http://localhost:3000

---

🌐 API Endpoints

Auth

Method	Route	Description	Access
POST	/api/auth/register	Register new user	Public
POST	/api/auth/login	Login user	Public
GET	/api/auth/me	Get current user	Private

Users

Method	Route	Description	Access
GET	/api/users/profile	Get profile	Private
PUT	/api/users/profile	Update profile	Private
GET	/api/users/stats	Dashboard stats	Private
PUT	/api/users/availability	Toggle donor availability	Donor
PUT	/api/users/location	Update donor GPS	Donor

Blood Requests

Method	Route	Description	Access
POST	/api/requests	Create blood request	Requester
GET	/api/requests	Get all requests	Private
GET	/api/requests/:id	Get single request	Private
PUT	/api/requests/:id/accept	Donor accepts request	Donor
PUT	/api/requests/:id/status	Update donor status	Donor
DELETE	/api/requests/:id	Cancel request	Requester

Donors (Public)

Method	Route	Description	Access
GET	/api/donors	List donors (filter by blood group, city)	Public

Donations

Method	Route	Description	Access
GET	/api/donations	Donation history	Private
POST	/api/donations/:id/rate	Rate a donor	Requester

---

📡 Socket.io Events

Client → Server

Event	Payload	Description
join_request_room	{ requestId }	Donor joins request room
watch_request	{ requestId }	Requester watches request
update_location	{ requestId, lat, lng }	Donor sends live location
update_status	{ requestId, status }	Donor updates status
decline_request	{ requestId }	Donor declines request
send_message	{ requestId, message }	In-app chat message

Server → Client

Event	Payload	Description
new_blood_request	{ requestId, bloodGroup, ... }	New request notification
donor_accepted	{ requestId, donor }	Donor accepted a request
donor_location_changed	{ requestId, lat, lng }	Donor moved — live location
status_changed	{ requestId, status }	Status update in request room
request_status_updated	{ requestId, status }	Status update to requester
receive_message	{ senderName, message, time }	In-app chat message

---

🗂️ Pages

Route	Page	Access
/	Home / Landing	Public
/login	Login	Public
/register	Register	Public
/find-donors	Find Donors	Public
/dashboard/donor	Donor Dashboard	Donor only
/dashboard/requester	Requester Dashboard	Requester
/emergency	Emergency Request	Requester
/tracking/:id	Live Tracking	Private
/profile	Profile	Private

---

🛠️ Technologies Used

Backend

• Node.js + Express.js — REST API
• MongoDB + Mongoose — Database & ODM
• Socket.io — Real-time bidirectional communication
• JWT — Authentication
• bcryptjs — Password hashing
• Nodemailer — Email notifications via Gmail (free, optional)
• express-validator — Input validation

Frontend

• React 18 — UI framework
• React Router v6 — Client-side routing
• Tailwind CSS — Utility-first styling
• Axios — HTTP client
• Socket.io-client — Real-time connection
• Context API — Global state (auth + socket)

---

✅ Features Checklist

• User registration & login (JWT auth)
• Role-based access (donor / requester)
• Blood group matching
• Geolocation-based donor search
• Real-time notifications via Socket.io
• Email notifications via Nodemailer + Gmail
• Live donor tracking on map
• Donor status updates (going / arrived / completed)
• Donation history & stats
• Donor rating system
• Availability toggle
• Responsive design (mobile + desktop)
• Protected routes with role guards

---

👨‍💻 Domain

Web Development + Healthcare Technology + Real-Time Systems (Full Stack Development Project — Healthcare Domain)