May 19, 2026

Overview

QMP Cars is a premium used-car dealership that needed two things at once: a storefront that makes a hand-picked inventory feel as considered as the cars themselves, and a back office simple enough that the dealer can run the whole catalog without ever touching code. I designed and built both, end-to-end. The public site leans into a calm, editorial, Apple-style aesthetic — a full-bleed video hero, generous whitespace, and motion that guides rather than decorates. Behind it sits a Supabase-backed admin where every listing, photo, and price is managed by the dealer directly.

UI direction

• Cinematic first impression: a full-screen autoplay video hero with a GSAP parallax tie to scroll, and copy that sells the feeling ("Gedreven door passie") before it sells a spec sheet.
• Editorial calm: a restrained black-and-white palette, large type, and lots of breathing room so the cars — not the chrome of the interface — carry the page.
• Motion with intent: Lenis smooth scrolling, Motion entrance animations, and a pinned-scroll "Onze aanpak" section that reveals the dealer's approach as you move through it. All of it respects prefers-reduced-motion.
• Storefront flow: a video hero, a philosophy statement, the approach section, a featured-cars strip, and a dark call-to-action — a single scroll that walks a buyer from mood to inventory to contact.

Key features

• Filterable inventory with sorting by newest, price, and year, and filters by make and fuel type — driven server-side so listings stay fast and SEO-friendly.
• Rich car detail pages: full spec breakdown (mileage, power, drivetrain, registration, VIN, features) and a photo gallery with a clickable lightbox.
• Listing lifecycle: every car has a status — draft, available, reserved, sold — so the public only ever sees what's meant to be public.
• Self-serve admin: a dealer-friendly "Aanbod beheren" dashboard to create, edit, and delete listings with no developer in the loop.
• Drag-to-reorder photo galleries with direct image upload to Supabase Storage, and a single enforced primary image per car.
• Single shared admin login — the right amount of auth for a small dealership, no user-management overhead.

Architecture

• Public read, authenticated write, enforced at the database with Postgres Row Level Security: anyone can read published listings; only the authenticated dealer can change them. Security lives in the data layer, not just the UI.
• Server-first data fetching via React Server Components and server actions — the storefront renders on the server, the admin mutates through typed actions.
• Typed data layer: a single cars module wraps every query (list, featured, by-slug, admin views) and resolves Supabase Storage paths into public image URLs in one place.
• Schema that models the domain: constrained enums for fuel type, transmission, body type, and drivetrain; a car_images table with a uniqueness constraint guaranteeing exactly one primary photo per car; auto-updating timestamps via a trigger.

Technologies used

• Framework: Next.js 16 (App Router, React Server Components, server actions), React 19, TypeScript.
• Styling & UI: Tailwind CSS v4, shadcn/ui on Base UI primitives, class-variance-authority, lucide-react.
• Motion: GSAP with ScrollTrigger for parallax and pinned scroll, Lenis for smooth scrolling, Motion for entrance animations.
• Backend: Supabase — Postgres with Row Level Security, Auth (SSR session handling via @supabase/ssr), and Storage for car photos with public-read / authenticated-write policies.

Challenges and learnings

• Two products in one: a storefront optimized for emotion and an admin optimized for speed of data entry are opposite design problems. Keeping them in one codebase with a shared design language — without letting the admin feel like an afterthought — was the central design tension.
• Security where it belongs: pushing access control down into RLS policies, rather than guarding it only in the app, means a misconfigured page can't leak draft listings. The "exactly one primary image per car" rule lives as a database constraint, not a hopeful bit of client code.
• Motion that doesn't get in the way: the cinematic hero and pinned-scroll sections needed to feel premium on a fast machine and still be calm (and reduced-motion-safe) everywhere else.

Outcome

A complete dealership platform where the showroom-quality front end and the do-it-yourself back office are the same product. The dealer adds a car, uploads and orders its photos, sets it live — and the storefront reflects it instantly, with no engineering involvement.