Velour Hair

  • React
  • Sanity

A hairdresser reached out to me for a website for her salon, Velour Hair. She didn't just want a pretty online business card. She wanted something she could actually keep up to date herself. Opening hours change, prices get adjusted, new services and products come and go, and she wanted to be able to post the occasional notification without having to call me every time. So the real brief wasn't only "make it look good," it was "make it look good and let me run it on my own."

Velour Hair home page

The core idea

The whole site is built around one principle: nothing important is hard-coded. Everything the salon shows to visitors, from opening hours, services and prices to the portfolio gallery, products and notification banners, is content she can edit herself. The website simply reflects whatever is in the CMS at that moment. That way the site stays alive and accurate long after I've handed it over.

Technical decisions

I built the front-end as a React application (with TypeScript, bundled by Vite). For the interface I used Tailwind CSS together with the shadcn/ui component library, which let me move fast while keeping everything consistent and accessible. Small touches of Framer Motion add the subtle animations that make it feel polished.

The part that makes it flexible for her is Sanity, a headless CMS. Instead of a traditional database and a custom admin panel I'd have to build and maintain, Sanity gives her a clean, friendly editing studio out of the box. I modelled the content around the salon itself, with dedicated document types for services (diensten), products, the portfolio, opening hours, notifications, and the reservation settings. The React app fetches that content through Sanity's client (with TanStack Query handling caching), so an edit she makes shows up on the live site without any developer in the loop. She signs in through Sanity's own studio, which lives on a subdomain of her own domain, and the site itself runs in a Docker container.

What she can manage herself

This is where the project really delivers. Through the CMS she can:

  • Update her opening hours (including split days, like a Wednesday that's open in the morning and again in the evening)
  • Post notifications, handy for holidays, a fully-booked week, or a special promotion
  • Manage her services and treatments, grouped into categories like colouring, cuts & styling, and make-up
  • Keep the price list current for both women's and men's treatments
  • Add photos to the portfolio
  • List the products she sells
Services page Price list page

Booking made simple

We're building this out step by step. For now, booking stays simple and personal: the site points visitors to reach her the way her clients already do, through Instagram, WhatsApp, or a personal message, right next to a live overview of her opening hours. A real reservation system is the next step. It's already built, with its own admin panel behind Firebase Authentication, but it isn't published yet, so we can switch it on when she's ready.

Appointment page with opening hours

Looking back

What I like most about this project is that it's genuinely hers. It looks the way a modern salon should, warm, elegant and calm, but underneath it's a tool she controls. Building it around a headless CMS meant I could hand over a website that keeps working and stays up to date without me, which for a small business is exactly the point. You can see it live at velourhair.be.