# toilabau/trello-clone architecture

> Architecture diagram of the GitHub repository toilabau/trello-clone, 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/toilabau/trello-clone
- Repository: https://github.com/toilabau/trello-clone

## Overview

Tasker B is a React task-board frontend. Users can register or log in, verify an OTP, then enter a protected app shell containing board and settings pages; the board is the task-focused destination. Authentication screens call a shared HTTP client, while the app shell provides sidebar navigation and a top bar with theme controls. The tree and excerpts support these frontend stages, but do not establish backend behavior or detailed board operations; those are not inferred here.

Main entry points: [`src/components/ui`](https://github.com/toilabau/trello-clone/tree/main/src/components/ui) (UI primitives), [`src/routes/app/route.tsx`](https://github.com/toilabau/trello-clone/blob/main/src/routes/app/route.tsx) (Protected app), [`src/main.tsx`](https://github.com/toilabau/trello-clone/blob/main/src/main.tsx) (App bootstrap), [`src/components/widgets/app-sidebar.tsx`](https://github.com/toilabau/trello-clone/blob/main/src/components/widgets/app-sidebar.tsx) (App navigation)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_flows["User flows"]
  node_auth_pages["Auth pages"]
  node_session_gate["Session gate<br/>[route.tsx]"]
  node_app_gate["Protected app<br/>[route.tsx]"]
  node_board["Board page<br/>[board.tsx]"]
  node_app_pages["App pages"]
end

subgraph group_shell["App shell"]
  node_app_sidebar["App navigation<br/>[app-sidebar.tsx]"]
  node_topbar["Top bar<br/>[topbar.tsx]"]
  node_theme_button["Theme control<br/>[theme-button.tsx]"]
  node_navigation_config["Navigation links<br/>[navlink.config.ts]"]
end

subgraph group_shared["Shared services"]
  node_api_client["API client<br/>[api.ts]"]
  node_theme_provider["Theme state<br/>[theme-provider.tsx]"]
  node_auth_helpers["Cookie auth<br/>[auth.ts]"]
  node_app_entry["App bootstrap<br/>[main.tsx]"]
  node_query_client["Query client<br/>[queryClient.ts]"]
end

subgraph group_ui["UI components"]
  node_ui_primitives["UI primitives"]
  node_board_empty["Empty board view<br/>[board-empty.tsx]"]
end

node_user(("User"))
node_api_service{{"Backend API"}}

node_user -->|"uses auth"| node_auth_pages
node_auth_pages -->|"calls API"| node_api_client
node_api_client -->|"sends requests"| node_api_service
node_app_gate -->|"checks token"| node_auth_helpers
node_app_gate -->|"renders"| node_app_sidebar
node_app_gate -->|"renders"| node_topbar
node_app_gate -->|"outlet routes"| node_app_pages
node_app_sidebar -->|"uses sidebar"| node_ui_primitives
node_app_sidebar -->|"reads links"| node_navigation_config
node_topbar -->|"renders control"| node_theme_button
node_topbar -->|"uses controls"| node_ui_primitives
node_theme_button -->|"sets theme"| node_theme_provider
node_board -->|"uses components"| node_ui_primitives
node_board_empty -->|"uses button"| node_ui_primitives
node_app_entry -->|"provides theme"| node_theme_provider
node_app_entry -->|"provides queries"| node_query_client
node_app_entry -->|"provides tooltips"| node_ui_primitives
node_session_gate -->|"checks session"| node_auth_helpers

click node_auth_pages "https://github.com/toilabau/trello-clone/tree/main/src/routes/(auth)"
click node_session_gate "https://github.com/toilabau/trello-clone/blob/main/src/routes/(auth)/route.tsx"
click node_api_client "https://github.com/toilabau/trello-clone/blob/main/src/lib/api.ts"
click node_app_gate "https://github.com/toilabau/trello-clone/blob/main/src/routes/app/route.tsx"
click node_board "https://github.com/toilabau/trello-clone/blob/main/src/routes/app/board.tsx"
click node_app_pages "https://github.com/toilabau/trello-clone/tree/main/src/routes/app"
click node_app_sidebar "https://github.com/toilabau/trello-clone/blob/main/src/components/widgets/app-sidebar.tsx"
click node_topbar "https://github.com/toilabau/trello-clone/blob/main/src/components/widgets/topbar.tsx"
click node_theme_button "https://github.com/toilabau/trello-clone/blob/main/src/features/theme-button.tsx"
click node_theme_provider "https://github.com/toilabau/trello-clone/blob/main/src/providers/theme-provider.tsx"
click node_auth_helpers "https://github.com/toilabau/trello-clone/blob/main/src/lib/auth.ts"
click node_ui_primitives "https://github.com/toilabau/trello-clone/tree/main/src/components/ui"
click node_board_empty "https://github.com/toilabau/trello-clone/blob/main/src/components/others/board-empty.tsx"
click node_navigation_config "https://github.com/toilabau/trello-clone/blob/main/src/config/navlink.config.ts"
click node_app_entry "https://github.com/toilabau/trello-clone/blob/main/src/main.tsx"
click node_query_client "https://github.com/toilabau/trello-clone/blob/main/src/lib/queryClient.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_auth_pages,node_session_gate,node_app_gate,node_board,node_app_pages,node_user toneBlue
class node_app_sidebar,node_topbar,node_theme_button,node_navigation_config toneAmber
class node_api_client,node_theme_provider,node_auth_helpers,node_app_entry,node_query_client,node_api_service toneMint
class node_ui_primitives,node_board_empty toneRose
```

## Components

### User flows

- [Auth pages](https://github.com/toilabau/trello-clone/tree/main/src/routes/(auth)): `src/routes/(auth)`
- [Session gate](https://github.com/toilabau/trello-clone/blob/main/src/routes/(auth)/route.tsx): `src/routes/(auth)/route.tsx`
- [Protected app](https://github.com/toilabau/trello-clone/blob/main/src/routes/app/route.tsx): `src/routes/app/route.tsx`
- [Board page](https://github.com/toilabau/trello-clone/blob/main/src/routes/app/board.tsx): `src/routes/app/board.tsx`
- [App pages](https://github.com/toilabau/trello-clone/tree/main/src/routes/app): `src/routes/app`

### App shell

- [App navigation](https://github.com/toilabau/trello-clone/blob/main/src/components/widgets/app-sidebar.tsx): `src/components/widgets/app-sidebar.tsx`
- [Top bar](https://github.com/toilabau/trello-clone/blob/main/src/components/widgets/topbar.tsx): `src/components/widgets/topbar.tsx`
- [Theme control](https://github.com/toilabau/trello-clone/blob/main/src/features/theme-button.tsx): `src/features/theme-button.tsx`
- [Navigation links](https://github.com/toilabau/trello-clone/blob/main/src/config/navlink.config.ts): `src/config/navlink.config.ts`

### Shared services

- [API client](https://github.com/toilabau/trello-clone/blob/main/src/lib/api.ts): `src/lib/api.ts`
- [Theme state](https://github.com/toilabau/trello-clone/blob/main/src/providers/theme-provider.tsx): `src/providers/theme-provider.tsx`
- [Cookie auth](https://github.com/toilabau/trello-clone/blob/main/src/lib/auth.ts): `src/lib/auth.ts`
- [App bootstrap](https://github.com/toilabau/trello-clone/blob/main/src/main.tsx): `src/main.tsx`
- [Query client](https://github.com/toilabau/trello-clone/blob/main/src/lib/queryClient.ts): `src/lib/queryClient.ts`

### UI components

- [UI primitives](https://github.com/toilabau/trello-clone/tree/main/src/components/ui): `src/components/ui`
- [Empty board view](https://github.com/toilabau/trello-clone/blob/main/src/components/others/board-empty.tsx): `src/components/others/board-empty.tsx`

### Other components

- **User**
- **Backend API**

## Connections

- User → Auth pages: uses auth
- Auth pages → API client: calls API (evidence: `src/routes/(auth)/login.tsx`)
- API client → Backend API: sends requests (evidence: `src/lib/api.ts`)
- Protected app → Cookie auth: checks token (evidence: `src/routes/app/route.tsx`)
- Protected app → App navigation: renders (evidence: `src/routes/app/route.tsx`)
- Protected app → Top bar: renders (evidence: `src/routes/app/route.tsx`)
- Protected app → App pages: outlet routes (evidence: `src/routes/app/route.tsx`)
- App navigation → UI primitives: uses sidebar (evidence: `src/components/widgets/app-sidebar.tsx`)
- App navigation → Navigation links: reads links (evidence: `src/components/widgets/app-sidebar.tsx`)
- Top bar → Theme control: renders control (evidence: `src/components/widgets/topbar.tsx`)
- Top bar → UI primitives: uses controls (evidence: `src/components/widgets/topbar.tsx`)
- Theme control → Theme state: sets theme (evidence: `src/features/theme-button.tsx`)
- Board page → UI primitives: uses components (evidence: `src/routes/app/board.tsx`)
- Empty board view → UI primitives: uses button (evidence: `src/components/others/board-empty.tsx`)
- App bootstrap → Theme state: provides theme (evidence: `src/main.tsx`)
- App bootstrap → Query client: provides queries (evidence: `src/main.tsx`)
- App bootstrap → UI primitives: provides tooltips (evidence: `src/main.tsx`)
- Session gate → Cookie auth: checks session (evidence: `src/routes/(auth)/route.tsx`)