# azisbek/tires-front architecture

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

## Overview

This is a React/TypeScript tire-commerce storefront with a separate administrative area. Customers browse the home page and catalog, inspect product details and reviews, manage a cart, and reach order confirmation; account, favorites, news, and contact routes provide additional capabilities. Administrators have routes for managing products, news, applications, and tire/body types. The graph follows routing and layout relationships visible in sampled source; many page and API implementations were not sampled, so uncertain data-flow links are omitted.

Main entry points: [`src/app/layout/RouterLayout.tsx`](https://github.com/azisbek/tires-front/blob/main/src/app/layout/RouterLayout.tsx) (Storefront layout), [`src/app/layout/AdminLayout.tsx`](https://github.com/azisbek/tires-front/blob/main/src/app/layout/AdminLayout.tsx) (Admin layout), [`src/app/routes/routes.tsx`](https://github.com/azisbek/tires-front/blob/main/src/app/routes/routes.tsx) (Route table), [`src/pages/product-page`](https://github.com/azisbek/tires-front/tree/main/src/pages/product-page) (Product details)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application"]
  node_entry["React entry<br/>[index.tsx]"]
  node_routes["Route table<br/>[routes.tsx]"]
  node_router_layout["Storefront layout<br/>[RouterLayout.tsx]"]
  node_admin_layout["Admin layout<br/>[AdminLayout.tsx]"]
  node_api_transport["API transport<br/>[query.ts]"]
end

subgraph group_storefront["Storefront"]
  node_home["Home"]
  node_catalog["Catalog"]
  node_catalog_filter["Catalog filters"]
  node_product_page["Product details"]
  node_product_details["Product presentation"]
  node_reviews["Product reviews"]
end

subgraph group_commerce["Shopping"]
  node_cart["Cart"]
  node_cart_list["Cart items"]
  node_cart_item["Cart item actions<br/>[useCartFunc.tsx]"]
  node_confirm_order["Order confirmation"]
  node_order_widgets["Order information"]
end

subgraph group_account["Accounts and Content"]
  node_sign_in["Sign in"]
  node_sign_up["Sign up"]
  node_profile["Profile"]
  node_favorites["Favorites"]
  node_news["News"]
end

subgraph group_admin["Administration"]
  node_admin_home["Admin dashboard"]
  node_admin_products["Product management"]
  node_admin_news["News management"]
  node_admin_applications["Applications"]
  node_admin_tire_types["Tire types"]
  node_admin_body_types["Body types"]
end

node_customer(("Customer"))
node_admin_user(("Administrator"))
node_backend["Backend API"]

node_entry -->|"renders providers"| node_routes
node_customer -->|"opens routes"| node_routes
node_admin_user -->|"opens admin routes"| node_routes
node_routes -->|"routes storefront"| node_router_layout
node_routes -->|"routes administration"| node_admin_layout
node_router_layout -->|"renders route"| node_home
node_router_layout -->|"renders route"| node_catalog
node_router_layout -->|"renders route"| node_product_page
node_router_layout -->|"renders route"| node_cart
node_router_layout -->|"renders route"| node_confirm_order
node_router_layout -->|"renders route"| node_sign_in
node_router_layout -->|"renders route"| node_sign_up
node_router_layout -->|"renders guarded route"| node_profile
node_router_layout -->|"renders guarded route"| node_favorites
node_router_layout -->|"renders route"| node_news
node_catalog -->|"uses filters"| node_catalog_filter
node_product_page -->|"presents product"| node_product_details
node_product_page -->|"routes reviews"| node_reviews
node_cart -->|"shows items"| node_cart_list
node_cart_list -->|"uses item actions"| node_cart_item
node_cart_item -->|"requests mutations"| node_api_transport
node_confirm_order -->|"uses order details"| node_order_widgets
node_admin_layout -->|"renders route"| node_admin_home
node_admin_layout -->|"renders route"| node_admin_products
node_admin_layout -->|"renders route"| node_admin_news
node_admin_layout -->|"renders route"| node_admin_applications
node_admin_layout -->|"renders route"| node_admin_tire_types
node_admin_layout -->|"renders route"| node_admin_body_types
node_api_transport -->|"fetches requests"| node_backend

click node_entry "https://github.com/azisbek/tires-front/blob/main/src/app/index.tsx"
click node_routes "https://github.com/azisbek/tires-front/blob/main/src/app/routes/routes.tsx"
click node_router_layout "https://github.com/azisbek/tires-front/blob/main/src/app/layout/RouterLayout.tsx"
click node_admin_layout "https://github.com/azisbek/tires-front/blob/main/src/app/layout/AdminLayout.tsx"
click node_home "https://github.com/azisbek/tires-front/tree/main/src/pages/home"
click node_catalog "https://github.com/azisbek/tires-front/tree/main/src/pages/catalog"
click node_catalog_filter "https://github.com/azisbek/tires-front/tree/main/src/widgets/catalog-filter"
click node_product_page "https://github.com/azisbek/tires-front/tree/main/src/pages/product-page"
click node_product_details "https://github.com/azisbek/tires-front/tree/main/src/widgets/product-details"
click node_reviews "https://github.com/azisbek/tires-front/tree/main/src/widgets/reviews"
click node_cart "https://github.com/azisbek/tires-front/tree/main/src/pages/cart"
click node_cart_list "https://github.com/azisbek/tires-front/tree/main/src/widgets/cart-list"
click node_cart_item "https://github.com/azisbek/tires-front/blob/main/src/features/cart-item/model/useCartFunc.tsx"
click node_confirm_order "https://github.com/azisbek/tires-front/tree/main/src/pages/confirm-order-page"
click node_order_widgets "https://github.com/azisbek/tires-front/tree/main/src/widgets/order-widgets"
click node_sign_in "https://github.com/azisbek/tires-front/tree/main/src/pages/sign-in"
click node_sign_up "https://github.com/azisbek/tires-front/tree/main/src/pages/sign-up"
click node_profile "https://github.com/azisbek/tires-front/tree/main/src/pages/profilePage"
click node_favorites "https://github.com/azisbek/tires-front/tree/main/src/pages/favorite-page"
click node_news "https://github.com/azisbek/tires-front/tree/main/src/pages/news"
click node_admin_home "https://github.com/azisbek/tires-front/tree/main/src/pages/admin-page"
click node_admin_products "https://github.com/azisbek/tires-front/tree/main/src/pages/add-product-page"
click node_admin_news "https://github.com/azisbek/tires-front/tree/main/src/pages/add-news"
click node_admin_applications "https://github.com/azisbek/tires-front/tree/main/src/pages/applications-page"
click node_admin_tire_types "https://github.com/azisbek/tires-front/tree/main/src/pages/add-tires-type"
click node_admin_body_types "https://github.com/azisbek/tires-front/tree/main/src/pages/add-body-type"
click node_api_transport "https://github.com/azisbek/tires-front/blob/main/src/shared/api/query.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_entry,node_routes,node_router_layout,node_admin_layout,node_api_transport toneBlue
class node_home,node_catalog,node_catalog_filter,node_product_page,node_product_details,node_reviews toneAmber
class node_cart,node_cart_list,node_cart_item,node_confirm_order,node_order_widgets,node_backend toneMint
class node_sign_in,node_sign_up,node_profile,node_favorites,node_news toneRose
class node_admin_home,node_admin_products,node_admin_news,node_admin_applications,node_admin_tire_types,node_admin_body_types,node_customer,node_admin_user toneIndigo
```

## Components

### Application

- [React entry](https://github.com/azisbek/tires-front/blob/main/src/app/index.tsx): `src/app/index.tsx`
- [Route table](https://github.com/azisbek/tires-front/blob/main/src/app/routes/routes.tsx): `src/app/routes/routes.tsx`
- [Storefront layout](https://github.com/azisbek/tires-front/blob/main/src/app/layout/RouterLayout.tsx): `src/app/layout/RouterLayout.tsx`
- [Admin layout](https://github.com/azisbek/tires-front/blob/main/src/app/layout/AdminLayout.tsx): `src/app/layout/AdminLayout.tsx`
- [API transport](https://github.com/azisbek/tires-front/blob/main/src/shared/api/query.ts): `src/shared/api/query.ts`

### Storefront

- [Home](https://github.com/azisbek/tires-front/tree/main/src/pages/home): `src/pages/home`
- [Catalog](https://github.com/azisbek/tires-front/tree/main/src/pages/catalog): `src/pages/catalog`
- [Catalog filters](https://github.com/azisbek/tires-front/tree/main/src/widgets/catalog-filter): `src/widgets/catalog-filter`
- [Product details](https://github.com/azisbek/tires-front/tree/main/src/pages/product-page): `src/pages/product-page`
- [Product presentation](https://github.com/azisbek/tires-front/tree/main/src/widgets/product-details): `src/widgets/product-details`
- [Product reviews](https://github.com/azisbek/tires-front/tree/main/src/widgets/reviews): `src/widgets/reviews`

### Shopping

- [Cart](https://github.com/azisbek/tires-front/tree/main/src/pages/cart): `src/pages/cart`
- [Cart items](https://github.com/azisbek/tires-front/tree/main/src/widgets/cart-list): `src/widgets/cart-list`
- [Cart item actions](https://github.com/azisbek/tires-front/blob/main/src/features/cart-item/model/useCartFunc.tsx): `src/features/cart-item/model/useCartFunc.tsx`
- [Order confirmation](https://github.com/azisbek/tires-front/tree/main/src/pages/confirm-order-page): `src/pages/confirm-order-page`
- [Order information](https://github.com/azisbek/tires-front/tree/main/src/widgets/order-widgets): `src/widgets/order-widgets`

### Accounts and Content

- [Sign in](https://github.com/azisbek/tires-front/tree/main/src/pages/sign-in): `src/pages/sign-in`
- [Sign up](https://github.com/azisbek/tires-front/tree/main/src/pages/sign-up): `src/pages/sign-up`
- [Profile](https://github.com/azisbek/tires-front/tree/main/src/pages/profilePage): `src/pages/profilePage`
- [Favorites](https://github.com/azisbek/tires-front/tree/main/src/pages/favorite-page): `src/pages/favorite-page`
- [News](https://github.com/azisbek/tires-front/tree/main/src/pages/news): `src/pages/news`

### Administration

- [Admin dashboard](https://github.com/azisbek/tires-front/tree/main/src/pages/admin-page): `src/pages/admin-page`
- [Product management](https://github.com/azisbek/tires-front/tree/main/src/pages/add-product-page): `src/pages/add-product-page`
- [News management](https://github.com/azisbek/tires-front/tree/main/src/pages/add-news): `src/pages/add-news`
- [Applications](https://github.com/azisbek/tires-front/tree/main/src/pages/applications-page): `src/pages/applications-page`
- [Tire types](https://github.com/azisbek/tires-front/tree/main/src/pages/add-tires-type): `src/pages/add-tires-type`
- [Body types](https://github.com/azisbek/tires-front/tree/main/src/pages/add-body-type): `src/pages/add-body-type`

### Other components

- **Customer**
- **Administrator**
- **Backend API**

## Connections

- React entry → Route table: renders providers
- Customer → Route table: opens routes
- Administrator → Route table: opens admin routes
- Route table → Storefront layout: routes storefront
- Route table → Admin layout: routes administration
- Storefront layout → Home: renders route
- Storefront layout → Catalog: renders route
- Storefront layout → Product details: renders route
- Storefront layout → Cart: renders route
- Storefront layout → Order confirmation: renders route
- Storefront layout → Sign in: renders route
- Storefront layout → Sign up: renders route
- Storefront layout → Profile: renders guarded route
- Storefront layout → Favorites: renders guarded route
- Storefront layout → News: renders route
- Catalog → Catalog filters: uses filters
- Product details → Product presentation: presents product
- Product details → Product reviews: routes reviews
- Cart → Cart items: shows items
- Cart items → Cart item actions: uses item actions
- Cart item actions → API transport: requests mutations
- Order confirmation → Order information: uses order details
- Admin layout → Admin dashboard: renders route
- Admin layout → Product management: renders route
- Admin layout → News management: renders route
- Admin layout → Applications: renders route
- Admin layout → Tire types: renders route
- Admin layout → Body types: renders route
- API transport → Backend API: fetches requests