Skip to content
All projects

PublishedFeatured

Certified used-car marketplace

A national marketplace for manufacturer-certified used cars: search a live dealer inventory by brand, model, province and budget, compare cars side by side, work out the instalment, and send the lead to the dealer who holds the car.

  • Next.js
  • React
  • TypeScript
  • TanStack Query
  • Zustand
  • MUI
  • Jest
  • Docker

Overview

Buying a used car starts with a filter and ends with a phone call. The site in between has to be fast, findable on search engines, and honest about what is actually still on the lot — which means every page is assembled from inventory the dealers themselves keep updating.

Visitors search without signing in, compare shortlisted cars, calculate finance, and find the dealer on a map. Members get the same wishlist synced across their devices. Behind it, staff publish news, promotions and campaign takeovers through a content layer.

The parts that were interesting to build

The URL is the query. Search lives at one route whose path segments are positional — brand, model, grade, year, province, body type, price band — with explicit sentinels for "any". A request is resolved by loading the master-data dictionaries, translating each human-readable segment back into the numeric id the inventory API expects, cascading as it goes: the brand id is what makes the model list fetchable, the model id is what makes the grade list fetchable. A segment that matches nothing resolves to a deliberate "no such id" rather than being dropped, so a mistyped URL returns nothing instead of quietly returning everything. The page renders on the server and hands its populated cache to the browser, so the first list does not refetch on hydration.

Tokens the browser never sees. The inventory API authenticates the application, not the visitor, with a short-lived token. Minting it in the browser would expose the credentials, so it happens in middleware: every request checks the sealed session cookie, decodes the token, refreshes it if it has expired, and re-seals it. On the data path, concurrent requests that hit an expired token do not each trigger a refresh — the first one refreshes while the rest queue and replay, which is the difference between one refresh call and thirty.

A wishlist that works before you sign in. Anonymous visitors keep a wishlist in their own browser, grouped by dealer, rehydrated by fetching each car in parallel. Sign in and the same operations switch to the member API, so the list follows them to another device. The UI never branches on which mode it is in.

Shape of the system

One server-rendered application with a small backend-for-frontend of its own: token minting and refresh, session reads, cookie handling, and generated sitemaps that enumerate every dealer, article and filter combination worth indexing. All business data comes from two upstream APIs.

Scale

  • 23 routes · 628 source files · 15 feature modules · 297 test files
  • Around 31 upstream endpoints across two backends · 2 languages, 726 keys each
  • Catalogue pages revalidate hourly; individual pages opt out where freshness matters
Status
Published
Published
Sep 12, 2026
Stack
Next.js · React · TypeScript · TanStack Query · Zustand · MUI · Jest · Docker