Inspiration
For years, volunteer rates have been steadily falling in Canada. However, this is most apparent in the senior population, where volunteer rates have fallen by almost 10%, compared to the 5% of those still in the workforce. Unfortunately, volunteering is incredibly necessary for the community. The main issue is, there are more and more barriers to volunteering, especially for seniors. Volunteer organisations are scattered across different websites, all with their own processes, making it difficult for older people to use. This is why we created The Volunteer Hub: a centralised hub for everything volunteering, with a priority on accessibility.
What it does
The Volunteer Hub benefits both organisations and volunteers. For Volunteers: It provides a map-based discovery tool to find local causes and a "Progression" dashboard to track milestones. It culminates in an official, PDF-exportable Record of Service with a unique verification ID. The plan is for The Volunteer Hub to partner with existing organisations, such as VolunteerBC, so that these Record of Services can be used as actual certificates of volunteering experience, resume ready and verifiable.
For Organizations: It simplifies the administrative burden. Using Google Gemini AI, coordinators can draft professional event descriptions in seconds, manage high-volume applications, and verify attendance with a single click.
For both, The Volunteer Hub streamlines the process of finding and hosting volunteer opportunities, with a built in review and rating system for both organisations and volunteers to ensure trust and safety.
How we built it
Frontend: Built with Next.js 15 and React 19, utilizing Tailwind CSS for a clean, accessible UI.
Backend/Auth: We leveraged Supabase for real-time database updates and secure, session-aware authentication.
Geospatial: Integrated Leaflet to give volunteers a spatial context of where they can help in their city.
Intelligence: Integrated the Google Gemini API to assist organizations in creating engaging, well-structured event listings.
Challenges we ran into
Volunteering should be accessible to everyone, regardless of their technical proficiency or physical ability. We spent significant time implementing semantic HTML and ensuring high-contrast ratios using Tailwind CSS so that the platform remains legible and navigable for all users. Furthermore, we had to balance power and simplicity. Organizations need robust tools to manage hundreds of applicants, but volunteers need a "frictionless" way to apply in seconds. Refining user experience to feel easy required multiple iterations of the layout.
Accomplishments that we're proud of
The Automated Certification System. We were able to generate a sleek, PDF-exportable certificate, complete with a unique Verification ID that proves trustworthiness, which gives our volunteers a tangible, professional asset they can actually use for university applications or employment. Seeing the system take raw database information and transform them into a formal document was a huge win for the team.
What we learned
This was our first real experience with front-end development, so we learned a lot about React 19 and Next.js 15 server actions, learning how to handle form states and database mutations with minimal boilerplate. We also learned how to prompt-engineer the Gemini API to ensure the AI-drafted events stayed professional and followed a consistent tone for different types of non-profits.
What's next for The Volunteer Hub
The next step is building a Mobile App. This would increase convenience for individuals who may not have reliablae access to desktops. Apps could also allow for additional convenience, such as a QR Check-in system. Organizations would be able to display a QR code at the event site, and volunteers could scan it to automatically log their start and end times, further automating the verification process and eliminating manual data entry.
Built With
- gemini
- leaflet.js
- next.js
- react
- supabase
- tailwind
- typescript
Log in or sign up for Devpost to join the conversation.