# thanhdat2508/blitz-client architecture

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

- Interactive diagram: https://gitdiagram.com/thanhdat2508/blitz-client
- Repository: https://github.com/thanhdat2508/blitz-client

## Overview

This is a React starter kit with a sample product-management feature. The main user flow is navigating to the products page, searching or refreshing the list, and creating a sample product; product data is fetched through feature API hooks and Axios, then rendered as cards. The README documents broader routing, query, UI, auth-token, hook, formatting, and storage capabilities. Some route and feature API implementations were not sampled, so their wiring is shown only where the README or sampled code supports it.

Main entry points: [`src/features/products/components/product-list.tsx`](https://github.com/thanhdat2508/blitz-client/blob/main/src/features/products/components/product-list.tsx) (Product List), [`src/lib/api-client.ts`](https://github.com/thanhdat2508/blitz-client/blob/main/src/lib/api-client.ts) (Axios Client), [`src/main.tsx`](https://github.com/thanhdat2508/blitz-client/blob/main/src/main.tsx) (App Bootstrap), [`src/routes/products.tsx`](https://github.com/thanhdat2508/blitz-client/blob/main/src/routes/products.tsx) (Products Route)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App and Routing"]
  node_bootstrap["App Bootstrap<br/>[main.tsx]"]
  node_routes["Route Tree<br/>[routeTree.gen.ts]"]
  node_product_route["Products Route<br/>[products.tsx]"]
  node_home_route["Home Route<br/>[index.tsx]"]
end

subgraph group_product["Products Feature"]
  node_product_list["Product List<br/>[product-list.tsx]"]
  node_product_card["Product Card<br/>[product-card.tsx]"]
  node_product_types["Product Types<br/>[product.ts]"]
  node_get_products["Fetch Products<br/>[get-products.ts]"]
  node_create_product["Create Product<br/>[create-product.ts]"]
end

subgraph group_platform["Data and Utilities"]
  node_query_provider["Query Provider<br/>[main.tsx]"]
  node_api_client["Axios Client<br/>[api-client.ts]"]
  node_debounce["Search Debounce<br/>[use-debounce.ts]"]
  node_format["Format Helpers<br/>[format.ts]"]
  node_local_hook["Storage Hook"]
  node_storage["Storage Helper<br/>[storage.ts]"]
end

subgraph group_ui["Shared UI"]
  node_common_ui["Common Widgets<br/>[empty-state.tsx]"]
  node_ui_primitives["UI Primitives<br/>[button.tsx]"]
end

node_visitor(("Visitor"))
node_api_service{{"Product API"}}
node_browser_storage[("Browser Storage")]

node_visitor -->|"opens app"| node_bootstrap
node_bootstrap -->|"loads routes"| node_routes
node_bootstrap -->|"provides query"| node_query_provider
node_visitor -->|"navigates"| node_product_route
node_visitor -->|"navigates"| node_home_route
node_product_route -.->|"renders"| node_product_list
node_product_list -->|"queries"| node_get_products
node_product_list -->|"mutates"| node_create_product
node_product_list -->|"debounces search"| node_debounce
node_product_list -->|"renders results"| node_product_card
node_product_list -->|"shows states"| node_common_ui
node_get_products -.->|"requests data"| node_api_client
node_create_product -.->|"sends mutation"| node_api_client
node_api_client -->|"calls API"| node_api_service
node_api_client -->|"reads token"| node_browser_storage
node_local_hook -->|"reads and writes"| node_storage
node_storage -->|"accesses"| node_browser_storage
node_product_list -->|"uses controls"| node_ui_primitives
node_home_route -->|"uses controls"| node_ui_primitives

click node_bootstrap "https://github.com/thanhdat2508/blitz-client/blob/main/src/main.tsx"
click node_routes "https://github.com/thanhdat2508/blitz-client/blob/main/src/routeTree.gen.ts"
click node_product_route "https://github.com/thanhdat2508/blitz-client/blob/main/src/routes/products.tsx"
click node_home_route "https://github.com/thanhdat2508/blitz-client/blob/main/src/routes/index.tsx"
click node_product_list "https://github.com/thanhdat2508/blitz-client/blob/main/src/features/products/components/product-list.tsx"
click node_product_card "https://github.com/thanhdat2508/blitz-client/blob/main/src/features/products/components/product-card.tsx"
click node_product_types "https://github.com/thanhdat2508/blitz-client/blob/main/src/features/products/types/product.ts"
click node_get_products "https://github.com/thanhdat2508/blitz-client/blob/main/src/features/products/api/get-products.ts"
click node_create_product "https://github.com/thanhdat2508/blitz-client/blob/main/src/features/products/api/create-product.ts"
click node_query_provider "https://github.com/thanhdat2508/blitz-client/blob/main/src/main.tsx"
click node_api_client "https://github.com/thanhdat2508/blitz-client/blob/main/src/lib/api-client.ts"
click node_debounce "https://github.com/thanhdat2508/blitz-client/blob/main/src/hooks/use-debounce.ts"
click node_format "https://github.com/thanhdat2508/blitz-client/blob/main/src/utils/format.ts"
click node_local_hook "https://github.com/thanhdat2508/blitz-client/blob/main/src/hooks/use-local-storage.ts"
click node_storage "https://github.com/thanhdat2508/blitz-client/blob/main/src/utils/storage.ts"
click node_common_ui "https://github.com/thanhdat2508/blitz-client/blob/main/src/components/common/empty-state.tsx"
click node_ui_primitives "https://github.com/thanhdat2508/blitz-client/blob/main/src/components/ui/button.tsx"

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_bootstrap,node_routes,node_product_route,node_home_route toneBlue
class node_product_list,node_product_card,node_product_types,node_get_products,node_create_product,node_browser_storage toneAmber
class node_query_provider,node_api_client,node_debounce,node_format,node_local_hook,node_storage,node_api_service toneMint
class node_common_ui,node_ui_primitives toneRose
class node_visitor toneIndigo
```

## Components

### App and Routing

- [App Bootstrap](https://github.com/thanhdat2508/blitz-client/blob/main/src/main.tsx): `src/main.tsx`
- [Route Tree](https://github.com/thanhdat2508/blitz-client/blob/main/src/routeTree.gen.ts): `src/routeTree.gen.ts`
- [Products Route](https://github.com/thanhdat2508/blitz-client/blob/main/src/routes/products.tsx): `src/routes/products.tsx`
- [Home Route](https://github.com/thanhdat2508/blitz-client/blob/main/src/routes/index.tsx): `src/routes/index.tsx`

### Products Feature

- [Product List](https://github.com/thanhdat2508/blitz-client/blob/main/src/features/products/components/product-list.tsx): `src/features/products/components/product-list.tsx`
- [Product Card](https://github.com/thanhdat2508/blitz-client/blob/main/src/features/products/components/product-card.tsx): `src/features/products/components/product-card.tsx`
- [Product Types](https://github.com/thanhdat2508/blitz-client/blob/main/src/features/products/types/product.ts): `src/features/products/types/product.ts`
- [Fetch Products](https://github.com/thanhdat2508/blitz-client/blob/main/src/features/products/api/get-products.ts): `src/features/products/api/get-products.ts`
- [Create Product](https://github.com/thanhdat2508/blitz-client/blob/main/src/features/products/api/create-product.ts): `src/features/products/api/create-product.ts`

### Data and Utilities

- [Query Provider](https://github.com/thanhdat2508/blitz-client/blob/main/src/main.tsx): `src/main.tsx`
- [Axios Client](https://github.com/thanhdat2508/blitz-client/blob/main/src/lib/api-client.ts): `src/lib/api-client.ts`
- [Search Debounce](https://github.com/thanhdat2508/blitz-client/blob/main/src/hooks/use-debounce.ts): `src/hooks/use-debounce.ts`
- [Format Helpers](https://github.com/thanhdat2508/blitz-client/blob/main/src/utils/format.ts): `src/utils/format.ts`
- [Storage Hook](https://github.com/thanhdat2508/blitz-client/blob/main/src/hooks/use-local-storage.ts): `src/hooks/use-local-storage.ts`
- [Storage Helper](https://github.com/thanhdat2508/blitz-client/blob/main/src/utils/storage.ts): `src/utils/storage.ts`

### Shared UI

- [Common Widgets](https://github.com/thanhdat2508/blitz-client/blob/main/src/components/common/empty-state.tsx): `src/components/common/empty-state.tsx`
- [UI Primitives](https://github.com/thanhdat2508/blitz-client/blob/main/src/components/ui/button.tsx): `src/components/ui/button.tsx`

### Other components

- **Visitor**
- **Product API**
- **Browser Storage**

## Connections

- Visitor → App Bootstrap: opens app
- App Bootstrap → Route Tree: loads routes
- App Bootstrap → Query Provider: provides query
- Visitor → Products Route: navigates
- Visitor → Home Route: navigates
- Products Route → Product List: renders
- Product List → Fetch Products: queries
- Product List → Create Product: mutates
- Product List → Search Debounce: debounces search
- Product List → Product Card: renders results
- Product List → Common Widgets: shows states
- Fetch Products → Axios Client: requests data
- Create Product → Axios Client: sends mutation
- Axios Client → Product API: calls API
- Axios Client → Browser Storage: reads token
- Storage Hook → Storage Helper: reads and writes
- Storage Helper → Browser Storage: accesses
- Product List → UI Primitives: uses controls
- Home Route → UI Primitives: uses controls