Auto Fashion Club — auto, boat & custom shop site with its own admin, Pompano Beach FL

Project overview

Auto Fashion Club is a family-owned shop in Pompano Beach, Florida, that works on cars and boats under one roof: automotive diagnostics, repair and upgrades, a marine division — AFC Professional Boat Service — and custom projects from carbon fiber and 3D work to full builds. The founder’s experience runs from preparing rally cars in the 1990s to more than a decade of marine service in Canada.

The business needed more than a brochure. Three divisions with 24 service categories and 84 services had to read as one premium brand; every category needed its own page that could be found in search; every enquiry had to arrive with enough context — which service, which vehicle or boat, which ad — to be answered and measured. And the owners wanted to run all of it themselves, without a developer.

My role in the project

I personally led this project from the design to the live site and the content rounds that followed. The areas I owned and delivered directly:

• Design of the public site and of the admin panel, then a 1:1 build of that design in Next.js 16 with React Server Components
• The data model in Supabase: 15 tables for the catalog, pages, leads, portfolio, reviews, brands and settings, with row-level security so the public site can only read published content
• Lead intake: booking from any button with the service already selected, server-side validation, a honeypot and rate limiting, e-mail through Resend and optional Telegram alerts
• Marketing attribution: every lead keeps its five UTM tags, gclid, fbclid, the referrer, the landing and form pages and the device
• An admin that covers the whole business — leads, analytics, content, SEO, catalog, portfolio, reviews and users
• Technical SEO and consent-based analytics, plus the owners’ copy and photos applied page by page over several rounds

What I built: the public site

• Home: a full-screen hero with separate photos for desktop and phone, a strip of 39 brand logos in three groups (automotive, boats and yachts, marine engines), the three divisions, custom projects, a portfolio carousel split into Automotive and Boats, the founder’s story since 1991, Google reviews and the shop on Google Maps
• 24 category pages, each with its own hero, services, photos, FAQ and a booking button; the boat and custom divisions have their own colour themes
• A booking window that opens from any button with the division and service pre-filled, and a date picker that opens over the form and works the same on iOS and Android
• About, Contact and a thank-you page; privacy policy, terms and cookie policy with a cookie banner
• Readability set by the owners: body text never smaller than 20 px, headings never smaller than 27 px

What I built: the admin

• Dashboard: new leads, conversion, booked jobs, the top source, a 30-day chart, leads by division and the latest leads
• Leads: a pipeline from new to contacted, booked, done or declined, with an assignee, notes and an activity log, and the full attribution on every lead
• Analytics: a visits → leads → booked funnel, views and leads by page, source/medium and campaigns — counted by the site’s own cookieless counter
• Marketing: GA4, GTM, Meta Pixel, Google Ads conversion labels and the Search Console tag entered as settings, plus a UTM link generator
• Content: every heading, text and image on every page and the brand logos — all editable without a developer
• Pages: SEO title, description, share image, canonical and noindex for each page; drafts and publishing
• The service catalog, a portfolio of 42 projects with photos, and review moderation
• Settings: company details, e-mail and Telegram notifications with a test message, users with admin and manager roles, password change
• On the public site a signed-in admin sees an “Admin quick edit” bar that opens the right editor for the page in view; visitors never load it

Stack and SEO

The site runs on Next.js 16 (App Router) with React 19 and strict TypeScript on Vercel. Pages are statically generated and refreshed the moment something is saved in the admin. Supabase handles the database, sign-in and image storage; Resend sends the lead e-mails.

Every page has its own title, description and generated share card. Structured data describes the shop as an AutoRepair business with its address, coordinates and opening hours, and each category page adds Service, FAQ and breadcrumb markup. Renamed pages keep their search history through permanent redirects, and the favicon and app icons are drawn from the logo’s own “A”. Tracking scripts load only after the visitor accepts cookies (Consent Mode v2). PageSpeed Insights gives the home page 100 for performance on desktop and 94 on mobile, 100 for SEO and best practices, and zero layout shift on both.