❯ Web · E-commerce · 2024
Kingy-Autos
An immersive luxury-car digital showroom — cinematic Three.js hero, filterable catalog, and a conversion flow built for high-net-worth buyers.
The problem
Luxury car buyers do not browse like commuter shoppers. They want presence, a feel for the car, and a low-friction way to actually ask about it, and a dealership with a physical lot cannot put every car in front of every buyer. Kingy-Autos is a digital showroom for that: a 50 to 100+ vehicle catalog with a cinematic presentation that still treats inquiry and test-drive booking as the point of the site.
The approach
Next.js 16 App Router with strict TypeScript, built as a JAMstack: SSG and ISR static pages, Cloudinary for images (WebP and AVIF, blur-up, srcset), privacy-first analytics, and server-side-only email and WhatsApp notifications. The hero is Three.js via react-three-fiber and drei, using MeshReflectorMaterial, Sparkles, and a 2D-in-3D photo composition, with async lazy loading, a reduced-motion fallback, and gyroscope and mouse parallax. Content lives in headless Sanity CMS, queried with GROQ against a typed schema, with ISR webhook revalidation, and server API routes handle inquiry, test-drive booking, and search.
Architecture
- Next.js App
- Sanity CMS
- Three.js Hero
- Cloudinary CDN
- Server API Routes
- Conversion Flow
FLOWS
- Next.js AppGROQ queriesSanity CMS
- Sanity CMSISR revalidateNext.js App
- Next.js AppimagesCloudinary CDN
- Three.js Herolazy loadCloudinary CDN
- Next.js Appinquiry + bookingServer API Routes
- Server API RoutesWhatsApp + emailConversion Flow
The conversion flow is where the showroom earns its keep: zod and react-hook-form validation on every form, WhatsApp click-to-chat, a favorites list, and a three-car comparison tool persisted in local storage. Full-text search with autocomplete runs over the catalog, and car detail pages are SEO-rich with JSON-LD Vehicle schema, a sitemap, and OG tags. Accessibility is WCAG 2.1 AA with dark mode as the default, so the cinematic layer never locks anyone out. I also wrote the full engineering doc suite for it: architecture, a JSON Schema data model, features, screens, monetization, and a risk log.
Key decisions
Cinematic first, accessible by default
The Three.js hero is progressive enhancement; without it, or with reduced motion, the page is still complete and usable.
Sanity with ISR revalidation
The dealership team edits cars without a developer; webhook revalidation keeps static pages fresh without a rebuild.
Comparison in local storage
A three-car compare is a session behavior, not an account feature. No auth, no sync, no server cost.
No buyer accounts
Inquiry and booking go through WhatsApp and email, which is how luxury buyers actually communicate.
What I'd do differently
The 2D-in-3D photo composition looked strong on desktop and took real effort to keep sharp on small screens. I would design the hero for the smallest viewport first. I would also add structured inventory feeds earlier, since the catalog is only as current as the dealership's data entry.