How to Clone Strava

Create a Strava-style social fitness app called Pacemark as a Next.js (App Router) + Tailwind + Prisma + SQLite project.

## Product
GPS activity tracking with a social layer: record runs/rides in the browser, share to a followers feed with kudos, compete on segment leaderboards. Freemium - recording and feed free, analytics and full leaderboards premium with a 30-day trial.

## Screens
- Marketing landing: dark hero with animated route line, free-vs-premium pricing table ($9.99/mo, $59.99/yr highlighted), FAQ accordion
- Record page: navigator.geolocation.watchPosition feeding a live Mapbox map, big timer/distance/pace readouts, start/pause/finish; finish opens a save form (title, type, visibility)
- Feed: activity cards (static map thumbnail, stats row, kudos button with count, comment count) from followed users, infinite scroll
- Activity detail: full map with route polyline, stat grid, splits-per-km table, segment efforts list with rank chips, comments thread
- Segment detail: map, stats, leaderboard table - free users see top 3 + own rank, rest blurred behind an upgrade CTA
- Profile: year totals, monthly distance bar chart (recharts), activities grid, follow/unfollow button
- Premium: comparison table + mock checkout that sets the trial

## Prisma schema
User (id, email, name, avatarUrl, bio, isPremium, trialEndsAt), Activity (id, userId, title, type, startedAt, durationSeconds, distanceMeters, elevationGain, routePolyline as JSON string of [lat,lng] points, visibility, photoUrl), Segment (id, name, polyline, distanceMeters, avgGrade, createdById), SegmentEffort (id, segmentId, activityId, userId, elapsedSeconds, recordedAt), Follow (followerId, followeeId), Kudo (userId, activityId, unique together), Comment (id, userId, activityId, body, createdAt)

## Logic
- Recording: collect a GPS point every 3s into local state; haversine distance between consecutive points sums to total distance; current pace from a rolling 30s window; persist the full point array on save
- Segment matching on save: a segment matches if any route point falls within 25m of the segment start and a later point within 25m of the segment end; elapsedSeconds = time between those points; create a SegmentEffort
- Leaderboard: best effort per user per segment, ordered by elapsedSeconds; gate rows 4+ behind isPremium
- Kudos toggle is idempotent (unique constraint); feed query = activities of followed users where visibility allows the viewer
- 'Start free trial' sets isPremium with trialEndsAt = now + 30 days (mock checkout, structured so Stripe drops in later)

## Components & API routes
- Components: MapView (wraps Mapbox), RecordControls, ActivityCard, StatGrid, SplitsTable, LeaderboardTable, KudosButton, FollowButton
- API routes: POST /api/activities (save + run segment matching), GET /api/feed (cursor-paginated), POST /api/kudos/toggle, POST /api/follow/toggle, GET /api/segments/[id]/leaderboard (truncated server-side for free users)
- Keep haversine distance, pace and segment-matching helpers in lib/geo.ts as pure functions with a handful of unit tests
- Recording state lives in a React context so navigating away mid-activity never loses the in-progress trace
- Feed map thumbnails: render a small canvas polyline preview from the stored points so cards don't each load a full Mapbox instance

## Style
Dark athletic theme: #131619 base, ember orange #FF6A2B accents and route lines, condensed bold headings (Archivo) + Inter body, dense stat grids with oversized numbers, 12px radius cards. Mobile-first with a bottom tab bar (Feed, Record, Segments, Profile).

Seed: 6 athletes with avatars who follow each other, 20 activities with plausible city GPS traces (generate point arrays along streets), 5 segments each with 6+ efforts so leaderboards are populated, kudos and comments sprinkled across the feed.

Build a production-quality Strava-style fitness tracking app. Mobile-first PWA now; background GPS on iOS will eventually force a React Native port, so keep tracking logic and entitlement checks in shared, framework-agnostic modules.

## Stack
- Next.js 14 App Router + TypeScript + Tailwind + shadcn/ui, next-pwa for installability
- Supabase: Postgres with PostGIS enabled, Auth (email + Google/Apple OAuth), Storage for activity photos
- Mapbox GL JS for interactive maps + Mapbox Static Images API for feed thumbnails; Turf.js for geometry
- Stripe Billing: monthly + yearly prices, 30-day trial on yearly, customer portal; Zustand for the recording store; Zod at every boundary

