A booking-first barbershop site where you can embed your own Calendly

A demo barbershop site built around one CTA, with a two-mode booking section — an interactive scheduler, and a live Calendly embed that accepts any visitor's own booking link.

Fade District is a demo build — a fictional premium barbershop in Ann Arbor. The brief I gave myself: a barbershop site where every section exists to move the visitor toward booking a chair, because the real-world alternative is taking appointments over Instagram DMs.

Stack is deliberately lean: React 19, TypeScript, Vite, Tailwind CSS v4. No backend, no CMS — services, barbers, and shop info live in a typed data.ts. It deploys as static assets on a Cloudflare Worker.

Two booking modes in one section

The booking section has two tabs. The first is an interactive three-step scheduler built in React — pick a service, a barber, a time — which demos the flow without any external dependency. The second embeds a real Calendly widget.

The part I like: the Calendly tab accepts any URL. A shop owner looking at the demo can paste their own Calendly or Cal.com link and watch their actual scheduler render inside the design.

1const loadCustomCalendly = (e: React.FormEvent) => {2  e.preventDefault();3  if (tempCalendlyUrl.trim()) {4    // Basic formatting to ensure it's a valid embed url5    let url = tempCalendlyUrl.trim();6    if (!url.startsWith("http://") && !url.startsWith("https://")) {7      url = "https://" + url;8    }9    setCalendlyUrl(url);10    setUrlLoaded(true);11  }12};

That turns the demo from "here's what I'd build you" into "here's your booking tool already running in it" — a stronger pitch for close to zero extra code.

Selling the pattern, not just the page

There's also a section comparing DM booking against scheduler booking side by side. It's aimed at the owner who thinks Instagram is enough: missed messages and back-and-forth on one side, a picked time slot on the other.

What I'd improve

• The scheduler is front-end only; submissions don't persist anywhere. Wiring it to a small Worker with email notifications would make it a real product.
• The work grid uses static images; an Instagram feed integration would keep it current without edits.

Fade District is one of eight small-business demos I built to show what different local businesses actually need from a website. See the rest on the projects page or get a quote for one built around your business.