BloodBond – Blood Donation Platform (Client)

Welcome to BloodBond, a user-friendly blood donation platform I developed using the MERN stack. This project connects blood donors, volunteers, and recipients through a role-based dashboard and a smooth donation management system.

This is the frontend of the application built with React.js, Tailwind CSS, Firebase, and TanStack Query.

---

🌐 Live Site

🔗 https://bloodbond.netlify.app

---

🔐 Admin Login Credentials

Email: admin@bloodbond.com Password: admin123

---

✨ Features

1. Role-based dashboard for Admin, Donor, and Volunteer
2. Firebase authentication with JWT token for route protection
3. Donor registration with profile image, blood group, district, and upazila
4. Create and manage donation requests with different statuses
5. Blog/content management system with rich text editor
6. Stripe integration for secure funding donations
7. Fully responsive for all devices (mobile, tablet, desktop)
8. Admin dashboard with dynamic statistics (users, donations, funds)
9. Search donors by location and blood group
10. SweetAlert2/Toastify notifications for all actions

---

🧪 Technologies Used

• React.js
• React Router DOM
• Tailwind CSS
• DaisyUI
• Firebase Auth
• ImageBB (for avatar uploads)
• TanStack Query
• SweetAlert2 & React Toastify
• Stripe.js
• Axios

---

🔐 Protected Routes

• Private routes persist after reload using JWT
• Role-based redirection and access control

---

📁 Folder Highlights

• src/components – Reusable UI components
• src/pages – All the public and dashboard pages
• src/hooks – Custom hooks like useAuth, useRole
• src/context – AuthProvider to manage global auth state
• src/routes – PrivateRoute and Role-based routing

---

🧑‍💻 Author

Md Meherab Hossain Munna
Frontend Developer – MERN Stack
📧 mdmeherab657@gamil.com
📍 Rajshahi, Bangladesh
🔗 GitHub – MAHIR-DEVES

---

📜 License

This project is created for educational and demonstration purposes. Feel free to explore and contribute!