VolunteerConnect

The coordination OS for volunteerism — organizations post shifts and fill gaps with AI, volunteers find opportunities matched to their skills, and everyone sees it happen in real time.

Comment

Inspiration

Our school relies on paper sheets to log and track volunteer hours. When students needed to find volunteer opportunities, they had to sift through stacks of pamphlets, manually writing down every hour of work they did. We knew there had to be a better solution, which is what we tried to solve today. After researching, we found out that most of the 1.9 million volunteer dependent non profits also struggle with this exact issue, making it a widespread problem worth solving at scale.

What it does

VolunteerConnect is a two-sided coordination platform for volunteer organizations. For coordinators, it provides a real-time dashboard to post volunteer opportunities, track sign-ups as they happen live, manage their full volunteer roster, and run an AI assistant that reads their actual org data — fill rates, open gaps, volunteer names — and responds with specific actions. When the AI recommends outreach, it generates personalized email drafts for each volunteer with one-click copy. For volunteers, it provides a searchable directory of real opportunities filtered by skill and cause, an AI-powered intake flow that matches them to the right opportunity based on their background and motivation, and a personal dashboard to track upcoming shifts and log hours.

How we built it

We built VolunteerConnect as a React + Vite single-page application with Firebase as our backend:

  • Auth — Firebase Authentication handles coordinator and volunteer sign-in
  • Database — Firestore stores organizations, opportunities, and sign-ups with real-time onSnapshot listeners so every change reflects instantly across all open sessions
  • AI matching — volunteers complete an intake form; Gemini ranks real opportunities against their skills and motivation, then writes a personalized explanation for their top match
  • AI coordinator assistant — the CommandBar sends live organization data (shifts, volunteer roster, fill rates) to Gemini with every query, which returns structured JSON that renders as actionable items with one-click outreach email drafts
  • Deployment — Vercel with a vercel.json rewrite rule for SPA routing The entire stack — auth, database, AI, and deployment — was developed end-to-end during this hackathon session. ## Challenges we ran into Firestore composite indexes. Combining where filters with orderBy in Firestore requires manually created composite indexes. Our queries were returning empty results until we diagnosed the issue from browser console errors and resolved it by removing orderBy from queries and sorting client-side instead. This meant that we could not see any of the available opportunities and the entire was not functioning properly. SPA routing on Vercel. Navigating directly to any route other than / returned a 404 because Vercel treated each URL as a file request. This meant that every single time we reloaded, a 404: Not Found error popped up and we had to restart from the landing page once again. The fix was a single vercel.json rewrite rule — simple once identified, but it took a moment to diagnose. Making AI feel real, not fake. Early versions of the CommandBar used mock data, so responses were impressive-sounding but disconnected from reality. Wiring it to live Firestore data — so the AI references actual volunteer names, real shift titles, and current fill rates — was the difference between a demo and a product. Designing for two users at once. Coordinators need density and control; volunteers need simplicity and speed. Building both within the same design system, without either feeling like an afterthought, required constant tradeoffs in layout, navigation, and information hierarchy.

Accomplishments that we're proud of

We're proud of the fact that the onboarding flow, dark mode support, volunteer matching system, and responsive dashboard all came together into a cohesive experience. We're also proud of being able to finally create a better solution to our volunteering difficulties. We are also proud of some of the other technical features we added: Real-time sign-up feed that updates live across two separate browser sessions simultaneously — no refresh, no polling, just Firestore pushing changes the instant they happen

  • AI that operates on real data — every Gemini response references actual volunteer names, real shift titles, and live fill rates from Firestore, not placeholders or mock data
  • Full end-to-end product built in a single hackathon session: authentication, database, two distinct user flows, AI matching, AI coordinator assistant, and deployment
  • The outreach loop — the AI doesn't just tell you who to contact, it writes the personalized email, shows you the draft, and lets you copy it in one click ## What we learned Building VolunteerConnect taught us how to make a real-time, full-stack application from scratch under time pressure. We learned how Firestore's onSnapshot listeners enable live data without polling, which became the backbone of our coordinator dashboard's real-time sign-up feed. We also learned how to design for two completely different user types — coordinators and volunteers — within a single product, each with their own flows, dashboards, and needs. On the AI side, integrating Gemini 2.5 Flash taught us how to go beyond a basic chat interface: by feeding our agent made in Google Cloud Console, which we were both unfamiliar with, with structured live data (real volunteer names, shift fill rates, open gaps) into every prompt, we turned the model into an operational assistant that gives specific, actionable answers rather than generic advice. ## What's next for VolunteerConnect Automated outreach — instead of copying emails manually, the coordinator clicks once and the message sends via SendGrid or Gmail API directly from the dashboard. Hours verification — coordinators confirm logged hours rather than volunteers self-reporting, creating a trusted record usable for school credit, résumés, and grant reporting. Recurring shifts — most nonprofits run the same shifts week after week. A single toggle to make any opportunity recurring would eliminate 80% of coordinator data entry. Volunteer profiles — persistent skill profiles, impact history, and reliability scores so the AI matching gets smarter with every signup. High-reliability volunteers surface first for critical shifts. Analytics — month-over-month fill rates, volunteer retention, peak demand forecasting. The data is already in Firestore; it just needs a reporting layer. Mobile app — volunteers find opportunities on their phones. A React Native port of the volunteer-side flows would dramatically lower the barrier to sign up on the go.

Built With

  • abortsignal-api
  • allorigins-cors-proxy
  • autoprefixer
  • firebase
  • firebase-authentication
  • firebase-email/password-auth
  • framer-motion
  • gemini-2.0-flash-lite
  • gemini-generatecontent-api
  • github
  • google-fonts
  • google-gemini-ai
  • google-generative-ai-sdk
  • google-identity-services
  • html5
  • instrument-sans
  • instrument-serif
  • intersectionobserver-api
  • javascript
  • lucide-react
  • next.js
  • node.js
  • npm
  • oauth-2.0
  • postcss
  • react
  • react-context-api
  • react-dom
  • react-hooks
  • react-router
  • requestanimationframe-api
  • sessionstorage-api
  • svg-animations
  • tailwindcss
  • vercel
  • vite
  • volunteerconnector-rest-api
Share this project:

Updates