# abhimanyugit447/shopping-cart-app-ngrx architecture

> Architecture diagram of the GitHub repository abhimanyugit447/shopping-cart-app-ngrx, 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/abhimanyugit447/shopping-cart-app-ngrx
- Repository: https://github.com/abhimanyugit447/shopping-cart-app-ngrx

## Overview

This is an Angular/NgRx shopping-cart application. A shopper opens the product list, which dispatches a product-load action; an effect fetches products, and the UI can then add products to the cart. The cart supports quantity changes, removal, clearing, and calculated totals. Product loading and cart contents are distinct state domains. The sampled source supports the product-fetch and cart-state flows; storage persistence is configured in the app setup, but its runtime details are not sampled.

Main entry points: [`src/app/product-list/product-list.component.ts`](https://github.com/abhimanyugit447/shopping-cart-app-ngrx/blob/master/src/app/product-list/product-list.component.ts) (Product List), [`src/app/app.config.ts`](https://github.com/abhimanyugit447/shopping-cart-app-ngrx/blob/master/src/app/app.config.ts) (App Configuration), [`src/app/products/product.actions.ts`](https://github.com/abhimanyugit447/shopping-cart-app-ngrx/blob/master/src/app/products/product.actions.ts) (Product Actions), [`src/app/products/product.effects.ts`](https://github.com/abhimanyugit447/shopping-cart-app-ngrx/blob/master/src/app/products/product.effects.ts) (Product Effects)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ui["Shopping UI"]
  node_shell["App Shell<br/>[app.component.ts]"]
  node_product_ui["Product List"]
  node_cart_ui["Shopping Cart"]
end

subgraph group_products["Product Catalog"]
  node_product_actions["Product Actions<br/>[product.actions.ts]"]
  node_product_effects["Product Effects<br/>[product.effects.ts]"]
  node_product_service["Product Service<br/>[product.service.ts]"]
  node_product_reducer["Product Reducer<br/>[product.reducer.ts]"]
  node_product_selectors["Product Selectors"]
end

subgraph group_cart["Cart State"]
  node_cart_actions["Cart Actions<br/>[cart.actions.ts]"]
  node_cart_reducer["Cart Reducer<br/>[cart.reducer.ts]"]
  node_cart_selectors["Cart Selectors<br/>[cart.selectors.ts]"]
end

subgraph group_setup["App State Setup"]
  node_bootstrap["App Bootstrap<br/>[main.ts]"]
  node_app_config["App Configuration<br/>[app.config.ts]"]
end

node_shopper(("Shopper"))
node_product_api["Products API"]
node_local_storage[("Browser Storage")]

node_bootstrap -->|"bootstraps"| node_shell
node_shell -->|"renders"| node_product_ui
node_shell -->|"renders"| node_cart_ui
node_shopper -->|"browses"| node_product_ui
node_product_ui -->|"dispatches load"| node_product_actions
node_product_ui -->|"dispatches add"| node_cart_actions
node_product_ui -->|"selects"| node_product_selectors
node_product_actions -->|"triggers"| node_product_effects
node_product_effects -->|"calls"| node_product_service
node_product_service -->|"GET products"| node_product_api
node_product_effects -->|"dispatches result"| node_product_actions
node_product_actions -->|"updates state"| node_product_reducer
node_product_reducer -->|"provides state"| node_product_selectors
node_cart_ui -->|"selects"| node_cart_selectors
node_cart_ui -->|"dispatches changes"| node_cart_actions
node_cart_actions -->|"updates state"| node_cart_reducer
node_cart_reducer -->|"provides state"| node_cart_selectors
node_cart_selectors -->|"reads products"| node_product_selectors
node_app_config -->|"registers"| node_product_effects
node_app_config -->|"registers"| node_product_reducer
node_app_config -->|"registers"| node_cart_reducer
node_app_config -.->|"syncs cart"| node_local_storage

click node_bootstrap "https://github.com/abhimanyugit447/shopping-cart-app-ngrx/blob/master/src/main.ts"
click node_shell "https://github.com/abhimanyugit447/shopping-cart-app-ngrx/blob/master/src/app/app.component.ts"
click node_product_ui "https://github.com/abhimanyugit447/shopping-cart-app-ngrx/blob/master/src/app/product-list/product-list.component.ts"
click node_cart_ui "https://github.com/abhimanyugit447/shopping-cart-app-ngrx/blob/master/src/app/shopping-cart/shopping-cart.component.ts"
click node_product_actions "https://github.com/abhimanyugit447/shopping-cart-app-ngrx/blob/master/src/app/products/product.actions.ts"
click node_product_effects "https://github.com/abhimanyugit447/shopping-cart-app-ngrx/blob/master/src/app/products/product.effects.ts"
click node_product_service "https://github.com/abhimanyugit447/shopping-cart-app-ngrx/blob/master/src/app/products/product.service.ts"
click node_product_reducer "https://github.com/abhimanyugit447/shopping-cart-app-ngrx/blob/master/src/app/products/product.reducer.ts"
click node_product_selectors "https://github.com/abhimanyugit447/shopping-cart-app-ngrx/blob/master/src/app/products/product.selectors.ts"
click node_cart_actions "https://github.com/abhimanyugit447/shopping-cart-app-ngrx/blob/master/src/app/cart/cart.actions.ts"
click node_cart_reducer "https://github.com/abhimanyugit447/shopping-cart-app-ngrx/blob/master/src/app/cart/cart.reducer.ts"
click node_cart_selectors "https://github.com/abhimanyugit447/shopping-cart-app-ngrx/blob/master/src/app/cart/cart.selectors.ts"
click node_app_config "https://github.com/abhimanyugit447/shopping-cart-app-ngrx/blob/master/src/app/app.config.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_shell,node_product_ui,node_cart_ui toneBlue
class node_product_actions,node_product_effects,node_product_service,node_product_reducer,node_product_selectors,node_local_storage toneAmber
class node_cart_actions,node_cart_reducer,node_cart_selectors,node_product_api toneMint
class node_bootstrap,node_app_config toneRose
class node_shopper toneIndigo
```

## Components

### Shopping UI

- [App Shell](https://github.com/abhimanyugit447/shopping-cart-app-ngrx/blob/master/src/app/app.component.ts): `src/app/app.component.ts`
- [Product List](https://github.com/abhimanyugit447/shopping-cart-app-ngrx/blob/master/src/app/product-list/product-list.component.ts): `src/app/product-list/product-list.component.ts`
- [Shopping Cart](https://github.com/abhimanyugit447/shopping-cart-app-ngrx/blob/master/src/app/shopping-cart/shopping-cart.component.ts): `src/app/shopping-cart/shopping-cart.component.ts`

### Product Catalog

- [Product Actions](https://github.com/abhimanyugit447/shopping-cart-app-ngrx/blob/master/src/app/products/product.actions.ts): `src/app/products/product.actions.ts`
- [Product Effects](https://github.com/abhimanyugit447/shopping-cart-app-ngrx/blob/master/src/app/products/product.effects.ts): `src/app/products/product.effects.ts`
- [Product Service](https://github.com/abhimanyugit447/shopping-cart-app-ngrx/blob/master/src/app/products/product.service.ts): `src/app/products/product.service.ts`
- [Product Reducer](https://github.com/abhimanyugit447/shopping-cart-app-ngrx/blob/master/src/app/products/product.reducer.ts): `src/app/products/product.reducer.ts`
- [Product Selectors](https://github.com/abhimanyugit447/shopping-cart-app-ngrx/blob/master/src/app/products/product.selectors.ts): `src/app/products/product.selectors.ts`

### Cart State

- [Cart Actions](https://github.com/abhimanyugit447/shopping-cart-app-ngrx/blob/master/src/app/cart/cart.actions.ts): `src/app/cart/cart.actions.ts`
- [Cart Reducer](https://github.com/abhimanyugit447/shopping-cart-app-ngrx/blob/master/src/app/cart/cart.reducer.ts): `src/app/cart/cart.reducer.ts`
- [Cart Selectors](https://github.com/abhimanyugit447/shopping-cart-app-ngrx/blob/master/src/app/cart/cart.selectors.ts): `src/app/cart/cart.selectors.ts`

### App State Setup

- [App Bootstrap](https://github.com/abhimanyugit447/shopping-cart-app-ngrx/blob/master/src/main.ts): `src/main.ts`
- [App Configuration](https://github.com/abhimanyugit447/shopping-cart-app-ngrx/blob/master/src/app/app.config.ts): `src/app/app.config.ts`

### Other components

- **Shopper**
- **Products API**
- **Browser Storage**

## Connections

- App Bootstrap → App Shell: bootstraps
- App Shell → Product List: renders
- App Shell → Shopping Cart: renders
- Shopper → Product List: browses
- Product List → Product Actions: dispatches load
- Product List → Cart Actions: dispatches add
- Product List → Product Selectors: selects
- Product Actions → Product Effects: triggers
- Product Effects → Product Service: calls
- Product Service → Products API: GET products
- Product Effects → Product Actions: dispatches result
- Product Actions → Product Reducer: updates state
- Product Reducer → Product Selectors: provides state
- Shopping Cart → Cart Selectors: selects
- Shopping Cart → Cart Actions: dispatches changes
- Cart Actions → Cart Reducer: updates state
- Cart Reducer → Cart Selectors: provides state
- Cart Selectors → Product Selectors: reads products
- App Configuration → Product Effects: registers
- App Configuration → Product Reducer: registers
- App Configuration → Cart Reducer: registers
- App Configuration → Browser Storage: syncs cart