Workshop Marketing Hub logo

WMH

Workshop Marketing Hub — part of the Autoclicks project.

Workshop Marketing Hub preview

Autoclicks – WMH Dashboard

A multi-tenant management platform that lets car-workshop owners run their entire online presence — website content, bookings, customer enquiries, services, and branding — from a single, self-service dashboard. Each workshop gets its own live website and its own admin space, all powered by one shared backend.

What it does

Workshop owners log in to a clean control panel where they can:

  • Edit their website live — a built-in editor with a side-by-side, real-time preview of their actual public site. Type a new headline and watch it appear instantly, before saving.
  • Manage their own domain — a guided, step-by-step flow to connect a custom domain (e.g. myworkshop.com) or claim a free branded address, with the technical setup automated behind the scenes.
  • See their business at a glance — an overview dashboard with key stats (recent customer enquiries, reviews, services, site health) and a setup checklist that guides new owners through getting their site fully live.
  • Handle day-to-day operations — review and respond to form submissions, manage their service catalogue, configure opening hours, contact details, and social links.

Tech stack

  • Frontend: TanStack Start (React 19), TypeScript, Tailwind CSS, shadcn/ui — a modern, fast, fully type-safe web app.
  • Backend / data: Directus (a headless CMS) as the single source of truth for all workshop content and customer data.
  • Infrastructure: Cloudflare Workers for serverless hosting at the edge (fast worldwide), with Cloudflare’s domain and SSL APIs integrated for the automated custom-domain onboarding.
  • Architecture: A secure “backend-for-frontend” auth model (the browser never touches sensitive tokens), a multi-tenant design where one codebase serves every workshop, and a separate live public website (Astro) that the dashboard drives.

My role

I designed and built the dashboard end to end:

  • Architected the secure, multi-tenant authentication and the data layer connecting the app to the headless backend.
  • Built the live website editor with its real-time preview — the most technically involved piece, requiring careful coordination between the editor and the public site without compromising security.
  • Integrated third-party APIs (Cloudflare) to fully automate custom-domain setup — turning a normally fiddly, technical process into a few guided clicks for non-technical owners.
  • Designed and implemented the entire UI/UX with a focus on clarity and ease of use, so workshop owners with no technical background can confidently manage their online presence.
  • Owned the project from architecture and infrastructure decisions through to the polished, production-ready interface.