How to Clone komoot

Create a komoot-style outdoor route planner called TrailForge using Next.js (App Router), Tailwind, Prisma + SQLite, and MapLibre GL for the map. Focus: hiking and gravel cycling.

## What to build
Sport-aware route planning on a map with elevation profiles, savable Tours, community Highlights, and a hybrid paywall: one-time region unlocks plus a Premium subscription.

## Screens
- Landing page: outdoor hero, sport chips, feature cards, sample Tours
- Route planner: MapLibre map with draggable start/via/end markers, right panel with sport selector and a live summary (distance, elevation gain, est. time, surface mix), elevation profile chart under the map
- Tour detail: route map, stats, elevation profile, turn-by-turn list, Highlights along route, photos, Save/Start
- Discover: filterable grid of public Tours (sport, distance, difficulty) with a map toggle
- Highlight page: POI with photos, tips, and connecting Tours
- Profile: your Tours and totals
- Shop/paywall: region unlock cards and a Premium subscription card
- Navigation view: a turn-by-turn screen for an unlocked region, with the next maneuver and remaining distance/time

## Prisma schema
User (id, name, email, isPremium, totalDistanceM), Region (id, name, minLat, minLng, maxLat, maxLng, priceCents), Tour (id, userId, title, sport, distanceM, elevationGainM, durationS, geometry Json, isPublic, createdAt), Waypoint (id, tourId, position, lat, lng, kind), Highlight (id, name, lat, lng, type, description), HighlightPhoto (id, highlightId, url), Purchase (id, userId, regionId, kind, createdAt)

## Routing & geo logic (must actually work)
- Routing: call a routing provider (GraphHopper-style endpoint) with a sport profile to get a polyline between waypoints; fall back to straight segments if offline. Decode and store the geometry as an array of [lat, lng]
- Sport profiles map to the provider's vehicle/profile param: hike and run prefer trails and footpaths, road prefers paved cycleways, gravel prefers unpaved tracks, mtb allows singletrack
- Stats: compute distance via haversine over the geometry and elevation gain from an elevation lookup; do this server-side on save
- Highlights along a route: query Highlights within a buffer of the route line (bounding-box prefilter, then point-to-line distance), ordered by their position along the route
- Dragging a waypoint re-requests the route; debounce so you don't spam the routing endpoint, and show an optimistic straight line until the real route returns
- Paywall: offline download / voice nav endpoints check a Purchase (region OR premium) before responding; the region lookup is a point-in-bounds test

## Acceptance
- Switching the sport changes the routed line for the same start/end points
- A locked region shows the paywall; after a (mock) purchase the Download/Start CTA unlocks
- Tour stats match the drawn geometry, and Highlights near the route appear in order

## Style
Cartographic and outdoorsy: forest green #1F6B3B primary, trail orange #E2711D accent, clean sans (Inter), map-dominant layouts, soft elevation-chart gradients.
Mobile-first with a collapsing bottom-sheet planner panel; the navigation view is full-screen with a large next-maneuver banner.

Seed: 8 Alpine Tours with real-ish geometry across all sports, 12 Highlights with photos placed along those Tours, 3 purchasable regions with bounds and prices, and one demo user who already owns one region so the locked vs unlocked states are both visible.

Build a production-quality komoot-style outdoor route planner. The routing, geo math and paywall must be server-authoritative; assume the client lies about what it has unlocked.

## Stack
- Next.js 14 App Router + TypeScript + Tailwind + shadcn/ui; MapLibre GL JS for the map, OpenMapTiles outdoor style
- PostgreSQL + PostGIS via Prisma (with raw SQL for geospatial queries); NextAuth (email + Google)
- A self-hosted routing service (GraphHopper or Valhalla) behind an internal API; do NOT reimplement routing
- Zod schemas shared between route-plan requests and stored Tour validation

## Core design: routing as a service, geometry as data
Define lib/routing/types.ts: Sport = 'hike' | 'road' | 'gravel' | 'mtb' | 'run'; a planRoute(waypoints, sport) wrapper that calls the routing engine with the matching profile and returns { geometry: LngLat[], distanceM, elevationGainM, surfaces }. Store geometry as PostGIS LINESTRING so 'Highlights near route' and 'Tours in region' are ST_DWithin / ST_Contains queries, not app-side loops.

## Geo & paywall (server-authoritative)
- POST /api/route/plan: validate waypoints, call the routing engine, compute stats, return geometry - never trust client-computed distance
- Region ownership: a Purchase (kind='region' for the region OR kind='premium') is required for /api/tour/[id]/offline and voice-nav tokens; check in a single guard
- Highlights along a route: SELECT ... WHERE ST_DWithin(highlight.geom, tour.geom, buffer) ORDER BY position - index with GiST
- Elevation gain computed from a DEM lookup server-side and cached per geometry hash

## Schema
users, regions (geom POLYGON, price_cents), tours (geom LINESTRING, sport, distance_m, elevation_gain_m, duration_s, is_public), waypoints, highlights (geom POINT, type), highlight_photos, purchases (append-only ledger; ownership derived). GiST indexes on every geom column; btree on tours(user_id), purchases(user_id, region_id).

## Implementation order
1. Schema + PostGIS + auth + seed (8 Alpine Tours and 12 Highlights as typed geo fixtures)
2. Routing wrapper + /api/route/plan + the planner map with draggable waypoints and live summary
3. Elevation profile + stats computation + Tour save
4. Tour detail page with turn-by-turn list and Highlights-along-route query
5. Discover (filter + map) and Highlight pages
6. Paywall: regions, purchases, offline guard, Premium subscription, condition/weather layer
7. Activity recording (GPS track → snap → Tour)

