Assignment Category: 001
Project Theme > The Winter Donation web application is a simple and easy-to-use platform that helps people donate winter clothing to those in need across Bangladesh. When the weather gets colder, thousands of vulnerable people, especially in rural and low-income areas, struggle to stay warm because they don’t have enough warm clothing. This website will connect donors with volunteers for these people, making it easy for users to donate clothes and bring warmth to those who need it most. Users will see the donation campaign and browse details after login and can donate via the form.
- fortawesome
- fortawesome
- fortawesome
- animate.css
- firebase"
- localforage
- react-awesome-slider
- react-dom
- react-hot-toast
- react-icons
- react-router-dom
- react-toastify
- react-flicking
Navbar: The design of the Navbar is Flexible.
You have to add the Site Logo, Display the nav links
( Home, Donation Campaigns, “How to Help,” and “Dashboard” )
Show the user’s profile photo if logged in; otherwise, display a login button.
Footer: The design of the Footer is also flexible. You have to show Contact information, social media links, and a copyright notice with your own design.
You have to show the following section in the default route.
Banner/Slider Section: Use winter-themed images with a slider (e.g., Daisy UI or Swiper) to showcase donation campaigns or local community support.
About Section: Explain the website’s mission and how users can contribute.
How It Works Section: Provide instructions for donation, information about collection points, and list supported divisions.
2 extra sections: Add 2 extra section with your own design.
This page will show all the campaigns running on your application
Display donation cards from your JSON data.
Each card should include image, title, description, division, and a “Donate Now” button.
The “Donate Now” button should navigate to this details page
This page is only accessible after login; redirect to the login page if the user is not authenticated. show all data available for a donation campaign on the details page. After that show a Donation Form Field: Quantity of items (e.g., 2 jackets, 3 blankets) Item type (e.g., blanket, jacket, sweater). Pickup location(e.g. House 12, Road 5, Dhanmondi, Dhaka) Additional notes (optional). Upon submission, Display a Toast message “ Thank you ! We will reach your destination soon”. ( You don't need to store the submission anywhere. Just show a toast and clear form after submitting)
On Clicking the Login Button / browsing any private Route user will be redirected to this route. User Login User will show a Login page with a form, so that the user can Log in this application. Show a Title for Login. & Form with the following fields ( Email, Password, Forget Password, Login button )
If the user logs in successfully then navigate him to his desired Route / Home page. If not, show him an error with a toast/error message anywhere in the form.
There will be some other options like Show the user a Link for Register so that he can go to the register page. Show users a Social Login Button ( Google only ) . on Clicking it user authenticates with Google Navigate him to his desired Route / Home page.
User Registration Create a register page with a form, so that the user can register himself in this application. Show a Title for registration and a Form with the following fields ( Name, Email, Photo-URL, Password & Register Button )
If the user registers successfully then navigate him to his Home page. If not, show him an error with a toast/error message anywhere in the form.
Implement password validation For password validation you need to follow the below criteria. Show a password error in the form, and don't Register for an invalid password
Must have an Uppercase letter in the password
Must have a Lowercase letter in the password
Length must be at least 6 character
There will be some other options like Show the user a Link for Login so that he can go to the Login page. Show users a Social Login Button ( Google only ) . on Clicking it user authenticates with Google Navigate the user to the Home page.
💡Don’t implement email verification method as it will inconvenience the examiner. If you want, you can add these after receiving the assignment result.
On Clicking on Dashboard, the user will see this page. The user will see all his Profile Information Here Show a welcome Title with the user name. Show the user All profile information on this page such as image, email, name, and an update Button which will redirect the user to update profile route. See challenges for updating profile features. Error Page 404 Page: If user wants to visit invalid routes Show user a Not Found Page with a button so that user can go back to home route
1.implement Animate.css 2.Forget Password Feature 3. Password Toggling