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.
The Home Banner and Header together has a background image, which can only be found on the HomePage.
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.
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.
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.
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.
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.
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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent