# flowz5/dashboard architecture

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

- Interactive diagram: https://gitdiagram.com/flowz5/dashboard
- Repository: https://github.com/flowz5/dashboard

## Overview

DevBoard Kanban is a React app for development teams to create and track tickets across five board stages, with accounts, shared boards, and member invitations. The main workflow is authentication → project selection or creation → board view → ticket creation, editing, deletion, and drag-and-drop status changes. Zustand provides the shared board/ticket state and Firestore persistence and live updates. README capabilities are represented; source not sampled beyond the excerpts is included only where the tree and documentation support it.

Main entry points: [`src/App.jsx`](https://github.com/flowz5/dashboard/blob/main/src/App.jsx) (Board view), [`src/firebase.js`](https://github.com/flowz5/dashboard/blob/main/src/firebase.js) (Firebase setup), [`src/store/useBoardStore.js`](https://github.com/flowz5/dashboard/blob/main/src/store/useBoardStore.js) (Board and ticket store), [`src/pages/Home/Home.jsx`](https://github.com/flowz5/dashboard/blob/main/src/pages/Home/Home.jsx) (Project dashboard)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_access["Access"]
  node_app["App routing<br/>[App.jsx]"]
  node_login["Login and signup<br/>[Login.jsx]"]
end

subgraph group_projects["Projects"]
  node_home["Project dashboard<br/>[Home.jsx]"]
  node_navbar["Board navigation<br/>[Navbar.jsx]"]
  node_invite["Member invitation<br/>[InviteModal.jsx]"]
end

subgraph group_kanban["Kanban"]
  node_board["Board view<br/>[App.jsx]"]
  node_column["Status columns<br/>[Column.jsx]"]
  node_ticket["Ticket card<br/>[Ticket.jsx]"]
  node_ticketmodal["Ticket editor<br/>[TicketModal.jsx]"]
  node_button["Shared button<br/>[Button.jsx]"]
end

subgraph group_data["Data"]
  node_store["Board and ticket store<br/>[useBoardStore.js]"]
  node_firebase["Firebase setup<br/>[firebase.js]"]
  node_auth["Firebase Auth"]
  node_firestore[("Cloud Firestore")]
end

node_user(("Team member"))

node_user -->|"opens app"| node_app
node_app -->|"checks session"| node_auth
node_app -->|"routes unauthenticated"| node_login
node_login -->|"signs in or registers"| node_auth
node_app -->|"routes signed-in"| node_home
node_home -->|"loads and manages boards"| node_store
node_home -->|"navigates to board"| node_app
node_app -->|"routes board URL"| node_board
node_board -->|"listens and updates"| node_store
node_board -->|"renders board context"| node_navbar
node_board -->|"renders five statuses"| node_column
node_board -->|"renders filtered tickets"| node_ticket
node_board -->|"opens editor"| node_ticketmodal
node_ticketmodal -->|"submits ticket data"| node_board
node_column -->|"moves ticket"| node_store
node_navbar -->|"opens invitation"| node_invite
node_invite -->|"submits email"| node_board
node_board -->|"invites or removes member"| node_store
node_login -->|"uses"| node_button
node_home -->|"uses"| node_button
node_navbar -->|"uses"| node_button
node_ticketmodal -->|"uses"| node_button
node_invite -->|"uses"| node_button
node_store -->|"uses database client"| node_firebase
node_home -->|"uses authentication"| node_firebase
node_navbar -->|"uses authentication"| node_firebase
node_login -->|"uses authentication"| node_firebase
node_app -->|"uses authentication"| node_firebase
node_firebase -->|"initializes"| node_auth
node_firebase -->|"initializes"| node_firestore
node_store -->|"reads and writes boards and tickets"| node_firestore

click node_app "https://github.com/flowz5/dashboard/blob/main/src/App.jsx"
click node_login "https://github.com/flowz5/dashboard/blob/main/src/pages/Login/Login.jsx"
click node_home "https://github.com/flowz5/dashboard/blob/main/src/pages/Home/Home.jsx"
click node_navbar "https://github.com/flowz5/dashboard/blob/main/src/components/Navbar/Navbar.jsx"
click node_invite "https://github.com/flowz5/dashboard/blob/main/src/components/InviteModal/InviteModal.jsx"
click node_board "https://github.com/flowz5/dashboard/blob/main/src/App.jsx"
click node_column "https://github.com/flowz5/dashboard/blob/main/src/components/Column/Column.jsx"
click node_ticket "https://github.com/flowz5/dashboard/blob/main/src/components/Ticket/Ticket.jsx"
click node_ticketmodal "https://github.com/flowz5/dashboard/blob/main/src/components/TicketModal/TicketModal.jsx"
click node_button "https://github.com/flowz5/dashboard/blob/main/src/components/Button/Button.jsx"
click node_store "https://github.com/flowz5/dashboard/blob/main/src/store/useBoardStore.js"
click node_firebase "https://github.com/flowz5/dashboard/blob/main/src/firebase.js"

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_login toneBlue
class node_home,node_navbar,node_invite toneAmber
class node_board,node_column,node_ticket,node_ticketmodal,node_button toneMint
class node_store,node_firebase,node_auth,node_firestore toneRose
class node_user toneIndigo
```

## Components

### Access

- [App routing](https://github.com/flowz5/dashboard/blob/main/src/App.jsx): `src/App.jsx`
- [Login and signup](https://github.com/flowz5/dashboard/blob/main/src/pages/Login/Login.jsx): `src/pages/Login/Login.jsx`

### Projects

- [Project dashboard](https://github.com/flowz5/dashboard/blob/main/src/pages/Home/Home.jsx): `src/pages/Home/Home.jsx`
- [Board navigation](https://github.com/flowz5/dashboard/blob/main/src/components/Navbar/Navbar.jsx): `src/components/Navbar/Navbar.jsx`
- [Member invitation](https://github.com/flowz5/dashboard/blob/main/src/components/InviteModal/InviteModal.jsx): `src/components/InviteModal/InviteModal.jsx`

### Kanban

- [Board view](https://github.com/flowz5/dashboard/blob/main/src/App.jsx): `src/App.jsx`
- [Status columns](https://github.com/flowz5/dashboard/blob/main/src/components/Column/Column.jsx): `src/components/Column/Column.jsx`
- [Ticket card](https://github.com/flowz5/dashboard/blob/main/src/components/Ticket/Ticket.jsx): `src/components/Ticket/Ticket.jsx`
- [Ticket editor](https://github.com/flowz5/dashboard/blob/main/src/components/TicketModal/TicketModal.jsx): `src/components/TicketModal/TicketModal.jsx`
- [Shared button](https://github.com/flowz5/dashboard/blob/main/src/components/Button/Button.jsx): `src/components/Button/Button.jsx`

### Data

- [Board and ticket store](https://github.com/flowz5/dashboard/blob/main/src/store/useBoardStore.js): `src/store/useBoardStore.js`
- [Firebase setup](https://github.com/flowz5/dashboard/blob/main/src/firebase.js): `src/firebase.js`
- **Firebase Auth**
- **Cloud Firestore**

### Other components

- **Team member**

## Connections

- Team member → App routing: opens app
- App routing → Firebase Auth: checks session (evidence: `src/App.jsx`)
- App routing → Login and signup: routes unauthenticated (evidence: `src/App.jsx`)
- Login and signup → Firebase Auth: signs in or registers (evidence: `src/pages/Login/Login.jsx`)
- App routing → Project dashboard: routes signed-in (evidence: `src/App.jsx`)
- Project dashboard → Board and ticket store: loads and manages boards (evidence: `src/pages/Home/Home.jsx`)
- Project dashboard → App routing: navigates to board (evidence: `src/pages/Home/Home.jsx`)
- App routing → Board view: routes board URL (evidence: `src/App.jsx`)
- Board view → Board and ticket store: listens and updates (evidence: `src/App.jsx`)
- Board view → Board navigation: renders board context (evidence: `src/App.jsx`)
- Board view → Status columns: renders five statuses (evidence: `src/App.jsx`)
- Board view → Ticket card: renders filtered tickets (evidence: `src/App.jsx`)
- Board view → Ticket editor: opens editor (evidence: `src/App.jsx`)
- Ticket editor → Board view: submits ticket data (evidence: `src/components/TicketModal/TicketModal.jsx`)
- Status columns → Board and ticket store: moves ticket (evidence: `src/components/Column/Column.jsx`)
- Board navigation → Member invitation: opens invitation (evidence: `src/App.jsx`)
- Member invitation → Board view: submits email (evidence: `src/components/InviteModal/InviteModal.jsx`)
- Board view → Board and ticket store: invites or removes member (evidence: `src/App.jsx`)
- Login and signup → Shared button: uses (evidence: `src/pages/Login/Login.jsx`)
- Project dashboard → Shared button: uses (evidence: `src/pages/Home/Home.jsx`)
- Board navigation → Shared button: uses (evidence: `src/components/Navbar/Navbar.jsx`)
- Ticket editor → Shared button: uses (evidence: `src/components/TicketModal/TicketModal.jsx`)
- Member invitation → Shared button: uses (evidence: `src/components/InviteModal/InviteModal.jsx`)
- Board and ticket store → Firebase setup: uses database client (evidence: `src/store/useBoardStore.js`)
- Project dashboard → Firebase setup: uses authentication (evidence: `src/pages/Home/Home.jsx`)
- Board navigation → Firebase setup: uses authentication (evidence: `src/components/Navbar/Navbar.jsx`)
- Login and signup → Firebase setup: uses authentication (evidence: `src/pages/Login/Login.jsx`)
- App routing → Firebase setup: uses authentication (evidence: `src/App.jsx`)
- Firebase setup → Firebase Auth: initializes (evidence: `src/firebase.js`)
- Firebase setup → Cloud Firestore: initializes (evidence: `src/firebase.js`)
- Board and ticket store → Cloud Firestore: reads and writes boards and tickets (evidence: `src/store/useBoardStore.js`)