LifeDrop is a full-stack web application that bridges the gap between blood donors and recipients. It allows users to request blood, search for donors, donate, contribute funds, and interact with community content — all under a well-structured role-based system.

• Frontend: React, Tailwind CSS, DaisyUI, React Hook Form, Motion, React Query, Axios, SweetAlert2, Recharts, Jodit-React, Stripe Integration
• Backend: Node.js, Express.js, MongoDB, JWT Authentication, Stripe Payment API
• Authentication: Firebase Authentication
• Deployment: Vercel (Frontend), Render (Backend), MongoDB Atlas

LifeDrop

Server

• Public access to pending donation requests (card format) on the home page
• Request Details Page (login required): View full details & donate
• Donate Modal: Captures donor info (auto-filled name/email, optional phone)
• Donation status changes: Pending ➔ In Progress ➔ Done or Canceled
• You can request for an emergency from My Requests (Dashboard)

• Filter donors by Blood Group, Division, District, Upazila

• Donate funds via Stripe Card Payment
• View all user contributions on the Funding Page

• View blogs posted by Admin/Volunteers
• Like & comment on blogs

• Users can apply for volunteer role from here.
• After applying, admins will verify and either accept or reject it.

• Contact form to send messages directly to Volunteers/Admins

The dashboard is role-based with server-side verification and contains:

• Sidebar Navigation
• Main Content Panel
• Account Management (Switch Account / Logout)
• Delete Account (From Setting)

• Overview: Recent 3 donation requests (view, update, delete)
• My Requests: Manage all created donation requests with status filters and also request for an emergency for pending requests
• Profile: Update profile info (except email) + add number and address

• All Donation Requests: View & mark as done
• Content Management:
  • View, create, update blogs (blog content)
  • Add blog with image upload & rich text editor
• Messages:
  • View unread messages, mark as read, delete
• Emergency Request Can see emergency requests information and can accept or reject the request

• Access to all User & Volunteer features
• All Users Management:
  • Filter users (Active/Blocked)
  • Block/Unblock users
  • Assign roles (Make Volunteer/Admin)
• All Messages: Same as Volunteer view
• Content Management: Full control over publishing & deleting blogs
• Volunteer Application Admin can review from here the volunteer applications and can either accept or reject them
• Emergency Request Can see emergency requests information and can accept or reject the request

• Welcome message with dummy search bar
• 3 Dynamic Data Cards:
  • Total Donation Requests
  • Total Funding Amount
  • Total Users Count
• 3 Analytics Charts:
  • Bar Chart: Donation Requests by Status
  • Line Chart: Static Data
  • Pie Chart: Active vs Blocked Users

• React
• React Router
• Tailwind CSS & DaisyUI
• React Hook Form
• TanStack React Query
• Motion
• Jodit React (Rich Text Editor)
• Axios
• Firebase
• Stripe Payment Integration

• Express.js
• MongoDB
• Stripe Node SDK
• dotenv
• CORS
• Firebase Admin

• Firebase Authentication with JWT secured APIs
• Role-based access control on both client & server side
• Private Routes with dynamic navigation

• Integrated with Stripe React SDK for secure payments
• Funding records saved with donor details and amount

• Conversation-based messaging
• Advanced analytics dashboard
• Multi-language support
• User activity logs

Mysterio — Full Stack Developer

This project is licensed under the MIT License

For any inquiries, contact at:
[email protected]

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

added to public repository