## Quality bar
- Planner stays responsive while dragging waypoints (debounce route requests, optimistic straight-line preview)
- Offline region download produces a verifiable tile + geometry bundle; the guard rejects access without a matching Purchase
- All geo queries use indexes; no N+1 point-in-polygon in app code

Start with step 1; show me the routing types and the PostGIS schema for tours and highlights before continuing.

Design the complete UI for a komoot-style outdoor route planner called TrailForge. React + Tailwind + shadcn/ui + lucide-react, with a MapLibre GL map. Aesthetic: cartographic and outdoorsy - forest green #1F6B3B primary, trail orange #E2711D accent, clean Inter typography, lots of map, soft elevation-chart gradients, photography-forward.

## Screens

### 1. Route planner (main screen)
- Full-height map dominating the layout with start/via/end pins and a drawn route line
- Right panel (desktop) / bottom sheet (mobile): sport selector chips (Hike, Road, Gravel, MTB, Run), start and destination search inputs, a reorderable waypoint list with drag handles, and a summary card showing distance, elevation gain, estimated time, and a surface-mix bar (paved/gravel/trail)
- Elevation profile chart pinned under the map, scrubbing it highlights the position on the route
- Top bar: logo, search, Save Tour and Start buttons

### 2. Tour detail
- Hero map of the full route with a Highlights ribbon
- Stats row: distance, elevation gain, est. time, difficulty badge, surface mix
- Elevation profile, then a turn-by-turn directions list with icons
- Highlights-along-the-way cards (photo, name, type), photo gallery, and a Download offline / Start navigation CTA that shows a lock if the region isn't unlocked

### 3. Discover
- Filter bar: sport chips, distance slider, difficulty, sort
- Responsive grid of Tour cards (map thumbnail, title, distance, elevation, sport icon, author) with a map-view toggle that pins Tours geographically

### 4. Highlight page
- Big photo header, name and type, map locator, a tips list from the community, and a row of Tours that pass through it
- An 'Add to route' button that drops this Highlight in as a via-point on a new plan

### 5. Profile & Shop
- Profile: avatar, totals (distance, tours, elevation climbed), tabs for Planned / Recorded / Saved Tours
- Shop/paywall: region unlock cards (map thumbnail, region name, 'Offline maps + voice nav', one-time price) and a TrailForge Premium hero card (gradient, benefit checklist: multi-day planning, condition layers, sport maps; $4.99/mo CTA)

### 6. Offline & navigation states
- A download sheet for an unlocked region with a progress bar and a downloaded-size figure
- A locked state on the Download/Start CTA: a padlock, the region name, and a 'Unlock for $9.99' button that opens the shop
- A turn-by-turn navigation view: full-screen map, the next maneuver banner, distance-to-turn, and remaining distance/time
- An empty 'no Tours here yet' state for an unexplored region with a 'Plan the first one' CTA

Fully responsive, mobile-first - the planner collapses to a draggable bottom sheet on phones. Use the forest-green/trail-orange palette consistently and keep elevation charts legible. Fill everything with realistic Alpine hiking and gravel content, 8 sample Tours, and 12 Highlights with placeholder photos.

Build an outdoor route-planning app (komoot model) called TrailForge for hiking and gravel cycling.

## Entities
- Region: name, geographic bounds, priceCents
- Tour: user, title, sport (hike/road/gravel/mtb/run), distanceM, elevationGainM, durationS, geometry (JSON list of lat/lng), isPublic, createdAt
- Waypoint: tour reference, position, lat, lng, kind (start/via/end)
- Highlight: name, lat, lng, type (viewpoint/water/cafe), description
- HighlightPhoto: highlight reference, url; HighlightTip: highlight reference, user, text
- Purchase: user, region reference (optional), kind (region/premium), createdAt
- UserStats: user, isPremium, totalDistanceM

## Roles
- Adventurer: plans routes, saves Tours, adds Highlights, buys regions or Premium
- Admin: manages regions and pricing, moderates Highlights, dashboard of users and Tours created per day

## Pages
1. Route planner home: interactive map with draggable start/via/end points, a sport selector, and a summary card (distance, elevation gain, estimated time, surface mix) plus an elevation profile chart
2. Tour detail: route map, stats, elevation profile, turn-by-turn directions, Highlights along the route, photos, and a Download/Start button that locks if the region isn't unlocked
3. Discover: filterable list of public Tours by sport, distance and difficulty, with a map toggle
4. Highlight page: a point of interest with photos, community tips, and the Tours that pass through it
5. Profile: your Tours and total distance
6. Shop: one-time region unlock cards and a Premium subscription upsell (multi-day planning, condition layers - mock checkout)

## Rules
- Planning routes and browsing Tours is always free
- Offline maps and voice navigation require an unlocked region (one-time purchase) or Premium
- A region is matched to a Tour by whether the Tour's start point falls within the region's bounds
- Premium adds multi-day planning and the weather/condition layer
- Tour distance and elevation are computed from the geometry, not entered by the user
- A Highlight can be added to a route as a via-point, which re-routes through it

## Look & feel
Cartographic outdoor style: forest green and trail-orange accents, map-dominant layouts, clean readable typography, soft elevation-chart gradients, photography-forward Highlight cards. Mobile-first; the planner collapses to a bottom sheet on phones and navigation goes full-screen.

Seed: 8 Alpine Tours with realistic geometry across all five sports, 12 Highlights with photos and tips placed along those Tours, 3 purchasable regions with bounds and prices, and one demo user who already owns a single region so both the locked and unlocked paywall states are visible.