Home Page
Game Description

Inspiration

One day, as we were walking through the middle of Aldrich Park, we remarked how beautiful the campus was and how relaxing it would be to explore every part of it. So, while we had some free time, we traveled around to the lesser-known areas, searching for interesting places to take some pictures to smile at in 10 years' time. We realized, "Hey, do you think we could remember where we took these pictures just by looking at them?" and that is how ZotGuessr was born.

P.S. For a more personal reason, we are also pretty acquainted with friends who like to collect Petr stickers and go to Petr drops and scavenger hunts. Wouldn't it be great if there is something that can help them prepare for it? Hint hint.

What it does

ZotGuessr allows players to enter a 5-round game, each with a random picture of the UCI campus. They then have 30 seconds to select the location on the expandable map where they think the picture was taken for a maximum of 1000 points per round, depending on how close their response was. If the player receives a high score, they can enter their name and have their scores displayed on the leaderboard.

How we built it

To start the project, we brainstormed ideas on what we wanted in the project. Once we had our ideas down, we began to write pseudocode to ease the process of actually implementing it. From there, we completed several react exercises under the guidance of our mentor to familiarize ourselves with web development. Afterward, we built a prototype of the game that did not have an interactive map, score, timer, and several other key concepts that were in the final product. This prototype allowed us to have a general grasp of what the final products will look at and build upon it from there. We then proceeded to work together to slowly add in these elements until we were satisfied with the front-end development. Next, we split up with one team working on the website's homepage and the other working on the back-end side of the game. By 10 pm, we had a completed homepage and game page. However, it was a close call to get the submission in before the deadline.

Challenges we ran into

For the front end, we ran into issues of unintended div formatting. Often, we would find that elements we added would be in unexpected places, with some elements not even showing up at all. We realized this was mainly because of our lack of familiarity with the language and syntax, as well as how we organized our code. For the backend, we had lots of troubles with edge cases. This challenge arose primarily after we started to add more variables, which increased the number of permutations of states the application could be in. This meant we had to handle edge cases we didn't initially plan for. Another big challenge we encountered was learning how to interact with the front end. Functions had to be wrapped with Flask wrappers, which meant we had to learn and understand how the framework works in addition to normal Python.

Accomplishments that we're proud of

Perhaps most obviously, we are very proud of our finished product and the teamwork that got us to proudly writing this page. To be frank, as a group with limited to no web development experience, we are quite surprised to have a product to show at all. Ultimately, we were able to utilize industry-standard techniques and coding frameworks/languages to build our project from scratch. However, while we would like to believe that our product is very impressive, it wasn't the greatest accomplishment that we are proud of. What we truly value and feel proud of is the communication and teamwork that allowed us to embark on and complete this learning journey. As cliche as it is, the old saying “It's not the destination, it's the journey” by Ralph Waldo Emerson certainly holds for our project.

What we learned

We all learned the basics of React and Tailwind from scratch, working with our mentor to discover the way to go from idea to product. Learning a whole new syntax system was confusing for us at first, but we eventually got smoother at it. In addition, we found that formatting objects on pages was a lot harder than expected, especially on the home page. In general, perseverance was crucial to keep pushing all the way until the end.

What's next for ZotGuessr

The most aspirational step would be to move our back end to a cloud service so that we would no longer need to host it on our own machines. This allows us to store data and host servers without needing to use our own machines. To further diversify our project, we would implement different game modes. For example, to create a more difficult challenge, we could reduce the time constraint or apply a filter on the image. If we really wanted to get fancy, we would implement API calls to a map service or use special Python geolocation libraries to gain better precision and quality-of-life features for our map.