Fault Line — Web App
The web client for Fault Line, a community infrastructure-accountability platform. Residents submit pothole / streetlight / drainage / signage reports with one tap; the system aggregates, verifies, and auto-escalates them to the responsible municipal authority with documentation that creates legal notice.
🌐 Live: app.fault-line.dev · marketing site · 📱 mobile app + backend
Why this exists
Most cities run a 311 system designed in the 1990s. Reports vanish, status updates don't happen, and individual complaints are easy to ignore. Every state has a notice-of-defect statute that creates municipal liability for unfixed reported hazards — but almost nobody triggers it because the documentation is too clunky. Fault Line is the documentation infrastructure: a one-tap photo becomes a community-verified, GPS-stamped, legally significant record that escalates automatically to the right authority.
This repo is the Next.js web client. The Expo/React Native mobile app + Supabase backend live in the Moonligh7er/FaultLine sibling repo. Both share the same database.
Next.js 15 (App Router, React 19) web app for Fault Line. Shares the same Supabase backend as the mobile app.
Security
This app is built defensively. Every layer is hardened:
- Strict CSP with per-request nonces — no
unsafe-inline for scripts. Nonces are generated in middleware, read by app/layout.tsx via headers(), and applied to every <Script> tag.
- Security headers via
next.config.ts:
Strict-Transport-Security: max-age=63072000; includeSubDomains; preloadX-Frame-Options: DENY, frame-ancestors 'none' in CSPReferrer-Policy: no-referrer- Locked-down
Permissions-Policy
Cross-Origin-Opener-Policy: same-origin, Cross-Origin-Resource-Policy: same-origin, Cross-Origin-Embedder-Policy: credentialless
- Supabase SSR auth — tokens live in httpOnly, secure, sameSite=lax cookies. No tokens in localStorage. PKCE flow for magic links.
- CSRF guard — middleware rejects mutating requests (POST/PUT/PATCH/DELETE) whose
Origin doesn't match the app.
- Open-redirect guard — login
next= param and auth callback reject anything that isn't a same-origin relative path.
- Zod validation on every server action and route handler — no untrusted input reaches the database.
- Upstash rate limiting (sliding window): auth (5/15m), submit (10/h), vote (60/h), upload (20/h), read (300/m), tts (20/h + 1000/day site-wide). Without Upstash credentials it falls back to a per-instance in-memory limiter (weaker; set Upstash in production).
- Photo uploads validated by magic-byte signatures (not just MIME), 5 MB cap, whitelist of image types only.
- CSV export hardened against formula injection (
=+-@ prefixed with '), LIKE pattern escape on search, whitelist filters for category/status/state.
- No
dangerouslySetInnerHTML, eval, new Function — enforced by eslint-plugin-security.
- RLS-first — all DB access respects Supabase Row Level Security. Service role key is server-only and never exposed to the client.
- Error pages never leak stack traces — only a digest for Sentry correlation.
Open311 feed (for cities and data tools)
Read-only Open311 GeoReport v2 API, JSON only, public, CORS-enabled, rate-limited. It serves only reports that originated in Fault Line — any data ever imported from a city's own 311 system lives elsewhere and is never served here.
| Endpoint | Notes |
|---|
GET /open311/v2/services.json | Report categories as services |
GET /open311/v2/requests.json | Filters: jurisdiction_id (authority UUID), service_code, status=open|closed, start_date, end_date (default last 90 days), service_request_id (comma list). Max 1000 results. |
GET /open311/v2/requests/<uuid>.json | One request (one-item array, per spec) |
Example: https://app.fault-line.dev/open311/v2/requests.json?jurisdiction_id=<authority-uuid>&status=open
Stack
- Next.js 15 + React 19 + TypeScript (strict)
- Supabase (auth, database, storage) via
@supabase/ssr
- Leaflet + OpenStreetMap tiles for the map (no Google Maps dependency)
- Upstash Redis for rate limiting
- Zod for runtime validation
- Sentry for error monitoring
- eslint-plugin-security for static analysis
Setup
# 1. Install deps
npm install
# 2. Configure environment
cp .env.example .env.local
# Fill in Supabase URL + anon key, Upstash credentials, Sentry DSN
# 3. Dev
npm run dev # http://localhost:3000
# 4. Typecheck / lint / build
npm run check # tsc + eslint
npm run build # production build
Deployment (Vercel)
- Push this directory to its own GitHub repo.
- Import it in Vercel (New Project → import).
- Add environment variables from
.env.example in Project Settings.
- Deploy. Vercel handles HTTPS, HSTS preload, and the security headers defined in
next.config.ts.
Directory map
src/
├── app/
│ ├── about/ # Static about page
│ ├── api/export/reports/ # CSV export (server-only, auth required)
│ ├── auth/callback/ # Magic link OAuth callback
│ ├── auth/signout/ # Sign out
│ ├── authority/ # Authority list + detail
│ ├── dashboard/ # Global reports dashboard
│ ├── login/ # Magic link login form + server action
│ ├── map/ # Leaflet map browser
│ ├── privacy/ # Privacy policy
│ ├── profile/ # User profile + reports
│ ├── report/[id]/ # Report detail
│ │ ├── insurance/ # Insurance claim package
│ │ └── legal/ # Legal demand letter
│ ├── search/ # Search reports
│ ├── submit/ # Submit a new report
│ ├── terms/ # Terms of service
│ ├── error.tsx # Global error boundary
│ ├── layout.tsx # Root layout (CSP nonce, GA, nav)
│ ├── not-found.tsx # 404 page
│ ├── page.tsx # Home
│ ├── robots.ts # robots.txt
│ └── sitemap.ts # sitemap.xml
├── components/
│ ├── LeafletMap.tsx # Client-only Leaflet wrapper
│ └── ShareButton.tsx # Web Share API button
├── lib/
│ ├── categories.ts # Report category constants
│ ├── csp.ts # CSP nonce + header builder
│ ├── env.ts # Zod-validated env
│ ├── insurance.ts # Claim evidence generator
│ ├── legal.ts # Demand letter generator
│ ├── rate-limit.ts # Upstash rate limiter
│ ├── supabase/ # SSR-safe Supabase clients
│ ├── types.ts # Database row types
│ └── zod-schemas.ts # Input validation + magic-byte check
└── middleware.ts # CSP nonces, CSRF origin check, auth refresh, route guards
Not yet built
- Sentry initialization (
@sentry/nextjs is installed but not wired) — create sentry.server.config.ts, sentry.client.config.ts, sentry.edge.config.ts once you have a DSN
- AI photo analysis — mobile app uses a Supabase Edge Function; web can call the same function
- AR view (mobile-only)
- Voice reporting (mobile-only)
- Push notifications (Web Push would need separate setup)
- Offline queue (mobile-only)
Related
Contributing
PRs and issues welcome. See CONTRIBUTING.md for setup and PR guidance, and SECURITY.md for the responsible-disclosure process if you find a vulnerability.
License
AGPL-3.0. The whole project is about civic transparency, so the license is too — anyone running modified versions as a service must offer the modified source to its users.
— Built by Moonlit Social Labs.
