AL
alifa-ara-heya/blood-aid-client
Blood Aid is a user-friendly platform designed to connect blood donors with recipients in need. It streamlines the donation process while promoting a safe and efficient blood donation network.
Blood Aid
Live Site
๐ Blood Aid Live Site
๐ Blood Aid Server GitHub
Admin Access
- Email: bloodadmin@admin.com
- Password: Abc@123
Purpose
Blood Aid is a user-friendly platform designed to connect blood donors with recipients in need. It streamlines the donation process while promoting a safe and efficient blood donation network.
Key Features
- User Registration & Authentication
- Role Management (Admin, Volunteer, Donor)
- Donation Requests
- Search Functionality
- Dynamic Dashboard
- Content Management
- Responsive Design
- Pagination & Filtering
- Payment Integration
- Notifications
Technologies Used
- Frontend: React.js, React Router, React Query, Tailwind CSS
- Backend: Node.js, Express.js
- Database: MongoDB
- Other Tools: Firebase, Stripe, React Hook Form, Axios, SweetAlert2
Dependencies Overview
Core
- React.js: Frontend framework for UI development
- React Router: Client-side routing
- React Query: Data fetching and caching
Backend & Database
- Node.js: Server-side JavaScript runtime
- MongoDB: NoSQL database for data storage
- Axios: API requests
UI/UX & Animations
- Tailwind CSS: Styling framework
- AOS: Scroll animations
- Lottie-React: Animation rendering
Authentication & Payments
- Firebase: Authentication and hosting
- Stripe: Payment processing
Forms & Content Management
- React Hook Form: Form validation and management
- Jodit React: WYSIWYG rich text editor
Utilities
- SweetAlert2: User notifications
- Prop Types: Type-checking for React props
How to Run the Project Locally
Prerequisites
- Node.js (v16+), npm or yarn, Git
Steps
-
Clone the repositories:
- Client:
git clone https://github.com/alifa-ara-heya/blood-aid-client.git - Server:
git clone https://github.com/alifa-ara-heya/blood-aid-server.git
- Client:
-
Navigate to each directory and install dependencies:
npm install
-
Set up environment variables:
- Client: Add Firebase configuration to
.envin the client directory. - Server: Add
PORT,MONGO_URI, andSTRIPE_SECRET_KEYto.envin the server directory.
- Client: Add Firebase configuration to
-
Start the servers:
- Backend: Run
npm startin the server directory (default:http://localhost:5000). - Frontend: Run
npm startin the client directory (default:http://localhost:3000).
- Backend: Run
-
Log in as Admin:
- Email: bloodadmin@admin.com
- Password: Abc@123