Frontend Architecture

The frontend’s chain looks like the backend’s, just with different names: a route file defines a page, it calls the generated API client through TanStack Query to get data, and renders components to show it. Same “follow the chain” approach as the backend.

Routing (`src/routes/`)

File-based routing via TanStack Router — the file path is the URL.

File	What it’s for
`routes/_layout.tsx`	The logged-in shell (sidebar, etc.) — other routes nest inside it
`routes/_layout/index.tsx`	The dashboard home page
`routes/_layout/items.tsx`	The Items page
`routes/_layout/admin.tsx`	Admin-only page
`routes/_layout/settings.tsx`	User settings
`routes/login.tsx`, `signup.tsx`, `recover-password.tsx`, `reset-password.tsx`	Logged-out auth pages
`routeTree.gen.ts`	Auto-generated from the files above — never hand-edit it

Components (`src/components/`)

One folder per feature, plus a shared ui/ folder:

Folder	What it’s for
`components/Items/`	Everything specific to the Items feature
`components/Admin/`, `UserSettings/`, `Sidebar/`, `Pending/`	Same idea, one folder per feature
`components/Common/`	Shared building blocks used across features
`components/ui/`	shadcn/ui primitives (button, dialog, input, etc.) — generated by the shadcn CLI, treat as a library, not app code

Data & state

File	What it’s for
`src/client/`	The API client — entirely auto-generated from the backend’s OpenAPI schema, see The Generated API Client
`src/hooks/useAuth.ts`	Login state, current-user data
`src/hooks/useCustomToast.ts`, `useMobile.ts`, `useCopyToClipboard.ts`	Small reusable behaviors
`src/lib/utils.ts`	Shared helpers (e.g. the `cn()` class-merging function shadcn components use)

Entry

File	What it’s for
`src/main.tsx`	Sets up TanStack Query, the router, and the API client’s auth token, then renders the app
`src/index.css`	Tailwind + theme setup