EcoGuessr

Learn about protecting the environment while having fun with geography!

Comment

🌍 EcoGuessr: A Game That Makes You Think Before You Click

🔍 What Inspired Us

We were inspired by a mix of GeoGuessr and environmental urgency. As climate change becomes more visible in our everyday lives, we wanted to build something that made people look closer at the planet—literally. EcoGuessr started as an idea to combine satellite imagery, climate awareness, and spatial reasoning into an interactive and educational experience.

We thought: what if people could guess locations not just based on landmarks, but based on environmental damage or natural patterns visible from space? From dried-up lakes to sprawling deforestation, the environment leaves clues—we just have to train ourselves to recognize them.

📚 What We Learned

Through this project, we learned a lot—technically and conceptually:

  • How to work with React to build an interactive web app with fast rendering and state management.
  • How to integrate Google Maps APIs to render accurate map interfaces and reverse geocode coordinates.
  • How to use satellite images effectively as gameplay visuals, and dynamically check guesses based on coordinates.
  • The subtle details that differentiate ecosystems (like deserts, tundras, and rainforests) from space—and what that says about human impact.

We also gained a deeper appreciation for how visual media can make abstract issues like climate change more real and tangible.

🛠️ How We Built It

We built EcoGuessr using:

  • Frontend: React + Vite for fast development and smooth user interaction.
  • Styling: Tailwind CSS for flexible and clean UI design.
  • Maps & Coordinates: Google Maps JavaScript API to show the interactive map, and geolib to calculate distance between the guessed location and the actual answer.
  • Gameplay Logic:
    • Each round displays a real-world satellite image.
    • The user clicks on a map to guess the location.
    • The app calculates how close the guess is to the true location and scores accordingly.
  • We used a simple image dataset (stored locally for now) of various biomes and environmental regions with hardcoded coordinates.

The whole app is self-contained, so it runs smoothly and doesn't rely on complex backend infrastructure.

🚧 Challenges We Faced

  • Coordinate math: Calculating distance from two lat/lng points precisely and turning that into a fair scoring system took a few iterations.
  • Map API quirks: Integrating the map while keeping UI responsive and consistent across screen sizes was tricky.
  • Image sourcing: We didn’t want to use copyrighted or misleading imagery, so we had to be careful about curation—ideally we’d expand to use an API in the future.
  • Guessing experience: Making the feedback satisfying (like showing how far off you were) while still being educational was a UX challenge.
Share this project:

Updates