How to Clone Waze

Create a Waze-style community navigation app called RoadPulse using Next.js (App Router), Tailwind, Prisma + SQLite. Niche: cyclists reporting road hazards. Use the Mapbox GL JS map and Mapbox Directions API for the map, search and routing - DO NOT build a routing engine or your own map data; build the report layer.

## What to build
Navigation where the community keeps the map alive: riders report hazards, others see them live, vote them up or down, and reports expire to stay fresh. Points gamify contribution.

## Screens
- Map home: Mapbox map with current location, nearby report pins (icon by type, faded by age), destination search, route line, floating REPORT button
- Report sheet: hazard-type grid (Pothole, Glass, Bad Junction, Closed Path, Dooring, Other) -> drops a pin at current location
- Report popup: type, age, distance, 'Still there?' / 'Gone' confirm/dismiss with counts
- Navigation mode: route line + next-turn banner from the Directions API + 'hazard ahead' alerts
- Report popup: type, age, distance, 'Still there?' / 'Gone' confirm/dismiss with vote counts and a freshness bar
- Leaderboard: weekly top contributors, your rank
- Profile: points, tier, reports submitted
- Admin: moderate reports, density heatmap

## Prisma schema
User (id, name, email, points, rankTier, reportsCount), Report (id, userId, type, lat, lng, createdAt, expiresAt, confirmations, dismissals, status), Vote (id, reportId, userId, value), Route (id, userId, origin, destination, polyline)

## Logic (must actually work)
- A report is active until expiresAt or until dismissals exceed confirmations; expiry computed lazily on read
- expiresAt varies by type (police ~30m, crash ~60m, pothole longer); confirmations extend it, dismissals shrink it
- Query reports within a radius of the user (haversine) and along the active route polyline
- Award points server-side: report > confirm/dismiss; enforce one vote per user per report
- Routing, geocoding and turn steps come ONLY from the Mapbox Directions API; store the returned polyline, never compute it

## Style
Map-first, glanceable: dark map style, safety-orange #FF6B00 primary, big thumb REPORT button, color-coded hazard pins fading by age, minimal chrome. Mobile-first for a bar-mounted phone.

## Seed data
~40 reports of varied types and ages around one city, 15 contributors with points and tiers, a demo route with a hazard on it. Put the Mapbox token in an env var with a clear comment.

Build a production-quality Waze-style community navigation app. Be clear-eyed: routing, tiles and traffic are RENTED from a navigation API (Mapbox Navigation, or HERE/TomTom) - your engineering goes into the realtime community-report layer, its freshness model, and abuse resistance.

## Stack
- React Native (Expo) + TypeScript with @rnmapbox/maps; a thin Next.js admin/web companion
- Mapbox Navigation SDK / Directions API for routing, geocoding, traffic and turn-by-turn - no custom routing, ever
- PostgreSQL with PostGIS via Prisma (raw SQL for spatial); Supabase Realtime (or a WS service) for live report push
- NextAuth/Expo auth; Zod for validation

## Core design: the report freshness model
- Report is a geo point with type, created_at, expires_at, and confirm/dismiss counts. Validity = within radius AND now < expires_at AND confirmations - dismissals > -threshold
- expires_at varies by type (police 30m, crash 60m, pothole days). Confirmations extend it; dismissals shrink it. This decay is the whole trust mechanic - get it right
- Nearby query: ST_DWithin(report.geom, driver_point, radius) plus 'reports buffered around the active route polyline' via ST_DWithin on ST_LineString - this is what powers 'hazard ahead'

## Realtime & scale (the genuinely hard part - design for it)
- Live reports pushed to drivers within a geofenced area only; do NOT broadcast globally. Subscribe by tile/cell (e.g. H3 hex or a geohash prefix) so a driver only receives reports in nearby cells
- Batch and throttle location ingestion to protect battery and DB; you do not need every GPS tick
- Server-authoritative points and votes: one vote per user per report (unique constraint), points awarded server-side, anti-spam rate limits per user/area

## Schema
users (points, rank_tier, trust_score), reports (type enum, geom geometry(Point,4326), created_at, expires_at, confirmations, dismissals, cell_id), votes (unique (report_id,user_id)), routes (polyline), promoted_pins (geo-keyed ads). GIST index on reports.geom; btree on reports(cell_id, expires_at).

## Implementation order
1. Schema + PostGIS + auth + seed (40 reports across cells, 15 contributors)
2. Map screen with Mapbox, current location, render nearby reports via ST_DWithin
3. One-tap report flow + the expiry/decay model + confirm/dismiss voting
4. Realtime push by cell (Supabase Realtime / WS) so pins appear live
5. Navigation: Directions API route, turn banner, 'report on route' alerts via route-buffer query
6. Points, ranks, leaderboard, trusted-contributor logic + anti-spam
7. Promoted pins (geo ads) + admin moderation and density heatmap

