Blood Donation and Management System (Client-Side)

This is the client-side application for a Blood Donation and Management System, built with React. It provides functionalities for users to request blood, manage their donation requests, and for administrators to manage users, blood donation requests, and content.

live link : https://blood-donation-f12cb.web.app

Features

• User Authentication: Login and Registration.
• Public Pages:
  • Home Page
  • Blood Donation Requests (displaying pending requests)
  • Blogs (displaying blog posts and details)
  • Donor Search (search for donors by blood group, district, and upazila)
  • Funding Page (displaying funding information and a 'Give Fund' option)
• User Dashboard (Private Routes):
  • User Profile Management
  • My Donation Requests (view and manage personal requests)
  • Create Donation Request
  • Update Donation Request
  • Request Details
• Admin Dashboard (Private Routes):
  • Admin Dashboard Home
  • All Users Management
  • All Blood Donation Requests (admin view)
  • Content Management (add, edit blogs)

Technologies Used

This project is built using the following key technologies and libraries:

Frontend Framework:

• React.js

State Management & Data Fetching:

• @tanstack/react-query: For efficient data fetching, caching, and synchronization.
• axios: Promise-based HTTP client for making API requests.

Routing:

• react-router-dom: For declarative routing in React applications.

Styling & UI Components:

• tailwindcss: A utility-first CSS framework for rapid UI development.
• daisyui: A Tailwind CSS component library.

Form Handling:

• react-hook-form: For flexible and extensible forms with easy validation.

Authentication:

• firebase: For authentication services.

Other Libraries:

• jodit-react: A rich text editor for React.
• react-icons: A collection of popular icon packs.
• sweetalert2: A beautiful, responsive, customizable, accessible (WAI-ARIA) replacement for JavaScript's popup boxes.
• @stripe/react-stripe-js: React components for Stripe.js.
• @stripe/stripe-js: Stripe.js library for integrating Stripe payments.

Development Tools:

• vite: A fast build tool for modern web projects.
• eslint: For linting and code quality.

Installation

To get a local copy up and running, follow these steps:

1. Clone the repository:

   git clone https://github.com/Programming-Hero-Web-Course4/b11a12-client-side-devtanvirabsar.git
   cd assignment-12-client

2. Install dependencies:

   npm install

3. Set up environment variables: Create a .env file in the root of the project and add your Firebase configuration and any other necessary environment variables (e.g., Stripe public key).

   VITE_FIREBASE_API_KEY=your_firebase_api_key
   VITE_FIREBASE_AUTH_DOMAIN=your_firebase_auth_domain
   VITE_FIREBASE_PROJECT_ID=your_firebase_project_id
   VITE_FIREBASE_STORAGE_BUCKET=your_firebase_storage_bucket
   VITE_FIREBASE_MESSAGING_SENDER_ID=your_firebase_messaging_sender_id
   VITE_FIREBASE_APP_ID=your_firebase_app_id
   VITE_STRIPE_PUBLISHABLE_KEY=your_stripe_publishable_key
   

Usage

To run the development server:

npm run dev

This will start the application, usually accessible at http://localhost:5173 (or another port if 5173 is in use).

To build the project for production:

npm run build

This will create a dist folder with the production-ready build.