Inspiration
Geoguessr is a viral game where you are placed on a street somewhere in the world and have to pinpoint your location exactly. It's definitely fun to play and entertaining to watch, but the average person will have a hard time getting any sort of decent score. In a chase of the same high that skilled Geoguessr players experience after a good guess, we decided to take inspiration from the game, but reduce the scope of the pictures to only UNC's campus. While some areas will be easy to recognize, UNC's campus has no shortage of weird nooks and crannies that hide their own unique sights.
What it does
After starting a game, you are put on a page with a pannable/zoomable 360 image. Once you are ready to make a guess, you can navigate a map widget and click on where you think the image was taken. After submitting your guess, a score is calculated based on how far away you are from the actual capture point. Each game has 5 rounds and a final score is calculated at the end by adding together all of the round scores.
How we built it
We built this project by working on the backend and frontend simultaneously then combining it together at the end. Vikram worked on the game screen using pannellum and leaflet to create an interactive map and panorama. Colin worked on images for our project, taking images across campus and creating our logo. Owen worked on the website design using bootstrap. Jason used express and sqlite to create a backend so game sessions could be tracked.
Challenges we ran into
Initially we were planning on using tailwind to design our frontend, but after multiple hours we still struggled with integrating it with vite, so we decided to cut our losses and write plain html using bootstrap as a supplement. On the backend side there were multiple issues with sqlite, we were having issues with multiple responses being sent back to the frontend because we made mistakes implementing the sqlite library's asynchronous features; if an error occured in a previous database call it wouldn't propagate until data had already been sent to the user.
Accomplishments that we're proud of
The one thing we are really proud of is getting the 3d photo sphere to work. A the beginning of the project we were going to settle and only use panorama views that could only be scrolled left and right. We are proud of the fact that we were able to do a little more searching in order to provide a better experience.
What we learned
We learned multiple things in this project, including how to use panoramic images and maps. We also learned about how to make backend servers in js. Colin, the biggest beginner on our team learned a lot about web development including json and css.
What's next for Where The Heel?
While we were able to capture a fair amount of imagery Saturday night/Sunday morning, it is very possible to quickly get repeats across games. In the future, we will capture much more photography capturing not only north campus, but south campus as well as other recognizable UNC landmarks such as Gimghoul castle, the outdoor education center, and Franklin street. The site is in a very operable state, but there is definitely polish that we can add to improve the user experience.
Log in or sign up for Devpost to join the conversation.