SHIPPED · LIVE IN PRODUCTIONW-01 / CASE STUDY

State Auto GlassINC

The owner edits every page, price and photo himself, from a panel on his own site. It is a static build for a mobile windshield repair business serving the mid-Willamette Valley since 1961, and the market study, the town pages and the written growth plan all came after launch.

VISIT THE LIVE SITEWEBSITE BY Sofiane Bifout

THE PROBLEM

A sixty-year-old local business needed to be found by the people already looking for it, across a dozen towns, and to turn that traffic into quote requests. Word of mouth built the business; the web needed to carry it forward.

THE RESULT

A fast, static Next.js site: quote form, interactive coverage map, service index, field report, and a dedicated page for each town served.

WHAT SHIPPED

Quote request form — the conversion endpoint
Interactive coverage map of the service area
Service index for every repair type
Field report documenting completed jobs
A dedicated, indexable page per town served
Static generation — fast on rural connections
Hero video — the owner's raw phone and drone footage, edited into a professional story for the homepage
NEXT.JSREACTTYPESCRIPTTAILWINDNEON POSTGRESZODCLERKCLOUDINARYVERCEL
( THE CMS )

Built from scratch.

A custom in-house CMS, built from scratch — no Sanity, Contentful or WordPress. The owner, who is not technical, manages the entire site — every page, nav link, sitemap entry and piece of structured data — from one /admin panel, with no code touched.

He adds a town, swaps a photo or rewrites a line himself, the day he decides to.

Live split-screen mirror

The standout feature. The editor is two panes: the content form on the left, and a real-time visual mirror of the live site on the right, sticky, scrolling with you. Every field on the left has a matching block on the right.

  • Switch tabs, pick an item or focus a field and the mirror auto-scrolls to the exact block being edited and rings it — so there is never a guessing game about what a field controls on the site.
  • Tab-aware and section-aware: editing Hours shows the hours block, editing one FAQ scrolls straight to that FAQ, and editing a homepage section shows it in the owner's actual saved order.
  • Handles partial and empty content gracefully. Nothing crashes mid-edit, and a blank field shows a muted built-in placeholder instead of breaking the layout.
  • Covers every content type: business info, homepage sections (hero, work, field, craft, lineup, since, and the service-area map with its sponsor cards), services, FAQs, reviews, service areas, blog posts and job records.

Friendly by design

  • Guided in-app documentation, so nothing external is needed to learn it.
  • Purpose-built field components rather than raw JSON editing.
  • Drag-and-drop photo pool — a grouped media library with multi-select, including select-all inside a group, and uploads that keep their original filenames.
  • Full revision history. Every save is tracked and reversible.
  • Unmissable upload progress, and no silent failures.

Safety & reliability

  • Schema-validated with Zod end to end, backed by Postgres with a committed JSON seed fallback — the CMS works even with zero environment variables configured.
  • Auth-gated with Clerk and fails closed in production, checked at the middleware layer and again in every API handler.
  • Guardrails against editing the production database from a local dev environment by accident.
  • On-demand cache revalidation, so a save goes live instantly with no rebuild and no redeploy.
( THE STACK )

Eight dependencies.

A marketing and lead-generation site for a mobile auto glass business, built on a custom in-house CMS. The owner edits the entire site from a single /admin panel, with no code required.

CORE
Next.js 16 — App Router, React Server ComponentsReact 19 · TypeScript 5, strictTailwind CSS v4 — CSS-first design tokens, 20 themes
BACKEND & DATA
Neon Postgres — the CMS content storeZod — schema validation throughoutClerk — authentication for the admin panel
MEDIA
Cloudinary — signed direct uploads, image and video transforms, folder-based organisation
LEAD DELIVERY
Web3Forms first, Resend for optional branded email, then a server log as the last fallback — a lead is never lost
SEO
Next.js Metadata API, JSON-LD (LocalBusiness, Service, FAQPage, BreadcrumbList, BlogPosting), dynamic sitemap, robots and manifest
MOTION
Pure CSS animation driven by IntersectionObserver — no animation library, and reduced-motion aware
TESTING & TOOLING
34 test suites on plain node:assert — no test-framework overheadESLint · Knip for dead-code detection
DEPLOYMENT
Vercel — ISR at revalidate=300, plus on-demand revalidation the moment the CMS saves

Eight runtime dependencies, total. Everything else — the CMS, the admin UI, the content pipeline — was built from scratch.

( AFTER LAUNCH )

Why the phone rings.

The site was the first half. The second was working out why the phone was not busier — and that is consulting and marketing work, not development.

First, why the phone was slow

His service area town by town, the competitors ranking in each of them, and a long interview with the owner about how work actually arrives, who calls, and where the quiet weeks come from. The plan came out of what that turned up, not out of a checklist.

Found in every town he serves, not only his own

A customer one town over should be able to find him as easily as a neighbour.

He was visible where the business is based and thin everywhere else — across a dozen towns that all buy the same service. Each town he covers now has its own page, its own content and its own reason to come up when someone there needs a windshield fixed. Nothing about Google's algorithm changed; what changed is that there is finally something real for it to find in each of those places.

Named when someone asks instead of searching

Think of a customer asking out loud who can fix a windshield in his town today.

A growing number of people describe their problem to an assistant rather than typing it into a search box. Being the answer to that requires a business the assistant can actually describe — specific services, real coverage, details it can verify, all stated in a form a machine reads without guessing. That is the difference between being named and being skipped.

Recommended, not just listed

His own words only go so far, and a customer's words carry further.

Appearing in a list is not the same as being the one chosen. A steady flow of genuine reviews — every customer asked, nothing offered in exchange — is what moves a business from present to preferred, both in what Google surfaces first and in what an assistant repeats back. A Trustpilot presence sits alongside it as an independent check, not as a ranking lever.

Calls worth answering, not clicks

A Google and Meta campaign in build, scoped to someone with a cracked windshield today rather than to the largest audience available. Reach is easy to buy and mostly worthless here; the job is to spend on the few hundred people in his towns who need the work this week.

The organic work came first and the campaign is scoped to it, which is the order that matters: the groundwork carries the advertising rather than the advertising carrying the business.

( NEXT )

Need this for your business?

START A PROJECT MORE WORK