# autoportsproject/autoparts-frontend architecture

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

- Interactive diagram: https://gitdiagram.com/autoportsproject/autoparts-frontend
- Repository: https://github.com/autoportsproject/autoparts-frontend

## Overview

AutoApp is a storefront and administration site for foreign-car auto parts. The public journey is search or browse catalog → inspect products; registered users can access profiles, while staff manage catalog and business content and handle customer/supplier appeals. The tree shows a feature-hook/repository architecture over an HTTP API. Only selected source was sampled, so links among unsampled pages and feature modules are kept broad rather than asserting detailed call wiring.

Main entry points: [`src/features`](https://github.com/autoportsproject/autoparts-frontend/tree/main/src/features) (Feature hooks), [`src/app/page.tsx`](https://github.com/autoportsproject/autoparts-frontend/blob/main/src/app/page.tsx) (Home page), [`src/views/main.tsx`](https://github.com/autoportsproject/autoparts-frontend/blob/main/src/views/main.tsx) (Home view), [`src/widgets/main/Main.tsx`](https://github.com/autoportsproject/autoparts-frontend/blob/main/src/widgets/main/Main.tsx) (Home and brands)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_storefront["Storefront"]
  node_home["Home page<br/>[page.tsx]"]
  node_homeview["Home view<br/>[main.tsx]"]
  node_homewidget["Home and brands<br/>[Main.tsx]"]
  node_catalog["Catalog pages<br/>[page.tsx]"]
  node_catalogview["Catalog views<br/>[catalog.tsx]"]
  node_search["Product search<br/>[page.tsx]"]
  node_productdetail["Product detail<br/>[page.tsx]"]
  node_publiccontent["Business content"]
end

subgraph group_identity["Accounts"]
  node_login["Login and register<br/>[login.tsx]"]
  node_profile["User profile<br/>[profile.tsx]"]
end

subgraph group_admin["Administration"]
  node_adminpages["Admin pages"]
  node_adminviews["Admin views"]
  node_appeals["Appeal handling"]
end

subgraph group_data["Application data"]
  node_features["Feature hooks"]
  node_repos["API repositories"]
  node_http["HTTP client<br/>[axiosInstance.ts]"]
  node_domain["DTOs and contracts"]
  node_query["Query cache<br/>[QueryProvider.tsx]"]
end

node_buyer(("Shopper"))
node_backend["Application API"]

node_buyer -->|"opens"| node_home
node_home -->|"renders"| node_homeview
node_homeview -->|"renders"| node_homewidget
node_homewidget -->|"loads brands"| node_features
node_buyer -->|"browses"| node_catalog
node_catalog -->|"renders"| node_catalogview
node_buyer -->|"searches"| node_search
node_buyer -->|"inspects"| node_productdetail
node_buyer -->|"visits"| node_publiccontent
node_buyer -->|"authenticates"| node_login
node_buyer -->|"manages account"| node_profile
node_buyer -->|"staff access"| node_adminpages
node_adminpages -->|"renders"| node_adminviews
node_appeals -->|"updates appeal"| node_features
node_features -->|"invokes"| node_repos
node_repos -->|"sends requests"| node_http
node_http -->|"calls"| node_backend
node_features -->|"uses contracts"| node_domain
node_features -->|"caches queries"| node_query

click node_home "https://github.com/autoportsproject/autoparts-frontend/blob/main/src/app/page.tsx"
click node_homeview "https://github.com/autoportsproject/autoparts-frontend/blob/main/src/views/main.tsx"
click node_homewidget "https://github.com/autoportsproject/autoparts-frontend/blob/main/src/widgets/main/Main.tsx"
click node_catalog "https://github.com/autoportsproject/autoparts-frontend/blob/main/src/app/catalog/page.tsx"
click node_catalogview "https://github.com/autoportsproject/autoparts-frontend/blob/main/src/views/catalog/catalog.tsx"
click node_search "https://github.com/autoportsproject/autoparts-frontend/blob/main/src/app/catalog/search/page.tsx"
click node_productdetail "https://github.com/autoportsproject/autoparts-frontend/blob/main/src/app/catalog/%5Bid%5D/page.tsx"
click node_publiccontent "https://github.com/autoportsproject/autoparts-frontend/tree/main/src/views/pages"
click node_login "https://github.com/autoportsproject/autoparts-frontend/blob/main/src/views/auth/login.tsx"
click node_profile "https://github.com/autoportsproject/autoparts-frontend/blob/main/src/views/auth/profile.tsx"
click node_adminpages "https://github.com/autoportsproject/autoparts-frontend/tree/main/src/app/admin"
click node_adminviews "https://github.com/autoportsproject/autoparts-frontend/tree/main/src/views/admin"
click node_appeals "https://github.com/autoportsproject/autoparts-frontend/blob/main/src/widgets/admin/appeals/ClientQuestionCard.tsx"
click node_features "https://github.com/autoportsproject/autoparts-frontend/tree/main/src/features"
click node_repos "https://github.com/autoportsproject/autoparts-frontend/tree/main/src/data/repos"
click node_http "https://github.com/autoportsproject/autoparts-frontend/blob/main/src/data/api/axiosInstance.ts"
click node_domain "https://github.com/autoportsproject/autoparts-frontend/tree/main/src/domain"
click node_query "https://github.com/autoportsproject/autoparts-frontend/blob/main/src/shared/providers/QueryProvider.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_home,node_homeview,node_homewidget,node_catalog,node_catalogview,node_search,node_productdetail,node_publiccontent toneBlue
class node_login,node_profile toneAmber
class node_adminpages,node_adminviews,node_appeals,node_backend toneMint
class node_features,node_repos,node_http,node_domain,node_query toneRose
class node_buyer toneIndigo
```

## Components

### Storefront

- [Home page](https://github.com/autoportsproject/autoparts-frontend/blob/main/src/app/page.tsx): `src/app/page.tsx`
- [Home view](https://github.com/autoportsproject/autoparts-frontend/blob/main/src/views/main.tsx): `src/views/main.tsx`
- [Home and brands](https://github.com/autoportsproject/autoparts-frontend/blob/main/src/widgets/main/Main.tsx): `src/widgets/main/Main.tsx`
- [Catalog pages](https://github.com/autoportsproject/autoparts-frontend/blob/main/src/app/catalog/page.tsx): `src/app/catalog/page.tsx`
- [Catalog views](https://github.com/autoportsproject/autoparts-frontend/blob/main/src/views/catalog/catalog.tsx): `src/views/catalog/catalog.tsx`
- [Product search](https://github.com/autoportsproject/autoparts-frontend/blob/main/src/app/catalog/search/page.tsx): `src/app/catalog/search/page.tsx`
- [Product detail](https://github.com/autoportsproject/autoparts-frontend/blob/main/src/app/catalog/%5Bid%5D/page.tsx): `src/app/catalog/[id]/page.tsx`
- [Business content](https://github.com/autoportsproject/autoparts-frontend/tree/main/src/views/pages): `src/views/pages`

### Accounts

- [Login and register](https://github.com/autoportsproject/autoparts-frontend/blob/main/src/views/auth/login.tsx): `src/views/auth/login.tsx`
- [User profile](https://github.com/autoportsproject/autoparts-frontend/blob/main/src/views/auth/profile.tsx): `src/views/auth/profile.tsx`

### Administration

- [Admin pages](https://github.com/autoportsproject/autoparts-frontend/tree/main/src/app/admin): `src/app/admin`
- [Admin views](https://github.com/autoportsproject/autoparts-frontend/tree/main/src/views/admin): `src/views/admin`
- [Appeal handling](https://github.com/autoportsproject/autoparts-frontend/blob/main/src/widgets/admin/appeals/ClientQuestionCard.tsx): `src/widgets/admin/appeals/ClientQuestionCard.tsx`

### Application data

- [Feature hooks](https://github.com/autoportsproject/autoparts-frontend/tree/main/src/features): `src/features`
- [API repositories](https://github.com/autoportsproject/autoparts-frontend/tree/main/src/data/repos): `src/data/repos`
- [HTTP client](https://github.com/autoportsproject/autoparts-frontend/blob/main/src/data/api/axiosInstance.ts): `src/data/api/axiosInstance.ts`
- [DTOs and contracts](https://github.com/autoportsproject/autoparts-frontend/tree/main/src/domain): `src/domain`
- [Query cache](https://github.com/autoportsproject/autoparts-frontend/blob/main/src/shared/providers/QueryProvider.tsx): `src/shared/providers/QueryProvider.tsx`

### Other components

- **Shopper**
- **Application API**

## Connections

- Shopper → Home page: opens
- Home page → Home view: renders
- Home view → Home and brands: renders
- Home and brands → Feature hooks: loads brands
- Shopper → Catalog pages: browses
- Catalog pages → Catalog views: renders
- Shopper → Product search: searches
- Shopper → Product detail: inspects
- Shopper → Business content: visits
- Shopper → Login and register: authenticates
- Shopper → User profile: manages account
- Shopper → Admin pages: staff access
- Admin pages → Admin views: renders
- Appeal handling → Feature hooks: updates appeal
- Feature hooks → API repositories: invokes
- API repositories → HTTP client: sends requests
- HTTP client → Application API: calls
- Feature hooks → DTOs and contracts: uses contracts
- Feature hooks → Query cache: caches queries