Check My Ride

A single-vehicle maintenance companion for a 2019 Hyundai Santa Fe XL. The app merges manufacturer-style interval data with a live odometer and service history so owners can see what is due, overdue, or coming up, and optionally explore the vehicle in a 3D Sketchfab viewer (desktop).

Built as a portfolio-quality full-stack TypeScript project suitable for a resume or interview walkthrough.

---

What it does

• Maintenance engine — Loads a structured schedule (milestones, conditional items, AWD-only lines). Derives per-service status (overdue, due soon, OK) from current km and logged work using client-side rules in src/lib/maintenanceEngine.ts.
• Garage state — Odometer and service log persist in PostgreSQL via Prisma (GarageState: singleton row with JSON service log). Public GET for read-only viewing; PATCH restricted to a configured admin (Neon Auth session + server-side email check).
• Auth — Neon Auth for sign-in; editor vs view-only modes. Visitors see the same schedule and history; only the admin can update km or append log entries.
• UI — Responsive garage layout: sidebar tabs (maintenance list, milestones, recent services), odometer control, log service modal (scheduled names + free-text service names, date, notes), and an embedded 3D viewer with camera presets on md and up.

---

Tech stack

Area	Choice
Framework	Next.js (App Router), React 19
Language	TypeScript
Styling	Tailwind CSS v4
Data / ORM	PostgreSQL, Prisma
Auth	Neon Auth (@neondatabase/auth)
Client state	Zustand (hydration from API; not a conflicting source of truth for garage data)
Schedule asset	JSON schedule (merged at build from src/data/fragments → public/data/santa-fe-2019.json)

---

Project layout (high level)

• src/app/garage/ — Main garage experience
• src/app/api/garage/ — GET/PATCH garage state
• src/lib/maintenanceEngine.ts — Schedule + log → computed items, overdue counts, future milestones
• src/components/sidebar/ — Maintenance UI, logging, odometer
• src/components/viewer/ — Sketchfab embed and snap presets
• prisma/ — Schema, migrations, seed

---

Local development

Requirements: Node.js, Yarn, PostgreSQL (or Neon) URL.

1. Copy environment variables:

   cp .env.example .env

   Fill DATABASE_URL, Neon Auth values, NEON_AUTH_COOKIE_SECRET, and NEON_AUTH_ADMIN_EMAIL. See .env.example for descriptions.

2. Install and generate the Prisma client:

   yarn install

3. Apply migrations and (optional) seed:

   yarn db:migrate
   yarn db:seed

4. Run the dev server:

   yarn dev

The home page redirects to /garage.

---

Scripts

Script	Purpose
yarn dev	Next.js development server
yarn build	Merge schedule data, prisma generate, production build
yarn lint	ESLint
yarn db:migrate	prisma migrate deploy (production / CI)
yarn db:seed	Seed initial garage row
yarn neon:signup	Helper for Neon Auth admin signup (see script / env)

---

Deployment (typical)

• App: Vercel (or any Node host that runs next build / next start).
• Database + auth: Neon Postgres + Neon Auth; set the same env vars as production on the host.

Run yarn db:migrate against the production database once (or integrate prisma migrate deploy into your deploy pipeline) before relying on PATCH.

---

License

Private / personal portfolio use unless you add an explicit license.