Project Info
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 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
. 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).
PinTheSlug
🔗 Live Demo (Archived) | 🎥 Video Demo of the Game
Note: Due to Google Maps API constraints, this site is no longer playable. This README highlights the features of the game as it existed during CruzHacks 2026.
Overview
PinTheSlug is a web game heavily inspired by GeoGuessr, where users guess the locations of places on the UC Santa Cruz campus. While GeoGuessr supports custom maps and even offers Santa Cruz-specific options, we wanted to create a more personalized experience for UCSC students — complete with a playful Slug-themed UI, fun campus facts after each round, and a free-to-play format designed for students new to campus.
Team & Contributions
Developed for CruzHacks 2026 by a team of 4:
| Member | Role |
|---|---|
| Delmo | Implemented the Google Maps and Street View API, led frontend design and implementation, and deployed the app to Vercel. |
| Wen | Built out the backend architecture, focusing on user authentication and populating the users table on login, with additional contributions to frontend features. |
| Matthew | Designed and managed the data layer, populating Supabase with campus images and map coordinates, and implementing backend functions to store and manage game data. |
| Angelica | Designed the site's visual aesthetic and custom sprites, and contributed to project documentation. |
Tech Stack
| Layer | Technology | Details |
|---|---|---|
| Frontend | React 19 + TypeScript 5.9 | Component-based UI with strict type safety |
| Build Tool | Vite 7 | Fast HMR dev server, tsc -b + Vite production build pipeline |
| Maps | Google Maps JS API + @react-google-maps/api | Street View panoramas, custom polygon boundary restricting guesses to UCSC campus bounds |
| Backend / Database | Supabase (@supabase/supabase-js v2) | PostgreSQL for game logs, user records, and campus location data; Auth via Supabase OAuth |
| Authentication | Supabase Auth + Google OAuth | Redirect-based OAuth flow with optional @ucsc.edu domain restriction |
| Linting | ESLint 9 + typescript-eslint | Enforced React Hooks rules and refresh-safe component exports |
| AI Assistance | Claude + Google Gemini | Used during development for code refinement and debugging |
Architecture
src/
├── components/ # React UI components (map, scoreboard, fun facts)
├── lib/ # Supabase client config and helper functions
└── main.tsx # App entry point
public/ # Static assets and campus images
Data flow: Campus location records (image + lat/lng coordinates) are stored in Supabase and fetched on game start. After each guess, the Haversine distance between the player's pin and the true coordinates is computed client-side to derive a score, which is then written back to Supabase along with a session ID for score history.
Map boundary: A GeoJSON polygon covering the UCSC campus is passed to the Google Maps API to restrict Street View and pin-drop interactions to campus bounds only.
Auth flow: Google OAuth is handled through Supabase Auth with a redirect callback URL. An optional email domain filter (@ucsc.edu) can be toggled in the Supabase dashboard to restrict signups to UCSC students.
Game Structure
The game follows a single-round structure modeled after GeoGuessr:
- 5 locations per game, all on the UCSC campus
- Sign in with Google to save progress and view past scores
- Perfect score: 5,000 points — the closer your guess to the actual location, the higher your score
- Campus fun facts appear after each guess, inspired by the LearnableMeta GeoGuessr plugin
Leaderboard
Guessing a Location
Results + Fun Fact
Google Street View Location
Ending Screen
Challenges
- Getting started was the hardest part — we initially weren't sure we'd be able to use the Google Maps API at all.
- Persisting game data in Supabase so users could view their score history required significant debugging.
- Time pressure on day 2 — the final two hours were spent simultaneously finishing the Devpost submission, polishing UI, and adding more campus locations.
Closing Thoughts
Although PinTheSlug is no longer live due to API cost constraints, we're proud to have shipped a fully functional game that other hackers and attendees actually played and enjoyed. This was our team's first time building and deploying something end-to-end together, which is an experience we're forever grateful for.
Shoutout to CruzHacks and GeoGuessr for the inspiration! 🐌
Analysis
View
Metric
- 15
- 10
- 6
- 3
Figures cover GitHub contributors during the hackathon window. A co-authored commit counts in full for each author, so per-member totals add up to more than the whole-team figures.
Technology
- CSSIn code
- HTMLIn code
- JavaScriptIn code
- ReactIn code
- SupabaseIn code
- TypeScriptIn code
- PostgreSQLClaimed
- VercelClaimed
6 of 8 appear in the indexed code. 2 claimed on Devpost could not be matched to code, which may simply mean the tool leaves no trace in the repository.
AI coding agents
No AI coding agent signals were found in this repository.
Detected from committed agent config files and commit authorship. Absence of a signal is not proof an agent was unused.
Codebase size
Source size
63 KB
Source files
15
Counts recognized source files only; vendored directories, binaries and lockfiles are excluded, so this is smaller than the repository on disk.
Repository
kdelmo1/geo_slug
38 files · 1.4 MB · @ b32a4a5
Structure
Interface
4 files · 11%Screens, components and styles rendered to the user.
Application logic
10 files · 26%Domain rules, services and shared utilities.
Supporting
Layers are inferred from where files sit in the tree, not from reading the code. A project that names its directories unconventionally will read oddly here — open the file browser to check anything the diagram implies.
Languages
- TypeScript73%
- CSS17%
- Markdown9%
- JavaScript1%
- HTML1%
Share of indexed source by file size. Binary and vendored files are excluded.
Dependencies
package.json
npm · 17- @googlemaps/js-api-loader
- @react-google-maps/api
- @supabase/supabase-js
- react
- react-dom
- +12 more
Declared in the repository’s manifests at the indexed commit. A declared package is not proof it is used, and runtime dependencies are listed first.
This project’s features have not been analysed yet.
Export this project's context (description, README, evidence, key source files) to chat with an AI agent elsewhere.