Lustro: A Booking and Retention Platform for Detailers

Role: Product Engineer / Full-Stack Developer (design + build) Type: Self-initiated product build Tools: Next.js (App Router) · TypeScript · Tailwind CSS · Convex · Clerk · Stripe · Resend · PostHog · Recharts · Framer Motion · Figma

Local service businesses — auto detailers in particular — lose real money to the same three problems: no-shows, phone-tag bookings, and one-time customers who never come back. Most "booking tools" are generic calendars that ignore how a detailing shop actually runs: a ceramic coating ties up a bay all day, a wash takes an hour, and the real revenue is in getting that customer back when the coating fades.

I set out to design and build Lustro: a booking and retention platform built specifically for detailers, not bolted onto a generic scheduler. The goal was a believable, end-to-end product across three surfaces — a marketing site that sells the platform, a customer-facing booking flow, and an operator dashboard — built on a modern realtime stack and architected so it could ship to production, not just demo well.

I designed and developed a complete, three-surface product with a single cohesive design system and a backend architecture mapped to a realtime stack.

A booking flow that respects how a shop runs. The customer flow is a four-step, fully-validated experience: choose a service → pick a slot against live availability → enter car and contact details → pay a deposit to hold the bay. The availability engine is bay-aware — it knows a coating eats the day while a wash takes an hour, blocks slots accordingly across multiple bays, and closes on off-days. A Stripe-style deposit step gates the booking, which is the single biggest lever against no-shows, with the deposit carried straight into the order summary and final bill.

An operator dashboard built for daily use. The detailer's side is a data-dense operations screen: KPI cards (revenue booked, no-show rate, rebook rate, bay utilization), a revenue trend chart and service-mix breakdown, today's bays, a sortable customers table with lifetime value, and a retention "win-back" queue. Chart types and layout were chosen deliberately — trend as an area chart, service mix as a donut, KPIs always shown as text rather than hidden behind hover.

Retention as a first-class feature. The differentiator most detailers miss: the second booking. Lustro tracks each car's service history, coating intervals, and lifetime value, then surfaces the right customer at the right time in a win-back queue — turning a one-time job into a recurring relationship.

A design system, not a coat of paint. The entire site is driven by a documented design system — pattern, typography roles, effects, and an accessibility rule set — with a clear brand identity (a warm cream/olive palette, Bricolage Grotesque display, Inter body, JetBrains Mono for data). The marketing site follows a deliberate "trust and authority" structure: animated hero, social proof and security badges, a bento feature grid, testimonials, and a low-friction CTA, with scroll-reveal motion throughout.

This was built product-first, code second — the kind of thinking the brief demanded: ship fast, write clean code, and reason like a product person rather than just a coder.

Every layer was architected against a realistic production stack so the demo wasn't a throwaway. Data reads sit behind a thin, typed layer that maps directly to Convex (realtime database); authentication boundaries are structured for Clerk; the deposit step maps to Stripe Checkout; confirmation and day-before reminders map to Resend; and product events are instrumented for PostHog.

Lustro stands as a complete, deployable product that demonstrates end-to-end ownership — strategy, design, and engineering across marketing, transactional, and operational surfaces.

Live site: https://lustro-app.vercel.app/ Source: https://github.com/rejuandevelopr/Lustro