Warm Hearts

A Winter Clothing Donation Web Application.

Purpose

Warm Hearts is an initiative to connect donors with volunteers to help vulnerable individuals in need of winter clothing across Bangladesh. This platform simplifies the process of donating clothes, ensuring that help reaches rural and low-income areas efficiently during the colder months.

Live URL

Warm Hearts - Winter Clothing Donation Website

Key Features

• Navbar:

  • Flexible design with site logo.
  • Navigation links: Home, Donation Campaigns, How to Help, Dashboard.
  • Displays user profile photo when logged in; otherwise, a login button.

• Home Page:

  • Banner/Slider Section: Winter-themed slider showcasing donation campaigns, use swiper for slide banner.
  • About Section: Mission and user contribution details.
  • How It Works Section: Instructions for donations, collection points, and supported divisions.
  • Extra Sections: Additional content highlighting the community impact and donor stories.

• Donation Campaigns:

  • Displays donation campaigns as cards with images, titles, descriptions, division, and a "Donate Now" button.
  • Dynamic data sourced from a JSON file.

• Donation Details Page (Private):

  • Accessible only to authenticated users.
  • Displays full campaign details and includes a donation form for:
    • Quantity of items.
    • Item type.
    • Pickup location.
    • Additional notes (optional).
  • Toast confirmation message on successful form submission.

• Authentication System:

  • Login: Email/password login with validation. Includes "Forgot Password" functionality and Google Social Login.
  • Registration: Form with name, email, photo URL, and password fields. Password validation includes uppercase, lowercase, and a minimum of 6 characters.
  • Password Toggling: Show/hide password functionality.

• Dashboard (Private):

  • Redirects to an update form for profile editing, integrated with Firebase.

• Error Page:

  • Custom 404 page with a button to navigate back to the home route.

• Responsive Design:

  • Fully responsive across mobile, tablet, and desktop devices.

NPM Packages Used

• React: Core library for building the application.
• React Router DOM: For handling application routing.
• Firebase: Backend for authentication and data handling.
• React Hot Toast: For displaying toast messages.
• Swiper: For implementing the image slider on the home page.
• Tailwind CSS: For responsive and modern UI styling.
• Daisy UI: For prebuilt UI components.
• AOS (Animate On Scroll): For animations on the home page.