-
-
Homepage
-
Location finding interface
-
Score interface
Inspiration
As a team, we are appreciative of all the unique features the UC Irvine campus has to offer, from the trees of Aldrich Park to its distinct architectural styling. Coming into UCI post-COVID was challenging for many of us, as we were not familiar with the layout of the campus. We hope ZotGuessr allows prospective students, alumni, and more to explore UCI in a different way.
What it does
ZotGuessr is a web-based game that lets players guess the locations of various UCI buildings and landmarks. Players are initially presented with a Google Street View panorama and a Google Maps interface. The player is then able to select a location on the map where they believe that landmark is. Depending on how close the player gets to the given location, they're allocated a certain number of points that drops off the farther they were from the target.
How we built it
ZotGuessr was built as a web app based primarily on React, a JavaScript library for building user interfaces. Bootstrap, a CSS framework, was used to tidy up the website and make it look neat. We used the Google Maps API, along with its Street View service, to assist with displaying the maps on the page and making them interactive.
Challenges we ran into
We found that using React made the Google Maps API using vanilla JavaScript very hard to implement. The Google Street View implementation using vanilla JavaScript worked perfectly while those for React failed to show up whatsoever. However, the map implementation using vanilla JavaScript made it extremely difficult to save user input for processing. In the end, we opted to use vanilla JavaScript since it works best with the Google Maps API.
Accomplishments that we're proud of
We became familiar with the documentation of the Google Maps API in such a short amount of time. It was our first time using an API that ran a script instead of returning data like usual. The graphical portions of ZotGuessr were well done in our opinion. We're also proud of the self-produced background music custom-made for this project.
What we learned
While mixing and matching React components with vanilla JavaScript is not ideal, it also makes it much easier to implement certain features, like the line that's displayed between the user's selected location and the actual location of the landmark.
What's next for ZotGuessr
ZotGuessr in its current state is a fun experience, but there are more features in the works. In the future, we hope to add even more locations both on and off-campus, as well as the ability to display photos of the locations. The ability to play multiple rounds in one session and a timed mode would expand the possible gameplay options. We also hope to add a leaderboard feature, which will allow players to compare how well they know campus landmarks versus other players.
Log in or sign up for Devpost to join the conversation.