## Critical architecture
- RecordingEngine (pure TS module, no React): consumes geolocation positions, filters GPS jitter (drop points with accuracy > 30m or implied speed > 12 m/s for runs), computes cumulative haversine distance and rolling pace; buffers points to IndexedDB every 10s so a tab crash never loses an activity
- Geo storage: store traces as PostGIS LINESTRING geographies, not JSON - segment matching becomes ST_DWithin queries against segment start/end points with spatial indexes, which is the difference between 50ms and 5s
- Segment matching runs async in a Supabase Edge Function triggered after activity insert; it writes segment_efforts and refreshes a leaderboards materialized view - never block the save request on it
- Entitlements: free users get truncated leaderboard responses computed server-side (top 3 + own rank); never ship full leaderboard data to the client and hide it with CSS

## Schema
profiles (id, name, avatar_url, bio, city, is_premium, trial_ends_at), activities (id, user_id, title, type enum, started_at, duration_seconds, distance_meters, elevation_gain, route geography(LineString), visibility enum, photo_path), segments (id, name, route geography(LineString), start_point geography(Point), end_point geography(Point), distance_meters, avg_grade, created_by), segment_efforts (id, segment_id, activity_id, user_id, elapsed_seconds, recorded_at), follows, kudos (unique user+activity), comments. RLS on every table; visibility enforced in policies, not app code.

## Implementation order
1. Scaffold, Supabase schema with PostGIS, RLS policies (especially activity visibility), auth flows
2. RecordingEngine module with unit tests for distance/pace math and jitter filtering - test with recorded GPX fixtures, not live GPS
3. Record page: live map, readouts, pause/resume, IndexedDB buffering, save flow with polyline simplification (Turf simplify, ~50m tolerance) before upload
4. Activity detail + feed: static map thumbnails, splits computation, kudos/comments with optimistic updates
5. Segments: creation from an existing activity ('make this a segment'), Edge Function matcher, leaderboard view with premium truncation
6. Profiles, following, year totals; premium page with Stripe Checkout + webhook updating is_premium
7. PWA: manifest, offline shell, wake-lock during recording, GPX file upload as the fallback for watch users

## Quality bar
- A 45-minute recording must survive screen lock where the platform allows it, and recover from IndexedDB after a reload where it doesn't - document iOS Safari's limitations honestly in a KNOWN_ISSUES note
- Segment matching verified against fixture routes that should and should not match (out-and-back routes must not double-match)
- Feed pagination is keyset-based on (started_at, id), not OFFSET - activity feeds get slow fast otherwise
- Mapbox GL lazy-loaded: the feed must render with static thumbnails before any map bundle downloads
- PostHog events: activity_saved, kudos_given, leaderboard_paywall_viewed, trial_started
- Seed script: 6 athletes, 20 activities from bundled GPX fixtures, 5 segments with populated leaderboards

Start with step 1 and show me the RLS policies and the PostGIS schema before moving on.

Design the complete UI for a Strava-style social fitness app called Pacemark. React + Tailwind + shadcn/ui + lucide-react. Aesthetic: dark and athletic - charcoal #131619 base, ember orange #FF6A2B for CTAs, route lines and active states, white type with bold condensed headings (Archivo) and Inter body, sharp 12px-radius cards, oversized stat numbers. Maps use a dark style so orange routes glow against them.

## Screens

### 1. Marketing landing
- Full-viewport hero: dark map background with an orange route line drawing itself across it, condensed headline 'Every run counts. Make yours count more.', subline, orange CTA button
- Stats strip (athletes, activities, segments), three feature cards (Record, Compete, Improve) with icons, pricing table free vs premium ($9.99/mo, $59.99/yr with SAVE badge), FAQ accordion, dark footer

### 2. Record screen
- Map filling the top two-thirds with a pulsing blue location dot and orange trail behind it
- Bottom panel: three giant readouts (TIME / DISTANCE / PACE) in tabular numerals, huge circular orange start button that becomes pause/finish split buttons while recording
- Finish state: save sheet sliding up with title input, run/ride toggle pills, visibility select, 'Save activity' CTA

