• 

  Logo

NeighborGood

Inspiration

In Vancouver, people want to help but often don’t know how. Students have extra meals, neighbours have spare jackets, and many of us have a free hour between classes. At the same time, small food banks, Indigenous support centres, and mutual-aid groups rely on unpredictable donations and struggle to communicate what they need in real time.

We asked ourselves a simple question: What if every extra meal, jacket, or free hour could instantly reach someone who needs it?
That idea became NeighborGood — a tool that turns small, everyday actions into meaningful community support.

What It Does

NeighborGood is a real-time charity-matching platform for Metro Vancouver. It connects what a user has — food, clothing, time, or funds — with nearby organizations actively needing those items.

Users can:

• Enter what they want to give.
• View an interactive map of nearby charities sorted by distance and urgency.
• Filter by cause area such as food security, housing, Indigenous support, LGBTQ2S+ support, and more.
• View detailed info about what each org accepts and when they’re open.
• Track their visits and engagement through NeighborGood Points.

NeighborGood makes giving local, fast, and frictionless.

How We Built It

• Frontend: React + Vite + React Router
  
• Map Rendering: Leaflet.js with custom emoji-based markers
  
• Location Logic: Browser geolocation + Haversine distance calculations
  
• State Management: React Hooks for filters, saved charities, visits, streaks, and points
  
• Design: Fully custom CSS, dark/light themes, landing page animations, responsive layout
  
• Data: Static dataset of Metro Vancouver community orgs (food banks, shelters, grassroots mutual aid groups)

We aimed to design an experience that feels modern, clean, and immediately actionable.

Challenges We Ran Into

• Integrating React + Leaflet without rendering glitches
  
• Achieving perfect layout consistency between light and dark mode
  
• Fixing unexpected white-space and CSS overflow issues
  
• Ensuring the map and sidebar resize correctly across viewports
  
• Designing a landing page from scratch within limited time
  
• Balancing UI polish with core functionality under a hackathon timeline

Accomplishments We’re Proud Of

• A fully working prototype of a real-time giving map
  
• A polished, animated landing page with strong storytelling
  
• A seamless flow from “I have...” → map → detailed org info
  
• Custom markers and urgency indicators
  
• A point-tracking system that encourages recurring micro-actions
  
• A project that feels genuinely helpful for Vancouver communities

What We Learned

• How to build and optimize map-based UI inside React
  
• How important small UX decisions are (spacing, color, icons, hover states)
  
• The value of designing for clarity, not complexity
  
• How to build tools that support social good and reduce friction in daily decision-making
  
• How to collaborate under pressure while maintaining high visual standards

What’s Next for NeighborGood

The vision for NeighborGood extends beyond a prototype.

Future development goals:

• Verified accounts for organizations
  
• Real-time dashboards for donation needs
  
• Push/SMS alerts for urgent requests near you
  
• Expanded donation categories (tutoring, community events, senior support)
  
• Gamified streaks, badges, and citywide challenges
  
• A full mobile app for iOS/Android
  
• Partnerships with universities, local nonprofits, and the City of Vancouver
  

NeighborGood could become a citywide micro-donation network, making it effortless for anyone to support their neighbourhood.

Built With

• javascript
• react
• vite