Inspiration
I had met two of my team members, Jacob and Nhan, before at a Petr sticker drop event. In those sticker drops, the Petr sticker account posts a random location for where to receive the stickers. This reminded me of the GeoGuessr game, and we thought that a geolocation game based around the UC Irvine campus would be very engaging.
What it does
The game puts the user in a random location on UC Irvine’s campus. They can only look around their surroundings. Based on their analysis of the location, they mark a pin on a map for their guess. The app then finds the distance of the guess from the actual location using the Haversine formula and scores the user based on an exponential scale. Closer guesses yield more points, whereas farther guesses yield much less.
How we built it
We built it using the Google Maps API and Leaflet.js. We used the Google Maps API to display a Street View of a random location on UCI’s campus and record its coordinates. Then we created a Leaflet.js map instance in which the user can drop pins on the map.
Challenges we ran into
Our initial challenge was first learning how to use the Google Maps API and Leaflet, which gave us the challenge of reading a lot of documentation. Another challenge was keeping a cohesive design style, so we kept a very minimalistic UI. Another challenge was figuring out how to use the Google Maps API key when hosting online, because we didn’t want the key to be shown on the frontend. We ended up switching to hosting on Vercel so we could keep our API key safe.
Accomplishments that we're proud of
We’re proud of putting together a minimum viable product of our idea in less than a week. We also learned several new libraries together, and I personally relearned JavaScript, which made it really rewarding to build and contribute to the game mechanics.
What we learned
We learned how to use the Google Maps API and Leaflet.js. Our greatest lesson was learning the agile design process when programming. This was also one of our first hackathons.
What's next for ZotGuesser
We plan on adding online leaderboards, multiplayer, and setting up OAuth2 login via Google. Additionally, we aim to fix bugs regarding distance calculations and pin placement.
Log in or sign up for Devpost to join the conversation.