# micknaa/trello-lite architecture

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

- Interactive diagram: https://gitdiagram.com/micknaa/trello-lite
- Repository: https://github.com/micknaa/trello-lite

## Overview

Trello-Lite is a local-first kanban board for organizing boards, lists, and task cards. The user creates or selects a board, edits its lists and cards, and can reorder or move items with drag-and-drop; card details support labels, due dates, descriptions, and checklists, while search and label filters narrow the board view. The Zustand store exposes selectors and actions, delegates mutations to the reducer, and persists state in localStorage. Relationships below follow sampled imports/calls and README architecture notes; unsampled implementation details are not inferred.

Main entry points: [`src/store/boardStore.ts`](https://github.com/micknaa/trello-lite/blob/main/src/store/boardStore.ts) (Board store), [`src/components/Board/Board.tsx`](https://github.com/micknaa/trello-lite/blob/main/src/components/Board/Board.tsx) (Board canvas), [`src/components/List/List.tsx`](https://github.com/micknaa/trello-lite/blob/main/src/components/List/List.tsx) (List column), [`src/pages/BoardPage.tsx`](https://github.com/micknaa/trello-lite/blob/main/src/pages/BoardPage.tsx) (Board page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_navigation["Navigation and boards"]
  node_app["Route app<br/>[App.tsx]"]
  node_home["Board home<br/>[Home.tsx]"]
  node_boardpage["Board page<br/>[BoardPage.tsx]"]
end

subgraph group_workspace["Board workspace"]
  node_board["Board canvas<br/>[Board.tsx]"]
  node_list["List column<br/>[List.tsx]"]
  node_card["Task card<br/>[Card.tsx]"]
  node_details["Card details"]
  node_inline["Inline editor<br/>[InlineEditable.tsx]"]
  node_labelpill["Label pill<br/>[LabelPill.tsx]"]
end

subgraph group_state["State and persistence"]
  node_store["Board store<br/>[boardStore.ts]"]
  node_reducer["Mutation reducer<br/>[boardReducer.ts]"]
  node_reorder["Reorder helpers<br/>[reorder.ts]"]
  node_seed["Seed state<br/>[seed.ts]"]
end

node_browser(("Browser user"))
node_localstorage[("localStorage")]

node_browser -->|"opens app"| node_app
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_boardpage
node_home -->|"reads and updates"| node_store
node_boardpage -->|"reads and renames"| node_store
node_boardpage -->|"renders"| node_board
node_boardpage -->|"renders"| node_inline
node_board -->|"reads and dispatches"| node_store
node_board -->|"renders"| node_list
node_board -->|"renders overlay"| node_card
node_board -->|"opens"| node_details
node_board -->|"renders"| node_labelpill
node_list -->|"reads and updates"| node_store
node_list -->|"renders"| node_card
node_list -->|"renders"| node_inline
node_list -.->|"passes labels to"| node_labelpill
node_card -->|"renders"| node_labelpill
node_details -->|"reads and updates"| node_store
node_details -->|"renders"| node_labelpill
node_store -->|"dispatches mutations"| node_reducer
node_store -->|"initializes from"| node_seed
node_store -->|"persists state"| node_localstorage
node_reducer -->|"uses ordering helpers"| node_reorder

click node_app "https://github.com/micknaa/trello-lite/blob/main/src/App.tsx"
click node_home "https://github.com/micknaa/trello-lite/blob/main/src/pages/Home.tsx"
click node_boardpage "https://github.com/micknaa/trello-lite/blob/main/src/pages/BoardPage.tsx"
click node_board "https://github.com/micknaa/trello-lite/blob/main/src/components/Board/Board.tsx"
click node_list "https://github.com/micknaa/trello-lite/blob/main/src/components/List/List.tsx"
click node_card "https://github.com/micknaa/trello-lite/blob/main/src/components/Card/Card.tsx"
click node_details "https://github.com/micknaa/trello-lite/blob/main/src/components/Card/CardDetailModal.tsx"
click node_inline "https://github.com/micknaa/trello-lite/blob/main/src/components/ui/InlineEditable.tsx"
click node_labelpill "https://github.com/micknaa/trello-lite/blob/main/src/components/ui/LabelPill.tsx"
click node_store "https://github.com/micknaa/trello-lite/blob/main/src/store/boardStore.ts"
click node_reducer "https://github.com/micknaa/trello-lite/blob/main/src/context/boardReducer.ts"
click node_reorder "https://github.com/micknaa/trello-lite/blob/main/src/utils/reorder.ts"
click node_seed "https://github.com/micknaa/trello-lite/blob/main/src/utils/seed.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_home,node_boardpage,node_browser toneBlue
class node_board,node_list,node_card,node_details,node_inline,node_labelpill,node_localstorage toneAmber
class node_store,node_reducer,node_reorder,node_seed toneMint
```

## Components

### Navigation and boards

- [Route app](https://github.com/micknaa/trello-lite/blob/main/src/App.tsx): `src/App.tsx`
- [Board home](https://github.com/micknaa/trello-lite/blob/main/src/pages/Home.tsx): `src/pages/Home.tsx`
- [Board page](https://github.com/micknaa/trello-lite/blob/main/src/pages/BoardPage.tsx): `src/pages/BoardPage.tsx`

### Board workspace

- [Board canvas](https://github.com/micknaa/trello-lite/blob/main/src/components/Board/Board.tsx): `src/components/Board/Board.tsx`
- [List column](https://github.com/micknaa/trello-lite/blob/main/src/components/List/List.tsx): `src/components/List/List.tsx`
- [Task card](https://github.com/micknaa/trello-lite/blob/main/src/components/Card/Card.tsx): `src/components/Card/Card.tsx`
- [Card details](https://github.com/micknaa/trello-lite/blob/main/src/components/Card/CardDetailModal.tsx): `src/components/Card/CardDetailModal.tsx`
- [Inline editor](https://github.com/micknaa/trello-lite/blob/main/src/components/ui/InlineEditable.tsx): `src/components/ui/InlineEditable.tsx`
- [Label pill](https://github.com/micknaa/trello-lite/blob/main/src/components/ui/LabelPill.tsx): `src/components/ui/LabelPill.tsx`

### State and persistence

- [Board store](https://github.com/micknaa/trello-lite/blob/main/src/store/boardStore.ts): `src/store/boardStore.ts`
- [Mutation reducer](https://github.com/micknaa/trello-lite/blob/main/src/context/boardReducer.ts): `src/context/boardReducer.ts`
- [Reorder helpers](https://github.com/micknaa/trello-lite/blob/main/src/utils/reorder.ts): `src/utils/reorder.ts`
- [Seed state](https://github.com/micknaa/trello-lite/blob/main/src/utils/seed.ts): `src/utils/seed.ts`

### Other components

- **Browser user**
- **localStorage**

## Connections

- Browser user → Route app: opens app (evidence: `src/App.tsx`)
- Route app → Board home: routes to (evidence: `src/App.tsx`)
- Route app → Board page: routes to (evidence: `src/App.tsx`)
- Board home → Board store: reads and updates (evidence: `src/pages/Home.tsx`)
- Board page → Board store: reads and renames (evidence: `src/pages/BoardPage.tsx`)
- Board page → Board canvas: renders (evidence: `src/pages/BoardPage.tsx`)
- Board page → Inline editor: renders (evidence: `src/pages/BoardPage.tsx`)
- Board canvas → Board store: reads and dispatches (evidence: `src/components/Board/Board.tsx`)
- Board canvas → List column: renders (evidence: `src/components/Board/Board.tsx`)
- Board canvas → Task card: renders overlay (evidence: `src/components/Board/Board.tsx`)
- Board canvas → Card details: opens (evidence: `src/components/Board/Board.tsx`)
- Board canvas → Label pill: renders (evidence: `src/components/Board/Board.tsx`)
- List column → Board store: reads and updates (evidence: `src/components/List/List.tsx`)
- List column → Task card: renders (evidence: `src/components/List/List.tsx`)
- List column → Inline editor: renders (evidence: `src/components/List/List.tsx`)
- List column → Label pill: passes labels to
- Task card → Label pill: renders (evidence: `src/components/Card/Card.tsx`)
- Card details → Board store: reads and updates (evidence: `src/components/Card/CardDetailModal.tsx`)
- Card details → Label pill: renders (evidence: `src/components/Card/CardDetailModal.tsx`)
- Board store → Mutation reducer: dispatches mutations (evidence: `src/store/boardStore.ts`)
- Board store → Seed state: initializes from (evidence: `src/store/boardStore.ts`)
- Board store → localStorage: persists state (evidence: `src/store/boardStore.ts`)
- Mutation reducer → Reorder helpers: uses ordering helpers (evidence: `src/context/boardReducer.ts`)