VanCompass

Inspiration

Van Compass started from a simple observation: visitors often know where they want to go, but they do not always understand what is around them. A normal transit app can tell someone how to get from one station to another, and a map app can search for a specific place, but neither feels like a local companion that helps people quickly read the city.

We wanted to build something for Vancouver visitors that combines movement, orientation, and discovery. The goal was to make the city feel more approachable: where is transit, where can I stop, what is nearby, and what is worth noticing?

What it does

Van Compass is a Vancouver-focused transit guide and nearby city radar.

In Travel Mode, the app helps visitors follow a transit-oriented route through the city. It gives a clear mobile-first route experience and keeps the focus on moving through Vancouver with confidence.

In Stationary Mode, Van Compass turns the user’s current location into a radar view of nearby places. It shows useful categories such as transit, food, comfort stops, and landmarks. Users can select a place, see its distance and direction, open walking directions, and switch into a fullscreen radar view for easier use on mobile.

Instead of asking visitors to search for every place manually, Van Compass helps them understand what is nearby at a glance.

How we built it

We built Van Compass as a React and Vite web app. The map experience uses Leaflet and OpenStreetMap-based data. The interface is designed around two main modes: a travel guide mode for movement and a stationary radar mode for nearby discovery.

For the radar, we calculate relative positions of nearby places around the user and display them as category-colored markers. We added visual distinctions for different place types, selected-place details, walking directions, and a fullscreen radar mode to make the experience more usable on phones.

We also focused heavily on mobile behavior, since the app is intended for visitors who are already outside, moving around, and using one hand.

Challenges we ran into

The hardest part was making a map-like experience feel simple on a small screen. A regular map can become crowded quickly, so we experimented with a radar metaphor to make nearby discovery easier to understand.

Mobile browser compass support was another challenge. Different phones and browsers expose orientation data differently, and some readings can be noisy or inconsistent. We had to add fallbacks such as manual heading, movement heading, calibration, and smoothing so the experience would remain usable even when compass data was imperfect.

We also explored broader fan-experience ideas, but feedback helped us narrow the project. The strongest version of Van Compass became the practical one: a focused Vancouver transit and discovery guide.

Accomplishments that we're proud of

We are proud that Van Compass feels like a real visitor tool rather than just a map demo. The app combines transit context, local discovery, radar visualization, category markers, walking directions, and mobile-first design into one coherent experience.

We are also proud of how quickly we iterated. We tested multiple concepts, removed ideas that made the project less focused, and improved the parts that made the product clearer and more useful.

The Stationary Mode radar is the part we are most proud of. It gives the app a distinctive identity while still solving a practical problem for visitors.

What we learned

We learned that a hackathon project becomes stronger when the story is focused. Our early ideas were broader, but the most useful direction was to help visitors navigate and understand Vancouver.

We also learned that mobile web features can behave very differently across devices, especially compass and orientation APIs. Designing good fallbacks is just as important as building the ideal version.

Most importantly, we learned that “local discovery” does not have to mean overwhelming users with information. A simple radar view can help people quickly understand what is around them.

What's next for Van Compass

Next, we would improve live transit integration, add more curated Vancouver routes, and refine the radar experience with better filtering and more reliable orientation handling.

We would also like to add event-aware recommendations around major venues, transit hubs, and visitor-heavy areas. Van Compass could eventually become a lightweight companion for visitors arriving in Vancouver for sports, festivals, conferences, or tourism.

The long-term goal is to make Van Compass feel like a local guide in your pocket: helping you move through the city, discover what is nearby, and feel more confident in Vancouver.