The latest articles on DEV Community by Bollareddy Pranoy Raj (@bollareddy_pranoy_ra). https://dev.to/bollareddy_pranoy_ra https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3874421%2Fcd645cbb-7cbf-4c0d-b43b-97d1941f323c.jpg https://dev.to/bollareddy_pranoy_ra en Bollareddy Pranoy Raj Sun, 12 Apr 2026 15:01:57 +0000 https://dev.to/bollareddy_pranoy_ra/how-i-built-a-full-stack-blood-donation-management-system-with-react-nodejs-socketio-4hbk https://dev.to/bollareddy_pranoy_ra/how-i-built-a-full-stack-blood-donation-management-system-with-react-nodejs-socketio-4hbk <h2> What I Built </h2> <p>A full-stack Blood Donation Management System for Aditya University that handles<br> camp registration, live dashboards, admin management, and real-time updates.</p> <p>🔴 Live Demo: <a href="https://blood-donation-web-gamma.vercel.app" rel="noopener noreferrer">https://blood-donation-web-gamma.vercel.app</a><br> 💻 GitHub: <a href="https://github.com/BollareddyPranoyRaj/BloodDonationWeb" rel="noopener noreferrer">https://github.com/BollareddyPranoyRaj/BloodDonationWeb</a></p> <h2> Tech Stack </h2> <ul> <li> <strong>Frontend:</strong> React, React Bootstrap, Recharts, Socket.IO Client</li> <li> <strong>Backend:</strong> Node.js, Express, MongoDB, Mongoose, Socket.IO</li> <li> <strong>Deployment:</strong> Vercel (Frontend) + Render (Backend) + MongoDB Atlas</li> </ul> <h2> Key Features </h2> <ul> <li>🏕️ Camp-based donor registration flow</li> <li>📊 Live dashboard with real-time Socket.IO updates</li> <li>🩸 Donation desk for confirming donations</li> <li>👨‍💼 Admin panel for managing camps and gallery</li> <li>📈 Donor demographics and analytics with Recharts</li> <li>📸 Gallery management with image uploads</li> <li>📬 Contact form with message inbox</li> <li>🔐 OTP verification system</li> </ul> <h2> Complete REST API </h2> <h3> Authentication </h3> <ul> <li> <code>POST /api/login</code> — Admin login</li> <li> <code>POST /api/send-otp</code> — Send OTP for verification</li> <li> <code>POST /api/verify-otp</code> — Verify OTP</li> </ul> <h3> Donor Registration </h3> <ul> <li> <code>POST /api/register</code> — Register as a donor for a camp</li> <li> <code>GET /api/registrations</code> — Get all registrations</li> <li> <code>GET /api/registrations/search</code> — Search donor by roll number/date</li> <li> <code>POST /api/registrations/confirm-donation</code> — Confirm donation at desk</li> </ul> <h3> Events </h3> <ul> <li> <code>POST /api/create-event</code> — Create camp with banner image upload</li> <li> <code>GET /api/events</code> — Get all blood donation camps</li> <li> <code>DELETE /api/event/:id</code> — Delete an event</li> </ul> <h3> Volunteers &amp; Staff </h3> <ul> <li> <code>POST /api/add-volunteer</code> — Add volunteer</li> <li> <code>GET /api/volunteers</code> — Get all volunteers</li> <li> <code>POST /api/add-staff</code> — Add staff donor manually</li> <li> <code>GET /api/staff</code> — Get all staff donors</li> <li> <code>POST /api/add-guest-management</code> — Add guest/management donor</li> <li> <code>GET /api/guest-management</code> — Get all guest donors</li> </ul> <h3> Gallery </h3> <ul> <li> <code>POST /api/upload-gallery</code> — Upload image to gallery</li> <li> <code>GET /api/gallery</code> — Get all gallery images</li> </ul> <h3> Contact </h3> <ul> <li> <code>POST /api/contact</code> — Submit contact form</li> <li> <code>GET /api/messages</code> — Get all contact messages</li> </ul> <h3> Real-time </h3> <ul> <li> <strong>Socket.IO</strong> — Live dashboard updates on every donation confirmation</li> </ul> <h2> Biggest Challenge </h2> <p>Deploying a monorepo to Render — the backend folder was accidentally<br> set as a git submodule which caused build failures. Fixed it by<br> deinitializing the submodule and re-adding as a regular folder.</p> <h2> What I Learned </h2> <ul> <li>Real-time communication with Socket.IO</li> <li>Full-stack deployment with Vercel + Render + MongoDB Atlas</li> <li>Monorepo structure for full-stack projects</li> <li>OTP-based authentication flow</li> <li>Image upload handling with Multer</li> </ul> <h2> What's Next </h2> <ul> <li>Cloudinary integration for persistent image uploads</li> <li>Donor export/reporting feature</li> <li>Automated tests</li> </ul> <p>If you have any questions about the project, drop them in the comments!</p> react node mongodb webdev