I Built a Multi-Page Salon Website with NextJS in One Session — I Planned for Three Days

I need to talk about what just happened.

Yesterday I wrote out my 10-day sprint plan. Days 1–3 were allocated to building a salon landing page. One page. Hero, services, testimonials, contact form, booking calendar. Three days felt reasonable — maybe even tight.

It's Wednesday, March 26th. The salon site is done. Not just the landing page — the entire multi-page website. Treatments catalog. Journal with three full blog articles. Membership page. Interactive booking calendar. All deployed on Vercel.

It shipped in one focused session.

Live site: mockup-salon.vercel.app Source: github.com/byronPantoja/mockup-salon

What Actually Got Built

I didn't just build what I planned. The AI workflow moved so fast that I kept adding scope — and it kept landing:

• Home page — full-width hero with lifestyle photography, four service cards with pricing and duration, a two-column about section, three testimonial cards, an interactive booking calendar with date/time selection, and a contact form with validation
• /treatments — seven treatments in an accordion layout, each expanding to reveal an inline booking widget
• /journal — three full wellness articles with dynamic routing, tags, and reading time
• /membership — a "coming soon" teaser with email capture

The booking calendar is the component I'm most proud of. It renders a dynamic month view based on the current date, shows clickable dates, displays time slot availability, and has a confirmation flow. It appears both on the home page and inside each treatment accordion on the /treatments page.

How It Happened So Fast

The Claude Code workflow isn't magic — it's just the right loop executed quickly:

First, I defined the design direction before touching any code. Warm premium aesthetic — soft neutrals, sage green accents, serif/sans-serif font pairing. I described the full sitemap, the component list, and the vibe. Claude turned that into a component scaffold with all the copy written.

Second, I built component-first. ServiceCard, TestimonialCard, BookingCalendar, ContactForm — each one self-contained and reusable. Once the components existed, assembling pages was fast.

Third, I ran an audit after deployment. This is where AI shines hardest. I pasted the URL into Claude, it crawled every page, and flagged issues I'd missed:

• The calendar was hardcoded to November 2024 (16 months in the past)
• Footer links pointed to #
• Three images were reused across seven treatments
• No feedback state on form submit

I turned the audit into a Claude Code prompt, ran it, and had everything fixed in about an hour.

The Scope Decision That Saved the Sprint

Midway through, I started thinking about integrating the Mindbody API — a real scheduling backend for the booking calendar. The API sandbox is free. It would make the mockup feel more "real."

Claude pushed back. Hard.

The math: Mindbody integration would mean learning OAuth, setting up a developer account, understanding their data model, building the connection layer, and handling edge cases. That's 2-3 days — my entire Shopify store timeline. And the Shopify store already proves API integration. Two projects proving the same skill doesn't help my portfolio.

I killed the Mindbody idea and moved on. The mock booking calendar already demonstrates interactive UI capability without a real backend. Scope discipline is everything in a sprint.

What This Means for the Sprint

I'm two days ahead of schedule. The salon was supposed to take until Friday. It's Wednesday and I'm starting the Shopify store tomorrow morning.

More importantly — I'm starting to understand what AI-assisted development actually changes. It's not that the code writes itself. It's that the planning-to-shipping loop compresses from days to hours. The bottleneck moves from "how do I build this component" to "what should I build next." Architecture and design decisions still take the same amount of thought. Everything else goes faster.

I'm genuinely excited about tomorrow. The Shopify Storefront API is the build I was most nervous about. Let's see if the same velocity holds when there's a real external API involved.

---

This is Part 2 of a 4-part series. Next: Day 3 — Building a Headless Shopify Storefront with Live API Data.