https://github.com/maksudulhaque2000/Winter-Clothing-Donation
The Winter Clothing Donation platform connects donors with volunteers to provide winter clothing to people in need across Bangladesh. It ensures that vulnerable communities, especially in rural and low-income areas, receive essential clothing during the cold season.
https://github.com/maksudulhaque2000/Winter-Clothing-Donation
eslint firebase js reactjs tailwindcss vite
Last synced: 9 months ago
JSON representation
The Winter Clothing Donation platform connects donors with volunteers to provide winter clothing to people in need across Bangladesh. It ensures that vulnerable communities, especially in rural and low-income areas, receive essential clothing during the cold season.
- Host: GitHub
- URL: https://github.com/maksudulhaque2000/Winter-Clothing-Donation
- Owner: smmaksudulhaque2000
- Created: 2025-02-05T08:12:56.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-05T09:32:41.000Z (over 1 year ago)
- Last Synced: 2025-02-05T10:33:36.694Z (over 1 year ago)
- Topics: eslint, firebase, js, reactjs, tailwindcss, vite
- Language: JavaScript
- Homepage: https://winter-clothing-donation-e20cd.web.app/
- Size: 5.08 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Winter Clothing Donation
## đ Introduction
The **Winter Clothing Donation** web application is designed to facilitate the donation of winter clothing to people in need across Bangladesh. The platform seamlessly connects donors with volunteers, ensuring that vulnerable communities, especially in rural and low-income areas, receive essential winter clothing during the cold season.
## đ Live Demo
[Winter Clothing Donation - Live](https://winter-clothing-donation-e20cd.web.app/)
---
## đ Table of Contents
- [Introduction](#-introduction)
- [Live Demo](#-live-demo)
- [Key Features](#-key-features)
- [Technology Stack](#-technology-stack)
- [Installation Guide](#-installation-guide)
- [Pages & Components](#-pages-and-components)
- [Challenges Implemented](#-challenges-implemented)
- [Future Enhancements](#-future-enhancements)
- [Contact Information](#-contact-information)
- [License](#-license)
---
## đ Key Features
â
**User Authentication** â Register, log in, and manage user profiles.
â
**Donation Campaigns** â Browse and contribute to various winter clothing campaigns across Bangladesh.
â
**Donation Form** â Submit donation details, including items and pickup location.
â
**Responsive Design** â Mobile-friendly, tablet, and desktop-compatible UI.
â
**Firebase Integration** â Firebase Authentication and Firestore database.
â
**Toast Notifications** â Real-time confirmation messages on successful donations.
---
## đ ī¸ Technology Stack
### **Frontend**
- React.js
- CSS (for custom styling)
- Firebase Authentication
- Firebase Firestore
### **Libraries & Packages Used**
- `react-router-dom` â Routing
- `firebase` â Authentication and backend integration
- `react-toastify` â Toast notifications
- `swiper` â Image sliders
- `daisyUI` â UI components
- `AOS` (Animate On Scroll) â Smooth animations
### **Hosting**
- Firebase Hosting
---
## đī¸ Installation Guide
Follow these steps to set up the project locally:
### **1ī¸âŖ Clone the Repository**
```bash
git clone https://github.com/your-username/winter-clothing-donation.git
```
Replace `your-username` with your actual GitHub username.
### **2ī¸âŖ Navigate to the Project Directory**
```bash
cd winter-clothing-donation
```
### **3ī¸âŖ Install Dependencies**
```bash
npm install
```
### **4ī¸âŖ Configure Firebase**
- Go to [Firebase Console](https://console.firebase.google.com/) and create a project.
- Enable Firebase Authentication and Firestore.
- Add the Firebase configuration keys in a `.env` file in the root directory:
```bash
REACT_APP_FIREBASE_API_KEY=your-api-key
REACT_APP_FIREBASE_AUTH_DOMAIN=your-auth-domain
REACT_APP_FIREBASE_PROJECT_ID=your-project-id
REACT_APP_FIREBASE_STORAGE_BUCKET=your-storage-bucket
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=your-messaging-sender-id
REACT_APP_FIREBASE_APP_ID=your-app-id
```
### **5ī¸âŖ Start the Development Server**
```bash
npm start
```
### **6ī¸âŖ Open in Browser**
Go to `http://localhost:3000` to see the application in action.
---
## đ Pages and Components
### **đš Home Page**
- Includes a banner, an about section, and donation instructions.
### **đš Donation Campaigns**
- Displays all available campaigns for winter clothing donations.
### **đš Donation Details Page**
- A private page for logged-in users to submit donation details.
### **đš Dashboard**
- Displays user profile information and allows updates.
### **đš Login / Registration**
- Supports email/password sign-in and Google authentication.
### **đš Error Page**
- Displays a custom 404 error page for invalid routes.
---
## đĨ Challenges Implemented
đš **Password Toggling** â Show/hide password feature during user registration.
đš **Forgot Password** â Users can reset their passwords securely.
đš **Profile Update** â Users can update their name and profile picture.
đš **Smooth Animations** â Implemented `AOS` for seamless animations.
---
## đ Future Enhancements
đ **Email verification after registration**
đ **A detailed donation tracking system**
đ **Campaign progress tracking for better user experience**
---
## đŠ Contact Information
If you have any questions or suggestions, feel free to reach out.
đ **Social Media:**
- [Linkedin](https://www.linkedin.com/in/maksudulhaque2000/)
- [Facebook](https://www.facebook.com/maksudulhaque2000)
- [Twitter](https://x.com/i/flow/login?redirect_after_login=%2Fsmmaksudulhaque)
- [Youtube](https://www.youtube.com/@smmaksudulhaque)
---
## Šī¸ Copyright
Š **Winter Clothing Donation Website**, 2024. All rights reserved.
---
## đ License
This project is licensed under the **MIT License**.