Inspiration.

UCSC is a huge campus, yet most students only know a fraction of it. We wanted to encourage students to explore and test how well they really know UCSC and have them be able to connect location names to visual images. This was the driving inspiration for PinTheSlug.

What it does.

PinTheSlug is a UCSC-only GeoGuessr-style game. Players are either presented a random Google Street View location or image of somewhere on (or close to) campus and must pin where they think they are. Scores are based on the distance of their guess from the actual location. Players can log-in with their UCSC Google Account to record and view their game history.

How we built it.

• Frontend: React + TypeScript with Vite.
  
• Maps: Google Maps JavaScript API & Street View.
  
• Auth & Database: Supabase (Google OAuth, PostgreSQL).
  
• Deployment: Vercel.
  
  We used a polygon representing the UCSC campus boundary and randomly generated coordinates within it, validating locations using Google Maps geometry utilities. Authentication is handled via UCSC Google login, and user data plus score history are stored in Supabase.

Challenges we ran into.

• Valid location generation: Ensuring randomly generated coordinates were actually inside campus and had available Street View imagery required careful retries and geometry checks.
  
• Authentication + database sync: Users appear automatically in Supabase Auth, but we had to design logic to create matching user records in our database only when needed.
  
• Merging refactors: We restructured the project mid-hackathon, which caused merge conflicts and deployment issues that took time to resolve.
  
• TypeScript strictness: Type errors during deployment forced us to be more precise with types, especially when working with external APIs.

Accomplishments that we're proud of.

• Building a playable game with real Street View and static locations.
• Restricting access to UCSC students only via Google OAuth.
• Implementing accurate geospatial logic gameplay.
• Successfully deploying to Vercel.
• Coordinating and splitting up tasks among team members under time pressure, especially given that 3/4 of us are first-time hackers.

What we learned.

• How authentication systems like Supabase Auth interact with custom database schemas.
• Best practices for handling merges and refactors in team projects.
• How to work with geospatial data and Google Maps APIs at scale.
• The importance of designing for deployment early, not at the end.

What's next for PinTheSlug.

• Multiplayer.
• Game modes (timed, images only, street-view only, etc.).
• Community-uploaded images and fun facts to supply database.
• Leaderboards.
• Specific maps (dependent on size of community uploads).

Built With

• google-maps
• googleoauth
• postgresql
• react
• supabase
• typescript
• vercel