VIN Decoder

Built for

Drivers and vehicle shoppers who want quick, validated VIN decoding with an easy way to explore decoded variables.

Problem

VIN decoding apps often lack solid validation and transparency — showing unclear error states or mixing inconsistent results.

Overview

VIN Decoder is a minimal Next.js app that uses the free NHTSA VPIC API to decode VINs. It validates input with Zod + React Hook Form, shows API Messages and validation errors clearly, and keeps the last 3 decoded VINs in localStorage so users can re-open results quickly.

Capabilities

• Decode VINs on the home page with Zod + React Hook Form validation
• Show API `Message` values and client-side validation errors in the UI
• Display only decode results that include both a Variable and a Value
• Keep the last 3 decoded VINs in localStorage and reload on click
• Browse all vehicle variables at `/variables`
• View variable details at `/variables/[id]` (description, type, group)
• Responsive layout from about 420px to 1440px (plain CSS)

Architecture notes

• Next.js 15 App Router with client-side routing for interactive flows
• NHTSA VPIC API client wrappers for VIN decode and variable browsing
• Zod schemas + React Hook Form for strict input validation
• localStorage helpers for decode history persistence
• Plain CSS UI (no CSS frameworks) for consistent layout control

Outcomes

• A small but complete public-API showcase: validate input, decode, display, and persist history
• An information-browsing UX that goes beyond a single output by adding variable exploration routes

Tech stack

• Next.js 15
• TypeScript
• React
• Zod
• React Hook Form
• ESLint
• NHTSA VPIC API
• localStorage
• Plain CSS