ArmStyle Detailing
A marketing site and booking funnel for a detailing studio. Visitors browse services, add them to a running quote and send a booking request; the studio manages its service catalogue and incoming requests from a password-protected panel. No checkout — the funnel deliberately ends in a conversation.
Live on Vercel and fully functional. Waiting on a custom domain and the studio's own before/after photography.
- Role
- Visual design and design system · Funnel and information architecture · Full-stack development · Supabase schema and admin panel
- Year
- 2026
- Industry
- Automotive services
- Technologies
- Next.js 15 · React 19 · TypeScript (strict) · Tailwind CSS v4 · Supabase (Postgres + Storage) · Server Actions · Vercel
The challenge
Detailing is priced per service and per car, so a generic “Contact us” form throws away the only information that makes a reply useful.
The studio changes what it offers and what it charges. Both had to be editable without a deploy.
The site also had to be presentable to the studio before any account existed anywhere — no database, no storage bucket, no keys.
The approach
A dark, high-contrast direction with a violet-tinted near-black rather than a neutral one: it reads closer to a workshop under lights than to a generic dark theme.
Two accents doing different jobs. Lime is the action colour and appears only on things you can press; violet is atmosphere and never appears as a control. Keeping them separate is what stops a two-colour dark site from looking like a gaming brand.
Barlow Condensed for display so long service names — “Two-Step Paint Correction”, “Headlight Restoration” — hold a single line at card width instead of wrapping to three.
The quote replaces the contact form as the primary object. Every service card, every detail page and the header all point at it.
The process
- 01
Twelve real services
The catalogue was written as typed data first — name, price, inclusions, duration — and seeded into the schema later. That array is still the zero-configuration fallback.
- 02
Funnel before pixels
Browse → add to quote → review → send. Everything designed afterwards had to serve that path or be cut.
- 03
Schema, then panel
Two tables — services and booking requests — with a generated SQL file that seeds the same twelve services, so a fresh Supabase project matches the fallback exactly.
- 04
Photo pipeline
A public storage bucket for service photos, uploaded from the admin panel and attached to the row after insert.
The solution
A nine-route site — home, catalogue, service detail, quote, booking, confirmation, gallery, about, plus policy pages — built entirely from hand-written components.
A quote builder held in React context, cleared on successful submission so a returning visitor never inherits a stale basket.
An admin panel with service CRUD, photo upload and a request inbox, all behind one password.
The design system
The tokens this site is written in. Every colour below is a value from its stylesheet, not an impression of it.
- Void#0b0910Page
- Carbon#14111cCards
- Graphite#221d30Hairlines
- Violet#6b2fa0Atmosphere
- Lime#8bc220Actions only
- Barlow CondensedDisplay and service names
- InterBody and controls
Technical perspective
The decisions worth defending. Written to be readable by someone who will never open the repository.
Zero-configuration browsing
Every read goes through one service layer that checks whether Supabase is configured. If it isn't, it returns the static twelve. The site is fully browsable on a fresh clone with no environment file at all.
Authorisation is checked where the work happens
There is no middleware gate. Every admin page and every Server Action independently calls `requireAdmin()`. Middleware is one place to forget; a check next to the mutation is the check that runs.
Row-level security intentionally left off
All database access happens server-side with the service-role key, which bypasses RLS anyway. Writing policies that never execute would have implied a protection the architecture does not rely on. The real rule is enforced instead: the Supabase client is server-only and never imported into a client component.
Cache invalidation as part of the mutation
Server Actions call `revalidatePath()` for every affected route before redirecting, so an edited price is correct on the catalogue, the detail page and the quote at the same moment.
No UI library
Every component is hand-written and every icon is inline SVG. Nothing ships that the design system did not ask for.
Outcome
- Services, editable without a deploy
- 12
- Third-party UI dependencies
- 0
- Tables behind the whole product
- 2
Deployed on Vercel. The funnel ends in a stored booking request rather than a payment, which is what the studio asked for — quotes depend on the car.
What it still needs
Every project here ships with the list of what is still missing. Hiding placeholders would make the rest of this page harder to believe.
- A custom domain — the site currently answers on its Vercel URL.
- Real before/after photography to replace the generated service artwork.
- Confirmed prices; the seeded twelve are the studio's list as first supplied.