UCISeek

Inspiration

We wanted to develop a location-based app based around utility. We decided to take inspiration from the game GeoGuessr to create a website to help UCI students remember the locations of buildings around campus.

What it does

UCISeek is a gamified app that lets new and continuing UCI students learn both where key locations are on campus and how far away different locations are from these buildings. Motivated by the game format, users can develop better spatial awareness of UCI, which will help them with scheduling their walks and class schedules.

To motivate further development and growth of the project, we included a manual submission system for new, user-submitted photos. In the future we wish to implement an automatic streamline for user images into an interfaced approval system and into the game.

How we built it

The front end is developed in React, with a main menu page and a gameplay page. The gameplay page presents a photo of a random building on campus, and an interactive map made with the Google Maps API. Then the user selects where the location on the map that they think is closest to where the photo was taken. The closer their marker, the higher their score.

The back end is developed in Flask. It receives cross-server requests from the front end to handle image prompts and scoring. It fetches images and locations from a Supabase database to facilitate gameplay.

Challenges we ran into

Front end: Our front end team experienced a learning curve when using React syntax. We were enthusiastic about learning this new framework. We also experienced issues with the continuous loop giving us too many re-renders.

Back end: Due to personal reasons our back end team was split between in person and remote. We successfully coordinated tasks to avoid merge conflicts and developed modules in parallel. In HTTP and API requests, we had trouble with the input/output formats and successfully created the input/output formats.

Accomplishments that we're proud of

We collaborated to build a functional project on different and interacting platforms: front end, back end, database, and maps API. We met all the requirements of our first and second functional iterations. Since we engaged in a solid planning stage before beginning implementation, we had a clear vision of our project throughout the hacking period with minimal changes in functionality and minimal problems in the implementation methods. We remained on schedule for the entire hacking period and finished in time with the Devpost.

What we learned

Front end: We developed a useful understanding of React’s features such as components, useEffects, and useStates. In 12 hours, we learned how to create a functional website with multiple pages: Home, Quiz, and Final Score. We made calls to the Google Maps API to use precise latitude and longitude components.

Back end: We learned how to interface with HTTP requests coming to and from an external front end using Flask with modular design. We created and stored images in a Supabase database and retrieved data using API calls in Flask.

Both development areas involved learning how to host their respective frameworks on a local server to generate a dynamic site, using VSCode with LiveShare and Git as the sole environment.

What's next for UCISeek

We imagine several additional use cases for UCISeek:

(1) A more targeted schedule helper: Students may enter their class schedule for the quarter. Using ICSSC's WebSoc API, UCISeek will determine where their classes are held and generate a game using at least all of those buildings.

(2) A community-driven exploration platform: Students may upload their own pictures with attached mobile phone metadata for coordinates. Then other students can discover spots on campus previously unknown to them and the game can grow a more robust and fine data set with minimal cost.

(3) Further and more challenging game cases: Using a generative AI API, UCISeek will replace the photo in higher stages with a text description of the photo. Then the user must think critically about the generative process of the AI system and must remember more minute details that were previously interpreted passively by their vision.

Built With

• flask
• github
• google-maps
• react
• supabase
• vite