-
-
Volunteer Onboarding - 1 of 5
-
Progress Check Tab for Ongoing Applications - Can also be used to View all other attempted or completed opportunities!
-
Application PopUp- Info that shows up when the user click on an opportunity to view it.
-
Dashboard for User Login
-
Volunteer Opportunity Filter Popup
-
Landing Page!
-
User Profile Page
-
User Login Home Page
-
Volunteer Opportunities List - Location Based Filtering
-
Signup Link - For User Verification
-
Supabase Backend
Inspiration
Volunteering is meant to be meaningful, but for students, finding the right opportunity and keeping track of their service hours can often becomes a frustrating experience. Opportunities are hidden in scattered flyers, endless email chains, or word-of-mouth reminders. Logging hours is still prone to paper forms, last-minute signatures, or messy spreadsheets that feel outdated in a digital-first world. On the other side, organizers face an equally frustrating challenge: filling roles with reliable volunteers. They often spend more time chasing confirmations and verifying hours than focusing on the actual mission. Miscommunication, no-shows, and inconsistent tracking diminish trust and waste their valuable effort.
This is why we built Volunteer Hub, an app we feel will bridge this gap and allow students to find their desired opportunities through a single streamlined platform. With Volunteer Hub, students can discover opportunities, track their progress, and showcase their impact in one place, while organizers benefit from reliable tools to recruit, manage, and effortlessly verify hours. Our inspiration comes from wanting to simplify the journey, transforming a fragmented and frustrating process into a single clear path that makes volunteering easier, more credible, and genuinely rewarding.
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 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 your project with Git/GitHub for version control, and ensure security with proper authentication and deployment practices.
What's next for Volunteer Hub
We envision VolunteerHub as more than just a tool, we believe that it can become a trusted ecosystem. Planned enhancements include:
- Most Important: Increased opportunities for students through developed partnerships with national and local volunteer programs.
- AI-based matching for students with niche preferences.
- School partnership dashboards to showcase collective impact and allow for direct volunteer hours transfer.
Built With
- express.js
- figma
- jwt
- next.js
- node.js
- postgis
- postgresql
- react
- restful-apis
- supabase
- tailwind-css
- vsc
Log in or sign up for Devpost to join the conversation.