Inspiration: Our project was inspired by the prompt: “Make This Not Gross.” It posed a very real challenge — the city doesn’t always know when a street is dirty, poorly lit, or unsafe. But residents and people walking by do. The problem? Reporting through 311 is inconvenient and often ignored.
One idea we really admired was “Is This Gross?” — QR code stickers that let people instantly report an issue at a location. That sparked a broader question for us: What if people could share how their entire neighborhood feels — not just what’s broken, but what’s great, what’s frustrating, and what’s changing — all in one place?
That’s how Wander was born. It’s a visual, community-powered platform for sharing everyday neighborhood experiences in a way that could be useful for both residents and the city.
What it does: Wander allows users to search for neighborhoods in San Francisco by name and contribute to the community by submitting reviews that include star ratings and descriptive tags such as “quiet at night” or “needs more lighting.” An interactive, color-coded map visually highlights each neighborhood based on its average community rating, making it easy to explore and compare different areas at a glance. Users can visit detailed profile pages for each neighborhood to view all related reviews, tags, and feedback submitted by fellow residents and visitors. Over time, this user-generated data offers valuable insights that cities can leverage to better understand the unique needs of each area—directly informed by the people who know them best.
How we built it: We used Next.js 14 and React 18 to build a fast, responsive frontend, with Tailwind CSS for utility-first styling. For our mapping functionality, we integrated Leaflet.js with React Leaflet, and used GeoJSON to draw accurate San Francisco neighborhood boundaries. All neighborhood data is organized in a central TypeScript file (sf-neighborhoods.ts), which includes names, descriptions, coordinates, and metadata like average rating and tags. We created reusable UI components like a SearchBar with autocomplete, ReviewCards, and a dynamic Map component that changes color based on review scores.
Challenges we ran into: Working with Leaflet in a server-side rendered environment like Next.js introduced some headaches, especially around hydration mismatches and dynamic imports. Aligning GeoJSON data precisely with the city’s real-world layout took a lot of tweaking. And building a seamless search + filter experience — especially one that plays well with the map view — required careful coordination between components. But we kept the scope clear and focused, which allowed us to build a stable MVP that felt polished and functional.
What we learned: We learned how to work with geospatial data, visualize it on maps, and design a fully responsive web app that’s both data-rich and intuitive. We also learned that civic tech can be beautiful and usable — when built thoughtfully, platforms like this can actually make people want to participate.
Log in or sign up for Devpost to join the conversation.