Start with the real city
The product challenge was to make a visit feel like an adventure, not a list of map pins. Each clue leads to a place that players can observe and explore on foot.
CityHunts · Self-guided city adventures
CityHunts
Product, architecture, and gameplay flows for a city-adventure platform.
3 min read
CityHunts turns a walk into an interactive adventure: discover routes, visit real places, and solve clues on your phone. No app download or live guide is required. I contributed to the architecture and product; the current stack pairs a React web app with Supabase backend services.
Turn a walk into a game
CityHunts brings urban exploration to a phone browser. Each route combines real places, clues, and challenges. Players do not need an installed app or a live guide.
Make the play loop clear
Players discover routes, preview the story and starting point, solve a clue on location, and track progress. The interface offers hints and accepts answers on a phone.
Support discovery and creation
The app combines React, TypeScript, and Vite with Supabase for data, authentication, and storage. Leaflet displays locations. Stripe handles payments for hunts and AI creation.
Improve the full journey
The commit history adds AI hunt creation, trial access for guest players, shareable completion cards, and post-hunt ratings. It also revises the mobile view to put the start action first and surface the riddle sooner.
React 18TypeScriptViteSupabaseLeafletStripeMobile web
How it is built
A lightweight web app connects mobile exploration with maps, game progress, and creation and payment services.
Web app
React 18 and TypeScript, built with Vite. Tailwind CSS styles the interface, and React Router handles routes for discovery, gameplay, and creation.
Data and services
Supabase provides PostgreSQL, authentication, and storage. Its Edge Functions handle backend processes such as route generation and payment operations.
Routes with real places
Leaflet and React Leaflet power maps and locations. Each adventure connects clues to specific places that players visit on foot.
Creation and payments
Stripe processes payments for paid hunts and AI generation. Backend functions coordinate generation and checkout operations.
Product features
Discover adventures
Search routes and filter by destination. Switch between cards and map; each listing shows its city, duration, and difficulty.
Preview a route before playing
The detail page brings together the story, starting point, duration, difficulty, and number of locations before players begin.
Solve clues on location
The game screen tracks progress, guides players to a real place, and presents a contextual question. Players can request a hint and submit an answer.
Create a hunt with AI
Choose a city or area, output language, number of stops, and optional creative direction. The price updates per stop; generation continues after checkout.
Product and public hunts
CityHunts lets players start an adventure in a phone browser and explore at their own pace.
FAQ#
Do I need to install an app?
No. The experience runs in your mobile browser.
Do I need to book a time or hire a guide?
No. It is self-guided, so you can start when it suits you.
What is included in the Granada hunt?
A route through central Granada and the Albaicín, with clues and challenges at real places.
What did you work on?
I contributed to the architecture and product. This page does not claim specific metrics or a more detailed individual scope.