TL;DR:Detour is a map-first Wikipedia explorer with nearby articles, saved places, walking tours, and sidequests.

Wikipedia usually starts with a search box. Detour starts with a place.

Search a neighborhood, drag the map, open an article, save a few stops, and generate a walk. The core loop is place → article → route.

Product Shape

The first shippable version needed:

• A map of nearby articles.
• A reader that stays attached to the map.
• Saved places.
• Walking tours.
• Sidequests from the articles already visible.

No accounts, private database, or API keys needed.

Stack

Leaflet handles the map. Wikipedia's MediaWiki API returns nearby pages, then page extracts, thumbnails, and URLs.

geoUrl.searchParams.set("action", "query")
geoUrl.searchParams.set("list", "geosearch")
geoUrl.searchParams.set("gscoord", `${lat}|${lng}`)
geoUrl.searchParams.set("gsradius", radius)

Nominatim handles geocoding:

• Search text → coordinates.
• Coordinates → place names for shared tours.

For UI: Base UI for headless primitives, Vaul for drawers, Sonner for toasts.

detour stack — small pieces, specific jobs

Leafletmap substrate, markers, popups, and the route viewMediaWiki APInearby pages first, then extracts, thumbnails, and article URLsNominatimplace search, reverse geocoding, and shared-tour place namesBase UIheadless components for controls, menus, and accessible primitivesVauldrawer physics for the article reader and mobile sheetsSonnersmall bottom-center toasts for copy, save, and error feedback

The product is mostly coordination: public data, map bounds, saved state, deterministic routing.

Save Interaction

The save interaction needed to answer the click without turning into a reward machine. The heart remounts on state change and plays one small scale animation.

<Heart
  key={isSaved ? "saved" : "unsaved"}
  className="favorite-heart-motion"
  fill={isSaved ? "currentColor" : "none"}
/>

@keyframes favorite-heart-pop {
  0% {
    transform: scale(0.84);
  }
  58% {
    transform: scale(1.16);
  }
  100% {
    transform: scale(1);
  }
}

Same motion, reused everywhere: cards, popups, drawer chrome, tour stops.

Agentic Design Workflow

The project started in v0. I iterated from v1 to v34 to get the map, list, reader, saved places, and tour controls onto the screen.

• v0: first interface, broad product passes.
• Codex: repo-level fixes, build errors, focused implementation tasks.
• Claude Code: file-level edits where I needed more control.

Codex wasn't as good at zero-to-one here; it reached for Vite when I wanted Next.js. It became useful once the repo existed and the tasks were better defined.

Next Up

Make tours editable: remove a stop, reorder stops, choose shorter loops.

Try Detour