Motorlane — Virtual Car Showroom

Built for

A lightweight virtual showroom where visitors can browse vehicles fast and leave personal notes without a backend.

Problem

Building a responsive catalog experience is easy to get wrong: search/filter UX, scalable browsing, and keeping user comments after refresh.

Overview

Motorlane is a Next.js app that pulls vehicle data from DummyJSON, lets visitors search and filter by brand/price/rating, and provides a vehicle detail page with image gallery + specs. Comments combine API reviews with locally saved visitor notes stored in localStorage.

Capabilities

• Vehicle catalog from DummyJSON (`/products/category/vehicle`)
• Search by brand, title, and description
• Filters for min/max price, rating, and brand
• Sorting by price, rating, and name
• Vehicle detail page with image gallery and specifications
• Merged comments: API reviews + local comments
• Comment form with Zod + React Hook Form validation
• Comments restored after refresh via localStorage

Architecture notes

• Next.js 15 App Router with a server/client mix for UI pages
• DummyJSON as the data source (vehicle list + vehicle details)
• Client-side comment persistence using localStorage keyed by vehicleId
• Zod schemas + React Hook Form for comment input validation
• Plain CSS layout tuned for 420px–1440px screens

Outcomes

• An interactive catalog UX that feels responsive without needing a database
• Persistent visitor feedback (comments) that survives reloads
• A complete showcase of consuming a public API and building a small SPA-like experience

Tech stack

• Next.js 15
• React 19
• TypeScript
• Zod
• React Hook Form
• Plain CSS
• localStorage
• ESLint