Singapore Car Ownership Calculator
A production-leaning scaffold answering "how much will this car actually cost me to own in Singapore?" — not just the loan instalment.
What's in this build
- Calculation engine (
lib/calculations/) — pure, unit-tested functions for loan (flat rate), depreciation, LTA road tax (ICE + EV), fuel, EV charging, parking, insurance (indicative range), tyres, ERP, affordability, total ownership.
- Vitest unit tests for every calculation module (
__tests__/calculations.test.ts).
- 6-step wizard at
/calculator with live sidebar estimate, breakdown chart, loan-comparison table, assumptions panel, affordability check, and expandable "how is this calculated" details.
- SEO landing pages:
/, /calculator, /cars, /cars/[make]/[model], /car-loan-calculator, /road-tax-calculator, /methodology, /data-sources, /privacy, /terms, /contact.
- Sitemap and robots.txt generated by Next.js metadata routes.
- AdSense-ready
<AdSlot> component (leaderboard / in-content / sidebar / rectangle); zero actual ad code.
- Seed vehicle catalogue (BMW 320i, Mercedes C180, Toyota, Honda, Tesla Model 3, BYD Atto 3, Prius, Volvo XC40) with OMV/ARF/COE/engine data — clearly marked indicative.
- Seed loan rates (DBS, OCBC, UOB, Maybank, Hong Leong Finance, Tokyo Century) with effective dates.
- Tailwind design system, mobile-first layout, visible focus, chip & card components, WCAG-conscious.
What's not in this build (deliberately)
- No PostgreSQL — seed data lives in
/lib/data/*.ts so the app runs on Vercel with zero infra. Swap in a DB when the catalogue grows.
- No SGCarMart URL import — their terms do not permit automated extraction. Manual entry works and the UI surfaces this.
- No admin dashboard — effective dates and sources are embedded in data files; editing is a PR.
- No real LTA/bank/parking live data — all datasets carry
effective_date and source and are labelled indicative.
- No account/auth, saved calculations, insurance affiliate, parking search — scaffolding for them is where the data layer would plug in.
Dev
npm install
npm run dev # http://localhost:3000
npm test # vitest unit tests
npm run build # production build
Deploy to Vercel
npx vercel
No env vars required. Optional: NEXT_PUBLIC_SITE_URL for sitemap canonical.
Architecture
app/
page.tsx home
calculator/ wizard + state
cars/[make]/[model]/ per-vehicle SEO pages
car-loan-calculator/ loan tool
road-tax-calculator/ road tax tool
(legal pages, sitemap, robots)
components/ Field, Breakdown, ResultHero, LoanCompare, AdSlot, …
lib/
calculations/ pure engine (one file per cost category)
data/ vehicles, loans, fuel prices
format.ts SGD / number formatters
__tests__/ vitest suite
Every calculation is independently testable; the UI never does maths.
Status vs the spec
Full build order follows the 62-section brief; this is v0 — the shippable core. The scaffolding is where every follow-up (DB, admin, parking search, EV route calculator, ERP route lookup, scenario compare, break-even vs public transport) plugs in cleanly.
