Site Map & Architecture

How HumanConnect A\ is built

Complete site map, component architecture, tech stack, and the target AWS deployment diagram.

01 — Site Map

Page structure

All routes rendered statically at build time (SSG), with ISR support for agent-updated content.

/ HomeSSG/toolsSSG · filter/hubSSG · filter/guidesSSG/glossarySSG/aboutSSG/sitemapSSG/tools/[slug]7 pages×7/hub/[slug]12 pages×12/guides/[slug]4 pages×4/glossary/[term]10 pages×10ROOTL1L244 static pages total
/
Home
Hero · featured tools · video library · hub feed · CTA
/tools
AI Tools
Grid of all tools with category & status filters
/tools/[slug]
Tool Detail
Full description · use cases · specs · tags
/hub
Intelligence Hub
Content feed — articles, videos, guides with tag filter
/hub/[slug]
Content Detail
Article/video/guide reader
/guides
Guides
Index of in-depth practical guides
/guides/[slug]
Guide Detail
Markdown renderer · sidebar · progress
/glossary
AI Glossary
All terms grouped by category
/glossary/[term]
Term Detail
3-level explanation · example · related terms
/about
About
Mission · values · contact
/sitemap
This page
Architecture · tech stack · diagrams

02 — Component Architecture

Component hierarchy & data flow

Server Components fetch data. Client Components handle interaction. Data flows one way: JSON → data.ts → pages → components.

DATA SOURCEtools.jsonhub.jsonguides.jsonvideos.jsonglossary.jsonimportDATA LAYERsrc/lib/data.tsgetTools · getHub · getGuides · getVideos · getFeaturedVideosSERVER COMPONENTS (fetch + render)page.tsxHometools/page[slug]hub/page[slug]guides/page[slug]glossary[term]aboutsitemapSHARED COMPONENTSSectionHeaderToolCardContentCardVideoCardTechTermHoverBorderCardinteractive.tsxCLIENT COMPONENTS ("use client")Navbarscroll-awareFooterhover effectsMathBackgroundcanvas APIHeroConnectionDiagramSVG SMILComplexityTogglecontextVideoCardyoutube embedlayout.tsx — RootLayout — wraps every pageGeist Sans · Geist Mono · metadata · Navbar · <main> · FooterServer Component"use client"Data / JSON

03 — Tech Stack

Every dependency and why it's here

Minimal dependencies by design. No UI component library, no state management framework, no ORM.

Framework
Next.js 16.2.7

App Router · SSG + ISR · Server & Client Components

React 19.2.4

Concurrent features · Server Components · Suspense

TypeScript 5

Strict mode · full type coverage across all files

Styling & UI
Tailwind CSS v4

CSS-first config · design tokens in globals.css · no tailwind.config.js

Geist Sans / Mono

Google Fonts via next/font · variable fonts · no layout shift

lucide-react 1.17

Tree-shaken SVG icons · consistent 24px grid

Canvas API

MathBackground — native browser canvas, no library dependency

Content & Data
Static JSON

tools.json · hub.json · guides.json · videos.json · glossary.json

gray-matter 4.0.3

Markdown frontmatter parsing for guide content

react-markdown 10.1

Guide rendering · remark-gfm for GFM tables/strikethrough

Custom data.ts

Single data access layer — all components import from here only

Animation
CSS Animations

fadeUp · float · pulse-soft — no JS, works on Server Components

SVG SMIL

animateMotion · animate — used in HCLogo and HeroConnectionDiagram

framer-motion 12.40

Available as dependency, not yet wired — ready for page transitions

Tooling
ESLint 9

eslint-config-next · App Router rules

Turbopack

Next.js dev server bundler — fast refresh in <400ms

Playwright

Dev tooling — screenshot/verify pages during build session

Target: AWS
AWS Amplify

Git-connected auto-deploy · SSL · preview branches · ~$1–3/mo

DynamoDB (On-demand)

Content tables · GSI for date/featured sorts · 25GB free tier

S3 + CloudFront

Image/asset CDN · 1TB/mo free · $0.02/GB storage

Lambda + EventBridge

Weekly curation agent · 1M req/mo free

Bedrock Claude Haiku

Content summarization + formatting · ~$3/mo at launch scale

04 — Target AWS Architecture

Production deployment on AWS

Near-zero maintenance · estimated $10–15/month at launch scale · agent-driven content pipeline.

CLIENTCDN / EDGEAPPLICATION LAYERDATA + AGENT PIPELINEpages/assetsstatic assetsgit pushbuildfetchtriggerwriteISR revalidate👤User / Browserhttps://humanconnect.ai⚡CloudFront CDNSSL · global edge · 1TB free🚀AWS AmplifyBuild · host · preview🗂S3 BucketImages · assets⬡GitHubgit push → auto deploy▲Next.js 16 (SSG+ISR)Static pages · revalidate 3600s⬡DynamoDBOn-demand · free tier⏱EventBridgeCron: weeklyλLambdaCuration agent🧠Bedrock (Haiku)Summarize + format🔍Tavily APIWeb search~$2/mofree tierfree tier~$3/mo~$5/moRequest flowData / agent flowAWS service
Estimated monthly costs
ServiceUsageMonthly cost
AWS Amplify10K visitors/mo~$2
DynamoDB (on-demand)1K items · 100K reads/moFree tier
S3 + CloudFront5GB assets · 1TB transfer~$0.50
Lambda500 agent runs/moFree tier
EventBridge SchedulerWeekly triggersFree
Bedrock Claude Haiku50K tokens/run × 4/mo~$3
Tavily Search API500 searches/mo~$5
Route 53 (DNS)1 hosted zone~$0.50
Total~$11–12 / month