Joy Nails & Spa

Project Case Study

Joy Nails & Spa

A nail salon website for a Toronto studio on Eglinton West. Built on Next.js 16 with only three runtime dependencies and pre-optimized images, it loads fast on a phone and sends visitors straight into the salon existing booking system.

View Live Project
Category
Local Business / Beauty Salon
Client
Joy Nails & Spa
Type
Website (Local Business)
Role
Solo: information architecture, UI implementation, image pipeline, and technical SEO.
Goal
Present the salon services and atmosphere credibly, and move visitors into the existing booking system with as little friction as possible.
Scope
Home, About, Services, Lookbook, Testimonials, Contact, plus legacy route redirects, sitemap, and structured data.

Overview

Joy Nails & Spa is a nail and spa studio at 290 Eglinton Ave W, Toronto. The site opens with the promise the salon actually sells: "Indulge in Beauty. Relax in Luxury. Discover premium nail care, soothing massages, and rejuvenating facials in Toronto's serene spa retreat."

For a local salon, a website has one job: convince someone browsing on their phone that this is the right place, then get them into the booking system. Everything in this build serves that path.

The Approach

Don't replace the booking system

The salon already runs on Milano Cloud, and their staff already know it. Rebuilding booking would have introduced a second source of truth for appointments and a new system for the team to learn — cost and risk with no upside for the client.

So the site links out to the existing booking portal, and does so from everywhere it might be wanted: the hero, the header, the footer, the mobile nav, the services section, and the Dazzle Dry promo. The integration is a link, and that is the correct amount of engineering.

Don't ship a CMS

Salon content — services, hours, address, testimonials — changes rarely, and the client's requests come through SERVITH. A CMS would have added hosting cost, an admin surface, and an attack surface to solve a problem that doesn't exist at this scale. Content lives in typed configuration instead, so a change is a small edit and a redeploy.

Technical Implementation

Three dependencies

The runtime dependency list is next, react, and react-dom. There is no UI library, no animation library, no analytics bundle, and no forms library. Scroll reveals, count-up statistics, and the scroll-to-top control are small custom components rather than reasons to ship a framework.

This is deliberate. A salon site is read on a phone, often on mobile data, often while the visitor is deciding between two nearby options. Payload is a conversion feature.

Configuration as the single source of truth

One config module holds the site URL, business identity, address, phone, Instagram handle, booking URL, and the indexable route list. It feeds metadata, the sitemap, robots, and the JSON-LD component. The address exists once in the codebase, and every place it appears is derived from that one definition.

Images

next/image optimization is disabled and images are pre-optimized at build authoring time by a PowerShell script, with raw sources kept alongside the committed optimized output. A gallery-heavy salon site gets fast images without an optimization server in the request path — which is also what makes a fully static export viable.

Technical SEO

For a local business, this is the marketing:

*

JSON-LD emitting BeautySalon and WebSite with postal address, contact point, area served, and social profiles

*

A shared metadata helper producing canonical URLs, Open Graph, and Twitter summary cards per page

*

Sitemap entries with per-route images and priorities, driven by the config's indexable route list

*

Locale pinned to en-CA throughout

*

Legacy /portfolio and /projects routes issue permanent redirects to /lookbook and are marked noindex, so old inbound links keep their value

Structure

Home sits on its own, and the secondary pages — About, Services, Lookbook, Testimonials, Contact — share a route group layout. The services content mirrors how the salon actually sells: hand care, artificial services, polish changes, foot care, and a dedicated promo for Dazzle Dry, the non-toxic, UV-free, five-minute-drying system the salon partners with.

What This Case Study Demonstrates

*

Knowing what not to build — no booking rebuild, no CMS, no analytics bloat

*

Integrating with the systems a small business already runs rather than displacing them

*

Treating performance as a conversion concern for mobile local search

*

Doing local SEO properly: structured data, canonical metadata, and redirect hygiene

*

Delivering a fast, credible storefront on a dependency surface of three packages


Live: https://joynailsnspa.ca

Role: Solo delivery (IA → UI → image pipeline → technical SEO)

PortalContact