# hazim47/stylehub architecture

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

## Overview

StyleHub is a clothing e-commerce platform with a customer storefront, an admin dashboard, and an Express API. The main customer journey is browsing and inspecting products, managing a cart, checking out, and tracking order status; administrators manage products, orders, coupons, and homepage content. The backend controllers connect these workflows to Sequelize models and external image hosting. README capabilities such as search, categories, favorites, and bilingual support are included, but several related modules were not sampled, so their detailed wiring is not asserted.

Main entry points: [`backend/src/app.js`](https://github.com/hazim47/stylehub/blob/main/backend/src/app.js) (API application), [`frontend/src/pages`](https://github.com/hazim47/stylehub/tree/main/frontend/src/pages) (Shop and checkout), [`backend/src/models`](https://github.com/hazim47/stylehub/tree/main/backend/src/models) (Commerce models), [`backend/src/controllers/productController.js`](https://github.com/hazim47/stylehub/blob/main/backend/src/controllers/productController.js) (Product operations)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_storefront["Customer storefront"]
  node_storefront_routes["Storefront routes<br/>[AppRoutes.jsx]"]
  node_storefront_pages["Shop and checkout"]
  node_cart_state["Cart state<br/>[cartStore.js]"]
  node_auth_state["Customer auth<br/>[useAuth.js]"]
  node_frontend_api["API client<br/>[axios.js]"]
end

subgraph group_admin["Admin dashboard"]
  node_admin_app["Admin routes<br/>[App.jsx]"]
  node_admin_pages["Admin operations"]
  node_admin_api["Admin API client<br/>[axios.js]"]
end

subgraph group_api["REST API"]
  node_express_app["API application<br/>[app.js]"]
  node_product_routes["Product routes<br/>[productRoutes.js]"]
  node_product_controller["Product operations"]
  node_order_routes["Order routes<br/>[orderRoutes.js]"]
  node_order_controller["Order operations<br/>[orderController.js]"]
  node_homepage_routes["Homepage routes<br/>[homepageRoutes.js]"]
  node_homepage_controller["Homepage content"]
  node_other_api["Other API features"]
  node_image_upload["Homepage upload middleware<br/>[homepageUpload.js]"]
end

subgraph group_data["Data and media"]
  node_models["Commerce models"]
  node_database[("PostgreSQL database<br/>[database.js]")]
  node_cloudinary["Cloudinary images"]
end

node_customer(("Customer"))
node_administrator(("Administrator"))

node_customer -->|"uses"| node_storefront_routes
node_storefront_routes -->|"routes to"| node_storefront_pages
node_storefront_pages -->|"updates"| node_cart_state
node_storefront_pages -->|"uses"| node_auth_state
node_storefront_pages -->|"requests data"| node_frontend_api
node_administrator -->|"uses"| node_admin_app
node_admin_app -->|"routes to"| node_admin_pages
node_admin_pages -->|"requests data"| node_admin_api
node_frontend_api -->|"calls API"| node_express_app
node_admin_api -->|"calls API"| node_express_app
node_express_app -->|"mounts"| node_product_routes
node_express_app -->|"mounts"| node_order_routes
node_express_app -->|"mounts"| node_homepage_routes
node_express_app -->|"mounts features"| node_other_api
node_product_routes -->|"dispatches"| node_product_controller
node_order_routes -->|"dispatches"| node_order_controller
node_homepage_routes -->|"dispatches"| node_homepage_controller
node_homepage_routes -->|"accepts uploads"| node_image_upload
node_product_controller -->|"reads and writes"| node_models
node_order_controller -->|"reads and writes"| node_models
node_homepage_controller -->|"reads and writes"| node_models
node_models -->|"persists through"| node_database
node_homepage_controller -->|"uploads and deletes"| node_cloudinary
node_product_controller -->|"deletes images"| node_cloudinary

click node_storefront_routes "https://github.com/hazim47/stylehub/blob/main/frontend/src/routes/AppRoutes.jsx"
click node_storefront_pages "https://github.com/hazim47/stylehub/tree/main/frontend/src/pages"
click node_cart_state "https://github.com/hazim47/stylehub/blob/main/frontend/src/store/cartStore.js"
click node_auth_state "https://github.com/hazim47/stylehub/blob/main/frontend/src/hooks/useAuth.js"
click node_frontend_api "https://github.com/hazim47/stylehub/blob/main/frontend/src/api/axios.js"
click node_admin_app "https://github.com/hazim47/stylehub/blob/main/admin/src/App.jsx"
click node_admin_pages "https://github.com/hazim47/stylehub/tree/main/admin/src/pages"
click node_admin_api "https://github.com/hazim47/stylehub/blob/main/admin/src/api/axios.js"
click node_express_app "https://github.com/hazim47/stylehub/blob/main/backend/src/app.js"
click node_product_routes "https://github.com/hazim47/stylehub/blob/main/backend/src/routes/productRoutes.js"
click node_product_controller "https://github.com/hazim47/stylehub/blob/main/backend/src/controllers/productController.js"
click node_order_routes "https://github.com/hazim47/stylehub/blob/main/backend/src/routes/orderRoutes.js"
click node_order_controller "https://github.com/hazim47/stylehub/blob/main/backend/src/controllers/orderController.js"
click node_homepage_routes "https://github.com/hazim47/stylehub/blob/main/backend/src/routes/homepageRoutes.js"
click node_homepage_controller "https://github.com/hazim47/stylehub/blob/main/backend/src/controllers/homepageController.js"
click node_other_api "https://github.com/hazim47/stylehub/tree/main/backend/src/controllers"
click node_models "https://github.com/hazim47/stylehub/tree/main/backend/src/models"
click node_database "https://github.com/hazim47/stylehub/blob/main/backend/src/config/database.js"
click node_image_upload "https://github.com/hazim47/stylehub/blob/main/backend/src/middleware/homepageUpload.js"

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_storefront_routes,node_storefront_pages,node_cart_state,node_auth_state,node_frontend_api toneBlue
class node_admin_app,node_admin_pages,node_admin_api toneAmber
class node_express_app,node_product_routes,node_product_controller,node_order_routes,node_order_controller,node_homepage_routes,node_homepage_controller,node_other_api,node_image_upload toneMint
class node_models,node_database,node_cloudinary toneRose
class node_customer,node_administrator toneIndigo
```

## Components

### Customer storefront

- [Storefront routes](https://github.com/hazim47/stylehub/blob/main/frontend/src/routes/AppRoutes.jsx): `frontend/src/routes/AppRoutes.jsx`
- [Shop and checkout](https://github.com/hazim47/stylehub/tree/main/frontend/src/pages): `frontend/src/pages`
- [Cart state](https://github.com/hazim47/stylehub/blob/main/frontend/src/store/cartStore.js): `frontend/src/store/cartStore.js`
- [Customer auth](https://github.com/hazim47/stylehub/blob/main/frontend/src/hooks/useAuth.js): `frontend/src/hooks/useAuth.js`
- [API client](https://github.com/hazim47/stylehub/blob/main/frontend/src/api/axios.js): `frontend/src/api/axios.js`

### Admin dashboard

- [Admin routes](https://github.com/hazim47/stylehub/blob/main/admin/src/App.jsx): `admin/src/App.jsx`
- [Admin operations](https://github.com/hazim47/stylehub/tree/main/admin/src/pages): `admin/src/pages`
- [Admin API client](https://github.com/hazim47/stylehub/blob/main/admin/src/api/axios.js): `admin/src/api/axios.js`

### REST API

- [API application](https://github.com/hazim47/stylehub/blob/main/backend/src/app.js): `backend/src/app.js`
- [Product routes](https://github.com/hazim47/stylehub/blob/main/backend/src/routes/productRoutes.js): `backend/src/routes/productRoutes.js`
- [Product operations](https://github.com/hazim47/stylehub/blob/main/backend/src/controllers/productController.js): `backend/src/controllers/productController.js`
- [Order routes](https://github.com/hazim47/stylehub/blob/main/backend/src/routes/orderRoutes.js): `backend/src/routes/orderRoutes.js`
- [Order operations](https://github.com/hazim47/stylehub/blob/main/backend/src/controllers/orderController.js): `backend/src/controllers/orderController.js`
- [Homepage routes](https://github.com/hazim47/stylehub/blob/main/backend/src/routes/homepageRoutes.js): `backend/src/routes/homepageRoutes.js`
- [Homepage content](https://github.com/hazim47/stylehub/blob/main/backend/src/controllers/homepageController.js): `backend/src/controllers/homepageController.js`
- [Other API features](https://github.com/hazim47/stylehub/tree/main/backend/src/controllers): `backend/src/controllers`
- [Homepage upload middleware](https://github.com/hazim47/stylehub/blob/main/backend/src/middleware/homepageUpload.js): `backend/src/middleware/homepageUpload.js`

### Data and media

- [Commerce models](https://github.com/hazim47/stylehub/tree/main/backend/src/models): `backend/src/models`
- [PostgreSQL database](https://github.com/hazim47/stylehub/blob/main/backend/src/config/database.js): `backend/src/config/database.js`
- **Cloudinary images**

### Other components

- **Customer**
- **Administrator**

## Connections

- Customer → Storefront routes: uses
- Storefront routes → Shop and checkout: routes to
- Shop and checkout → Cart state: updates
- Shop and checkout → Customer auth: uses
- Shop and checkout → API client: requests data
- Administrator → Admin routes: uses
- Admin routes → Admin operations: routes to
- Admin operations → Admin API client: requests data
- API client → API application: calls API
- Admin API client → API application: calls API
- API application → Product routes: mounts
- API application → Order routes: mounts
- API application → Homepage routes: mounts
- API application → Other API features: mounts features
- Product routes → Product operations: dispatches
- Order routes → Order operations: dispatches
- Homepage routes → Homepage content: dispatches
- Homepage routes → Homepage upload middleware: accepts uploads
- Product operations → Commerce models: reads and writes
- Order operations → Commerce models: reads and writes
- Homepage content → Commerce models: reads and writes
- Commerce models → PostgreSQL database: persists through
- Homepage content → Cloudinary images: uploads and deletes
- Product operations → Cloudinary images: deletes images