### 3. Feed
- App header with logo and streak-style weekly distance pill
- Activity cards: avatar + name + time ago, activity title, static dark map thumbnail with orange route, stat row (distance / pace / elevation) in a three-column grid, optional photo, footer with thumbs-up kudos button (orange when given, with avatar stack) and comment count
- Bottom tab bar: Feed, Record (center, raised orange circle), Segments, Profile

### 4. Activity detail
- Full-width interactive map, then a 2x2 stat grid (Distance, Moving Time, Avg Pace, Elevation) with big numbers
- Splits table: km column, pace bars whose width encodes speed, elevation chips
- 'Segments' section: rows with segment name, athlete's time, rank chip ('#3 of 412', orange if top 10), trophy icon for PRs
- Kudos avatar row and comments thread with input

### 5. Segment leaderboard
- Segment header card: mini map, distance, average grade
- Leaderboard table: rank, avatar, name, time, date - rows 1–3 crisp, rows 4+ blurred under a frosted overlay with a lock icon and 'See the full leaderboard' orange CTA; the viewer's own row pinned at bottom, highlighted

### 6. Profile
- Cover area with avatar, name, city, follow button, follower/following counts
- 'This year' stat trio (distance, time, elevation), monthly bar chart with orange bars, grid of recent activities as mini map cards

### 7. Premium paywall modal
- Dark glass card: feature checklist comparing free vs premium with check/lock icons, plan selector with yearly preselected and savings badge, '30-day free trial' orange CTA, fine print

Fully responsive but design mobile-first - this lives on a phone mid-run. Use realistic content: activity titles like 'Tuesday Tempo' and 'Coffee Ride to the Coast', plausible paces (4:45/km runs, 28 km/h rides), real-sounding athlete names.

Build a social fitness tracking app (Strava model) called Pacemark.

## Entities
- Activity: title, type (run/ride), startedAt, durationSeconds, distanceMeters, elevationGain, routePoints (array of lat/lng), visibility (everyone/followers/private), photo, owner
- Segment: name, routePoints, startPoint, endPoint, distanceMeters, avgGrade, createdBy
- SegmentEffort: segment reference, activity reference, user, elapsedSeconds, recordedAt
- Follow: follower, followee; Kudo: user, activity reference (one per user per activity); Comment: user, activity reference, body, createdAt
- UserProfile: name, avatar, bio, city, isPremium, trialEndsAt, weeklyDistanceGoal

## Roles & permissions
- Visitor: landing page and pricing only
- Free user: records activities, posts to feed, gives kudos and comments, sees top 3 of any leaderboard plus their own rank; advanced stats pages show an upgrade prompt
- Premium user: full leaderboards, splits analysis, route planning, year-in-review stats
- Admin: dashboard (total users, activities this week, premium count), can flag/remove activities and manage segments

## Pages
1. Landing: dark hero with route animation, pricing (free vs $9.99/mo or $59.99/yr with 30-day trial), FAQ
2. Record: live map using browser geolocation, big time/distance/pace readouts, start/pause/finish; saving creates the Activity and runs segment matching
3. Feed: cards from followed athletes (map thumbnail, stats, kudos button, comments link), newest first
4. Activity detail: route map, stat grid, per-km splits, segment efforts with ranks, kudos and comments
5. Segments: searchable list; detail page with map and leaderboard (free users see top 3 + own rank, the rest locked)
6. Profile: year totals, monthly chart, activity grid, follow button
7. Premium: comparison table and trial signup
8. Admin: users and activities tables, segment management

## Rules
- While recording, append a GPS point every 3 seconds; distance is the summed point-to-point haversine distance; pace derives from the last 30 seconds
- On save, match the route against every segment: if the route passes near the segment start and then near its end, create a SegmentEffort with the time between those points
- Leaderboards show each athlete's best effort, fastest first; positions 4+ require isPremium
- Kudos are unique per user per activity; feed respects activity visibility (private activities visible to owner only, followers-only to accepted followers)
- Trial signup sets isPremium true and trialEndsAt = now + 30 days; on login after expiry, revert to free

## Look & feel
Dark athletic theme: charcoal #131619 background, ember orange #FF6A2B accents and route lines, bold condensed headings, oversized stat numbers, dark map style. Mobile-first with bottom tab navigation.

Seed with 6 athletes following each other, 20 activities with realistic city routes, 5 segments with populated leaderboards, kudos and comments on most activities, one admin user and one demo user mid-trial.