Route map
Service architecture
Clear service routes
01active
Progress72%
Website system objects
Web systems grouped by what they make possible.
Route architecture, lead capture, data-backed content, admin paths, schema, and deployment checks.
HMX Zone
React
Systems
Full-Stack Websites Systems
The systems we build for this service, with steps and fallbacks.
Medium system
Accessibility QA Script
An automated accessibility gate that crawls key routes in headless Chromium and runs axe-core checks (and route/UI smoke) as an npm script in CI — catching contrast, ARIA, heading-order, and alt-text regressions before deploy instead of relying on manual spot-checks.
- Timeline
- 3-6 days
- Fallback
- Defined
- Playwright
- axe-core
- Node/npm scripts
- CI (GitHub Actions)
View system
High system
Admin Protected Route Layer
An admin area guarded at the edge by middleware that validates a signed HMAC cookie session against a server-only secret, protecting every /admin path except the login page — a self-contained auth layer with no third-party identity provider, suitable for a small operator dashboard.
- Timeline
- 4-7 days
- Fallback
- Defined
- Next.js Middleware
- HMAC (Web Crypto)
- HttpOnly cookies
- Supabase audit log
View system
Medium system
Booking Handoff Page
A post-intake booking step that embeds Cal.com inside the site's CSP, carries the lead's submission ID into the booking, and reconciles the confirmed slot back onto the lead record via a signature-verified webhook so the CRM stage updates itself.
- Timeline
- 4-8 days
- Fallback
- Defined
- Cal.com embed + webhooks
- Next.js Route Handlers
- Supabase
- CSP (next.config)
View system
High system
Case Study Renderer
A renderer that turns a typed case-study dataset (stack, workflow, honest outcomes) into consistent service-hub pages, mapping each study to a single service and emitting Article/CreativeWork JSON-LD — presenting real work with realistic capability statements, never invented metrics.
- Timeline
- 1-2 weeks
- Fallback
- Defined
- Next.js App Router
- TypeScript
- JSON-LD (Article)
- Vitest
View system
Medium system
Centralized SEO Metadata Layer
A shared metadata factory that produces Next.js Metadata objects (title, description, canonical, Open Graph, Twitter card) for every route from typed helpers, so canonical URLs and social tags are correct and consistent site-wide instead of copy-pasted per page.
- Timeline
- 3-5 days
- Fallback
- Defined
- Next.js Metadata API
- generateMetadata
- TypeScript
- Vitest
View system
Medium system
Consent-Gated Analytics Event Tracker
A typed analytics layer that fires CTA and funnel events to Vercel Analytics, Microsoft Clarity, and GA4 only after cookie consent, through one tracking helper with a fixed event taxonomy — so conversions are measurable, consistent, and privacy-compliant rather than scattered ad-hoc calls.
- Timeline
- 3-5 days
- Fallback
- Defined
- Vercel Analytics
- Microsoft Clarity
- Google Analytics 4
- TypeScript consent gate
View system
Low system
Dynamic Sitemap Generator
A code-generated sitemap.xml built by Next.js MetadataRoute that enumerates static routes, every service hub plus its children from the route config, and all published blog posts and topics with real lastModified dates — so the sitemap is always complete and current without manual editing.
- Timeline
- 2-3 days
- Fallback
- Defined
- Next.js sitemap (MetadataRoute)
- TypeScript
- Supabase content source
View system
Low system
FAQ Page with FAQPage Schema
An accessible FAQ page driven by a typed content file that renders native disclosure UI for humans and emits matching FAQPage JSON-LD for search and AI answer engines — with the structured data generated from the same source so the markup can never disagree with the visible answers.
- Timeline
- 2-4 days
- Fallback
- Defined
- Next.js
- JSON-LD (schema.org FAQPage)
- TypeScript
- Vitest
View system
Low system
llms.txt AI Discovery Profile
A maintained /llms.txt profile that gives LLMs and AI answer engines a curated, plain-text map of the site — what the business does, the canonical service URLs, and key resources — generated from the same route and content config so it stays accurate as the site changes.
- Timeline
- 2-3 days
- Fallback
- Defined
- Next.js (route handler or public file)
- TypeScript
- route config
View system
Medium system
Mobile Navigation Shell
An accessible, performance-conscious mobile navigation shell — a focus-trapped drawer with working Services and Resources dropdowns derived from the route config — built with correct ARIA, body-scroll locking, and reduced-motion support so the primary nav works on touch devices without layout shift.
- Timeline
- 3-6 days
- Fallback
- Defined
- React 19
- Tailwind CSS v4
- ARIA/focus management
- route config
View system
High system
Moderated Review Surface
A public reviews system where visitors submit through a validated Server Action that inserts rows as pending, only admin-approved rows are publicly readable via RLS, and aggregate rating/count plus Review JSON-LD are computed from approved data — with a static fallback set so the page is never empty.
- Timeline
- 1-2 weeks
- Fallback
- Defined
- Supabase (RLS)
- Next.js Server Actions
- JSON-LD (Review/AggregateRating)
- Turnstile
View system
Medium system
Open Graph Image Pipeline
A file-convention OG image system using Next.js opengraph-image with ImageResponse to render branded, per-route social cards at the edge — so every shared link gets a correct 1200x630 preview generated from code and brand tokens instead of a single generic image.
- Timeline
- 3-5 days
- Fallback
- Defined
- Next.js opengraph-image + ImageResponse
- Edge runtime
- Brand tokens/fonts
View system
Low system
Package Comparison Page
A scope-tier comparison page driven by a typed packages config — deliverables, timelines, and best-fit per tier — rendered as an accessible comparison layout, with scope indicators rather than fabricated prices until real pricing is supplied.
- Timeline
- 2-4 days
- Fallback
- Defined
- Next.js
- Tailwind CSS v4
- TypeScript
View system
Medium system
Proof Artifact Renderer
A component that renders real build proof — workflow screenshots, architecture diagrams, and config snapshots — from a typed proof dataset assigned one-to-one to a service, served from a public storage bucket with long cache headers, so each service hub shows genuine evidence without duplicate or mislabeled artifacts.
- Timeline
- 4-7 days
- Fallback
- Defined
- Next.js Image
- Supabase Storage (public bucket)
- TypeScript
- Cache-Control headers
View system
Medium system
Resource Hub Index
A live /resources surface that lists real published blog posts and topic clusters pulled from the active content source (Supabase-backed with filesystem fallback), with counts and last-updated dates computed at request time rather than hand-maintained link lists.
- Timeline
- 3-5 days
- Fallback
- Defined
- Next.js App Router
- Supabase
- Markdown content
- ISR/revalidate
View system
Low system
Robots Crawl Policy
A code-defined robots.txt via Next.js MetadataRoute that opens public routes, blocks /admin and /api, names the AI crawler user-agents explicitly (GPTBot, ClaudeBot, OAI-SearchBot and peers), and points to the sitemap — making crawl and AI-access policy reviewable in version control.
- Timeline
- 1-2 days
- Fallback
- Defined
- Next.js robots (MetadataRoute)
- TypeScript
View system
Medium system
Security Header & CSP Config
A hardened HTTP header layer defined in next.config — a least-privilege Content-Security-Policy that allowlists exactly the embeds used (Cal.com, Turnstile, Supabase, analytics, Sentry) plus X-Content-Type-Options, X-Frame-Options DENY, Referrer-Policy, and Permissions-Policy — so the site ships secure defaults without breaking real integrations.
- Timeline
- 2-4 days
- Fallback
- Defined
- Next.js next.config headers
- Content-Security-Policy
- Vercel
View system
Medium system
Service Hub Route Architecture
A typed, single-source-of-truth route map that generates every service hub and its child pages (proof, case-studies, systems, packages) from one config array, so the App Router tree, navigation, breadcrumbs, and sitemap all stay in sync from the same data instead of drifting apart.
- Timeline
- 3-6 days
- Fallback
- Defined
- Next.js 16 App Router
- TypeScript
- generateStaticParams
- Vitest
View system
High system
Switchable Blog Source Adapter
An abstraction that serves blog content from Supabase, the filesystem, or a hybrid-fallback mode behind one interface controlled by an env flag — so the site can run database-backed blogging in production while keeping Markdown as a guaranteed rollback source with no code changes.
- Timeline
- 1-2 weeks
- Fallback
- Defined
- Supabase
- Markdown (gray-matter)
- Next.js
- env-flag config
View system
Medium system
Two-Step Lead Intake Page
A conversion-focused lead capture page where a Next.js Server Action validates and rate-limits submissions, writes to Supabase via the service-role client only on the server, and gates spam with Turnstile — collecting just enough context to route the lead without scaring people off.
- Timeline
- 4-7 days
- Fallback
- Defined
- Next.js Server Actions
- Supabase (service-role)
- Cloudflare Turnstile
- Zod
- Upstash KV
View system
The website operating path stays visible
A route assembles through form, data, metadata, and deploy checks.
Lead capture
Form and context flow
Lead capture that saves context
02active
Progress86%
Public metadata
SEO and schema layer
SEO and schema on public pages
03active
Progress64%
Launch QA
Analytics and deployment checks
Analytics events tied to CTAs
04active
Progress91%