# fatihkaraguzel95/fira architecture

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

## Overview

Fira is a Supabase-backed ticket-management application. Users authenticate, choose a team and project, then manage tickets in a Kanban board or filtered list; ticket details support assignment, tags, subtasks, deadlines, attachments, and comments. Team invitations and project/status management are distinct supporting workflows. The graph follows evidenced routing, rendering, and hook-to-service calls. Several capabilities are documented or named in imports but their implementation details were not sampled, so their internal links are limited to those references.

Main entry points: [`src/pages/BoardPage.tsx`](https://github.com/fatihkaraguzel95/fira/blob/main/src/pages/BoardPage.tsx) (Workspace page), [`src/lib/supabase.ts`](https://github.com/fatihkaraguzel95/fira/blob/main/src/lib/supabase.ts) (Supabase client), [`src/App.tsx`](https://github.com/fatihkaraguzel95/fira/blob/main/src/App.tsx) (Application routes), [`src/hooks/useAuth.ts`](https://github.com/fatihkaraguzel95/fira/blob/main/src/hooks/useAuth.ts) (Authentication state)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["App and routing"]
  node_app["Application routes<br/>[App.tsx]"]
  node_guard["Protected route<br/>[ProtectedRoute.tsx]"]
  node_login["Login and registration<br/>[LoginForm.tsx]"]
  node_boardpage["Workspace page<br/>[BoardPage.tsx]"]
  node_invitepage["Invitation page<br/>[InvitePage.tsx]"]
end

subgraph group_workspace["Workspace management"]
  node_workspace_ui["Team and project controls<br/>[Sidebar.tsx]"]
  node_team_hooks["Team operations<br/>[useTeams.ts]"]
  node_project_hooks["Project operations<br/>[useProjects.ts]"]
  node_invite_controls["Team invitations<br/>[InviteModal.tsx]"]
end

subgraph group_tickets["Ticket workflows"]
  node_board["Kanban board<br/>[KanbanBoard.tsx]"]
  node_statuses["Status management<br/>[StatusManager.tsx]"]
  node_list["Filtered ticket list<br/>[TicketList.tsx]"]
  node_ticket_modal["Ticket details<br/>[TicketModal.tsx]"]
  node_ticket_parts["Ticket detail features"]
end

subgraph group_data["Data and services"]
  node_auth["Authentication state<br/>[useAuth.ts]"]
  node_supabase["Supabase client<br/>[supabase.ts]"]
  node_query["Query cache<br/>[queryClient.ts]"]
  node_supabase_service[("Supabase platform")]
  node_tickets_data["Ticket operations<br/>[useTickets.ts]"]
  node_status_data["Status operations<br/>[useStatuses.ts]"]
  node_other_ticket_data["Related ticket operations<br/>[useComments.ts]"]
end

node_user(("User"))

node_user -->|"uses"| node_app
node_app -->|"protects workspace"| node_guard
node_app -->|"routes to"| node_login
node_app -->|"routes to"| node_boardpage
node_app -->|"routes to"| node_invitepage
node_guard -->|"checks session"| node_auth
node_login -->|"authenticates with"| node_auth
node_auth -->|"reads auth"| node_supabase
node_auth -->|"clears cache"| node_query
node_supabase -->|"connects to"| node_supabase_service
node_boardpage -->|"reads user"| node_auth
node_boardpage -->|"renders"| node_workspace_ui
node_boardpage -->|"renders"| node_board
node_boardpage -->|"renders"| node_list
node_boardpage -->|"opens ticket"| node_ticket_modal
node_boardpage -->|"creates ticket"| node_team_hooks
node_workspace_ui -->|"manages teams"| node_team_hooks
node_workspace_ui -->|"manages projects"| node_project_hooks
node_invitepage -->|"accepts invitation"| node_team_hooks
node_invite_controls -->|"creates invitation"| node_team_hooks
node_board -->|"reads and moves tickets"| node_tickets_data
node_board -->|"loads statuses"| node_status_data
node_statuses -->|"mutates statuses"| node_status_data
node_list -->|"loads tickets"| node_tickets_data
node_ticket_modal -->|"reads and updates"| node_tickets_data
node_ticket_modal -->|"loads statuses"| node_status_data
node_ticket_modal -->|"renders details"| node_ticket_parts
node_tickets_data -->|"queries tickets"| node_supabase
node_status_data -->|"queries statuses"| node_supabase
node_team_hooks -->|"queries team data"| node_supabase
node_project_hooks -->|"queries projects"| node_supabase
node_ticket_parts -.->|"uses related hooks"| node_other_ticket_data

click node_app "https://github.com/fatihkaraguzel95/fira/blob/main/src/App.tsx"
click node_guard "https://github.com/fatihkaraguzel95/fira/blob/main/src/components/layout/ProtectedRoute.tsx"
click node_login "https://github.com/fatihkaraguzel95/fira/blob/main/src/components/auth/LoginForm.tsx"
click node_boardpage "https://github.com/fatihkaraguzel95/fira/blob/main/src/pages/BoardPage.tsx"
click node_invitepage "https://github.com/fatihkaraguzel95/fira/blob/main/src/pages/InvitePage.tsx"
click node_auth "https://github.com/fatihkaraguzel95/fira/blob/main/src/hooks/useAuth.ts"
click node_supabase "https://github.com/fatihkaraguzel95/fira/blob/main/src/lib/supabase.ts"
click node_query "https://github.com/fatihkaraguzel95/fira/blob/main/src/lib/queryClient.ts"
click node_workspace_ui "https://github.com/fatihkaraguzel95/fira/blob/main/src/components/layout/Sidebar.tsx"
click node_team_hooks "https://github.com/fatihkaraguzel95/fira/blob/main/src/hooks/useTeams.ts"
click node_project_hooks "https://github.com/fatihkaraguzel95/fira/blob/main/src/hooks/useProjects.ts"
click node_invite_controls "https://github.com/fatihkaraguzel95/fira/blob/main/src/components/team/InviteModal.tsx"
click node_board "https://github.com/fatihkaraguzel95/fira/blob/main/src/components/board/KanbanBoard.tsx"
click node_statuses "https://github.com/fatihkaraguzel95/fira/blob/main/src/components/board/StatusManager.tsx"
click node_list "https://github.com/fatihkaraguzel95/fira/blob/main/src/components/list/TicketList.tsx"
click node_ticket_modal "https://github.com/fatihkaraguzel95/fira/blob/main/src/components/ticket/TicketModal.tsx"
click node_ticket_parts "https://github.com/fatihkaraguzel95/fira/tree/main/src/components/ticket"
click node_tickets_data "https://github.com/fatihkaraguzel95/fira/blob/main/src/hooks/useTickets.ts"
click node_status_data "https://github.com/fatihkaraguzel95/fira/blob/main/src/hooks/useStatuses.ts"
click node_other_ticket_data "https://github.com/fatihkaraguzel95/fira/blob/main/src/hooks/useComments.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_guard,node_login,node_boardpage,node_invitepage,node_user toneBlue
class node_workspace_ui,node_team_hooks,node_project_hooks,node_invite_controls toneAmber
class node_board,node_statuses,node_list,node_ticket_modal,node_ticket_parts toneMint
class node_auth,node_supabase,node_query,node_supabase_service,node_tickets_data,node_status_data,node_other_ticket_data toneRose
```

## Components

### App and routing

- [Application routes](https://github.com/fatihkaraguzel95/fira/blob/main/src/App.tsx): `src/App.tsx`
- [Protected route](https://github.com/fatihkaraguzel95/fira/blob/main/src/components/layout/ProtectedRoute.tsx): `src/components/layout/ProtectedRoute.tsx`
- [Login and registration](https://github.com/fatihkaraguzel95/fira/blob/main/src/components/auth/LoginForm.tsx): `src/components/auth/LoginForm.tsx`
- [Workspace page](https://github.com/fatihkaraguzel95/fira/blob/main/src/pages/BoardPage.tsx): `src/pages/BoardPage.tsx`
- [Invitation page](https://github.com/fatihkaraguzel95/fira/blob/main/src/pages/InvitePage.tsx): `src/pages/InvitePage.tsx`

### Workspace management

- [Team and project controls](https://github.com/fatihkaraguzel95/fira/blob/main/src/components/layout/Sidebar.tsx): `src/components/layout/Sidebar.tsx`
- [Team operations](https://github.com/fatihkaraguzel95/fira/blob/main/src/hooks/useTeams.ts): `src/hooks/useTeams.ts`
- [Project operations](https://github.com/fatihkaraguzel95/fira/blob/main/src/hooks/useProjects.ts): `src/hooks/useProjects.ts`
- [Team invitations](https://github.com/fatihkaraguzel95/fira/blob/main/src/components/team/InviteModal.tsx): `src/components/team/InviteModal.tsx`

### Ticket workflows

- [Kanban board](https://github.com/fatihkaraguzel95/fira/blob/main/src/components/board/KanbanBoard.tsx): `src/components/board/KanbanBoard.tsx`
- [Status management](https://github.com/fatihkaraguzel95/fira/blob/main/src/components/board/StatusManager.tsx): `src/components/board/StatusManager.tsx`
- [Filtered ticket list](https://github.com/fatihkaraguzel95/fira/blob/main/src/components/list/TicketList.tsx): `src/components/list/TicketList.tsx`
- [Ticket details](https://github.com/fatihkaraguzel95/fira/blob/main/src/components/ticket/TicketModal.tsx): `src/components/ticket/TicketModal.tsx`
- [Ticket detail features](https://github.com/fatihkaraguzel95/fira/tree/main/src/components/ticket): `src/components/ticket`

### Data and services

- [Authentication state](https://github.com/fatihkaraguzel95/fira/blob/main/src/hooks/useAuth.ts): `src/hooks/useAuth.ts`
- [Supabase client](https://github.com/fatihkaraguzel95/fira/blob/main/src/lib/supabase.ts): `src/lib/supabase.ts`
- [Query cache](https://github.com/fatihkaraguzel95/fira/blob/main/src/lib/queryClient.ts): `src/lib/queryClient.ts`
- **Supabase platform**
- [Ticket operations](https://github.com/fatihkaraguzel95/fira/blob/main/src/hooks/useTickets.ts): `src/hooks/useTickets.ts`
- [Status operations](https://github.com/fatihkaraguzel95/fira/blob/main/src/hooks/useStatuses.ts): `src/hooks/useStatuses.ts`
- [Related ticket operations](https://github.com/fatihkaraguzel95/fira/blob/main/src/hooks/useComments.ts): `src/hooks/useComments.ts`

### Other components

- **User**

## Connections

- User → Application routes: uses (evidence: `src/App.tsx`)
- Application routes → Protected route: protects workspace (evidence: `src/App.tsx`)
- Application routes → Login and registration: routes to (evidence: `src/App.tsx`)
- Application routes → Workspace page: routes to (evidence: `src/App.tsx`)
- Application routes → Invitation page: routes to (evidence: `src/App.tsx`)
- Protected route → Authentication state: checks session (evidence: `src/components/layout/ProtectedRoute.tsx`)
- Login and registration → Authentication state: authenticates with (evidence: `src/components/auth/LoginForm.tsx`)
- Authentication state → Supabase client: reads auth (evidence: `src/hooks/useAuth.ts`)
- Authentication state → Query cache: clears cache (evidence: `src/hooks/useAuth.ts`)
- Supabase client → Supabase platform: connects to (evidence: `src/lib/supabase.ts`)
- Workspace page → Authentication state: reads user (evidence: `src/pages/BoardPage.tsx`)
- Workspace page → Team and project controls: renders (evidence: `src/pages/BoardPage.tsx`)
- Workspace page → Kanban board: renders (evidence: `src/pages/BoardPage.tsx`)
- Workspace page → Filtered ticket list: renders (evidence: `src/pages/BoardPage.tsx`)
- Workspace page → Ticket details: opens ticket (evidence: `src/pages/BoardPage.tsx`)
- Workspace page → Team operations: creates ticket (evidence: `src/pages/BoardPage.tsx`)
- Team and project controls → Team operations: manages teams (evidence: `src/components/layout/Sidebar.tsx`)
- Team and project controls → Project operations: manages projects (evidence: `src/components/layout/Sidebar.tsx`)
- Invitation page → Team operations: accepts invitation (evidence: `src/pages/InvitePage.tsx`)
- Team invitations → Team operations: creates invitation (evidence: `src/components/team/InviteModal.tsx`)
- Kanban board → Ticket operations: reads and moves tickets (evidence: `src/components/board/KanbanBoard.tsx`)
- Kanban board → Status operations: loads statuses (evidence: `src/components/board/KanbanBoard.tsx`)
- Status management → Status operations: mutates statuses (evidence: `src/components/board/StatusManager.tsx`)
- Filtered ticket list → Ticket operations: loads tickets (evidence: `src/components/list/TicketList.tsx`)
- Ticket details → Ticket operations: reads and updates (evidence: `src/components/ticket/TicketModal.tsx`)
- Ticket details → Status operations: loads statuses (evidence: `src/components/ticket/TicketModal.tsx`)
- Ticket details → Ticket detail features: renders details (evidence: `src/components/ticket/TicketModal.tsx`)
- Ticket operations → Supabase client: queries tickets (evidence: `src/hooks/useTickets.ts`)
- Status operations → Supabase client: queries statuses (evidence: `src/hooks/useStatuses.ts`)
- Team operations → Supabase client: queries team data (evidence: `src/hooks/useTeams.ts`)
- Project operations → Supabase client: queries projects (evidence: `src/hooks/useProjects.ts`)
- Ticket detail features → Related ticket operations: uses related hooks (evidence: `src/components/ticket/CommentSection.tsx`)