https://github.com/rahima-akter/winter-donation
this is a donation website where people can donate winter clothes as well as money. People can also apply for volunteer work
https://github.com/rahima-akter/winter-donation
firebase react react-router
Last synced: 2 months ago
JSON representation
this is a donation website where people can donate winter clothes as well as money. People can also apply for volunteer work
- Host: GitHub
- URL: https://github.com/rahima-akter/winter-donation
- Owner: Rahima-Akter
- Created: 2024-11-23T20:37:33.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-23T20:46:46.000Z (over 1 year ago)
- Last Synced: 2025-06-17T09:51:21.896Z (about 1 year ago)
- Topics: firebase, react, react-router
- Language: JavaScript
- Homepage: https://warmheart-winter-donation.netlify.app/
- Size: 1.7 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Project Name
- Winter clothing donation
# Purpose
This is a donation platform that allows users to donate items, money, or their time to a cause. The platform is built with modern web technologies, providing a smooth user experience with animations, responsive design, and Firebase-powered authentication.
## Key Features
1. **User Authentication**
- Email/Password Login
- Google Login (via Firebase)
2. **User Profile Management**
- Update Profile (name & photo)
- Persistent login session
3. **Donation Form**
- Capture donation details: quantity, item type, pickup location, and optional notes
4. **Responsive Design**
- Fully responsive UI using Tailwind CSS
- Mobile-first design with smooth transitions
5. **Dynamic Visuals**
- Snowfall animation effect on the page
- Floating cards with entry animations (using Animate.css)
6. **State Management**
- Global state using React Context API for user data and authentication state
7. **Private Routes**
- Protected pages accessible only by authenticated users
---
## NPM Packages
1. **Firebase**:
- **firebase/auth**: For email/password and Google login.
- **firebase/firestore**: For storing user and donation data.
- **firebase/storage**: (If used) For storing user images and other files.
2. **React Router**:
- **react-router-dom**: For routing and navigation between pages.
3. **Tailwind CSS**:
- **tailwindcss**: For utility-first CSS styling and responsive design.
4. **Animate.css**:
- **animate.css**: For adding animations like flying cards and smooth transitions.
5. **React Icons**:
- **react-icons**: For adding scalable SVG icons throughout the app.
6. **React Snowfall**:
- **react-snowfall**: For creating a snow effect on the webpage.
7. **React Context API**:
- React's Context API for global state management.
8. **React**:
- **react** and **react-dom**: For building and rendering React components.
9. **Vite**:
- **vite**: A build tool for fast development and optimized builds.
## Live Link:
- https://warmheart-winter-donation.netlify.app/