Voir

Imagine a tool that reveals your store’s visibility with clarity. Voir analyzes customer interactions, trends, and competitors to boost impact. See beyond numbers and maximize your store’s potential!

Comment

Inspiration

Voir was born out of the need to better understand the dynamics of what it takes to not just run a proper storefront but hold potential at the same time. The ability to confidently say that your business can potentially have x number of customers is something not everyone can boast about. Outlining your strategy might take time but to get the data to form one shouldn't.

What it does

Voir is a web‑based scoring application that can:

  • Visualize the road networks: By simply inputting an OSM way ID, users can see the main road segment highlighted on a map and be able to see what kind of traffic they can expect.
  • Display connected roads: The tool fetches all roads directly connected to the primary road, rendering them alongside the main segment to make sure they don't lose out on any potential customers they can cater to .
  • Calculate traffic : Quickly, with just the OSM way ID they can get a good sense of how many eyes can and will be on the store.
  • Overlay points of interest: Voir marks nearby amenities and POIs to make sure you are where traffic is. Score road segments: Using a custom algorithm that factors in proximity and traffic volumes, it calculates a “score” for each connected road to indicate its relative impact on traffic flow or connectivity.

How we built it

We built Voir using a Next js combined with a variety of APIs:

  • Data Sourcing: We tapped into the Overpass API to retrieve road segments and points of interest from OpenStreetMap.
  • Data Processing: Custom TypeScript helper functions convert raw OSM data into usable segments, calculate distances using the Haversine formula, and generate scores based on distance and volume.
  • Visualization: The Google Maps API serves as our interactive map layer, where we render primary and connected roads, distance markers, and POI markers with hover‑over info.
  • Modular Architecture: Our code is organized into reusable components (such as Map and Score) and utility functions, making the project scalable and maintainable.

Challenges we ran into

  • Integration : Integrating all the different ideas and factors to calculate one final score is something we are still working on. Although we were demanded only one python script we wanted to take it a step further and make an actual WebUI for the actual Client facing website.
  • Data Nuances: OpenStreetMap data can be inconsistent; fine‑tuning our Overpass queries was crucial to fetch accurate, relevant road and POI data.
  • API Limitations: Managing CORS issues, rate limits from Overpass, and integrating two different APIs (Overpass and Google Maps) required creative workarounds.
  • Real‑Time Rendering: Ensuring that dynamic calculations (like distance and scoring) updated efficiently on the map without performance hiccups was a key hurdle.
  • Data Conversion: Mapping raw node data to meaningful geographic segments and handling edge cases (such as incomplete data) required significant testing and refinement.

Accomplishments that we're proud of

  • Seamless Integration: We successfully combined multiple data sources—OSM and Google Maps—into a cohesive and interactive tool.
  • Robust Utility Functions: Our modular TypeScript functions for data conversion, distance calculation, and scoring are both robust and reusable across different parts of the application.
  • Intuitive User Interface: The interactive map view that overlays roads, POIs, and live scores offers immediate, visual insights that are both powerful and user‑friendly.

What we learned

Through developing Voir, we gained invaluable insights into:

  • Geospatial Data Processing: Handling and transforming geospatial data from disparate sources is complex but incredibly rewarding.
  • API Integration: Effectively integrating multiple APIs (Overpass, Google Maps) requires careful attention to detail, especially around performance and error handling.
  • React & TypeScript Best Practices: Building a modular, scalable application with strong type safety has improved our code quality and maintainability.

- Iterative Development: Continuous testing and iteration are key when working with real‑world data; what works in theory often needs adjustments in practice.

What's next for Voir

  • First we really want to make sure all the integrations are seamless. We are 4 different individual "micro projects" which do work by themselves but need that bit of glue to hold them all together
  • Secondly, a proper understanding took a bit more time than expected and with a far better understanding now we are more capable of removing a lot of inefficiencies that exist
  • Also, there are so many other factors which we realistically do have a model for like, storefront visibility based on height, connections of the current business to the points of interests around them like restaurants around business areas have more eyes on them than any other one, so on and so forth.
Share this project:

Updates