GeoSnap | Devpost

auth0 login
root page
feed
attempt challenge
AI score
post to feed
root component
API

Inspiration

People all over the world today gatekeep their favorite spots to visit, like the majestic scenery of parks, the best local restaurants, or perfect areas to take photos. The need for us to go outside to defy the stereotype of typical CS majors, combined with our love for the game of Geoguessr where users attempt to guess the location of a randomly selected Street View location, inspired us to build GeoSnap, a real life version of the game. GeoSnap invites adventurers to step outside, discover hidden gems, and recreate scenic photo challenges, blending real-world exploration with the thrill of competition for digital rewards. We created GeoSnap to give individuals a chance to go outside and touch some grass in our increasingly digitized world, and explore their community in search of must-see locations around them by getting them to try and recreate other users' photo memories in different scenic locations they choose to upload as Challenges.

What it does

GeoSnap is a web app in which users can upload pictures they took at various locations and submit them as Challenges, at which point other users try to recreate the picture by searching for the real location in their city, physically traveling to the location, then matching up their photo as closely as possible to the original Challenge image. The closer in proximity you are in real life to the original location, and the more your image lines up with the original Challenge image, the higher your score. Users will compete for the highest combined score on a publicly visible leaderboard, with digital prizes for the top ranked users. Our program works by first passing in the user's submitted photo, extracting its real life location longitude and latitude coordinates using .jpg files' embedded geolocation metadata with EXIF. Next, using Google Gemini, our ML model compares the original Challenge image with the competing users' submitted guess images to check for similarity between what objects are common the AI detects in both images, then Gemini outputs a score from 1-5, with 5 being the highest similarity category, for the user's similarity score. To calculate the user's distance score, we utilized the Haversine formula to determine the mile distance between the user's guess image and the original Challenge image, with lower distance figures resulting in a higher score for the user.

How we built it

Our backend was built with NodeJS for the Google Gemini and Coordinate Geocoding API implementations, and MongoDB Atlas for the database of images and user identification, while our frontend was developed using TypeScript, React, and NextJS. Our user login system was developed using Auth0.

Challenges we ran into

We initially ran into issues getting our database set up as well as getting our ML image comparison model to work, however we ironed these problems out and got it working in the end. We ran into several challenges during development, including issues with database implementations causing errors in our UI, figuring out how to link our frontend interface to our backend, routing between the various subpages on our website, as well as with attempting to get our ML image comparison model to function as intended. However, ultimately, we successfully ironed these problems out and were able to deploy a working build of GeoSnap.

Accomplishments that we're proud of

Combined Group Total of 0 hours of sleep and 0 mg of caffeine consumed. On a real note, we are truly proud of our web app's overall usability, fluidity in its UX design, how we've given users the chance to go outside and touch some grass while trying to find people's favorite spots around the world that they try to gatekeep, as well as all the web development skills we learned while overcoming the many difficulties we experienced along the way.

What we learned

We learned not only on how to function on effectively 0 hours of sleep, but also about weighing the pros and cons of different APIs, ways of implementing an ML model, and frontend frameworks, as we ended up trying several different options before settling on our current tech stack. We also strengthened our knowledge on building a seamless frontend interface and connecting our user inputs to work well with our web app's backend logic and MongoDB Atlas database.

What's next for GeoSnap

To launch GeoSnap on a larger scale, we plan to deploy our web app to a publicly accessible website and mobile app counterpart with a way to take pictures natively within the app. This would streamline and speed up the process of users uploading images to receive their scores as quickly as possible after being compared to the original challenge images.