How I Built a Full-Stack Blood Donation Management System with React, Node.js & Socket.IO

What I Built

A full-stack Blood Donation Management System for Aditya University that handles
camp registration, live dashboards, admin management, and real-time updates.

🔴 Live Demo: https://blood-donation-web-gamma.vercel.app
💻 GitHub: https://github.com/BollareddyPranoyRaj/BloodDonationWeb

Tech Stack

• Frontend: React, React Bootstrap, Recharts, Socket.IO Client
• Backend: Node.js, Express, MongoDB, Mongoose, Socket.IO
• Deployment: Vercel (Frontend) + Render (Backend) + MongoDB Atlas

Key Features

• 🏕️ Camp-based donor registration flow
• 📊 Live dashboard with real-time Socket.IO updates
• 🩸 Donation desk for confirming donations
• 👨‍💼 Admin panel for managing camps and gallery
• 📈 Donor demographics and analytics with Recharts
• 📸 Gallery management with image uploads
• 📬 Contact form with message inbox
• 🔐 OTP verification system

Complete REST API

Authentication

• POST /api/login — Admin login
• POST /api/send-otp — Send OTP for verification
• POST /api/verify-otp — Verify OTP

Donor Registration

• POST /api/register — Register as a donor for a camp
• GET /api/registrations — Get all registrations
• GET /api/registrations/search — Search donor by roll number/date
• POST /api/registrations/confirm-donation — Confirm donation at desk

Events

• POST /api/create-event — Create camp with banner image upload
• GET /api/events — Get all blood donation camps
• DELETE /api/event/:id — Delete an event

Volunteers & Staff

• POST /api/add-volunteer — Add volunteer
• GET /api/volunteers — Get all volunteers
• POST /api/add-staff — Add staff donor manually
• GET /api/staff — Get all staff donors
• POST /api/add-guest-management — Add guest/management donor
• GET /api/guest-management — Get all guest donors

Gallery

• POST /api/upload-gallery — Upload image to gallery
• GET /api/gallery — Get all gallery images

Contact

• POST /api/contact — Submit contact form
• GET /api/messages — Get all contact messages

Real-time

• Socket.IO — Live dashboard updates on every donation confirmation

Biggest Challenge

Deploying a monorepo to Render — the backend folder was accidentally
set as a git submodule which caused build failures. Fixed it by
deinitializing the submodule and re-adding as a regular folder.

What I Learned

• Real-time communication with Socket.IO
• Full-stack deployment with Vercel + Render + MongoDB Atlas
• Monorepo structure for full-stack projects
• OTP-based authentication flow
• Image upload handling with Multer

What's Next

• Cloudinary integration for persistent image uploads
• Donor export/reporting feature
• Automated tests

---

If you have any questions about the project, drop them in the comments!