Willing Hearts

Willing Hearts is a charity, wholly run by volunteers, apart from a handful of staff. This website is a revamp from the current website, with updated UIUX changes. It allows the public to explore what the organisation is about, what they can contribute to. The website also allows the public to sign up as volunteers, via booking up a slot, and filling in the particulars, and the number of participants. New participants will be added to the database, and volunteers are able to see the availability slots for specific days via our booking application.

This repository is for the frontend. You may find the backend repository HERE.

Technologies Used

1. React for frontend.
2. MongoDB as the database for the backend.
3. Express for the middleware.
4. React router to create links to different pages, via the NavBar.
5. Daisyui for Dropdown feature, react-responsive-carousel for carousel functionality.
6. React calendar for the calendar functionalities.
7. FontAwesome for icons.
8. React responsive carousel to build carousels.
9. React dropzone to allow file uploads in forms.
10. Tailwind for styling.

Hierarchy

User Stories

Users should be able to:

1. Navigate across the different pages, to explore what Willing heart is about.
2. Able to find out donation details.
3. Sign up as volunteers, and at the same time able to view the availability slots.
4. Login if they have been registered as a volunteer before.

General Approach

1. Started out by drawing out the hierarchy of the site
2. Identified common components across different pages (buttons, inputs, accordians etc) to maintain consistency and efficiency
3. Members worked on their given pages and weekly check in with internal group & UIUX team for updates
4. Explored various alternative ways to complete the project (eg. using tailwind instead of bootstrap)
5. Final check-in and run through before project presentation by members

Limitations & Future work

• Touch up the styling for Volunteer Sign Up form (in progress)
• Research on how to use SVG images for highlighting words in Headers/NavBars
• Creating authenticated pages for admin users to maintain the site (eg. adding in future news articles, change pictures)
• Research on how to upload files in forms and save to database (Volunteer Sign Up Form)

References

• Willing Hearts' original website: HERE.