GauchoGuessr

GauchoGuessr is a game where students will have their knowledge of UCSB's campus and the surrounding area tested. Players must locate the area from a 360 view to compete for a spot on the leaderboard!

Comment

Gaucho Guessr

Inspiration

UCSB is known for having a beautiful campus, and even after a collective 13 years on this campus we are still discovering new and exciting locations. With GauchoGuessr, users will be able to test their knowledge of campus as well as discovering new places to go and explore.

What it does

GauchoGuessr is a game where users will be placed at a random location on UCSB's campus or the surrounding area, and using the views that they can gather from that area they do their best to place this location on a map. This will be done 5 times per game, and each round will be scored based upon the accuracy of their guesses compared to the real locations of scenes. A leaderboard will be present to compete against your peers!

How we built it

GauchoGuessr utilizes a Google Could Firebase/Firestore backend running python and a React frontend. The backend is running fastapi on uvicorn, all hosted on a private Linux server. We used the Google Maps API to allow for the selection of locations, and Pannellum for the rendering of equirectangular panoramas.

Challenges we ran into

Figuring out how to capture the photospheres(equirectangular panorama) was a pain. We ended up having to source a 2019 version of Google Street View(now deprecated) to capture our images. Additionally when trying to integrate the Google Maps API with React properly sizing and placing the map to cover the entire area of play took some time. Nobody in our group had much experience with hosting or DNS configuration, so we had to learn about SSL, CORS, and records just in time!

Accomplishments that we're proud of

We have some pretty Gradients, and overall the design looks very polished and professional! The website is responsive on all devices, including mobile. The site and backend are all properly integrated and scalable, including automatic deployment and SSL certificates.

What we learned

We learned about hosting, DNS, CORS, SSL certificates, and deploying a backend as a public service. We also learned the usage of Google APIs with React. Additionally, we learned how to use iframes to embed external HTML within our JavaScript applications.

What's next for GauchoGuessr

More game modes including differing time formats, a dedicated mobile app, heads-up versus mode, and user login to save results and authenticate performance.

Built With

Share this project:

Updates