## Quality bar
- Drivers only receive reports for nearby cells, proven by a test - never a global firehose
- Vote integrity: exactly one vote per user per report; points never double-awarded on retry
- All routing comes from the API; there is no hand-rolled pathfinding in the codebase

Start with step 1; show me the PostGIS schema, the report-validity function, and the ST_DWithin nearby query before continuing.

Design the complete UI for a Waze-style community navigation app called RoadPulse (niche: cyclists reporting road hazards). React + Tailwind + shadcn/ui + lucide-react, with a placeholder full-screen map (assume Mapbox). Aesthetic: map-first, glanceable, in-motion - dark map canvas for contrast, safety-orange #FF6B00 primary, large thumb-friendly controls, color-coded hazard pins, minimal chrome so the map dominates. Mobile-first, built for a phone on a bike mount.

## Screens

### 1. Map home (main screen)
- Full-screen map placeholder with a pulsing current-location dot
- Floating top search bar ('Where to?') with recent destinations
- Report pins scattered on the map: distinct icons per type (pothole, glass, junction, closed, dooring), older pins faded
- Big circular floating REPORT button bottom-right (orange, hazard icon)
- Small ETA/speed chip; a bottom card showing the nearest report ('Pothole 300m ahead')

### 2. Report sheet
- Slide-up panel: 3x2 grid of large hazard-type tiles with icons and labels (Pothole, Glass, Bad Junction, Closed Path, Dooring, Other)
- Tapping a tile shows a quick 'Reported - thanks!' confirmation toast

### 3. Report detail popup
- Compact card: hazard icon + type, 'reported 4 min ago', 'on your route in 200m', confirm/dismiss buttons ('Still there' / 'Gone') with vote counts and a freshness/expiry bar

### 4. Navigation mode
- Top next-turn banner (arrow, '300m - Turn left onto Mill St'), route line on the map, a bottom bar with ETA, distance and an end-route X
- A hazard-ahead alert slab sliding in when a report is on the route

### 5. Leaderboard & profile
- Leaderboard: weekly ranked contributors with avatar, points, contributor tier badge; current user highlighted
- Profile: points total, rank tier, reports submitted, confirmations given, a small contribution heat strip

### 6. Hazard pins & freshness
- Design the full set of hazard pin icons (pothole, glass, bad junction, closed path, dooring, other), each with a distinct color and shape, plus an aged/faded variant and a small expiry/freshness ring

Fully responsive, mobile-first, large touch targets for use while riding. Fill everything with realistic hazard reports of varied types and ages, an active route with a hazard on it, and 15 contributors with names and points.

Build a community-sourced navigation app (Waze model) called RoadPulse for a niche: cyclists reporting road hazards. Note: routing and the map come from a navigation API (Mapbox) - build the community-report layer, not a routing engine.

## Entities
- User: name, email, points, rankTier, reportsCount
- Report: user, type (pothole/glass/junction/closed/dooring/other), lat, lng, createdAt, expiresAt, confirmations, dismissals, status (active/expired/removed)
- Vote: report reference, user, value (confirm/dismiss)
- Route: user, origin, destination, polyline (from the Directions API)

## Roles
- Rider: navigates, submits hazard reports, confirms or dismisses others' reports, earns points
- Admin: moderates reports, views a density heatmap, dashboard with active reports and top contributors

## Pages
1. Map home: map with current location, nearby report pins (icon by type, faded by age), destination search, route line, big REPORT button
2. Report sheet: grid of hazard types; tapping one drops a pin at the current location
3. Report popup: type, age, distance, confirm/dismiss buttons with counts and a freshness bar
4. Navigation mode: route line, next-turn banner from the Directions API, hazard-ahead alerts
5. Leaderboard: weekly top contributors and your rank
6. Profile: points, tier, reports and confirmations
7. Admin: moderation and density heatmap

## Rules
- A report is active until its expiresAt (varies by type) or until dismissals outweigh confirmations
- Show only reports within a radius of the rider and along the active route
- Reports award points; confirming/dismissing awards fewer; one vote per user per report
- Routing, geocoding and turn steps come from the Mapbox Directions API - never compute routes in-app

## Look & feel
Map-first and glanceable: dark map style, safety-orange #FF6B00 primary, large thumb-friendly REPORT button, color-coded hazard pins, minimal chrome. Mobile-first for a bar-mounted phone.

Seed: ~40 reports of varied types and ages around one city, 15 contributors with points, and a sample route with a hazard on it.