# paul-developer-stack/tarea-5-frontend architecture

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

- Interactive diagram: https://gitdiagram.com/paul-developer-stack/tarea-5-frontend
- Repository: https://github.com/paul-developer-stack/tarea-5-frontend

## Overview

HT-03 is a React single-page storefront backed by HT-02. A shopper browses and filters products, views details, adds items to a locally persisted cart, then signs in and submits delivery and payment-choice details to place an order. Administrators sign in and manage products through a protected CRUD view. The graph includes the documented catalog, authentication, checkout, and administration capabilities; unsampled page internals are represented at their exact paths, with relationships limited to documented or indexed references.

Main entry points: [`src/App.jsx`](https://github.com/paul-developer-stack/tarea-5-frontend/blob/main/src/App.jsx) (App Router), [`src/context/AuthContext.jsx`](https://github.com/paul-developer-stack/tarea-5-frontend/blob/main/src/context/AuthContext.jsx) (Session Context), [`src/api.js`](https://github.com/paul-developer-stack/tarea-5-frontend/blob/main/src/api.js) (Backend API Client), [`src/context/CartContext.jsx`](https://github.com/paul-developer-stack/tarea-5-frontend/blob/main/src/context/CartContext.jsx) (Cart Context)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["SPA and Navigation"]
  node_app["App Router<br/>[App.jsx]"]
  node_bootstrap["Application Bootstrap<br/>[main.jsx]"]
  node_navbar["Navigation Bar<br/>[Navbar.jsx]"]
end

subgraph group_catalog["Product Discovery"]
  node_home["Catalog Search<br/>[Home.jsx]"]
  node_product_card["Product Card<br/>[ProductCard.jsx]"]
  node_product_detail["Product Detail<br/>[ProductDetail.jsx]"]
  node_catalog_data["Catalog References<br/>[catalogo.js]"]
end

subgraph group_identity["Identity and State"]
  node_auth["Session Context<br/>[AuthContext.jsx]"]
  node_login["Login Page<br/>[Login.jsx]"]
  node_register["Registration Page<br/>[Register.jsx]"]
  node_protected["Admin Route Guard<br/>[ProtectedRoute.jsx]"]
end

subgraph group_commerce["Cart and Administration"]
  node_cart_state["Cart Context<br/>[CartContext.jsx]"]
  node_cart_page["Cart and Checkout<br/>[Cart.jsx]"]
  node_admin["Product Administration<br/>[Admin.jsx]"]
  node_api["Backend API Client<br/>[api.js]"]
end

node_shopper(("Shopper"))
node_admin_user(("Administrator"))
node_browser_storage[("Browser Local Storage")]
node_backend["HT-02 Backend"]

node_bootstrap -->|"renders"| node_app
node_bootstrap -->|"provides session"| node_auth
node_bootstrap -->|"provides cart"| node_cart_state
node_app -->|"renders"| node_navbar
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_cart_page
node_app -->|"routes to"| node_product_detail
node_app -->|"routes to"| node_login
node_app -->|"routes to"| node_register
node_app -->|"guards admin route"| node_protected
node_protected -->|"renders"| node_admin
node_navbar -->|"reads session"| node_auth
node_navbar -->|"reads item count"| node_cart_state
node_home -->|"loads products"| node_api
node_home -->|"adds products"| node_cart_state
node_home -->|"renders"| node_product_card
node_product_detail -->|"loads products"| node_api
node_product_detail -->|"adds products"| node_cart_state
node_login -->|"signs in"| node_auth
node_register -->|"registers account"| node_api
node_register -->|"uses session"| node_auth
node_protected -->|"checks role"| node_auth
node_auth -->|"authenticates"| node_api
node_cart_page -->|"reads and updates"| node_cart_state
node_cart_page -->|"checks session"| node_auth
node_cart_page -->|"submits order"| node_api
node_admin -->|"manages products"| node_api
node_admin -->|"reads token"| node_auth
node_api -->|"merges catalog references"| node_catalog_data
node_api -->|"sends API requests"| node_backend
node_cart_state -->|"persists cart"| node_browser_storage
node_auth -->|"persists session"| node_browser_storage
node_shopper -.->|"uses storefront"| node_app
node_admin_user -.->|"uses storefront"| node_app

click node_app "https://github.com/paul-developer-stack/tarea-5-frontend/blob/main/src/App.jsx"
click node_bootstrap "https://github.com/paul-developer-stack/tarea-5-frontend/blob/main/src/main.jsx"
click node_navbar "https://github.com/paul-developer-stack/tarea-5-frontend/blob/main/src/components/Navbar.jsx"
click node_home "https://github.com/paul-developer-stack/tarea-5-frontend/blob/main/src/pages/Home.jsx"
click node_product_card "https://github.com/paul-developer-stack/tarea-5-frontend/blob/main/src/components/ProductCard.jsx"
click node_product_detail "https://github.com/paul-developer-stack/tarea-5-frontend/blob/main/src/pages/ProductDetail.jsx"
click node_catalog_data "https://github.com/paul-developer-stack/tarea-5-frontend/blob/main/src/catalogo.js"
click node_auth "https://github.com/paul-developer-stack/tarea-5-frontend/blob/main/src/context/AuthContext.jsx"
click node_login "https://github.com/paul-developer-stack/tarea-5-frontend/blob/main/src/pages/Login.jsx"
click node_register "https://github.com/paul-developer-stack/tarea-5-frontend/blob/main/src/pages/Register.jsx"
click node_protected "https://github.com/paul-developer-stack/tarea-5-frontend/blob/main/src/components/ProtectedRoute.jsx"
click node_cart_state "https://github.com/paul-developer-stack/tarea-5-frontend/blob/main/src/context/CartContext.jsx"
click node_cart_page "https://github.com/paul-developer-stack/tarea-5-frontend/blob/main/src/pages/Cart.jsx"
click node_admin "https://github.com/paul-developer-stack/tarea-5-frontend/blob/main/src/pages/Admin.jsx"
click node_api "https://github.com/paul-developer-stack/tarea-5-frontend/blob/main/src/api.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_app,node_bootstrap,node_navbar toneBlue
class node_home,node_product_card,node_product_detail,node_catalog_data,node_browser_storage toneAmber
class node_auth,node_login,node_register,node_protected toneMint
class node_cart_state,node_cart_page,node_admin,node_api toneRose
class node_shopper,node_admin_user,node_backend toneIndigo
```

## Components

### SPA and Navigation

- [App Router](https://github.com/paul-developer-stack/tarea-5-frontend/blob/main/src/App.jsx): `src/App.jsx`
- [Application Bootstrap](https://github.com/paul-developer-stack/tarea-5-frontend/blob/main/src/main.jsx): `src/main.jsx`
- [Navigation Bar](https://github.com/paul-developer-stack/tarea-5-frontend/blob/main/src/components/Navbar.jsx): `src/components/Navbar.jsx`

### Product Discovery

- [Catalog Search](https://github.com/paul-developer-stack/tarea-5-frontend/blob/main/src/pages/Home.jsx): `src/pages/Home.jsx`
- [Product Card](https://github.com/paul-developer-stack/tarea-5-frontend/blob/main/src/components/ProductCard.jsx): `src/components/ProductCard.jsx`
- [Product Detail](https://github.com/paul-developer-stack/tarea-5-frontend/blob/main/src/pages/ProductDetail.jsx): `src/pages/ProductDetail.jsx`
- [Catalog References](https://github.com/paul-developer-stack/tarea-5-frontend/blob/main/src/catalogo.js): `src/catalogo.js`

### Identity and State

- [Session Context](https://github.com/paul-developer-stack/tarea-5-frontend/blob/main/src/context/AuthContext.jsx): `src/context/AuthContext.jsx`
- [Login Page](https://github.com/paul-developer-stack/tarea-5-frontend/blob/main/src/pages/Login.jsx): `src/pages/Login.jsx`
- [Registration Page](https://github.com/paul-developer-stack/tarea-5-frontend/blob/main/src/pages/Register.jsx): `src/pages/Register.jsx`
- [Admin Route Guard](https://github.com/paul-developer-stack/tarea-5-frontend/blob/main/src/components/ProtectedRoute.jsx): `src/components/ProtectedRoute.jsx`

### Cart and Administration

- [Cart Context](https://github.com/paul-developer-stack/tarea-5-frontend/blob/main/src/context/CartContext.jsx): `src/context/CartContext.jsx`
- [Cart and Checkout](https://github.com/paul-developer-stack/tarea-5-frontend/blob/main/src/pages/Cart.jsx): `src/pages/Cart.jsx`
- [Product Administration](https://github.com/paul-developer-stack/tarea-5-frontend/blob/main/src/pages/Admin.jsx): `src/pages/Admin.jsx`
- [Backend API Client](https://github.com/paul-developer-stack/tarea-5-frontend/blob/main/src/api.js): `src/api.js`

### Other components

- **Shopper**
- **Administrator**
- **Browser Local Storage**
- **HT-02 Backend**

## Connections

- Application Bootstrap → App Router: renders (evidence: `src/main.jsx`)
- Application Bootstrap → Session Context: provides session (evidence: `src/main.jsx`)
- Application Bootstrap → Cart Context: provides cart (evidence: `src/main.jsx`)
- App Router → Navigation Bar: renders (evidence: `src/App.jsx`)
- App Router → Catalog Search: routes to (evidence: `src/App.jsx`)
- App Router → Cart and Checkout: routes to (evidence: `src/App.jsx`)
- App Router → Product Detail: routes to (evidence: `src/App.jsx`)
- App Router → Login Page: routes to (evidence: `src/App.jsx`)
- App Router → Registration Page: routes to (evidence: `src/App.jsx`)
- App Router → Admin Route Guard: guards admin route (evidence: `src/App.jsx`)
- Admin Route Guard → Product Administration: renders (evidence: `src/App.jsx`)
- Navigation Bar → Session Context: reads session (evidence: `src/components/Navbar.jsx`)
- Navigation Bar → Cart Context: reads item count (evidence: `src/components/Navbar.jsx`)
- Catalog Search → Backend API Client: loads products (evidence: `src/pages/Home.jsx`)
- Catalog Search → Cart Context: adds products (evidence: `src/pages/Home.jsx`)
- Catalog Search → Product Card: renders (evidence: `src/pages/Home.jsx`)
- Product Detail → Backend API Client: loads products (evidence: `src/pages/ProductDetail.jsx`)
- Product Detail → Cart Context: adds products (evidence: `src/pages/ProductDetail.jsx`)
- Login Page → Session Context: signs in (evidence: `src/pages/Login.jsx`)
- Registration Page → Backend API Client: registers account (evidence: `src/pages/Register.jsx`)
- Registration Page → Session Context: uses session (evidence: `src/pages/Register.jsx`)
- Admin Route Guard → Session Context: checks role (evidence: `src/components/ProtectedRoute.jsx`)
- Session Context → Backend API Client: authenticates (evidence: `src/context/AuthContext.jsx`)
- Cart and Checkout → Cart Context: reads and updates (evidence: `src/pages/Cart.jsx`)
- Cart and Checkout → Session Context: checks session (evidence: `src/pages/Cart.jsx`)
- Cart and Checkout → Backend API Client: submits order (evidence: `src/pages/Cart.jsx`)
- Product Administration → Backend API Client: manages products (evidence: `src/pages/Admin.jsx`)
- Product Administration → Session Context: reads token (evidence: `src/pages/Admin.jsx`)
- Backend API Client → Catalog References: merges catalog references (evidence: `src/api.js`)
- Backend API Client → HT-02 Backend: sends API requests (evidence: `README.md`)
- Cart Context → Browser Local Storage: persists cart (evidence: `src/context/CartContext.jsx`)
- Session Context → Browser Local Storage: persists session (evidence: `src/context/AuthContext.jsx`)
- Shopper → App Router: uses storefront
- Administrator → App Router: uses storefront