🚨 Introduction

The Red.bank application aims to provide a user-friendly platform that streamlines blood donation activities. It connects blood donors with those in urgent need, promoting a seamless and efficient donation process. The application offers various features, including donor registration, blood donation requests, donor management, content management, and role-based access control to ensure an organized and secure experience for all users.

Built using the MERN stack (MongoDB, Express.js, React, Node.js), Red.bank is designed to make blood donation simpler and more accessible for everyone involved.

✨ Key Features

1. Responsive Design
2. Pagination feature
3. Image Upload Via Cloudinary
4. Data Loading With Skeletion Effect
5. Powerfull Search Functionality
6. Awesome Toast Message
7. Animated Cards Buttons Using Frammer
8. Text Editor For Document Styling
9. Parallax scrolling
10. HTML to PDF
11. District and Upazila filtered select
12. Blog Post social share
13. Compressed image upload
14. Large number calculate (Numeral JS)
15. Time and Date (Moment JS)
16. Google recaptcha in funding page
17. ZSecure Stripe payment
18. React form managment (React hook form)

📦 Project Dependencies

1. @stripe/react-stripe-js
2. @stripe/stripe-js
3. @tanstack/react-query
4. aos
5. axios
6. browser-image-compression
7. firebase
8. framer-motion
9. hamburger-react
10. html2pdf.js
11. jodit-react
12. jspdf
13. moment
14. motion
15. numeral
16. react-google-recaptcha
17. react-helmet-async
18. react-hook-form
19. react-hot-toast
20. react-icons
21. react-router-dom
22. react-select
23. react-share
24. sweetalert2

🤸 Quick Start

Follow these steps to set up the project locally on your machine.

Prerequisites

Make sure you have the following installed on your machine:

• Git
• Node.js
• npm (Node Package Manager)

Cloning the Repository

git clone https://github.com/Programming-Hero-Web-Course4/b10a12-client-side-StackMastery
cd b10a12-client-side-StackMastery

Installation

Install the project dependencies using npm:

npm install

Configure

Rename the .env.example file to .env.local and fill all env

# Firebase
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_FIREBASE_MEASUREMENT_ID=YOUR_FIREBASE_MEASUREMENT_ID

# base Url
VITE_BASE_URL=SERVER_URL

# Cloudinary
VITE_CLOUDINARY_PRESET=CLOUDINARY_UPLOAD_PRESET
VITE_CLOUDINARY_CLOUD_NAME=CLOUDINARY_CLOUD_NAME

#Recaptcha
VITE_RECAPTCHA_SITE_KEY=YOUR_RECAPTCHA_SITE_KEY

# Stripe
VITE_STRIPE_PUBLISHABLE_KEY=YOUR_STRIPE_PUBLIC_KEY

Running the Project

npm run dev

Open http://localhost:5173 in your browser to view the project.

Full project deployed in Netlify

---