# mastermindmtm/backbenchers-main architecture

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

- Interactive diagram: https://gitdiagram.com/mastermindmtm/backbenchers-main
- Repository: https://github.com/mastermindmtm/backbenchers-main

## Overview

BackBenchers is a class-memory and farewell microsite. Visitors enter the React app and browse its landing page, embedded aftermovie, and gallery; the hero also scrolls visitors to the movie and gallery sections. Separate components provide a searchable roll call and farewell message board, though the sampled App does not mount them. Farewell notes are read from and written to browser localStorage through the storage module. Source evidence is limited to the supplied excerpts; some components and the migration are represented only by their paths and names.

Main entry points: [`src/App.tsx`](https://github.com/mastermindmtm/backbenchers-main/blob/master/src/App.tsx) (App composition), [`src/components/VideoSection.tsx`](https://github.com/mastermindmtm/backbenchers-main/blob/master/src/components/VideoSection.tsx) (Aftermovie), [`src/components/Hero.tsx`](https://github.com/mastermindmtm/backbenchers-main/blob/master/src/components/Hero.tsx) (Landing hero), [`src/hooks/useInView.ts`](https://github.com/mastermindmtm/backbenchers-main/blob/master/src/hooks/useInView.ts) (View observer)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_site["Site experience"]
  node_app["App composition<br/>[App.tsx]"]
  node_navbar["Navigation<br/>[Navbar.tsx]"]
  node_hero["Landing hero<br/>[Hero.tsx]"]
  node_video["Aftermovie<br/>[VideoSection.tsx]"]
  node_gallery["Photo gallery<br/>[Gallery.tsx]"]
  node_footer["Footer<br/>[Footer.tsx]"]
end

subgraph group_memories["Memory features"]
  node_rollcall["Searchable roll call<br/>[RollCall.tsx]"]
  node_farewell["Farewell board<br/>[Farewell.tsx]"]
  node_store["Message storage<br/>[supabase.ts]"]
end

subgraph group_internal["Shared runtime"]
  node_viewhook["View observer<br/>[useInView.ts]"]
  node_parallax["Parallax hook<br/>[useParallax.ts]"]
end

subgraph group_services["Browser integrations"]
  node_localstorage[("Browser localStorage")]
  node_youtube["YouTube player"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens"| node_app
node_app -->|"renders"| node_navbar
node_app -->|"renders"| node_hero
node_app -->|"renders"| node_video
node_app -->|"renders"| node_gallery
node_app -->|"renders"| node_footer
node_hero -->|"scrolls to"| node_video
node_hero -->|"scrolls to"| node_gallery
node_video -->|"observes visibility"| node_viewhook
node_farewell -->|"observes visibility"| node_viewhook
node_rollcall -->|"observes visibility"| node_viewhook
node_farewell -->|"loads and adds"| node_store
node_store -->|"reads and writes"| node_localstorage
node_video -.->|"embeds player"| node_youtube

click node_app "https://github.com/mastermindmtm/backbenchers-main/blob/master/src/App.tsx"
click node_navbar "https://github.com/mastermindmtm/backbenchers-main/blob/master/src/components/Navbar.tsx"
click node_hero "https://github.com/mastermindmtm/backbenchers-main/blob/master/src/components/Hero.tsx"
click node_video "https://github.com/mastermindmtm/backbenchers-main/blob/master/src/components/VideoSection.tsx"
click node_gallery "https://github.com/mastermindmtm/backbenchers-main/blob/master/src/components/Gallery.tsx"
click node_footer "https://github.com/mastermindmtm/backbenchers-main/blob/master/src/components/Footer.tsx"
click node_rollcall "https://github.com/mastermindmtm/backbenchers-main/blob/master/src/components/RollCall.tsx"
click node_farewell "https://github.com/mastermindmtm/backbenchers-main/blob/master/src/components/Farewell.tsx"
click node_store "https://github.com/mastermindmtm/backbenchers-main/blob/master/src/lib/supabase.ts"
click node_viewhook "https://github.com/mastermindmtm/backbenchers-main/blob/master/src/hooks/useInView.ts"
click node_parallax "https://github.com/mastermindmtm/backbenchers-main/blob/master/src/hooks/useParallax.ts"

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_app,node_navbar,node_hero,node_video,node_gallery,node_footer toneBlue
class node_rollcall,node_farewell,node_store toneAmber
class node_viewhook,node_parallax toneMint
class node_localstorage,node_youtube toneRose
class node_visitor toneIndigo
```

## Components

### Site experience

- [App composition](https://github.com/mastermindmtm/backbenchers-main/blob/master/src/App.tsx): `src/App.tsx`
- [Navigation](https://github.com/mastermindmtm/backbenchers-main/blob/master/src/components/Navbar.tsx): `src/components/Navbar.tsx`
- [Landing hero](https://github.com/mastermindmtm/backbenchers-main/blob/master/src/components/Hero.tsx): `src/components/Hero.tsx`
- [Aftermovie](https://github.com/mastermindmtm/backbenchers-main/blob/master/src/components/VideoSection.tsx): `src/components/VideoSection.tsx`
- [Photo gallery](https://github.com/mastermindmtm/backbenchers-main/blob/master/src/components/Gallery.tsx): `src/components/Gallery.tsx`
- [Footer](https://github.com/mastermindmtm/backbenchers-main/blob/master/src/components/Footer.tsx): `src/components/Footer.tsx`

### Memory features

- [Searchable roll call](https://github.com/mastermindmtm/backbenchers-main/blob/master/src/components/RollCall.tsx): `src/components/RollCall.tsx`
- [Farewell board](https://github.com/mastermindmtm/backbenchers-main/blob/master/src/components/Farewell.tsx): `src/components/Farewell.tsx`
- [Message storage](https://github.com/mastermindmtm/backbenchers-main/blob/master/src/lib/supabase.ts): `src/lib/supabase.ts`

### Shared runtime

- [View observer](https://github.com/mastermindmtm/backbenchers-main/blob/master/src/hooks/useInView.ts): `src/hooks/useInView.ts`
- [Parallax hook](https://github.com/mastermindmtm/backbenchers-main/blob/master/src/hooks/useParallax.ts): `src/hooks/useParallax.ts`

### Browser integrations

- **Browser localStorage**
- **YouTube player**

### Other components

- **Visitor**

## Connections

- Visitor → App composition: opens
- App composition → Navigation: renders
- App composition → Landing hero: renders
- App composition → Aftermovie: renders
- App composition → Photo gallery: renders
- App composition → Footer: renders
- Landing hero → Aftermovie: scrolls to
- Landing hero → Photo gallery: scrolls to
- Aftermovie → View observer: observes visibility
- Farewell board → View observer: observes visibility
- Searchable roll call → View observer: observes visibility
- Farewell board → Message storage: loads and adds
- Message storage → Browser localStorage: reads and writes
- Aftermovie → YouTube player: embeds player