A winter donation web application that connects donors with volunteers to provide winter clothing to those in need across Bangladesh. This platform ensures that your act of kindness brings warmth to thousands of vulnerable people struggling to stay warm during the cold months.

When the weather gets colder, many people, especially in rural and low-income areas, face extreme challenges due to the lack of warm clothing. The Winter Kindness Hub aims to bridge this gap by providing an easy-to-use platform where donors can contribute winter clothes to those who need them most. With this application, users can join donation campaigns, browse details, and donate via a simple form after logging in. Together, we can make a difference and spread warmth this winter.

Visit the live website here: Winter Kindness Hub

• A visually appealing and responsive interface built with React.js and styled for seamless navigation.
• Utilizes animate.css for engaging animations and swiper for smooth carousels.

• Displays active campaigns where users can browse campaign details and their impact after logging in.
• Real-time updates on the number of donors and donations to encourage participation.

• Secure login functionality using Firebase Authentication for user registration and management.

• Features framer-motion for delightful animations, enhancing the user experience.
• React-countup displays real-time donation statistics to motivate users.

• Provides instant feedback with customizable alerts using react-toastify and react-hot-toast.

• React Router DOM ensures smooth transitions between pages and a single-page application (SPA) experience.

• Facilitates communication between donors and volunteers to streamline the donation process.

This project leverages the following npm packages to deliver its features:

• animate.css: Adds smooth CSS animations.
• firebase: For backend services including authentication and real-time database.
• framer-motion: Adds animations and transitions to React components.
• react: The core library for building the UI.
• react-countup: Displays animated count-up numbers.
• react-dom: For DOM rendering.
• react-hot-toast: Displays beautiful toast notifications.
• react-intersection-observer: Tracks scroll positions for lazy loading and other effects.
• react-router-dom: Implements routing in the SPA.
• react-toastify: Adds customizable and elegant toast notifications.
• swiper: Provides modern touch sliders for image and content presentation.