Blood Bridge - Cover Photo
Web Development - November 25, 2023

Blood Bridge

Blood Donation Management Platform

MongoDB, Express.js, React.js, Node.js, Firebase

This project is a web application designed to connect blood donors, recipients, and volunteers. It includes features like user role management, donation request handling, and content creation. Donors can manage profiles and donation requests, while volunteers can update donation statuses and manage requests. Admins have full control over user accounts, donation management, and blog content. The platform also supports secure payments through Stripe for funding donations. It is built with a responsive design, ensuring usability across mobile, tablet, and desktop devices. The application leverages Firebase authentication, JWT tokens for security, and integrates with MongoDB for efficient data management.

    Table of Content

    • Core Features
      • Roles and Permissions Management
      • Admin Role
      • Donor Role
      • Volunteer Role
      • Public Pages
      • Technical Features
    • Technology Stack
      • Frontend
      • Backend
      • Deployment
    • Project Overview
      • Introduction & Purpose
      • Getting Started
      • The Landing Page
      • Donor Dashboard
      • Volunteer Dashboard
      • Rich-Text Blog Editor
      • Admin Dashboard
      • Responsive Design
      • Final Conclusion

Core Features

  • Roles and Permissions Management

    • User role based access to features and content.
    • Admin with full access to user management, donation requests, and content management.
    • Volunteer with limited access to update donation statuses, view donation requests and content management.
    • Donors with access to registration, donation request creation, profile management, and donation response.

  • Admin Role

    • Manage users (view, block/unblock, change roles).
    • Manage all donation requests (create, edit, delete, view).
    • Full control over content management for blogs (create, publish, delete).
    • View and manage statistical data (total users, funding, blood donation requests).

  • Donor Role

    • Register and manage personal profiles (view and update).
    • Create, edit, view, and delete donation requests.
    • Respond to donation responses from others.

  • Volunteer Role

    • Manage donation requests (view, edit).
    • Role-based access control
    • View statistical data (total users, funding, blood donation requests).

  • Public Pages

    • Search Page for users to search for donors based on queries.
    • Requests Page with a public list of pending blood donation requests.
    • Blog Page Showcases published blogs written by admins or volunteers with rich-text support.
    • Funding Page for user donations through Stripe Payment Gateway.

  • Technical Features

    • Firebase authentication for secure user authentication.
    • JWT token-based authentication for role-based access control for all APIs.
    • Stripe implementation for handling donation from funding page.
    • Responsive UI across mobile, tablet, and desktop devices.

Technology Stack

Frontend

  • React.js
  • Tailwind CSS
  • DaisyUI
  • Material-UI
  • Flowbite
  • React Icons
  • TanStack Query
  • Axios
  • React Hook Form
  • Sonner
  • SweetAlert2
  • Stripe.js
  • Jodit React
  • React Share
  • AOS
  • React Helmet

Backend

  • Node.js
  • Express.js
  • MongoDB
  • Mongoose
  • JWT (JSON Web Tokens)
  • CORS
  • Dotenv
  • Stripe API

Deployment

  • Vercel
  • Firebase Hosting

Project Overview

Introduction & Purpose

BloodBridge is a full-stack web application I built to connect blood donors with recipients in need. The project was a hands-on way for me to learn and apply the MERN stack (MongoDB, Express.js, React, Node.js) in a real-world project context. It focuses on key areas like role-based access control, user authentication, and data management—providing a user-friendly interface for managing blood donations.

Getting Started

The Register Page lets users create an account by entering their email, name, and password. Users can upload a profile picture, select their blood group, and choose their district and upazila from dropdown menus. There is also a password confirmation field to avoid mistakes. If users already have an account, they can click the link to go to the login page. The process is simple and quick, making it easy to start using the platform.

BloodBridge - Register PageRegister Page

The Landing Page

BloodBridge - Register PageLanding Page

The landing page introduces the platform, highlighting its purpose to connect blood donors with recipients, and provides easy navigation to key sections like Blogs, Requests, and Funding. The page also includes a profile dropdown for users to access their dashboard for managing their accounts and other features based on their roles.

  • Requests Page: Displays a list of pending blood donation requests and allows users to search and filter them.
  • Search Page: Enables users to find donors based on criteria such as blood type and location.
  • Funding Page: Allows users to contribute funds securely through Stripe integration.
  • Blog Page: Showcases articles written by admins or volunteers with support for rich-text formatting.

Donor Dashboard

The donor dashboard allows donors to manage their profiles, create and edit donation requests, and view or delete existing requests. Donors can also respond to messages or actions related to their donation requests, ensuring they stay informed and connected with recipients.

BloodBridge - Donor DashboardDonor Dashboard

Volunteer Dashboard

The volunteer dashboard provides tools for managing donation requests and viewing platform statistics. Volunteers can access a list of all donation requests, edit their details, and update their statuses to ensure accurate tracking. They can view statistical data, including the total number of users, active funding contributions, and blood donation requests.

BloodBridge - Volunteer DashboardVolunteer Dashboard

This dashboard is designed to help volunteers focus on monitoring and maintaining the accuracy of information across the platform. Volunteers do not have access to user management or funding controls, keeping their scope of actions specific to donation-related tasks.

Rich-Text Blog Editor

The blogging tool allows both volunteers and admins to create, edit, and publish blog posts using a simple rich-text editor. It supports basic formatting options like headings, bold, italics, bullet points, and hyperlinks. Users can add images, format text, and organize content for better readability. Admins have full control over the publication, while volunteers can write and submit posts for review. This tool is designed to make content creation straightforward and ensure blogs are easy to read and manage.

BloodBridge - Blog EditorBlog Editor

Admin Dashboard

The admin dashboard allows full control over user management. Admins can view all user accounts, block or unblock users, and change user roles (Admin, Volunteer, Donor). They can quickly search for specific users and make necessary adjustments. This ensures that admins can manage platform users efficiently, ensuring appropriate access and maintaining smooth operation.

BloodBridge - Admin User ManagementAdmin Dashboard - User Management

The blog management section gives admins the ability to create, edit, publish, and delete blog posts. They can oversee all content, ensuring it is accurate and aligned with the platform’s goals. Admins can manage the entire lifecycle of a blog post, from drafting to publication, and remove any content if needed. This feature ensures the platform's blog section remains organized and up to date.

Admins can manage all donation requests through the dashboard. They have the ability to create new requests, edit existing ones, delete irrelevant or outdated requests, and view details of all donation requests on the platform. This gives admins full oversight and control over the blood donation process, ensuring requests are properly handled and updated.

BloodBridge - Admin Donation ManagementAdmin Dashboard - Donation Management

Responsive Design

The BloodBridge platform is designed to be fully responsive, meaning it adapts to different devices, including mobile phones, tablets, and desktop computers. The interface adjusts to various screen sizes, offering users a consistent and user-friendly experience across all devices. This ensures accessibility and ease of use, regardless of how users access the platform.

BloodBridge - Responsive DesignResponsive Design

Final Conclusion

Working on this project has given me valuable experience in building a full-stack application with real-world functionality. It taught me how to implement secure user authentication, particularly protecting private API endpoints using JWT tokens. This allowed me to handle role-based access and ensure that sensitive data was only accessible to authorized users. I also gained hands-on experience with integrating third-party services like Stripe for payment processing. Overall, the project strengthened my skills in both front-end and back-end development, helping me understand the complexities of building and securing a full-stack web application.