Price my Prang

Crash · Quote · Claim. The fastest way to price a prang.

An online tool where consumers request repair quotes from nearby panel beaters, plus an authenticated back-office portal where assessors build and issue the quotes. Built with Next.js 16 (App Router), Vercel Blob, Resend, Google Maps and Claude (licence-disc reading).

---

Stack

Concern	Choice
Framework	Next.js 16 (App Router, Turbopack, React 19)
Styling	Tailwind CSS v4 + brand tokens (Space Grotesk / Archivo)
Data store	Vercel Blob (JSON documents)
Media	Vercel Blob (client uploads, which bypass the 4.5MB API limit)
Auth	Cookie session (JWT via jose) + bcrypt, role/permission model
Email	Resend (branded HTML)
Maps	Google Geocoding API (server only, GEOCODING_API_KEY)
Vehicle ID	Claude vision reads the SA licence disc (VIN API upgrade planned)
PDF quotes	@react-pdf/renderer

Consumer flow (mobile-first)

/ → Price my Prang button → multi-step form: name, email, insurance/warranty/claim questions, licence-disc photo (read by Claude), optional 20-second in-browser video (auto-stops at 20s), engine-damage question, repeatable damage photos (max 15), quotes wanted (1–4) → map of nearby panel beaters → select → submit. A reference PMP-YYYYMMDD-SURNAME-NN is generated and confirmation emails go to the consumer and the assessors.

Portal (/portal, auth required)

• Dashboard: Total Requests / In Progress / Completed / Total Executed cards + requests grid (permission: view_dashboard).
• Request detail: full submission, photos, video, disc, status control.
• Quote builder: pull a request by reference, select workshop, add parts (from the parts catalogue or manually), enter senior/junior labour hours → generates a branded PDF (permission: build_quotes).
• Panel beaters: onboarding form; panel beaters can self-onboard (manage_panel_beaters / onboard_self).
• Parts: parts-per-supplier catalogue (manage_parts).
• Users: roles & permissions (manage_users).

Roles

admin · assessor · panel_beater. Defaults live in lib/permissions.ts; per-user extra permissions can be granted on top.

---

Getting started

npm install
cp .env.example .env.local   # fill in the values (see below)
npm run dev

Environment variables

See .env.example. Minimum to run locally: SESSION_SECRET, SEED_SECRET, BLOB_READ_WRITE_TOKEN (link a Vercel Blob store). Maps, Claude and Resend are optional, and the app degrades gracefully without them (map falls back to a list, disc reading is skipped, emails are not sent).

Seed the first admin

With SEED_SECRET set, create the first admin (once):

POST /api/seed
{ "secret": "YOUR_SEED_SECRET", "name": "Carl", "email": "[email protected]", "password": "changeme" }

On Windows run this from cmd.exe (PowerShell aliases curl to Invoke-WebRequest), or use Invoke-RestMethod.

Then sign in at /login.

Deploy (Vercel)

Push to GitHub and import into Vercel. Add a Blob store and set the env vars. Production emails should send from [email protected] (verify the domain in Resend) via EMAIL_FROM. Point www.pricemyprang.com / .co.za at the Vercel project when ready.

Known follow-ups

• VIN lookup upgrade: currently Claude reads the disc; integrate a proper VIN → vehicle-details API (e.g. firstcheck.co.za / vindocs.com/za) later.
• Google Map ID for Advanced Markers (currently uses classic markers).