FindRedDrop is a modern blood donation platform built with Next.js that helps connect blood donors, patients, and supporters in a fast and secure way. The project is designed around a life-saving mission: making emergency blood requests easier to manage while giving donors and volunteers a simple way to participate.
This application provides a user-friendly experience for:
- registering as a donor,
- searching for compatible donors,
- creating and managing blood donation requests,
- supporting the organization through funding,
- and managing the system through role-based dashboards.
The theme of the project is emergency healthcare and community support. It focuses on saving lives by making blood donation coordination faster, more transparent, and more accessible.
- User registration and login with authentication
- Donor profile management with blood group, district, and upazila
- Search donors by location and blood compatibility
- Create, view, update, and manage blood donation requests
- Role-based dashboards for Admin, Volunteer, and Donor users
- Admin controls for managing users, requests, and funding
- Volunteer access to donation request and funding management
- Stripe-powered funding checkout for supporting the platform
- Pagination for large lists such as users and requests
- Responsive and modern UI with dark/light theme support
The application currently supports 3 user roles:
- Admin: full control over users, requests, funding, and platform management
- Volunteer: can help manage blood requests and funding-related activities
- Donor: default role for new registrants; can create and manage personal donation requests
Role-based authorization is implemented through protected dashboard routes and navigation so each role only sees the pages and actions intended for them.
FindRedDrop includes Stripe Checkout for funding support. Donors and supporters can contribute through a secure payment flow, and the app handles the success and cancellation experience.
The application accepts a profile image as an input during user registration. The selected file is captured from the form, converted into a FormData payload, and uploaded to ImgBB using the public API key.
Once the upload succeeds, the app receives a public image URL from ImgBB and stores that URL in the main user record in the database. In short:
- User selects an image from the registration form.
- The image is uploaded to ImgBB.
- ImgBB returns a direct image link.
- That link is saved in the main database record for the user profile.
This keeps the profile image accessible in the app without storing the raw image file directly in the main database.
src/
app/
api/ # API routes and payment endpoints
dashboard/ # Protected dashboard pages and role-based UI
donation-requests/ # Public donation request pages
login/ # Login page
register/ # Registration page
search-donor/ # Donor search page
success/ # Stripe success page
components/ # Reusable UI components
lib/ # Auth, Stripe, and shared helpers
The .env file structure :
MONGODB_URI=
MONGODB_DATABASE=
BETTER_AUTH_URL=
NEXT_PUBLIC_API_ENDPOINT=
NEXT_PUBLIC_IMGBB_API_KEY=
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
STRIPE_SECRET_KEY=-
Install dependencies
npm install
-
Create environment file
-
Start the development server
npm run dev
-
Open your browser at:
http://localhost:3000
- Next.js
- React
- Tailwind CSS / DaisyUI
- Better Auth
- MongoDB
- Stripe
- Lucide Icons and React Icons
The main goal of FindRedDrop is to make blood donation support faster, safer, and more organized so that urgent requests can be handled efficiently and lives can be saved with minimal delay.
Homepage
|
Registration Page
|
Donor Search
|
Stripe Payment
|
Payment Success
|
Admin Dashboard
|
User Management
|
Request Management
|
Donor Dashboard
|
Profile
|
Frontend Live Link:
https://find-red-drop.vercel.app/
Backend Source Code:
https://github.com/pritom-banik/FindRedDrop-Backend.git
- Pritom Banik (Jun 30, 2026)