Helping Hands

Helping Hands is a frontend application that demonstrates connected workflows for donors, organization representatives, and administrators. It includes dedicated layouts and routes for each role.

Donation and volunteering workflows involve different people with different responsibilities. The project organizes those tasks into clear role-based experiences instead of a single generic interface.

• Built separate donor, organization, and administrator layouts with nested React Router routes.
• Created donation discovery, organization search, delivery, volunteering, account, request creation, and submission-review screens.
• Implemented demo authentication and persistent sessions with localStorage.
• Added searchable organization data, category-based donation filtering, conditional request fields, editable profiles, and responsive navigation.
• Developed the interface with reusable React components and Tailwind CSS utilities.

1. 01

   Choose a role

   Demo authentication routes users into donor, organization, or administrator areas with persistent local session state.

2. 02

   Find ways to help

   Donors explore organizations, browse categorized requests, arrange deliveries, or register for volunteer opportunities.

3. 03

   Publish needs

   Organization representatives create donation requests with category-specific fields and manage organization information and deliveries.

4. 04

   Review activity

   Administrator screens provide donor and organization account views plus submission-review workflows.

• Three role-specific application areas
• Donation request browsing and filtering
• Volunteer registration workflows
• Organization directory search
• Conditional donation-request forms
• Editable account screens
• Persistent demo sessions
• Responsive shared navigation