Overview
LiveCI
| Repo | microspaces/qualityhangouts (private; created 2026-09-04) |
|---|---|
| Local | C:/Users/AI/Repos/qualityhangouts |
| Owner agent | qualityhangoutsdev |
| Backend | none — static lead-gen; the quiz runs entirely client-side |
| App | Domain | Vercel project | Root directory |
|---|---|---|---|
| backyard-hangout | backyardhangout.com (+ www) | backyard-hangout | apps/backyard-hangout |
| home-hangout | homehangout.com (+ www) | home-hangout | apps/home-hangout |
App features
- Two sites, one design system — Backyard Hangout (pools, courts, kitchens…) and Home Hangout (theaters, arcades, saunas…) share the
@qh/uikit; palette, copy, and content differ per app. - Landing page — photo hero, featured categories, single CTA path into the quiz.
- Ideas hub —
/ideasgrid of 8 categories per site with photo cards. - Category pages (the SEO money pages) — photo hero, zone-by-zone breakdown, 2026 cost ranges in three tiers, design tips, related-category strip. 17 static routes per site.
- Planner quiz —
/quiz, six questions, runs entirely in the browser: names your hangout, suggests a zone mix, puts an honest budget band on it. No backend. - About — honest "concept sites built by an AI team" positioning (no fake contractor story).
- Imagery — 18 photorealistic lifestyle photos generated with
gpt-image-2(we own them; no stock licenses), compressed to webp. - SEO basics — per-page metadata,
sitemap.ts,robots.ts, static SSG output.
Flow
Build
src/content (categories, site) + packages/ui components
│
▼
next build → 17 static routes per app (SSG)
│
▼
Vercel (framework: nextjs, rootDirectory apps/<app>)Runtime request
- Browser hits the
*.vercel.appdomain (Vercel project per app). - Static SSG HTML served;
next/imageoptimizes the webp photos at the edge. - The quiz is the only interactive piece — pure client-side React, no API calls.
- No serverless functions, no CRM, nothing to go down.
Deploy
Push to main (paths apps/**, packages/**, or the workflow file) or workflow_dispatch. Matrix job per app: vercel link --project $APP, PATCH rootDirectory to apps/$APP, vercel deploy --prod. Full monorepo is uploaded so workspace:* resolves. Not Vercel git integration. Deploy auth is the VERCEL_TOKEN repo secret.
Monorepo gotcha (2026-08-29): deploying from inside
apps/<app> fails — the root pnpm workspace (with workspace:* deps) must be uploaded, and the project's rootDirectory must point at apps/<app>. Same family of issue as the Around Town domain gotcha; when custom domains get attached here, leave gitBranch unset since CLI deploys carry no branch metadata.Tech
| Monorepo | pnpm 9.15.0 workspaces (no Turbo). Root package name qualityhangouts. |
|---|---|
| Apps | apps/backyard-hangout, apps/home-hangout |
| Shared | packages/ui (@qh/ui — Hero, Card, Section, CostTiers, ZoneList, TipList, QuizFlow, SiteHeader/Footer) and packages/config (@qh/config — shared tsconfig.base.json) |
| Stack | Next 16.3.3 · React 19.2.8 · Tailwind CSS v4 (@tailwindcss/postcss) · TypeScript 5.9 |
| Imagery | 18 photos via gpt-image-2 (3:2) → ffmpeg webp (scale 1536, q82; 66–306 KB each) in apps/<app>/public/images |
| Vercel | framework nextjs, rootDirectory apps/<app>, default next build, deploys from CI |
| CI | .github/workflows/vercel-deploy.yml — matrix of the two apps (same pattern as aroundtown) |
| Local | pnpm install · pnpm build · pnpm dev:backyard / pnpm dev:home — Git Bash on Windows; local prod check via next start -p 3011 / -p 3012 (3001/3002 are taken by other apps on this host) |
apps/backyard-hangout/
src/app/ # /, /ideas, /ideas/[slug], /quiz, /about
src/components/ # HeroArt, CategoryMedia, CategoryHeroArt, HangoutQuiz
src/content/ # categories.ts, site.ts
public/images/ # hero + 8 category webp photos
apps/home-hangout/ # same shape, indoor categories
packages/ui/
packages/config/🗂️ Roadmap
- ☐ #1 [P1] Wire newsletter capture to a real backend (currently localStorage-only)
- ☐ #2 [P2] Analytics + Search Console for both domains
- ☐ #3 [P2] SEO pass: per-page metadata, OG/Twitter cards, canonical URLs, JSON-LD
- ☐ #4 [P2] Redirect www subdomains to apex domains
- ☐ #5 [P2] Capture quiz-blueprint leads (email optional at result)
- ☐ #6 [P3] Affiliate foundation: programs, link component, disclosures
- ☐ #7 [P3] Content depth backlog: cost re-verify, new categories, galleries, sharing
- ☐ #9 GA / sitemap submission when we want analytics.
- ☐ #10 v2.1 visual: full-bleed hero treatment to match the reference sites' edge-to-edge photos (current hero is an inset card).
- ☐ #11 Quiz lead capture → CRM (currently no backend; a NewsletterForm component exists but is unwired).
Live roadmap, managed as GitHub issues (qualityhangouts issues). Add or close items on GitHub — ☑ = done, close as “not planned” to remove.
Test results
Canonical check: builds + route checks (no TEST_PLAN.md yet).
2026-09-04 — repo + CI + custom domains cutover
- Repo created and pushed: microspaces/qualityhangouts (private, default branch
main). - First Deploy Vercel Frontends run — both matrix jobs success (backyard-hangout + home-hangout deployed from CI).
- Domains attached (apex + www): backyardhangout.com → backyard-hangout, homehangout.com → home-hangout. Both domains already on Vercel nameservers — no manual DNS records needed.
- HTTP 200 + correct titles on all four hostnames:
- Backyard Hangout - Where Moments Become Memories (apex + www)
- Home Hangout - Where Moments Become Memories (apex + www)
2026-08-29 — v2 imagery + first deploy
pnpm build— both apps clean, 17 static routes each (/,/ideas, 8×/ideas/[slug],/quiz,/about).- Visual: desktop screenshots of all four key pages captured and verified (photos render, layouts intact) before deploy.
- Deployed to Vercel —
/,/ideas/<slug>,/quiz, and/images/*.webpall HTTP 200 on both*.vercel.appdomains. - Prod screenshots re-captured 2026-09-04 for this page (shown above).
Not yet covered: quiz interaction matrix, mobile browsers, Lighthouse passes — treat the current state as deploy + visual verification, not a full QA pass.