DEV Community

hey atlas
hey atlas

Posted on • Originally published at aitoolsinsiderhq.com

I built a free one-file salon & barbershop website with working online booking (no React, no DB)

#css #html #webdev #showdev

Most salon owners get quoted $1,000 to $2,000 for a basic website, or pushed onto a $30/month booking app. That always struck me as absurd for what is, fundamentally, one page with a booking button. So I built the whole thing as a single index.html file and open-sourced it (MIT).

Live demo · Source on GitHub

The constraints I gave myself

  • One file. No npm, no framework, no build step, no database. A salon owner with zero technical skills has to be able to edit it in Notepad and host it free.
  • A booking widget that actually works with no backend and no paid platform.
  • SEO and AI-search ready out of the box (proper meta tags + LocalBusiness JSON-LD), because the whole point is for the salon to get found.

The booking trick: WhatsApp as the backend

The hard part with "no backend" is bookings. A booking platform wants a database and a monthly fee. But almost every salon already runs on WhatsApp. So the widget lets the client pick a service, day, time and name, then opens a pre-filled WhatsApp chat to the salon:

Hi Bloom Beauty Studio, I'd like to book: Hair Cut & Blow-Dry ($45) on Fri at 10:30 AM. Name: Jordan.

The salon confirms in the chat. No database, no per-booking fee, and it meets clients where they already are. The "already booked" striped slots are illustrative; you swap in a real calendar later if you grow.

Everything is driven by one config block

To make it editable by a non-coder, every business-specific value lives in a single object near the bottom of the file:

var SALON = {
  brand: "Your Salon Name",
  contact: "https://wa.me/15551234567",  // your WhatsApp, digits only
  hasWhatsApp: true,                      // false -> use a tel: number instead
  services: [
    { name: "Hair Cut & Blow-Dry", price: "$45" },
    { name: "Balayage",            price: "$160" },
  ],
  hours: {                                // [open, close] 24h, null = closed
    Sun: null, Mon: [9,19], Tue: [9,19], Wed: [9,19],
    Thu: [9,20], Fri: [9,20], Sat: [9,17]
  }
};
Enter fullscreen mode Exit fullscreen mode

Change those values, double-click the file to preview, and drop it on GitHub Pages / Netlify / Vercel. Live in about five minutes.

Make it a barbershop

Swap three CSS variables and the service names:

/* barbershop palette */
--rose:#c8a24a; --rose-deep:#a8842f; --plum:#23201b;
Enter fullscreen mode Exit fullscreen mode

…then change the hero image and the services (Fade, Beard Trim, Hot Towel Shave). Same engine, different vibe. It also works for nail bars, beauty salons, and lash/brow studios.

What's in the box

  • Mobile-first responsive layout
  • Services & prices grid, gallery, Google reviews, opening hours, Maps embed
  • LocalBusiness structured data so Google and ChatGPT/Perplexity understand the business
  • Zero dependencies, loads in under a second

It's MIT licensed, so use it for client work, fork it, ship it. If you run a salon and would rather not touch any code, the landing page explains a done-for-you option too.

Repo: https://github.com/atlashey-collab/salon-website-template — a star is appreciated if it's useful. Happy to answer questions about the no-backend booking approach in the comments.

Top comments (0)