What it is
Pitstop is a small, single-user web app that keeps the maintenance log of one car. It follows the
intervals from the owner's manual (every 10,000 km or 6 months, whichever comes first), and
answers the one question that matters when you open it: what's due at the next visit?
- Inicio — the car, its current odometer and the next service, grouped by what's overdue or coming up.
Tap the odometer to update the kilometres.
- Registrar servicio — log a visit: date, km, workshop, cost, what was done (with per-item cost),
notes and receipts (PDF or photos). Due dates are recalculated from it.
- Historial — every visit grouped by year, with spend this year and since the start, filterable by item.
- Plan — the maintenance plan from the manual (with page references), editable, plus your own items.
It's in Spanish, formatted for Mexico (MXN, es-MX dates), installable on the phone's home screen, and
designed to run for $0 (Vercel Hobby + Supabase Free).
Screenshots
| Inicio | Registrar servicio | Historial | Plan |
|---|
| | | |
Stack
- Next.js 16 (App Router, Cache Components) + React 19
- Tailwind CSS 4, with a small UI kit in
components/ui
- Supabase for auth, Postgres (with row-level security) and receipt storage
- Vitest for unit tests, pgTAP for database policy tests
Running it locally
Requires Node 20+, pnpm and Docker (for the local Supabase stack).
pnpm install
pnpm supabase start # ports 5532x; applies migrations and supabase/seed.sql
cp .env.example .env.local # fill with the local URL (http://127.0.0.1:55321) and anon key from `pnpm supabase status`
pnpm dev # http://localhost:3000
Local login: [email protected] / pitstop-dev (created by supabase/seed.sql, local only).
| Command | What it does |
|---|
pnpm dev | Start the dev server |
pnpm build / pnpm start | Production build and server |
pnpm test | Unit tests (Vitest) |
pnpm supabase test db | Row-level security tests (pgTAP) |
pnpm lint | ESLint |
pnpm icons | Regenerate every app icon and iOS splash screen from the mark in scripts/build-icons.mjs |
Production setup (one time)
-
Supabase: create a free project. Link it with pnpm supabase link --project-ref <ref> and run pnpm supabase db push.
-
Auth: under Authentication → Sign In / Providers, turn off "Allow new users to sign up". Create your user under Authentication → Users.
-
Seed your car: in the SQL editor, run
select seed_pitstop('<your user id>', <current km>, '<YYYY-MM-DD purchase or start date>');
Past services can then be added from the app; old dates and lower km are accepted.
-
Vercel: import the GitHub repo and set these environment variables:
NEXT_PUBLIC_SUPABASE_URLNEXT_PUBLIC_SUPABASE_ANON_KEYCRON_SECRET (any long random string)
Then deploy. vercel.json schedules a twice-weekly keep-alive to /api/cron/keepalive, so the free database doesn't pause.
Free-tier limits worth knowing
- Supabase Storage: 1 GB in total for receipts. Each file is limited to 10 MB.
- Supabase pauses a free project after 7 idle days. The twice-weekly cron prevents this.
Project layout
app/ routes: (app)/ for signed-in screens, login/, manifest, icons
components/ui/ the UI kit — Panel, Chip, Label, Orb, PillAction, PageHeader, Field, …
lib/ due-date logic, formatting, data access, Supabase clients
scripts/ build-icons.mjs — icon and splash generator
supabase/ migrations, seed and database tests
docs/ design spec and screenshots
Design spec: docs/superpowers/specs/2026-10-26-pitstop-design.md
