Handraise

Inspiration

What it does

Handraise scores and ranks volunteer roles for each user across six dimensions: cause area, background, skills, availability, language, and location. Volunteers see why they’re a good match, not just a ranked list, while nonprofits instantly get candidates ready to contribute.

How we built it

• Frontend: React 19 + Vite, styled with Tailwind CSS Matching Engine: Weighted scoring algorithm with flexible per-role tuning for specialist and generalist roles
• Design: Custom UI components, glass-morphism styling, Space Grotesk / Inter / Georgia typography, SAP-branded dark hero page
• Assets: Custom SVG logo, AI-generated hero background, transparent PNGs processed via Python PIL

Challenges we ran into

• Fine-tuning match weights so partial availability overlaps produce meaningful matches without false positives
• Ensuring the hero image looked sharp and integrated on all screen sizes despite low-resolution source material
• Building a color-adaptive logo component that works on both dark and light backgrounds without extra image files

Accomplishments that we're proud of

• Created a polished, pitch-ready interface that goes beyond a form
• Built a transparent, explainable scoring engine — users understand why a match exists
• Delivered a functional MVP with design and interaction quality that works in live demos

What we learned

• How to design a transparent and explainable algorithm that balances precision and coverage
• How small design details — typography, hierarchy, and projection readability — can make a product demo feel professional
• How to iterate rapidly under time pressure while maintaining a polished user experience

What's next for Handraise

• Make a sign-up page for volunteers after they receive their match
• Add in-app messaging to support safe communication between volunteers and nonprofits
• Integrate AI-powered matching to improve long-term volunteer retention
• Launch a mobile app for on-the-go accessibility
• Implement advanced filters for better volunteer-role alignment (location, skills, availability)
• Expand partnerships with BC nonprofits to scale impact

Built With

• javascript
• python
• react
• tailwind-css
• vite