OpenGuessr

BoilerGuessr: Geoguessr for Purdue. Drop into Street View, a vintage photo, or a random spot on campus and pin where you think you are. Climb the leaderboard across three modes.

Comment 2

Inspiration

Purdue University is massive, and figuring out where your classes are is practically a rite of passage. We are huge fans of GeoGuessr and realized there wasn't a dedicated, hyper-local version to test how well Boilermakers actually know their own campus. We wanted to build something fun, competitive, and school-spirited that would settle the debate once and for all: who really knows West Lafayette best?

What it does

BoilerGuessr drops players into a Street View panorama somewhere on the Purdue West Lafayette campus. Players have to figure out where they are and drop a pin on a 2D Leaflet map.

It features three modes:

Curated Mode: Hand-picked iconic landmarks, academic buildings, and hidden gems.

Historical Mode: Can you find out where you are from historical photos?

Random Mode: Uses a custom algorithm to drop you anywhere within the campus boundaries.

How we built it

We built the frontend using React and Vite, styling everything with Tailwind CSS to perfectly match Purdue's Old Gold and Boiler Black aesthetic.

The core mapping experience bridges two different tools: we use the Google Maps JavaScript API to render the interactive Street View panoramas, and react-leaflet (with OpenStreetMap tiles) for the 2D guessing map.

For the backend, we used Supabase (PostgreSQL) to implement a frictionless, real-time leaderboard. Finally, we hooked up the Anthropic Claude API to generate context-aware hints and post-round commentary dynamically based on the geocoded location data.

Challenges we ran into

API Key Security & Restrictions: Since frontend apps expose API keys to the browser, we had to quickly learn how to properly secure our Google Cloud keys using HTTP Referrer restrictions so our free trial credits wouldn't get drained.

The "Middle of the Ocean" Problem: By default, generating random coordinates might place a user inside a building without Street View, or miles off campus. We had to write a custom polygon bounding box and a ray-casting pointInPolygon algorithm to ensure random drops were strictly confined to walkable campus areas with valid Street View coverage.

Managing Asynchronous Maps: Making sure the Google Maps script loaded exactly when the React components mounted (without crashing or rendering blank grey boxes) required some tricky useEffect and Promise management.

Accomplishments that we're proud of

The AI Commentary: Passing spatial data into Claude and getting back a JSON payload with a customized, funny reaction and a hyper-local Purdue trivia fact makes the game feel incredibly alive and polished.

The Custom Polygon Logic: Successfully writing the math to bound random drops specifically to the West Lafayette campus rather than relying on a sloppy radius.

Shipping a Full Stack App: Integrating Maps, Leaflet, an AI language model, and a backend database into a seamless game loop within the hackathon time limit.

What we learned

We leveled up our React skills, specifically handling complex state between multiple map instances. We learned the hard way about environment variables and the crucial difference between .env and .env.example. Most importantly, we learned how to quickly spin up a Backend-as-a-Service (Supabase) to add a competitive, persistent layer to a frontend application.

What's next for OpenGuessr

We want to take the core engine of BoilerGuessr and turn it into OpenGuessr—a scalable platform where any university student can instantly generate a bounding polygon of their own college and create a localized version for their campus. We also want to add multiplayer lobbies, daily challenges, and a time-attack mode!

Share this project:

Updates