VolunteerHub

Front Page
Type of User Declaration
Volunteer Opportunities Page
Organization Create Volunteer Opportunity Page

Inspiration

Students often struggle to find volunteer opportunities because information is scattered across dozens of websites, regional boards, and social media pages. This makes students feel overwhelmed with the amount of time and effort it takes to find a suitable position to volunteer.

What it does

VolunteerHub helps students discover meaningful volunteer opportunities, track their hours, and showcase their impact in one seamless app. On the other hand, it also allows organizers to benefit from efficient tools to recruit, manage, and verify volunteers, ensuring smooth coordination. With features like gamification, real-time shift tracking, and smart notifications, VolunteerHub makes volunteering easier, more engaging, and more rewarding for everyone involved. Overall, VolunteerHub provides a lot a seamless experience for both the students and organizers alike by catering to their niche but often overlooked needs!

How we built it

To build HomeworkHub, we selected a modern tech stack to allow for both rapid development and long-term scalability:

Design: We designed the entirety of our app using Figma, even animation buttons to allow us to get a better feel of the app before we began programming. Frontend: The front end is built using React and Next.js, which provide a dynamic, fast, and SEO-friendly framework. Tailwind CSS was used for rapid styling, giving us the flexibility to iterate on design quickly while maintaining a responsive, mobile-friendly UI. Backend: The backend runs on Node.js with Express, handling API requests efficiently and providing a fast, scalable environment for future growth. We designed the API with RESTful architecture for clean, organized interactions between the frontend and backend.

Challenges we ran into

Integrating with Supabase: While Supabase offered powerful tools for authentication and database management, the integration process was more complex than anticipated. We had to set everything up both within the app and the code, requiring considerable time and effort to ensure a seamless connection and organization across the platform. Debugging: Like any project of this scale, debugging was an ongoing challenge. From fixing minor UI glitches to resolving more significant backend issues, we spent a lot of time fine-tuning the app to ensure everything worked smoothly. This was especially true when syncing data across multiple user roles and ensuring proper hour tracking. Time Constraints: With tight deadlines, we had to prioritize essential features for the MVP (Minimum Viable Product) while keeping future enhancements in mind. This meant balancing time-consuming tasks like debugging and integration with the need to deliver a functional, polished product on time.

Accomplishments that we're proud of

Robust Volunteer Opportunities Database: Our app is connected to a comprehensive database filled with a wide range of volunteer opportunities, making it easy for students to find roles that match their interests and location. Gamified Experience with XP & Quest System: We implemented a fully functioning XP and quest system that adds a fun, gamified layer to volunteering. With a sleek and engaging theme, students are motivated to complete tasks, level up, and unlock rewards. Authentic Volunteer Hour Verification: VolunteerHub offers a reliable volunteer tracking system that allows school admins to easily verify student hours, ensuring accuracy and legitimacy. The system not only logs hours but also stores the data securely, making it perfect for school submissions. Seamless Login with Supabase: We integrated Supabase for secure, real login and logout functionality, enabling smooth user authentication and access management. Mobile Accessibility: Our platform works flawlessly on mobile devices, giving students and organizers the flexibility to access the app anytime, anywhere, making volunteering easy on the go. Specialized Database of Opportunities: We’ve curated a database full of high-quality volunteer opportunities to ensure that students have access to diverse, valuable experiences. Tailored Features for Students and Admins: VolunteerHub includes unique features designed specifically for both students and admins. Whether it’s tracking progress or managing shifts, our platform addresses the specific needs of each group for a smooth and efficient experience.

What we learned

Frontend Development (React): We learned how to build interactive web pages with reusable components, manage state, and work with user input. Backend (Node.js + Express): We learned how to set up a server, handle API requests, and interact with a database to store and retrieve data. Supabase: We also learned how to integrate a database, manage user authentication, and work with geospatial data (location-based queries). Styling & Deployment (Tailwind CSS + PWA): We learned to style the app quickly with Tailwind CSS and deploy it for both desktop and mobile users via a Progressive Web App (PWA). Version Control & Security: We learned to manage our project with Git/GitHub for version control, and ensure security with proper authentication and deployment practices.

What's next for VolunteerHub

Streamline Volunteer Discovery

Students struggle to find opportunities that fit their skills, interests, or schedules. We want VolunteerHub to become a centralised hub for volunteer listings, making it simple and fast to find the right opportunity.

Simplify Hour Tracking

By partnering with several school boards across Ontario and, eventually, Canada as a whole, we aim to build this platform into a place where students can manage all their volunteer hours and seamlessly transfer them to their school portfolio.

Security Concerns

Organizers spend too much time verifying attendance and hours. VolunteerHub aims to automate verification, helping them focus on what truly matters ... their impact. This would have to be done through seamless background checks and verification of organisations to sort out the most trustworthy ones!