Blood Donation Application - (Blood Connect)

A web application that helps users find and manage blood donors efficiently through a smart, location-based search and admin-controlled dashboard.

Live Link

• Please Visit Blood Connect !
• Admin Email - john@doe.com
• Admin Password - 123456As

✅ Features of Blood Connect App

• 🔐 Authentication & Authorization
  Secure login via Firebase with JWT-based API access and role-based control.

• 🩸 Find Blood Donors Easily
  Filter donors by blood group, district, and upazila with responsive search.

• 📍 Smart Location Filtering
  Upazila options dynamically appear based on district selection.

• 🧑‍🤝‍🧑 Role-Based Dashboards
  Separate dashboards for Admin, Volunteer, and Donor with custom privileges.

• 💾 CRUD for Donation Requests
  Donors can create/edit/delete requests. Admins manage all requests with status updates.

• 📝 Blog Publishing System (CMS)
  Volunteers/Admins can create, update, and delete formatted blog posts with Jodit Editor.

• 📊 Dashboard Statistics
  Admin dashboard includes: total users, total requests, and funds raised.

• 🚦 Donation Status Workflow
  Statuses like pending, inprogress, done, and canceled are managed by Admin/Volunteers.

• 🧪 Optimized API Requests
  All GET endpoints use TanStack Query with caching and refetching.

• 📂 Pagination and Filtering
  Efficient list management with pagination and filters (status, role).

• 🔔 Smart Notifications
  All interactions are confirmed using SweetAlert2 instead of native alerts.

• 🔒 JWT-Protected Routes
  User sessions persist with secure localStorage and auto re-authentication.

• 💳 Donation Page with Stripe
  Secure funding and payment processing via Stripe; donation history is saved.

• 📱 Responsive UI
  Fully responsive design using Tailwind CSS and daisyUI, optimized for all screen sizes.

• 🌐 Environment Variables & Secure Deployment
  All credentials are secured via .env files. Hosted using Netlify & Render.

npm packages in Client Side

• Use Babel for Fast Refresh
• Uses SWC for Fast Refresh
• Uses Tailwind for building custom user interfaces.
• Uses daisyUI for building web pages quickly and easily
• Uses React Icons to easily add and customize icons from popular libraries
• Uses React Router for handling routing and navigation within React applications
• Uses React Hook Form to manage form state, validation, and submission efficiently
• Uses TanStack Query for efficient data fetching, caching, synchronizing server state, and background updates
• Uses Firebase for backend services: auth, database, storage, hosting, functions.
• Uses lottie-react for renders lightweight, interactive animations in React web apps.
• Uses SweetAlert2 for creating beautiful, customizable, and responsive alert popups in web applications easily.
• Uses Jodit Editor to integrate a rich text editor in React apps for creating and editing formatted content easily.
• Uses stripe to easily integrate secure payment processing and manage transactions
• Uses Axios for making HTTP requests from client to server.
• Uses Firebase for deploys, hosts websites.

Technologies Used

• 
• 
• 
• 
• 
• 
• 
• 
• 

🛠️ Installation & Setup Instructions

Follow the steps below to set up the Blood Connect application locally:

---

1. Clone the Repositories

git clone https://github.com/Arman3747/BloodConnect-Client.git
git clone https://github.com/Arman3747/BloodConnect-Server.git

---

2. Client Setup

cd BloodConnect-Client
npm install

Create a .env.local file in the root of the client folder and add the following:

VITE_apiKey=your_firebase_key
VITE_authDomain=your_auth_domain
VITE_projectId=your_project_id
VITE_storageBucket=your_storage_bucket
VITE_messagingSenderId=your_sender_id
VITE_appId=your_app_id
VITE_image_upload_key=your_imbb_image_upload_key
VITE_PAYMENT_KEY=your_stripe_payment_key

Then start the client:

npm run dev

---

3. Server Setup

cd BloodConnect-Server
npm install

Create a .env file in the root of the server folder and add the following:

BloodConnect_DB_USER=your_mongodb_admin_username
BloodConnect_DB_PASS=your_mongodb_admin_password
PAYMENT_GATEWAY_KEY=your_stripe_payment_key
FB_SERVICE_KEY=your_FireBase_service_key

Then start the server:

nodemon index.js

---

Thank you for Reading!