# techcsispit/git-github-workshop architecture

> Architecture diagram of the GitHub repository techcsispit/git-github-workshop, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/techcsispit/git-github-workshop
- Repository: https://github.com/techcsispit/git-github-workshop

## Overview

Source Start is a contributors board populated from one JSON profile per contributor. Visitors browse searchable cards, view a newest-first event display, or share an individual profile. Profile loading supports local files and GitHub-backed updates; the README documents the contribution-file workflow. Some component wiring is inferred only where documented, since several page and component sources were not sampled.

Main entry points: [`lib/profiles.ts`](https://github.com/techcsispit/git-github-workshop/blob/main/lib/profiles.ts) (Profile loader), [`app/page.tsx`](https://github.com/techcsispit/git-github-workshop/blob/main/app/page.tsx) (Board page), [`lib/board.ts`](https://github.com/techcsispit/git-github-workshop/blob/main/lib/board.ts) (Board logic), [`app/u/[username]/page.tsx`](https://github.com/techcsispit/git-github-workshop/blob/main/app/u/%5Busername%5D/page.tsx) (Profile page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_pages["Site pages"]
  node_home["Board page<br/>[page.tsx]"]
  node_livepage["Live page<br/>[page.tsx]"]
  node_sharepage["Profile page<br/>[page.tsx]"]
  node_ogimage["Share image"]
  node_api["Profiles API<br/>[route.ts]"]
end

subgraph group_profiles["Profile data"]
  node_loader["Profile loader<br/>[profiles.ts]"]
  node_profilefiles["Profile JSON"]
  node_validation["Profile validation<br/>[validate.mjs]"]
end

subgraph group_board["Board experience"]
  node_boardlogic["Board logic<br/>[board.ts]"]
  node_boardview["Contributor board<br/>[Board.tsx]"]
  node_liveview["Live board<br/>[LiveBoard.tsx]"]
  node_livehook["Live updates<br/>[useLiveProfiles.ts]"]
  node_spotlight["Arrival spotlight<br/>[Spotlight.tsx]"]
  node_card["Contributor card"]
  node_hero["Board introduction<br/>[Hero.tsx]"]
  node_join["Join panel<br/>[JoinPanel.tsx]"]
  node_flipcard["Flip interaction<br/>[FlipCard.jsx]"]
end

subgraph group_sharing["Profile sharing"]
  node_sharebuttons["Share controls<br/>[ShareButtons.tsx]"]
end

subgraph group_effects["Visual effects"]
  node_shapewaves["Shape background<br/>[ShapeWaves.jsx]"]
  node_dither["Dither background<br/>[Dither.jsx]"]
end

node_visitor(("Visitor"))
node_contributor(("Contributor"))
node_github["GitHub API"]

node_visitor -->|"opens board"| node_home
node_visitor -->|"opens live view"| node_livepage
node_visitor -->|"opens profile"| node_sharepage
node_contributor -.->|"adds profile"| node_profilefiles
node_home -->|"loads profiles"| node_loader
node_home -->|"sorts profiles"| node_boardlogic
node_home -->|"renders board"| node_boardview
node_home -->|"renders intro"| node_hero
node_home -->|"renders join panel"| node_join
node_loader -->|"reads locally"| node_profilefiles
node_loader -.->|"fetches profiles"| node_github
node_loader -.->|"looks up join dates"| node_github
node_loader -->|"checks profiles"| node_validation
node_api -->|"loads profiles"| node_loader
node_livepage -->|"loads profiles"| node_loader
node_livepage -->|"renders live board"| node_liveview
node_liveview -->|"tracks updates"| node_livehook
node_livehook -->|"polls profiles"| node_api
node_livehook -->|"merges arrivals"| node_boardlogic
node_boardview -->|"searches and filters"| node_boardlogic
node_boardview -->|"flips cards"| node_flipcard
node_liveview -->|"orders profiles"| node_boardlogic
node_liveview -->|"highlights arrivals"| node_spotlight
node_sharepage -->|"loads profiles"| node_loader
node_sharepage -->|"finds profile"| node_boardlogic
node_sharepage -->|"renders profile"| node_card
node_sharepage -->|"offers sharing"| node_sharebuttons
node_ogimage -->|"loads profiles"| node_loader
node_ogimage -->|"finds profile"| node_boardlogic
node_boardview -.->|"renders background"| node_shapewaves
node_boardview -.->|"fallback background"| node_dither

click node_home "https://github.com/techcsispit/git-github-workshop/blob/main/app/page.tsx"
click node_livepage "https://github.com/techcsispit/git-github-workshop/blob/main/app/live/page.tsx"
click node_sharepage "https://github.com/techcsispit/git-github-workshop/blob/main/app/u/%5Busername%5D/page.tsx"
click node_ogimage "https://github.com/techcsispit/git-github-workshop/blob/main/app/u/%5Busername%5D/opengraph-image.tsx"
click node_api "https://github.com/techcsispit/git-github-workshop/blob/main/app/api/profiles/route.ts"
click node_loader "https://github.com/techcsispit/git-github-workshop/blob/main/lib/profiles.ts"
click node_profilefiles "https://github.com/techcsispit/git-github-workshop/tree/main/profiles"
click node_validation "https://github.com/techcsispit/git-github-workshop/blob/main/scripts/validate.mjs"
click node_boardlogic "https://github.com/techcsispit/git-github-workshop/blob/main/lib/board.ts"
click node_boardview "https://github.com/techcsispit/git-github-workshop/blob/main/components/Board.tsx"
click node_liveview "https://github.com/techcsispit/git-github-workshop/blob/main/components/LiveBoard.tsx"
click node_livehook "https://github.com/techcsispit/git-github-workshop/blob/main/lib/useLiveProfiles.ts"
click node_spotlight "https://github.com/techcsispit/git-github-workshop/blob/main/components/Spotlight.tsx"
click node_card "https://github.com/techcsispit/git-github-workshop/blob/main/components/ContributorCard.tsx"
click node_hero "https://github.com/techcsispit/git-github-workshop/blob/main/components/Hero.tsx"
click node_join "https://github.com/techcsispit/git-github-workshop/blob/main/components/JoinPanel.tsx"
click node_sharebuttons "https://github.com/techcsispit/git-github-workshop/blob/main/components/ShareButtons.tsx"
click node_flipcard "https://github.com/techcsispit/git-github-workshop/blob/main/components/FlipCard.jsx"
click node_shapewaves "https://github.com/techcsispit/git-github-workshop/blob/main/components/ShapeWaves.jsx"
click node_dither "https://github.com/techcsispit/git-github-workshop/blob/main/components/Dither.jsx"

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_home,node_livepage,node_sharepage,node_ogimage,node_api toneBlue
class node_loader,node_profilefiles,node_validation toneAmber
class node_boardlogic,node_boardview,node_liveview,node_livehook,node_spotlight,node_card,node_hero,node_join,node_flipcard,node_github toneMint
class node_sharebuttons toneRose
class node_shapewaves,node_dither,node_visitor,node_contributor toneIndigo
```

## Components

### Site pages

- [Board page](https://github.com/techcsispit/git-github-workshop/blob/main/app/page.tsx): `app/page.tsx`
- [Live page](https://github.com/techcsispit/git-github-workshop/blob/main/app/live/page.tsx): `app/live/page.tsx`
- [Profile page](https://github.com/techcsispit/git-github-workshop/blob/main/app/u/%5Busername%5D/page.tsx): `app/u/[username]/page.tsx`
- [Share image](https://github.com/techcsispit/git-github-workshop/blob/main/app/u/%5Busername%5D/opengraph-image.tsx): `app/u/[username]/opengraph-image.tsx`
- [Profiles API](https://github.com/techcsispit/git-github-workshop/blob/main/app/api/profiles/route.ts): `app/api/profiles/route.ts`

### Profile data

- [Profile loader](https://github.com/techcsispit/git-github-workshop/blob/main/lib/profiles.ts): `lib/profiles.ts`
- [Profile JSON](https://github.com/techcsispit/git-github-workshop/tree/main/profiles): `profiles`
- [Profile validation](https://github.com/techcsispit/git-github-workshop/blob/main/scripts/validate.mjs): `scripts/validate.mjs`

### Board experience

- [Board logic](https://github.com/techcsispit/git-github-workshop/blob/main/lib/board.ts): `lib/board.ts`
- [Contributor board](https://github.com/techcsispit/git-github-workshop/blob/main/components/Board.tsx): `components/Board.tsx`
- [Live board](https://github.com/techcsispit/git-github-workshop/blob/main/components/LiveBoard.tsx): `components/LiveBoard.tsx`
- [Live updates](https://github.com/techcsispit/git-github-workshop/blob/main/lib/useLiveProfiles.ts): `lib/useLiveProfiles.ts`
- [Arrival spotlight](https://github.com/techcsispit/git-github-workshop/blob/main/components/Spotlight.tsx): `components/Spotlight.tsx`
- [Contributor card](https://github.com/techcsispit/git-github-workshop/blob/main/components/ContributorCard.tsx): `components/ContributorCard.tsx`
- [Board introduction](https://github.com/techcsispit/git-github-workshop/blob/main/components/Hero.tsx): `components/Hero.tsx`
- [Join panel](https://github.com/techcsispit/git-github-workshop/blob/main/components/JoinPanel.tsx): `components/JoinPanel.tsx`
- [Flip interaction](https://github.com/techcsispit/git-github-workshop/blob/main/components/FlipCard.jsx): `components/FlipCard.jsx`

### Profile sharing

- [Share controls](https://github.com/techcsispit/git-github-workshop/blob/main/components/ShareButtons.tsx): `components/ShareButtons.tsx`

### Visual effects

- [Shape background](https://github.com/techcsispit/git-github-workshop/blob/main/components/ShapeWaves.jsx): `components/ShapeWaves.jsx`
- [Dither background](https://github.com/techcsispit/git-github-workshop/blob/main/components/Dither.jsx): `components/Dither.jsx`

### Other components

- **Visitor**
- **Contributor**
- **GitHub API**

## Connections

- Visitor → Board page: opens board
- Visitor → Live page: opens live view
- Visitor → Profile page: opens profile
- Contributor → Profile JSON: adds profile
- Board page → Profile loader: loads profiles
- Board page → Board logic: sorts profiles
- Board page → Contributor board: renders board
- Board page → Board introduction: renders intro
- Board page → Join panel: renders join panel
- Profile loader → Profile JSON: reads locally
- Profile loader → GitHub API: fetches profiles
- Profile loader → GitHub API: looks up join dates
- Profile loader → Profile validation: checks profiles
- Profiles API → Profile loader: loads profiles
- Live page → Profile loader: loads profiles
- Live page → Live board: renders live board
- Live board → Live updates: tracks updates
- Live updates → Profiles API: polls profiles
- Live updates → Board logic: merges arrivals
- Contributor board → Board logic: searches and filters
- Contributor board → Flip interaction: flips cards
- Live board → Board logic: orders profiles
- Live board → Arrival spotlight: highlights arrivals
- Profile page → Profile loader: loads profiles
- Profile page → Board logic: finds profile
- Profile page → Contributor card: renders profile
- Profile page → Share controls: offers sharing
- Share image → Profile loader: loads profiles
- Share image → Board logic: finds profile
- Contributor board → Shape background: renders background
- Contributor board → Dither background: fallback background