Skip to content

A pseudo webpage that displays donation package cards and collect donation

Notifications You must be signed in to change notification settings

nishathub/donation-camp

Repository files navigation

Donation Campaign Project

Why React used:

The website comes along with pages which is similar in look most of the cases and different in data that was the primary reason which put React way ahead of other frameworks. Secondly, we encounter repeated components all over the websites except a little which was better handled by this most used platform.

Features of this project :

1. Home Banner

The Home Banner and Header together has a background image, which can only be found on the HomePage.

2. Search Box

There is a search field in the Home page which can filter donation packages by category. For instance, 'food', 'health', etc. It is also provided with some basic error handling like empty search field or words that does not match with any of the categories.

3. Donation Packages

Here we are in the main field. The webpage is all about donations and helping people in need. The users will find 4 types of donation categories with separate colors. Foods come with lightblue, clothing comes in lightgreen color for example.

4. Click on donation packages

A single click on any donation package will redirect the user in a page where he/she will find the details of that particular package.

5. Donation Details page

There is a button on the page to donate a certain amount for that particular package. A toast will appear as soon as an user make a donation, showing the package title and amount.

6. Donated packages

Donated packages can be found in the 'Donation' page which is accessible from the header link. Here, if the donated cards quantity exceeds number 4, there will be shown a button named 'See all'. The rest of the donated cards can be seen by clicking on this button. As soon as all the cards appeared, the button will disappear.

7. Statistics

Another page named 'Statistics' will illustrate the data in a pie chart. Basically it interpret the data into percentage. The number of donation one made proportional to total is presented on the chart.

The whole website is full responsive to all sized devices.

Thank You

About

A pseudo webpage that displays donation package cards and collect donation

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published