# ahmedhafezz111/ng-ecommerce architecture

> Architecture diagram of the GitHub repository ahmedhafezz111/ng-ecommerce, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-13). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/ahmedhafezz111/ng-ecommerce
- Repository: https://github.com/ahmedhafezz111/ng-ecommerce

## Overview

ng-Ecommerce is an Angular storefront. Users enter through routed authentication or shopping pages; the shopping flow covers product and category discovery, product details, cart and wishlist management, and checkout. Page components call domain services, which make HTTP requests to the ecommerce API; auth, cart and wishlist also maintain client-side state. Routing and HTTP interceptors provide supporting application layers. The README gives no further capability detail, and unsampled components are represented only where the source index or routes document them.

Main entry points: [`src/app/app.routes.ts`](https://github.com/ahmedhafezz111/ng-ecommerce/blob/main/src/app/app.routes.ts) (Route table), [`src/app/pages/home/home.component.ts`](https://github.com/ahmedhafezz111/ng-ecommerce/blob/main/src/app/pages/home/home.component.ts) (Catalog pages), [`src/app/core/services/cart/cart.service.ts`](https://github.com/ahmedhafezz111/ng-ecommerce/blob/main/src/app/core/services/cart/cart.service.ts) (Cart service), [`src/app/pages/products/products.component.ts`](https://github.com/ahmedhafezz111/ng-ecommerce/blob/main/src/app/pages/products/products.component.ts) (Product listing)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application shell"]
  node_routes["Route table<br/>[app.routes.ts]"]
  node_layouts["Page layouts"]
  node_root["App shell<br/>[app.component.ts]"]
  node_httpconfig["HTTP configuration<br/>[app.config.ts]"]
  node_interceptors["HTTP interceptors"]
end

subgraph group_identity["Identity and access"]
  node_guards["Route guards"]
  node_authpages["Sign-in pages<br/>[login.component.ts]"]
  node_authservice["Authentication<br/>[auth.service.ts]"]
end

subgraph group_catalog["Catalog browsing"]
  node_catalogpages["Catalog pages<br/>[home.component.ts]"]
  node_productspage["Product listing"]
  node_detailspage["Product details"]
  node_categorypage["Category browsing"]
  node_brandpage["Brand browsing"]
  node_productservice["Product service"]
  node_categoryservice["Category service"]
  node_brandservice["Brand service<br/>[brands.service.ts]"]
end

subgraph group_commerce["Shopping and checkout"]
  node_cartpage["Cart page<br/>[cart.component.ts]"]
  node_wishlistpage["Wishlist page"]
  node_checkoutpage["Checkout page"]
  node_cartservice["Cart service<br/>[cart.service.ts]"]
  node_wishlistservice["Wishlist service"]
  node_orderservice["Orders service<br/>[orders.service.ts]"]
end

subgraph group_shared["Shared presentation"]
  node_navbar["Navigation bar"]
  node_footer["Footer"]
  node_searchpipe["Search filter<br/>[search.pipe.ts]"]
  node_termtextpipe["Text formatting<br/>[termtext.pipe.ts]"]
  node_salepipe["Sale formatting<br/>[sale.pipe.ts]"]
end

node_shopper(("Shopper"))
node_api{{"Ecommerce API"}}

node_shopper -->|"navigates"| node_routes
node_routes -->|"selects layout"| node_layouts
node_routes -->|"checks access"| node_guards
node_routes -->|"routes to"| node_authpages
node_routes -->|"routes to"| node_catalogpages
node_routes -->|"routes to"| node_productspage
node_routes -->|"routes to"| node_detailspage
node_routes -->|"routes to"| node_categorypage
node_routes -->|"routes to"| node_brandpage
node_routes -->|"routes to"| node_cartpage
node_routes -->|"routes to"| node_wishlistpage
node_routes -->|"routes to"| node_checkoutpage
node_authpages -->|"submits credentials"| node_authservice
node_authservice -->|"sends auth requests"| node_api
node_catalogpages -->|"loads products"| node_productservice
node_catalogpages -->|"loads categories"| node_categoryservice
node_catalogpages -->|"adds cart items"| node_cartservice
node_catalogpages -->|"manages wishlist"| node_wishlistservice
node_productspage -->|"loads products"| node_productservice
node_productspage -->|"adds cart items"| node_cartservice
node_productspage -->|"manages wishlist"| node_wishlistservice
node_detailspage -->|"loads product"| node_productservice
node_detailspage -->|"updates cart"| node_cartservice
node_detailspage -->|"updates wishlist"| node_wishlistservice
node_categorypage -->|"loads categories"| node_categoryservice
node_brandpage -->|"loads brands"| node_brandservice
node_cartpage -->|"manages cart"| node_cartservice
node_wishlistpage -->|"loads wishlist"| node_wishlistservice
node_wishlistpage -->|"moves to cart"| node_cartservice
node_checkoutpage -->|"submits order"| node_orderservice
node_productservice -->|"requests products"| node_api
node_categoryservice -->|"requests categories"| node_api
node_brandservice -->|"requests brands"| node_api
node_cartservice -->|"manages cart data"| node_api
node_wishlistservice -->|"manages wishlist data"| node_api
node_orderservice -->|"submits orders"| node_api
node_httpconfig -->|"registers"| node_interceptors
node_layouts -->|"renders"| node_navbar
node_layouts -->|"renders"| node_footer
node_navbar -->|"uses identity"| node_authservice
node_navbar -->|"reads cart state"| node_cartservice
node_catalogpages -->|"filters products"| node_searchpipe
node_catalogpages -->|"formats text"| node_termtextpipe
node_catalogpages -->|"formats sale"| node_salepipe
node_productspage -->|"filters products"| node_searchpipe
node_productspage -->|"formats text"| node_termtextpipe

click node_routes "https://github.com/ahmedhafezz111/ng-ecommerce/blob/main/src/app/app.routes.ts"
click node_layouts "https://github.com/ahmedhafezz111/ng-ecommerce/tree/main/src/app/layouts"
click node_root "https://github.com/ahmedhafezz111/ng-ecommerce/blob/main/src/app/app.component.ts"
click node_httpconfig "https://github.com/ahmedhafezz111/ng-ecommerce/blob/main/src/app/app.config.ts"
click node_guards "https://github.com/ahmedhafezz111/ng-ecommerce/tree/main/src/app/core/guards"
click node_authpages "https://github.com/ahmedhafezz111/ng-ecommerce/blob/main/src/app/pages/login/login.component.ts"
click node_authservice "https://github.com/ahmedhafezz111/ng-ecommerce/blob/main/src/app/core/services/auth/auth.service.ts"
click node_catalogpages "https://github.com/ahmedhafezz111/ng-ecommerce/blob/main/src/app/pages/home/home.component.ts"
click node_productspage "https://github.com/ahmedhafezz111/ng-ecommerce/blob/main/src/app/pages/products/products.component.ts"
click node_detailspage "https://github.com/ahmedhafezz111/ng-ecommerce/blob/main/src/app/pages/details/details.component.ts"
click node_categorypage "https://github.com/ahmedhafezz111/ng-ecommerce/blob/main/src/app/pages/categories/categories.component.ts"
click node_brandpage "https://github.com/ahmedhafezz111/ng-ecommerce/blob/main/src/app/pages/brands/brands.component.ts"
click node_productservice "https://github.com/ahmedhafezz111/ng-ecommerce/blob/main/src/app/core/services/products/products.service.ts"
click node_categoryservice "https://github.com/ahmedhafezz111/ng-ecommerce/blob/main/src/app/core/services/categories/categories.service.ts"
click node_brandservice "https://github.com/ahmedhafezz111/ng-ecommerce/blob/main/src/app/core/services/brands/brands.service.ts"
click node_cartpage "https://github.com/ahmedhafezz111/ng-ecommerce/blob/main/src/app/pages/cart/cart.component.ts"
click node_wishlistpage "https://github.com/ahmedhafezz111/ng-ecommerce/blob/main/src/app/pages/wishlist/wishlist.component.ts"
click node_checkoutpage "https://github.com/ahmedhafezz111/ng-ecommerce/blob/main/src/app/pages/checkout/checkout.component.ts"
click node_cartservice "https://github.com/ahmedhafezz111/ng-ecommerce/blob/main/src/app/core/services/cart/cart.service.ts"
click node_wishlistservice "https://github.com/ahmedhafezz111/ng-ecommerce/blob/main/src/app/core/services/wishlist/wishlist.service.ts"
click node_orderservice "https://github.com/ahmedhafezz111/ng-ecommerce/blob/main/src/app/core/services/orders/orders.service.ts"
click node_interceptors "https://github.com/ahmedhafezz111/ng-ecommerce/tree/main/src/app/core/interceptors"
click node_navbar "https://github.com/ahmedhafezz111/ng-ecommerce/blob/main/src/app/layouts/navbar/navbar.component.ts"
click node_footer "https://github.com/ahmedhafezz111/ng-ecommerce/blob/main/src/app/layouts/footer/footer.component.ts"
click node_searchpipe "https://github.com/ahmedhafezz111/ng-ecommerce/blob/main/src/app/shared/pipes/search/search.pipe.ts"
click node_termtextpipe "https://github.com/ahmedhafezz111/ng-ecommerce/blob/main/src/app/shared/pipes/termtext/termtext.pipe.ts"
click node_salepipe "https://github.com/ahmedhafezz111/ng-ecommerce/blob/main/src/app/shared/pipes/sale/sale.pipe.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_routes,node_layouts,node_root,node_httpconfig,node_interceptors toneBlue
class node_guards,node_authpages,node_authservice toneAmber
class node_catalogpages,node_productspage,node_detailspage,node_categorypage,node_brandpage,node_productservice,node_categoryservice,node_brandservice,node_api toneMint
class node_cartpage,node_wishlistpage,node_checkoutpage,node_cartservice,node_wishlistservice,node_orderservice toneRose
class node_navbar,node_footer,node_searchpipe,node_termtextpipe,node_salepipe,node_shopper toneIndigo
```

## Components

### Application shell

- [Route table](https://github.com/ahmedhafezz111/ng-ecommerce/blob/main/src/app/app.routes.ts): `src/app/app.routes.ts`
- [Page layouts](https://github.com/ahmedhafezz111/ng-ecommerce/tree/main/src/app/layouts): `src/app/layouts`
- [App shell](https://github.com/ahmedhafezz111/ng-ecommerce/blob/main/src/app/app.component.ts): `src/app/app.component.ts`
- [HTTP configuration](https://github.com/ahmedhafezz111/ng-ecommerce/blob/main/src/app/app.config.ts): `src/app/app.config.ts`
- [HTTP interceptors](https://github.com/ahmedhafezz111/ng-ecommerce/tree/main/src/app/core/interceptors): `src/app/core/interceptors`

### Identity and access

- [Route guards](https://github.com/ahmedhafezz111/ng-ecommerce/tree/main/src/app/core/guards): `src/app/core/guards`
- [Sign-in pages](https://github.com/ahmedhafezz111/ng-ecommerce/blob/main/src/app/pages/login/login.component.ts): `src/app/pages/login/login.component.ts`
- [Authentication](https://github.com/ahmedhafezz111/ng-ecommerce/blob/main/src/app/core/services/auth/auth.service.ts): `src/app/core/services/auth/auth.service.ts`

### Catalog browsing

- [Catalog pages](https://github.com/ahmedhafezz111/ng-ecommerce/blob/main/src/app/pages/home/home.component.ts): `src/app/pages/home/home.component.ts`
- [Product listing](https://github.com/ahmedhafezz111/ng-ecommerce/blob/main/src/app/pages/products/products.component.ts): `src/app/pages/products/products.component.ts`
- [Product details](https://github.com/ahmedhafezz111/ng-ecommerce/blob/main/src/app/pages/details/details.component.ts): `src/app/pages/details/details.component.ts`
- [Category browsing](https://github.com/ahmedhafezz111/ng-ecommerce/blob/main/src/app/pages/categories/categories.component.ts): `src/app/pages/categories/categories.component.ts`
- [Brand browsing](https://github.com/ahmedhafezz111/ng-ecommerce/blob/main/src/app/pages/brands/brands.component.ts): `src/app/pages/brands/brands.component.ts`
- [Product service](https://github.com/ahmedhafezz111/ng-ecommerce/blob/main/src/app/core/services/products/products.service.ts): `src/app/core/services/products/products.service.ts`
- [Category service](https://github.com/ahmedhafezz111/ng-ecommerce/blob/main/src/app/core/services/categories/categories.service.ts): `src/app/core/services/categories/categories.service.ts`
- [Brand service](https://github.com/ahmedhafezz111/ng-ecommerce/blob/main/src/app/core/services/brands/brands.service.ts): `src/app/core/services/brands/brands.service.ts`

### Shopping and checkout

- [Cart page](https://github.com/ahmedhafezz111/ng-ecommerce/blob/main/src/app/pages/cart/cart.component.ts): `src/app/pages/cart/cart.component.ts`
- [Wishlist page](https://github.com/ahmedhafezz111/ng-ecommerce/blob/main/src/app/pages/wishlist/wishlist.component.ts): `src/app/pages/wishlist/wishlist.component.ts`
- [Checkout page](https://github.com/ahmedhafezz111/ng-ecommerce/blob/main/src/app/pages/checkout/checkout.component.ts): `src/app/pages/checkout/checkout.component.ts`
- [Cart service](https://github.com/ahmedhafezz111/ng-ecommerce/blob/main/src/app/core/services/cart/cart.service.ts): `src/app/core/services/cart/cart.service.ts`
- [Wishlist service](https://github.com/ahmedhafezz111/ng-ecommerce/blob/main/src/app/core/services/wishlist/wishlist.service.ts): `src/app/core/services/wishlist/wishlist.service.ts`
- [Orders service](https://github.com/ahmedhafezz111/ng-ecommerce/blob/main/src/app/core/services/orders/orders.service.ts): `src/app/core/services/orders/orders.service.ts`

### Shared presentation

- [Navigation bar](https://github.com/ahmedhafezz111/ng-ecommerce/blob/main/src/app/layouts/navbar/navbar.component.ts): `src/app/layouts/navbar/navbar.component.ts`
- [Footer](https://github.com/ahmedhafezz111/ng-ecommerce/blob/main/src/app/layouts/footer/footer.component.ts): `src/app/layouts/footer/footer.component.ts`
- [Search filter](https://github.com/ahmedhafezz111/ng-ecommerce/blob/main/src/app/shared/pipes/search/search.pipe.ts): `src/app/shared/pipes/search/search.pipe.ts`
- [Text formatting](https://github.com/ahmedhafezz111/ng-ecommerce/blob/main/src/app/shared/pipes/termtext/termtext.pipe.ts): `src/app/shared/pipes/termtext/termtext.pipe.ts`
- [Sale formatting](https://github.com/ahmedhafezz111/ng-ecommerce/blob/main/src/app/shared/pipes/sale/sale.pipe.ts): `src/app/shared/pipes/sale/sale.pipe.ts`

### Other components

- **Shopper**
- **Ecommerce API**

## Connections

- Shopper → Route table: navigates (evidence: `src/app/app.routes.ts`)
- Route table → Page layouts: selects layout (evidence: `src/app/app.routes.ts`)
- Route table → Route guards: checks access (evidence: `src/app/app.routes.ts`)
- Route table → Sign-in pages: routes to (evidence: `src/app/app.routes.ts`)
- Route table → Catalog pages: routes to (evidence: `src/app/app.routes.ts`)
- Route table → Product listing: routes to (evidence: `src/app/app.routes.ts`)
- Route table → Product details: routes to (evidence: `src/app/app.routes.ts`)
- Route table → Category browsing: routes to (evidence: `src/app/app.routes.ts`)
- Route table → Brand browsing: routes to (evidence: `src/app/app.routes.ts`)
- Route table → Cart page: routes to (evidence: `src/app/app.routes.ts`)
- Route table → Wishlist page: routes to (evidence: `src/app/app.routes.ts`)
- Route table → Checkout page: routes to (evidence: `src/app/app.routes.ts`)
- Sign-in pages → Authentication: submits credentials (evidence: `src/app/pages/login/login.component.ts`)
- Authentication → Ecommerce API: sends auth requests (evidence: `src/app/core/services/auth/auth.service.ts`)
- Catalog pages → Product service: loads products (evidence: `src/app/pages/home/home.component.ts`)
- Catalog pages → Category service: loads categories (evidence: `src/app/pages/home/home.component.ts`)
- Catalog pages → Cart service: adds cart items (evidence: `src/app/pages/home/home.component.ts`)
- Catalog pages → Wishlist service: manages wishlist (evidence: `src/app/pages/home/home.component.ts`)
- Product listing → Product service: loads products (evidence: `src/app/pages/products/products.component.ts`)
- Product listing → Cart service: adds cart items (evidence: `src/app/pages/products/products.component.ts`)
- Product listing → Wishlist service: manages wishlist (evidence: `src/app/pages/products/products.component.ts`)
- Product details → Product service: loads product (evidence: `src/app/pages/details/details.component.ts`)
- Product details → Cart service: updates cart (evidence: `src/app/pages/details/details.component.ts`)
- Product details → Wishlist service: updates wishlist (evidence: `src/app/pages/details/details.component.ts`)
- Category browsing → Category service: loads categories (evidence: `src/app/pages/categories/categories.component.ts`)
- Brand browsing → Brand service: loads brands (evidence: `src/app/pages/brands/brands.component.ts`)
- Cart page → Cart service: manages cart (evidence: `src/app/pages/cart/cart.component.ts`)
- Wishlist page → Wishlist service: loads wishlist (evidence: `src/app/pages/wishlist/wishlist.component.ts`)
- Wishlist page → Cart service: moves to cart (evidence: `src/app/pages/wishlist/wishlist.component.ts`)
- Checkout page → Orders service: submits order (evidence: `src/app/pages/checkout/checkout.component.ts`)
- Product service → Ecommerce API: requests products (evidence: `src/app/core/services/products/products.service.ts`)
- Category service → Ecommerce API: requests categories (evidence: `src/app/core/services/categories/categories.service.ts`)
- Brand service → Ecommerce API: requests brands (evidence: `src/app/core/services/brands/brands.service.ts`)
- Cart service → Ecommerce API: manages cart data (evidence: `src/app/core/services/cart/cart.service.ts`)
- Wishlist service → Ecommerce API: manages wishlist data (evidence: `src/app/core/services/wishlist/wishlist.service.ts`)
- Orders service → Ecommerce API: submits orders (evidence: `src/app/core/services/orders/orders.service.ts`)
- HTTP configuration → HTTP interceptors: registers (evidence: `src/app/app.config.ts`)
- Page layouts → Navigation bar: renders (evidence: `src/app/layouts/auth-layout/auth-layout.component.ts`)
- Page layouts → Footer: renders (evidence: `src/app/layouts/auth-layout/auth-layout.component.ts`)
- Navigation bar → Authentication: uses identity (evidence: `src/app/layouts/navbar/navbar.component.ts`)
- Navigation bar → Cart service: reads cart state (evidence: `src/app/layouts/navbar/navbar.component.ts`)
- Catalog pages → Search filter: filters products (evidence: `src/app/pages/home/home.component.ts`)
- Catalog pages → Text formatting: formats text (evidence: `src/app/pages/home/home.component.ts`)
- Catalog pages → Sale formatting: formats sale (evidence: `src/app/pages/home/home.component.ts`)
- Product listing → Search filter: filters products (evidence: `src/app/pages/products/products.component.ts`)
- Product listing → Text formatting: formats text (evidence: `src/app/pages/products/products.component.ts`)