# ignaci0vidal/pp3-frontend-alternativo architecture

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

- Interactive diagram: https://gitdiagram.com/ignaci0vidal/pp3-frontend-alternativo
- Repository: https://github.com/ignaci0vidal/pp3-frontend-alternativo

## Overview

This is a static ecommerce frontend: users browse and filter products, manage a cart, submit orders, and access account and order functions. The single core file, `app.js`, contains both UI workflows and a shared API client that sends requests to the configured Gateway. The graph separates those responsibilities while keeping their shared implementation path. Evidence is limited to the README and excerpts of `app.js`; unsampled interactions, including payment and receipt flows, are not asserted.

Main entry points: [`app.js`](https://github.com/ignaci0vidal/pp3-frontend-alternativo/blob/pp3/gateway-frontend/app.js) (Gateway client)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_storefront["Storefront"]
  node_catalog["Product catalog<br/>[app.js]"]
  node_product_view["Product rendering<br/>[app.js]"]
end

subgraph group_account["Account"]
  node_account_access["Account access<br/>[app.js]"]
  node_profile["Profile<br/>[app.js]"]
end

subgraph group_commerce["Commerce"]
  node_cart["Shopping cart<br/>[app.js]"]
  node_checkout["Checkout<br/>[app.js]"]
  node_orders["Order management<br/>[app.js]"]
end

node_shopper(("Shopper"))
node_api_client["Gateway client<br/>[app.js]"]
node_gateway{{"API Gateway"}}

node_shopper -->|"browses"| node_catalog
node_shopper -->|"signs in"| node_account_access
node_shopper -->|"manages"| node_cart
node_shopper -->|"submits"| node_checkout
node_shopper -->|"views"| node_orders
node_catalog -->|"requests products"| node_api_client
node_catalog -->|"renders results"| node_product_view
node_account_access -->|"sends credentials"| node_api_client
node_profile -->|"requests session"| node_api_client
node_cart -->|"loads and saves"| node_api_client
node_checkout -->|"creates or checks order"| node_api_client
node_orders -->|"loads and updates"| node_api_client
node_api_client -->|"sends HTTP requests"| node_gateway

click node_catalog "https://github.com/ignaci0vidal/pp3-frontend-alternativo/blob/pp3/gateway-frontend/app.js"
click node_product_view "https://github.com/ignaci0vidal/pp3-frontend-alternativo/blob/pp3/gateway-frontend/app.js"
click node_account_access "https://github.com/ignaci0vidal/pp3-frontend-alternativo/blob/pp3/gateway-frontend/app.js"
click node_profile "https://github.com/ignaci0vidal/pp3-frontend-alternativo/blob/pp3/gateway-frontend/app.js"
click node_cart "https://github.com/ignaci0vidal/pp3-frontend-alternativo/blob/pp3/gateway-frontend/app.js"
click node_checkout "https://github.com/ignaci0vidal/pp3-frontend-alternativo/blob/pp3/gateway-frontend/app.js"
click node_orders "https://github.com/ignaci0vidal/pp3-frontend-alternativo/blob/pp3/gateway-frontend/app.js"
click node_api_client "https://github.com/ignaci0vidal/pp3-frontend-alternativo/blob/pp3/gateway-frontend/app.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_catalog,node_product_view,node_api_client toneBlue
class node_account_access,node_profile toneAmber
class node_cart,node_checkout,node_orders,node_gateway toneMint
class node_shopper toneIndigo
```

## Components

### Storefront

- [Product catalog](https://github.com/ignaci0vidal/pp3-frontend-alternativo/blob/pp3/gateway-frontend/app.js): `app.js`
- [Product rendering](https://github.com/ignaci0vidal/pp3-frontend-alternativo/blob/pp3/gateway-frontend/app.js): `app.js`

### Account

- [Account access](https://github.com/ignaci0vidal/pp3-frontend-alternativo/blob/pp3/gateway-frontend/app.js): `app.js`
- [Profile](https://github.com/ignaci0vidal/pp3-frontend-alternativo/blob/pp3/gateway-frontend/app.js): `app.js`

### Commerce

- [Shopping cart](https://github.com/ignaci0vidal/pp3-frontend-alternativo/blob/pp3/gateway-frontend/app.js): `app.js`
- [Checkout](https://github.com/ignaci0vidal/pp3-frontend-alternativo/blob/pp3/gateway-frontend/app.js): `app.js`
- [Order management](https://github.com/ignaci0vidal/pp3-frontend-alternativo/blob/pp3/gateway-frontend/app.js): `app.js`

### Other components

- **Shopper**
- [Gateway client](https://github.com/ignaci0vidal/pp3-frontend-alternativo/blob/pp3/gateway-frontend/app.js): `app.js`
- **API Gateway**

## Connections

- Shopper → Product catalog: browses (evidence: `README.md`)
- Shopper → Account access: signs in (evidence: `app.js`)
- Shopper → Shopping cart: manages (evidence: `app.js`)
- Shopper → Checkout: submits (evidence: `app.js`)
- Shopper → Order management: views (evidence: `app.js`)
- Product catalog → Gateway client: requests products (evidence: `app.js`)
- Product catalog → Product rendering: renders results (evidence: `app.js`)
- Account access → Gateway client: sends credentials (evidence: `app.js`)
- Profile → Gateway client: requests session (evidence: `app.js`)
- Shopping cart → Gateway client: loads and saves (evidence: `app.js`)
- Checkout → Gateway client: creates or checks order (evidence: `app.js`)
- Order management → Gateway client: loads and updates (evidence: `app.js`)
- Gateway client → API Gateway: sends HTTP requests (evidence: `app.js`)