{"id":26330913,"url":"https://github.com/sheikhmuhammadantor/blood-flow-client","last_synced_at":"2026-04-11T10:09:26.376Z","repository":{"id":275299305,"uuid":"925680681","full_name":"sheikhmuhammadantor/blood-flow-client","owner":"sheikhmuhammadantor","description":"BloodFlow is a full-stack Blood Donation Application built using the MERN (MongoDB, Express.js, React, Node.js) stack. The platform connects blood donors with those in need, making the donation process more accessible and efficient.","archived":false,"fork":false,"pushed_at":"2025-05-13T12:23:38.000Z","size":684,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-01-03T12:25:43.876Z","etag":null,"topics":["blood-donation","donor-management","expressjs","firebase","fullstack-development","healthcare","jwt","mern-stack","mongodb","nodejs","react","role-based-access-control","tailwindcss"],"latest_commit_sha":null,"homepage":"https://bloodflow.netlify.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sheikhmuhammadantor.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-02-01T13:31:27.000Z","updated_at":"2025-06-01T12:41:33.000Z","dependencies_parsed_at":"2025-02-01T14:34:03.806Z","dependency_job_id":"21c43e3c-a91b-4a6f-82e4-d7b78dc5b5a4","html_url":"https://github.com/sheikhmuhammadantor/blood-flow-client","commit_stats":null,"previous_names":["sheikhmuhammadantor/blood-flow-client"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/sheikhmuhammadantor/blood-flow-client","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sheikhmuhammadantor%2Fblood-flow-client","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sheikhmuhammadantor%2Fblood-flow-client/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sheikhmuhammadantor%2Fblood-flow-client/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sheikhmuhammadantor%2Fblood-flow-client/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sheikhmuhammadantor","download_url":"https://codeload.github.com/sheikhmuhammadantor/blood-flow-client/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sheikhmuhammadantor%2Fblood-flow-client/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31676397,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-11T08:18:19.405Z","status":"ssl_error","status_checked_at":"2026-04-11T08:17:08.892Z","response_time":54,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blood-donation","donor-management","expressjs","firebase","fullstack-development","healthcare","jwt","mern-stack","mongodb","nodejs","react","role-based-access-control","tailwindcss"],"created_at":"2025-03-15T22:18:20.174Z","updated_at":"2026-04-11T10:09:26.337Z","avatar_url":"https://github.com/sheikhmuhammadantor.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# BloodFlow (Every Drop Counts, Every Life Thrives)\n\n[![BloodFlow Live Page](./resource/live-image.png)](https://your-live-site.com)\n\n## Overview\n\nBloodFlow is a MERN stack-based Blood Donation Application designed to connect blood donors with recipients efficiently. It features donor registration, blood donation requests, donor management, content management, and role-based access control to ensure a seamless and secure experience. Built with React, Node.js, Express, and MongoDB, the platform enables easy authentication, real-time updates, and streamlined donation processes. \"Every Drop Counts, Every Life Thrives.\"\n\n### Live Site URL: [bloodflow.com](https://bloodflow.netlify.app/)\n\n### Demo Donor Credentials:\n\n- **Username:** antor1@gmail.com\n- **Password:** antor1\n\n### Volunteer Credentials:\n\n- **Username:** antor2@gmail.com\n- **Password:** \\*\\*\\*\n\n### Admin Credentials:\n\n- **Username:** sheikhmuhammadantor@gmail.com\n- **Password:** \\*\\*\\*\n\n## Features of BloodFlow:\n\n1. **User Role Management:**\n\n   - Supports three roles: Donor, Volunteer, and Admin.\n   - Admin can manage user roles and statuses efficiently.\n\n2. **My Donation Requests:**\n\n   - Donors can view all their donation requests in a well-organized table.\n   - Includes filtering options by status (Pending, In-progress, Done, Canceled).\n\n3. **Donation Request Management:**\n\n   - Users can edit or delete their requests.\n   - Status management for donation requests, including marking as \"Done\" or \"Canceled.\"\n\n4. **All Users Page (Admin Panel):**\n\n   - Admins can view all users in a tabular format.\n   - Advanced filtering options (Active, Blocked).\n   - Admin actions include blocking, unblocking, role changes (e.g., Donor to Volunteer).\n\n5. **Content Management System:**\n\n   - Admins can add, edit, and manage blogs.\n   - Blog status management (Draft, Published) with a rich-text editor for content creation.\n\n6. **Responsive and User-Friendly Design:**\n\n   - Fully responsive across devices.\n   - Styled using TailwindCSS and DaisyUI for a modern look.\n\n7. **Real-Time Updates:**\n\n   - Integrated TanStack Query for efficient data fetching and refetching.\n   - Axios for seamless API communication.\n\n8. **Secure Authentication:**\n\n   - JWT-based authentication for secure user sessions.\n   - Role-based access control to ensure data protection.\n\n9. **Dynamic Filtering and Search:**\n\n   - Dropdown filters and search functionality for an improved user experience.\n\n10. **Robust API Integration:**\n    - Back-end communication via RESTful APIs.\n    - Scalable design for future enhancements.\n\n## Technical Highlights:\n\n- **Frontend Technologies:** React, Axios, TanStack Query, TailwindCSS, DaisyUI.\n- **Backend Technologies:** Node.js, Express.js, MongoDB.\n- **Additional Libraries:** React Hot Toast, SweetAlert2, Jodit-react, React Icon\n- **Hosting:** Hosted on netlify for frontend and varcel for backend.\n\n## Dependencies\n\nBelow is a list of dependencies used in the **BloodFlow** project. To install all required dependencies, run:\n\n```sh\nnpm install\n```\n\n### Main Dependencies:\n\n| Package                   | Version   | Description                           |\n| ------------------------- | --------- | ------------------------------------- |\n| `@headlessui/react`       | ^2.2.0    | UI components without styling         |\n| `@stripe/react-stripe-js` | ^3.1.1    | React integration for Stripe payments |\n| `@stripe/stripe-js`       | ^5.5.0    | Stripe.js for handling payments       |\n| `@tanstack/react-query`   | ^5.64.2   | Data fetching and state management    |\n| `axios`                   | ^1.7.9    | HTTP client for API requests          |\n| `daisyui`                 | ^4.12.23  | Tailwind CSS components               |\n| `firebase`                | ^11.1.0   | Google Firebase integration           |\n| `jodit-react`             | ^5.0.10   | Rich text editor                      |\n| `prop-types`              | ^15.8.1   | Type checking for React props         |\n| `react`                   | ^18.3.1   | JavaScript library for UI development |\n| `react-date-range`        | ^2.0.1    | Date picker component                 |\n| `react-datepicker`        | ^7.6.0    | Another date picker library           |\n| `react-dom`               | ^18.3.1   | React DOM rendering package           |\n| `react-helmet-async`      | ^2.0.5    | Managing document head changes        |\n| `react-hot-toast`         | ^2.4.1    | Notifications for React               |\n| `react-icons`             | ^5.4.0    | Popular icons for React               |\n| `react-router-dom`        | ^6.23.0   | Routing for React applications        |\n| `react-spinners`          | ^0.15.0   | Loading spinners for UI feedback      |\n| `recharts`                | ^2.15.0   | Charting library for React            |\n| `sweetalert2`             | ^11.15.10 | Alert dialogs and modals              |\n\n### Development Dependencies:\n\n| Package                       | Version  | Description                         |\n| ----------------------------- | -------- | ----------------------------------- |\n| `@eslint/js`                  | ^9.17.0  | ESLint configurations               |\n| `@types/react`                | ^18.3.18 | Type definitions for React          |\n| `@types/react-dom`            | ^18.3.5  | Type definitions for React DOM      |\n| `@vitejs/plugin-react`        | ^4.3.4   | React plugin for Vite               |\n| `autoprefixer`                | ^10.4.20 | CSS vendor prefixing                |\n| `eslint`                      | ^9.17.0  | JavaScript linter                   |\n| `eslint-plugin-react`         | ^7.37.2  | ESLint plugin for React             |\n| `eslint-plugin-react-hooks`   | ^5.0.0   | ESLint rules for React hooks        |\n| `eslint-plugin-react-refresh` | ^0.4.16  | ESLint rules for React Refresh      |\n| `globals`                     | ^15.14.0 | Global variables for ESLint         |\n| `postcss`                     | ^8.4.49  | CSS post-processing                 |\n| `tailwindcss`                 | ^3.4.17  | Utility-first CSS framework         |\n| `vite`                        | ^6.0.5   | Fast build tool for modern web apps |\n\nTo install dependencies separately, use:\n\n```sh\nnpm install \u003cpackage-name\u003e\n```\n\n## Installation and Setup:\n\n1. Clone the repository:\n   ```bash\n   git clone https://github.com/sheikhmuhammadantor/blood-flow-client\n   ```\n2. Navigate to the project directory:\n   ```bash\n   cd blood-flow-client\n   ```\n3. Install dependencies:\n   ```bash\n   npm install\n   ```\n4. Configure environment variables:\n   - Add a `.env.local` file with necessary keys (e.g., database URI, JWT secret).\n5. Start the development server:\n   ```bash\n   npm run dev\n   ```\n\n## Contribution Guidelines:\n\n- Fork the repository and create a new branch for your feature.\n- Submit a pull request with detailed information about your changes.\n\n---\n\n**\"Every drop counts, every life thrives\" — Join us in saving lives through BloodFlow.**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsheikhmuhammadantor%2Fblood-flow-client","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsheikhmuhammadantor%2Fblood-flow-client","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsheikhmuhammadantor%2Fblood-flow-client/lists"}