# stickkersz/toktickit architecture

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

- Interactive diagram: https://gitdiagram.com/stickkersz/toktickit
- Repository: https://github.com/stickkersz/toktickit

## Overview

TokTickIT is a Requester-facing IT service desk MVP. A requester selects an active development identity, creates a ticket with category and related-system details, then searches and filters their tickets, opens a detail view, and manages attachments. The client API module connects those screens to Express; the server validates and persists ticket and attachment operations through Prisma and PostgreSQL. README capabilities inform the broader flow, while sampled source confirms only selected client and server wiring; uncertain endpoint internals are not expanded.

Main entry points: [`server/src/app.ts`](https://github.com/stickkersz/toktickit/blob/main/server/src/app.ts) (Express API), [`client/src/api.ts`](https://github.com/stickkersz/toktickit/blob/main/client/src/api.ts) (Client API), [`client/src/App.tsx`](https://github.com/stickkersz/toktickit/blob/main/client/src/App.tsx) (App routes), [`client/src/RequesterSelection.tsx`](https://github.com/stickkersz/toktickit/blob/main/client/src/RequesterSelection.tsx) (Requester selection)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Requester client"]
  node_app["App routes<br/>[App.tsx]"]
  node_selection["Requester selection"]
  node_context["Requester context"]
  node_create["Create ticket<br/>[CreateTicket.tsx]"]
  node_mytickets["My tickets<br/>[MyTickets.tsx]"]
  node_detail["Ticket detail<br/>[TicketDetail.tsx]"]
  node_clientapi["Client API<br/>[api.ts]"]
end

subgraph group_server["Ticket API"]
  node_express["Express API<br/>[app.ts]"]
  node_validation["Attachment validation"]
  node_storage["Attachment storage"]
  node_listquery["List query parsing<br/>[ticketListQuery.ts]"]
  node_number["Ticket numbering<br/>[ticketNumber.ts]"]
end

subgraph group_data["Persistence"]
  node_prisma["Prisma client<br/>[prisma.ts]"]
  node_schema["Data model<br/>[schema.prisma]"]
  node_postgres[("PostgreSQL")]
end

node_requester(("Requester"))
node_uploads[("Upload files")]

node_requester -->|"chooses identity"| node_selection
node_requester -->|"submits ticket"| node_create
node_requester -->|"browses tickets"| node_mytickets
node_requester -->|"manages attachments"| node_detail
node_app -->|"routes to"| node_selection
node_app -->|"routes to"| node_mytickets
node_app -->|"routes to"| node_create
node_app -->|"routes to"| node_detail
node_selection -->|"selects requester"| node_context
node_context -->|"revalidates requester"| node_clientapi
node_create -->|"loads and submits"| node_clientapi
node_mytickets -->|"loads tickets"| node_clientapi
node_detail -->|"loads and manages"| node_clientapi
node_clientapi -->|"HTTP requests"| node_express
node_express -->|"queries and writes"| node_prisma
node_prisma -->|"persists data"| node_postgres
node_express -->|"validates uploads"| node_validation
node_express -->|"generates filenames"| node_storage
node_express -->|"parses list query"| node_listquery
node_express -->|"formats ticket number"| node_number
node_express -->|"stores and removes files"| node_uploads
node_schema -->|"defines models"| node_prisma

click node_app "https://github.com/stickkersz/toktickit/blob/main/client/src/App.tsx"
click node_selection "https://github.com/stickkersz/toktickit/blob/main/client/src/RequesterSelection.tsx"
click node_context "https://github.com/stickkersz/toktickit/blob/main/client/src/requesterContext.tsx"
click node_create "https://github.com/stickkersz/toktickit/blob/main/client/src/screens/CreateTicket.tsx"
click node_mytickets "https://github.com/stickkersz/toktickit/blob/main/client/src/screens/MyTickets.tsx"
click node_detail "https://github.com/stickkersz/toktickit/blob/main/client/src/screens/TicketDetail.tsx"
click node_clientapi "https://github.com/stickkersz/toktickit/blob/main/client/src/api.ts"
click node_express "https://github.com/stickkersz/toktickit/blob/main/server/src/app.ts"
click node_validation "https://github.com/stickkersz/toktickit/blob/main/server/src/attachmentValidation.ts"
click node_storage "https://github.com/stickkersz/toktickit/blob/main/server/src/attachmentStorage.ts"
click node_listquery "https://github.com/stickkersz/toktickit/blob/main/server/src/ticketListQuery.ts"
click node_number "https://github.com/stickkersz/toktickit/blob/main/server/src/ticketNumber.ts"
click node_prisma "https://github.com/stickkersz/toktickit/blob/main/server/src/prisma.ts"
click node_schema "https://github.com/stickkersz/toktickit/blob/main/server/prisma/schema.prisma"

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_selection,node_context,node_create,node_mytickets,node_detail,node_clientapi toneBlue
class node_express,node_validation,node_storage,node_listquery,node_number,node_uploads toneAmber
class node_prisma,node_schema,node_postgres,node_requester toneMint
```

## Components

### Requester client

- [App routes](https://github.com/stickkersz/toktickit/blob/main/client/src/App.tsx): `client/src/App.tsx`
- [Requester selection](https://github.com/stickkersz/toktickit/blob/main/client/src/RequesterSelection.tsx): `client/src/RequesterSelection.tsx`
- [Requester context](https://github.com/stickkersz/toktickit/blob/main/client/src/requesterContext.tsx): `client/src/requesterContext.tsx`
- [Create ticket](https://github.com/stickkersz/toktickit/blob/main/client/src/screens/CreateTicket.tsx): `client/src/screens/CreateTicket.tsx`
- [My tickets](https://github.com/stickkersz/toktickit/blob/main/client/src/screens/MyTickets.tsx): `client/src/screens/MyTickets.tsx`
- [Ticket detail](https://github.com/stickkersz/toktickit/blob/main/client/src/screens/TicketDetail.tsx): `client/src/screens/TicketDetail.tsx`
- [Client API](https://github.com/stickkersz/toktickit/blob/main/client/src/api.ts): `client/src/api.ts`

### Ticket API

- [Express API](https://github.com/stickkersz/toktickit/blob/main/server/src/app.ts): `server/src/app.ts`
- [Attachment validation](https://github.com/stickkersz/toktickit/blob/main/server/src/attachmentValidation.ts): `server/src/attachmentValidation.ts`
- [Attachment storage](https://github.com/stickkersz/toktickit/blob/main/server/src/attachmentStorage.ts): `server/src/attachmentStorage.ts`
- [List query parsing](https://github.com/stickkersz/toktickit/blob/main/server/src/ticketListQuery.ts): `server/src/ticketListQuery.ts`
- [Ticket numbering](https://github.com/stickkersz/toktickit/blob/main/server/src/ticketNumber.ts): `server/src/ticketNumber.ts`

### Persistence

- [Prisma client](https://github.com/stickkersz/toktickit/blob/main/server/src/prisma.ts): `server/src/prisma.ts`
- [Data model](https://github.com/stickkersz/toktickit/blob/main/server/prisma/schema.prisma): `server/prisma/schema.prisma`
- **PostgreSQL**

### Other components

- **Requester**
- **Upload files**

## Connections

- Requester → Requester selection: chooses identity
- Requester → Create ticket: submits ticket
- Requester → My tickets: browses tickets
- Requester → Ticket detail: manages attachments
- App routes → Requester selection: routes to
- App routes → My tickets: routes to
- App routes → Create ticket: routes to
- App routes → Ticket detail: routes to
- Requester selection → Requester context: selects requester
- Requester context → Client API: revalidates requester
- Create ticket → Client API: loads and submits
- My tickets → Client API: loads tickets
- Ticket detail → Client API: loads and manages
- Client API → Express API: HTTP requests
- Express API → Prisma client: queries and writes
- Prisma client → PostgreSQL: persists data
- Express API → Attachment validation: validates uploads
- Express API → Attachment storage: generates filenames
- Express API → List query parsing: parses list query
- Express API → Ticket numbering: formats ticket number
- Express API → Upload files: stores and removes files
- Data model → Prisma client: defines models