Skip to content

Latest commit

 

History

History
124 lines (81 loc) · 4.15 KB

README.md

File metadata and controls

124 lines (81 loc) · 4.15 KB

WinterAid - Donation Web Application

Purpose

WinterAid is a web application designed to help people donate winter clothing and essentials to those in need across Bangladesh. This platform connects donors with volunteers, ensuring efficient distribution to vulnerable communities, especially in rural and low-income areas.

Live URL

You can access the live application here: WinterAid Live

Key Features

  1. Donation Campaigns:
    Browse ongoing donation campaigns based on divisions and contribute.

  2. User Authentication:
    Login and register with Firebase authentication, including Google Sign-In.

  3. Dynamic Campaign Details:
    View detailed information about each campaign, including status, description, and contact details.

  4. Responsive Design:
    Mobile-friendly design for a seamless user experience across devices.

  5. FAQs Section:
    Address common queries related to donations and campaigns.

  6. Real Impact Stories:
    Showcase real-life stories to inspire donations.

Technologies Used

Frontend:

  • React: Component-based architecture for building the user interface.
  • React Router: For navigation and route management.
  • Tailwind CSS: For styling and creating a responsive layout.
  • AOS (Animate On Scroll): For scroll-triggered animations.
  • DaisyUI: UI components built on top of Tailwind CSS.
  • React Hot Toast: For toast notifications.

Backend:

  • Firebase Authentication: User authentication using email/password and Google Sign-In.
  • Firebase Hosting: Hosting the live application.

NPM Packages Used

  • react-router-dom: For routing and navigation between pages.
  • firebase: For user authentication and backend integration.
  • tailwindcss: For custom styling and utility classes.
  • daisyui: Pre-designed Tailwind UI components.
  • aos: For implementing scroll-triggered animations.
  • animate.css: For implementing simple animations.
  • react-hot-toast: To display notifications for success and error events.
  • react-icons: To implement necessary icons.
  • swiper: For creating carousels and sliders.
  • sort-by: For sorting lists dynamically.

Project Requirements

The detailed project requirements are outlined in the Project Requirements PDF.

Dependencies

Project Dependencies

This project uses the following dependencies to build a robust and user-friendly application:

Frontend Dependencies

  • animate.css: ^4.1.1
    For simple and reusable CSS animations.

  • aos: ^2.3.4
    Animate on scroll library for scroll-triggered animations.

  • firebase: ^11.0.2
    Provides backend services such as authentication, database, and hosting.

  • localforage: ^1.10.0
    A fast and efficient client-side storage library for offline support.

  • match-sorter: ^8.0.0
    A utility for matching and sorting data based on user input.

  • react: ^18.3.1
    A JavaScript library for building user interfaces.

  • react-dom: ^18.3.1
    Provides DOM-specific methods to work with React components.

  • react-hot-toast: ^2.4.1
    A lightweight notification library for React.

  • react-icons: ^5.3.0
    Include popular icons as React components.

  • react-router-dom: ^6.28.0
    Declarative routing for React applications.

  • sort-by: ^1.2.0
    A utility for dynamically sorting arrays by specified keys.

  • swiper: ^11.1.15
    A modern and responsive touch slider for carousels and galleries.

How to Install

To install all the above dependencies, run the following command in your terminal: bash npm install