# bbrooks37/built-in-3 architecture

> Architecture diagram of the GitHub repository bbrooks37/built-in-3, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-11). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/bbrooks37/built-in-3
- Repository: https://github.com/bbrooks37/built-in-3

## Overview

This Next.js site presents Built in 3 branding and a page-based interactive manual. The manual route resolves a requested page from JSON and renders it through the manual component; the component excerpt also shows navigation and local-save status, though the save implementation is omitted. Several marketing sections are present in the tree, but the sampled home page is still the Next.js starter and does not import them. Accordingly, those sections are represented without invented wiring; the contact form explicitly prevents submission.

Main entry points: [`app/manual/[pageNumber]/page.tsx`](https://github.com/bbrooks37/built-in-3/blob/main/app/manual/%5BpageNumber%5D/page.tsx) (Manual route), [`app/layout.tsx`](https://github.com/bbrooks37/built-in-3/blob/main/app/layout.tsx) (Root layout), [`app/page.tsx`](https://github.com/bbrooks37/built-in-3/blob/main/app/page.tsx) (Home route), [`app/globals.css`](https://github.com/bbrooks37/built-in-3/blob/main/app/globals.css) (Global styles)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Site shell"]
  node_root_layout["Root layout<br/>[layout.tsx]"]
  node_home_route["Home route<br/>[page.tsx]"]
  node_global_styles["Global styles<br/>[globals.css]"]
end

subgraph group_manual["Manual experience"]
  node_manual_route["Manual route<br/>[page.tsx]"]
  node_manual_content["Manual page data<br/>[manual_data.json]"]
  node_manual_view["Interactive manual"]
end

subgraph group_marketing["Marketing sections"]
  node_navbar["Navigation bar<br/>[Navbar.tsx]"]
  node_hero["Hero section<br/>[HeroSection.tsx]"]
  node_pillars["Pillars section<br/>[PillarsSection.tsx]"]
  node_shop["Shop section<br/>[ShopSection.tsx]"]
  node_community["Community section"]
  node_contact["Contact section<br/>[ContactSection.tsx]"]
end

node_visitor(("Visitor"))

node_visitor -.->|"opens home"| node_home_route
node_visitor -.->|"opens manual"| node_manual_route
node_root_layout -->|"imports styles"| node_global_styles
node_manual_route -->|"finds page"| node_manual_content
node_manual_route -->|"renders page"| node_manual_view

click node_root_layout "https://github.com/bbrooks37/built-in-3/blob/main/app/layout.tsx"
click node_home_route "https://github.com/bbrooks37/built-in-3/blob/main/app/page.tsx"
click node_global_styles "https://github.com/bbrooks37/built-in-3/blob/main/app/globals.css"
click node_manual_route "https://github.com/bbrooks37/built-in-3/blob/main/app/manual/%5BpageNumber%5D/page.tsx"
click node_manual_content "https://github.com/bbrooks37/built-in-3/blob/main/data/manual_data.json"
click node_manual_view "https://github.com/bbrooks37/built-in-3/blob/main/components/BuilderManualPage.tsx"
click node_navbar "https://github.com/bbrooks37/built-in-3/blob/main/components/Navbar.tsx"
click node_hero "https://github.com/bbrooks37/built-in-3/blob/main/components/HeroSection.tsx"
click node_pillars "https://github.com/bbrooks37/built-in-3/blob/main/components/PillarsSection.tsx"
click node_shop "https://github.com/bbrooks37/built-in-3/blob/main/components/ShopSection.tsx"
click node_community "https://github.com/bbrooks37/built-in-3/blob/main/components/CommunitySection.tsx"
click node_contact "https://github.com/bbrooks37/built-in-3/blob/main/components/ContactSection.tsx"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_root_layout,node_home_route,node_global_styles toneBlue
class node_manual_route,node_manual_content,node_manual_view toneAmber
class node_navbar,node_hero,node_pillars,node_shop,node_community,node_contact toneMint
class node_visitor toneIndigo
```

## Components

### Site shell

- [Root layout](https://github.com/bbrooks37/built-in-3/blob/main/app/layout.tsx): `app/layout.tsx`
- [Home route](https://github.com/bbrooks37/built-in-3/blob/main/app/page.tsx): `app/page.tsx`
- [Global styles](https://github.com/bbrooks37/built-in-3/blob/main/app/globals.css): `app/globals.css`

### Manual experience

- [Manual route](https://github.com/bbrooks37/built-in-3/blob/main/app/manual/%5BpageNumber%5D/page.tsx): `app/manual/[pageNumber]/page.tsx`
- [Manual page data](https://github.com/bbrooks37/built-in-3/blob/main/data/manual_data.json): `data/manual_data.json`
- [Interactive manual](https://github.com/bbrooks37/built-in-3/blob/main/components/BuilderManualPage.tsx): `components/BuilderManualPage.tsx`

### Marketing sections

- [Navigation bar](https://github.com/bbrooks37/built-in-3/blob/main/components/Navbar.tsx): `components/Navbar.tsx`
- [Hero section](https://github.com/bbrooks37/built-in-3/blob/main/components/HeroSection.tsx): `components/HeroSection.tsx`
- [Pillars section](https://github.com/bbrooks37/built-in-3/blob/main/components/PillarsSection.tsx): `components/PillarsSection.tsx`
- [Shop section](https://github.com/bbrooks37/built-in-3/blob/main/components/ShopSection.tsx): `components/ShopSection.tsx`
- [Community section](https://github.com/bbrooks37/built-in-3/blob/main/components/CommunitySection.tsx): `components/CommunitySection.tsx`
- [Contact section](https://github.com/bbrooks37/built-in-3/blob/main/components/ContactSection.tsx): `components/ContactSection.tsx`

### Other components

- **Visitor**

## Connections

- Visitor → Home route: opens home
- Visitor → Manual route: opens manual
- Root layout → Global styles: imports styles (evidence: `app/layout.tsx`)
- Manual route → Manual page data: finds page (evidence: `app/manual/[pageNumber]/page.tsx`)
- Manual route → Interactive manual: renders page (evidence: `app/manual/[pageNumber]/page.tsx`)