Cali Beauty Loft — Hair Studio Website

The Brief

Cali Beauty Loft is a hair studio in Mountain House, California. The owner needed a professional web presence that does three jobs at once. It has to present the studio and its work, lay out services and prices clearly, and funnel visitors toward booking an appointment. The booking itself runs through an external system (Hey Goldie), so the site's role was to be the polished front door that builds trust and sends ready-to-book clients there.

This was real client work with a real stakeholder, not a sandbox project. That changes the priorities. Clarity, trust, maintainability, and a clean path to booking matter more than technical novelty.

My Approach

I built it as a modern full-stack site rather than a drag-and-drop template, so it stays fast, fully under my control, and easy to extend. The front end is Next.js with the App Router, React, and TypeScript, styled with Tailwind and brought to life with Framer Motion. Supabase sits behind an optional email-signup and a lightweight analytics layer. The whole site deploys on Netlify, which rebuilds and ships automatically every time I push to the main branch on GitHub.

AI was an accelerator here, not the author. I owned the brief with the client, the information architecture, the content model, the deployment pipeline, and every design decision. Working with AI tooling let me move from idea to a polished production site far faster than hand-building each component, without giving up control of the parts that matter.

What I Built

Marketing homepage: A hero, a services preview, and a gallery that introduce the studio and guide visitors toward booking.

Services and pricing page: A full, categorised breakdown of every service with prices and durations, kept in sync with the studio's live booking page.

Single source of truth for services: The most useful design choice in the build. Every service name, price, and duration lives in one TypeScript file, and both the homepage preview and the full pricing page read from it. Updating a price is a one-line change in one place, with no risk of the homepage and the pricing page drifting apart. For a real business whose prices change, that maintainability matters more than any clever feature.

Image gallery: Built from the studio's own photography, optimised and cleanly organised.

Supabase-backed signup and analytics: An optional email-capture form and lightweight first-party analytics that degrade gracefully when not configured, so the site never breaks if the backend is switched off.

Booking handoff and continuous deployment: A clean handoff to the external Hey Goldie booking system, and a Netlify pipeline that rebuilds and deploys automatically on every push to GitHub.

Result

The site is live in production at calibeautyloft.com, serving a real business and its clients. Any change I push to GitHub is built and deployed automatically within minutes, so the owner gets updates without any manual deploy step.

What I Learned

Building for a real, non-technical client is a different discipline from building for myself. The priorities shift toward clarity, trust, and maintainability rather than technical novelty. Designing the services system so the owner's prices stay trivial to update turned out to be more valuable than any single feature.

It also showed where AI genuinely changes the economics of delivery. With the architecture and the decisions in my hands, AI tooling compressed the implementation enough to ship a complete, production-grade site on a realistic timeline, without cutting corners on the parts that matter.