GiveSpot

Inspiration

BC has 29,000 nonprofit organizations contributing $6.7 billion to the province's economy, yet volunteerism still hasn't recovered to pre-pandemic levels since COVID-19. What if the barrier wasn't willingness, but logistics? Travel, scheduling, and simply not knowing where to start stop a lot of people from ever showing up. We wanted to build something that met people where they already are, in their own neighbourhoods.

What it does

Give-Spot is a community-powered web app that enables pop-up volunteer and donation events. Users can browse an interactive map to find nearby pop-ups, see what supplies are needed, and show up to donate or sign up to volunteer. Anyone can also create a pop-up in minutes, specifying their location, timing, and what resources they're collecting on behalf of themselves or a local nonprofit.

How we built it

Frontend: Vite + TypeScript, with Leaflet.js for the interactive map Backend: Node.js + Express Database: Supabase (PostgreSQL), with a relational schema linking organizers, pop-ups, volunteers, and resources The core schema centers around a PopUp table connected to an Organizer, with a many-to-many PopUpVolunteer junction table for volunteer sign-ups and a one-to-many Resource table for tracking what each pop-up is collecting.

Challenges we ran into

One challenge we ran into was that the frontend and backend were developed separately by different team members. Since we were working in parallel, it was difficult to stay in sync, the backend would evolve and endpoints would change, while the frontend was built around assumptions that didn't always match the final API. To address this, we created a simple specification that outlined the expected API endpoints, request formats, and response structures.

Accomplishments that we're proud of

We're proud of how we worked together as a team when we ran into bugs and differing perspectives. Whenever we hit a problem, we troubleshot it together and kept open conversations throughout the whole process.

What we learned

Through this project, we got a lot more comfortable with TypeScript and Supabase, learning how to use them together to build a full-stack application. We also learned a lot about how to properly connect a frontend and backend, especially when different people are working on each side.

What's next for GiveSpot

Organizer authentication with secure password hashing and session management Real-time notifications when volunteers sign up for a pop-up Nonprofit verification so communities can trust who's organizing an event

Built With

• css
• html
• sql
• supabase
• typescript