# si-gon/sonido-vivo-2 architecture

> Architecture diagram of the GitHub repository si-gon/sonido-vivo-2, 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/si-gon/sonido-vivo-2
- Repository: https://github.com/si-gon/sonido-vivo-2

## Overview

Sonido Vivo is a React storefront with simulated localStorage persistence, not a backend-backed shop. Shoppers browse and filter products, build a stock-limited cart, then create an order, provide dispatch details, and see a purchase outcome; account registration and sign-in support customer and administrator roles. Administrators manage products, users, and order status. The graph preserves the README’s news, contact, and public-site capabilities. Unexcerpted page implementations are represented by their exact paths; their internal calls are omitted where source evidence was unavailable.

Main entry points: [`src/datos/repositorioPedidos.ts`](https://github.com/si-gon/sonido-vivo-2/blob/sigon/src/datos/repositorioPedidos.ts) (Order repository), [`src/datos/repositorioProductos.ts`](https://github.com/si-gon/sonido-vivo-2/blob/sigon/src/datos/repositorioProductos.ts) (Product repository), [`src/Paginas/AdminUsuarios.tsx`](https://github.com/si-gon/sonido-vivo-2/blob/sigon/src/Paginas/AdminUsuarios.tsx) (User management), [`src/App.tsx`](https://github.com/si-gon/sonido-vivo-2/blob/sigon/src/App.tsx) (Route table)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_routing["Routing and layouts"]
  node_app["Route table<br/>[App.tsx]"]
  node_public_layout["Public layout<br/>[LayoutPublico.tsx]"]
  node_admin_layout["Admin layout<br/>[LayoutAdmin.tsx]"]
  node_private_route["Role guard<br/>[RutaPrivada.tsx]"]
  node_form_fields["Form fields"]
  node_select_field["Selection field<br/>[CampoSeleccion.tsx]"]
end

subgraph group_storefront["Storefront experience"]
  node_catalog["Catalog and offers<br/>[Catalogo.tsx]"]
  node_product_detail["Product detail"]
  node_news["News<br/>[Novedades.tsx]"]
  node_contact["Contact<br/>[Contacto.tsx]"]
end

subgraph group_commerce["Cart and orders"]
  node_cart_page["Cart and checkout<br/>[Carrito.tsx]"]
  node_dispatch["Dispatch details<br/>[Despacho.tsx]"]
  node_order_result["Purchase outcome<br/>[CompraExitosa.tsx]"]
end

subgraph group_admin["Accounts and administration"]
  node_login_register["Login and registration<br/>[Registro.tsx]"]
  node_admin_products["Product management<br/>[AdminProductos.tsx]"]
  node_admin_users["User management<br/>[AdminUsuarios.tsx]"]
  node_admin_orders["Order management<br/>[AdminPedidos.tsx]"]
  node_dashboard["Store dashboard<br/>[AdminDashboard.tsx]"]
end

subgraph group_data["Local data and utilities"]
  node_product_data[("Product catalog<br/>[productos.ts]")]
  node_product_repo[("Product repository")]
  node_cart_store[("Cart state<br/>[carrito.ts]")]
  node_order_repo[("Order repository")]
  node_user_repo[("User repository")]
  node_session[("Session state<br/>[sesion.ts]")]
  node_price_format["Price and date formatting<br/>[formato.ts]"]
  node_rut_validation["RUT validation<br/>[rut.ts]"]
  node_regions[("Regions<br/>[regiones.ts]")]
end

node_shopper(("Shopper"))
node_administrator(("Administrator"))

node_shopper -->|"opens routes"| node_app
node_administrator -->|"opens routes"| node_app
node_app -->|"routes public pages"| node_public_layout
node_app -->|"routes admin pages"| node_admin_layout
node_app -->|"guards admin routes"| node_private_route
node_public_layout -.->|"hosts storefront"| node_catalog
node_catalog -->|"lists products"| node_product_repo
node_catalog -->|"adds products"| node_cart_store
node_product_detail -->|"loads product"| node_product_repo
node_product_detail -->|"adds product"| node_cart_store
node_product_repo -->|"loads base catalog"| node_product_data
node_cart_page -->|"reads and updates"| node_cart_store
node_cart_page -->|"checks stock"| node_product_repo
node_cart_page -->|"checks session"| node_session
node_cart_page -->|"creates order"| node_order_repo
node_dispatch -->|"saves dispatch"| node_order_repo
node_order_result -->|"loads order"| node_order_repo
node_order_repo -->|"deducts stock"| node_product_repo
node_order_repo -->|"reads buyer"| node_session
node_login_register -->|"registers account"| node_user_repo
node_user_repo -.->|"session on login"| node_session
node_private_route -->|"checks role"| node_session
node_admin_products -->|"manages products"| node_product_repo
node_admin_users -->|"manages users"| node_user_repo
node_admin_users -->|"lists purchase history"| node_order_repo
node_admin_users -->|"validates RUT"| node_rut_validation
node_admin_users -.->|"uses regions"| node_regions
node_admin_orders -->|"manages orders"| node_order_repo
node_dashboard -->|"summarizes orders"| node_order_repo
node_dashboard -->|"summarizes products"| node_product_repo
node_dashboard -->|"summarizes users"| node_user_repo
node_form_fields -.->|"shares form layer"| node_select_field
node_admin_products -->|"renders fields"| node_form_fields
node_admin_products -->|"renders selectors"| node_select_field
node_admin_users -->|"renders fields"| node_form_fields
node_admin_users -->|"renders selectors"| node_select_field
node_contact -->|"renders fields"| node_form_fields
node_contact -->|"renders selectors"| node_select_field
node_cart_store -->|"checks stock"| node_product_repo
node_cart_store -->|"calculates price"| node_price_format
node_news -.->|"reads news data"| node_product_data

click node_app "https://github.com/si-gon/sonido-vivo-2/blob/sigon/src/App.tsx"
click node_public_layout "https://github.com/si-gon/sonido-vivo-2/blob/sigon/src/Componentes/organismos/LayoutPublico.tsx"
click node_admin_layout "https://github.com/si-gon/sonido-vivo-2/blob/sigon/src/Componentes/organismos/LayoutAdmin.tsx"
click node_catalog "https://github.com/si-gon/sonido-vivo-2/blob/sigon/src/Paginas/Catalogo.tsx"
click node_product_detail "https://github.com/si-gon/sonido-vivo-2/blob/sigon/src/Paginas/DetalleProducto.tsx"
click node_news "https://github.com/si-gon/sonido-vivo-2/blob/sigon/src/Paginas/Novedades.tsx"
click node_contact "https://github.com/si-gon/sonido-vivo-2/blob/sigon/src/Paginas/Contacto.tsx"
click node_product_data "https://github.com/si-gon/sonido-vivo-2/blob/sigon/src/datos/productos.ts"
click node_product_repo "https://github.com/si-gon/sonido-vivo-2/blob/sigon/src/datos/repositorioProductos.ts"
click node_cart_page "https://github.com/si-gon/sonido-vivo-2/blob/sigon/src/Paginas/Carrito.tsx"
click node_cart_store "https://github.com/si-gon/sonido-vivo-2/blob/sigon/src/datos/carrito.ts"
click node_dispatch "https://github.com/si-gon/sonido-vivo-2/blob/sigon/src/Paginas/Despacho.tsx"
click node_order_result "https://github.com/si-gon/sonido-vivo-2/blob/sigon/src/Paginas/CompraExitosa.tsx"
click node_order_repo "https://github.com/si-gon/sonido-vivo-2/blob/sigon/src/datos/repositorioPedidos.ts"
click node_login_register "https://github.com/si-gon/sonido-vivo-2/blob/sigon/src/Paginas/Registro.tsx"
click node_user_repo "https://github.com/si-gon/sonido-vivo-2/blob/sigon/src/datos/repositorioUsuarios.ts"
click node_session "https://github.com/si-gon/sonido-vivo-2/blob/sigon/src/datos/sesion.ts"
click node_private_route "https://github.com/si-gon/sonido-vivo-2/blob/sigon/src/Componentes/organismos/RutaPrivada.tsx"
click node_admin_products "https://github.com/si-gon/sonido-vivo-2/blob/sigon/src/Paginas/AdminProductos.tsx"
click node_admin_users "https://github.com/si-gon/sonido-vivo-2/blob/sigon/src/Paginas/AdminUsuarios.tsx"
click node_admin_orders "https://github.com/si-gon/sonido-vivo-2/blob/sigon/src/Paginas/AdminPedidos.tsx"
click node_dashboard "https://github.com/si-gon/sonido-vivo-2/blob/sigon/src/Paginas/AdminDashboard.tsx"
click node_price_format "https://github.com/si-gon/sonido-vivo-2/blob/sigon/src/utilidades/formato.ts"
click node_form_fields "https://github.com/si-gon/sonido-vivo-2/blob/sigon/src/Componentes/moleculas/CampoFormulario.tsx"
click node_select_field "https://github.com/si-gon/sonido-vivo-2/blob/sigon/src/Componentes/moleculas/CampoSeleccion.tsx"
click node_rut_validation "https://github.com/si-gon/sonido-vivo-2/blob/sigon/src/utilidades/rut.ts"
click node_regions "https://github.com/si-gon/sonido-vivo-2/blob/sigon/src/datos/regiones.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_app,node_public_layout,node_admin_layout,node_private_route,node_form_fields,node_select_field toneBlue
class node_catalog,node_product_detail,node_news,node_contact toneAmber
class node_cart_page,node_dispatch,node_order_result toneMint
class node_login_register,node_admin_products,node_admin_users,node_admin_orders,node_dashboard toneRose
class node_product_data,node_product_repo,node_cart_store,node_order_repo,node_user_repo,node_session,node_price_format,node_rut_validation,node_regions,node_shopper,node_administrator toneIndigo
```

## Components

### Routing and layouts

- [Route table](https://github.com/si-gon/sonido-vivo-2/blob/sigon/src/App.tsx): `src/App.tsx`
- [Public layout](https://github.com/si-gon/sonido-vivo-2/blob/sigon/src/Componentes/organismos/LayoutPublico.tsx): `src/Componentes/organismos/LayoutPublico.tsx`
- [Admin layout](https://github.com/si-gon/sonido-vivo-2/blob/sigon/src/Componentes/organismos/LayoutAdmin.tsx): `src/Componentes/organismos/LayoutAdmin.tsx`
- [Role guard](https://github.com/si-gon/sonido-vivo-2/blob/sigon/src/Componentes/organismos/RutaPrivada.tsx): `src/Componentes/organismos/RutaPrivada.tsx`
- [Form fields](https://github.com/si-gon/sonido-vivo-2/blob/sigon/src/Componentes/moleculas/CampoFormulario.tsx): `src/Componentes/moleculas/CampoFormulario.tsx`
- [Selection field](https://github.com/si-gon/sonido-vivo-2/blob/sigon/src/Componentes/moleculas/CampoSeleccion.tsx): `src/Componentes/moleculas/CampoSeleccion.tsx`

### Storefront experience

- [Catalog and offers](https://github.com/si-gon/sonido-vivo-2/blob/sigon/src/Paginas/Catalogo.tsx): `src/Paginas/Catalogo.tsx`
- [Product detail](https://github.com/si-gon/sonido-vivo-2/blob/sigon/src/Paginas/DetalleProducto.tsx): `src/Paginas/DetalleProducto.tsx`
- [News](https://github.com/si-gon/sonido-vivo-2/blob/sigon/src/Paginas/Novedades.tsx): `src/Paginas/Novedades.tsx`
- [Contact](https://github.com/si-gon/sonido-vivo-2/blob/sigon/src/Paginas/Contacto.tsx): `src/Paginas/Contacto.tsx`

### Cart and orders

- [Cart and checkout](https://github.com/si-gon/sonido-vivo-2/blob/sigon/src/Paginas/Carrito.tsx): `src/Paginas/Carrito.tsx`
- [Dispatch details](https://github.com/si-gon/sonido-vivo-2/blob/sigon/src/Paginas/Despacho.tsx): `src/Paginas/Despacho.tsx`
- [Purchase outcome](https://github.com/si-gon/sonido-vivo-2/blob/sigon/src/Paginas/CompraExitosa.tsx): `src/Paginas/CompraExitosa.tsx`

### Accounts and administration

- [Login and registration](https://github.com/si-gon/sonido-vivo-2/blob/sigon/src/Paginas/Registro.tsx): `src/Paginas/Registro.tsx`
- [Product management](https://github.com/si-gon/sonido-vivo-2/blob/sigon/src/Paginas/AdminProductos.tsx): `src/Paginas/AdminProductos.tsx`
- [User management](https://github.com/si-gon/sonido-vivo-2/blob/sigon/src/Paginas/AdminUsuarios.tsx): `src/Paginas/AdminUsuarios.tsx`
- [Order management](https://github.com/si-gon/sonido-vivo-2/blob/sigon/src/Paginas/AdminPedidos.tsx): `src/Paginas/AdminPedidos.tsx`
- [Store dashboard](https://github.com/si-gon/sonido-vivo-2/blob/sigon/src/Paginas/AdminDashboard.tsx): `src/Paginas/AdminDashboard.tsx`

### Local data and utilities

- [Product catalog](https://github.com/si-gon/sonido-vivo-2/blob/sigon/src/datos/productos.ts): `src/datos/productos.ts`
- [Product repository](https://github.com/si-gon/sonido-vivo-2/blob/sigon/src/datos/repositorioProductos.ts): `src/datos/repositorioProductos.ts`
- [Cart state](https://github.com/si-gon/sonido-vivo-2/blob/sigon/src/datos/carrito.ts): `src/datos/carrito.ts`
- [Order repository](https://github.com/si-gon/sonido-vivo-2/blob/sigon/src/datos/repositorioPedidos.ts): `src/datos/repositorioPedidos.ts`
- [User repository](https://github.com/si-gon/sonido-vivo-2/blob/sigon/src/datos/repositorioUsuarios.ts): `src/datos/repositorioUsuarios.ts`
- [Session state](https://github.com/si-gon/sonido-vivo-2/blob/sigon/src/datos/sesion.ts): `src/datos/sesion.ts`
- [Price and date formatting](https://github.com/si-gon/sonido-vivo-2/blob/sigon/src/utilidades/formato.ts): `src/utilidades/formato.ts`
- [RUT validation](https://github.com/si-gon/sonido-vivo-2/blob/sigon/src/utilidades/rut.ts): `src/utilidades/rut.ts`
- [Regions](https://github.com/si-gon/sonido-vivo-2/blob/sigon/src/datos/regiones.ts): `src/datos/regiones.ts`

### Other components

- **Shopper**
- **Administrator**

## Connections

- Shopper → Route table: opens routes (evidence: `src/App.tsx`)
- Administrator → Route table: opens routes (evidence: `src/App.tsx`)
- Route table → Public layout: routes public pages (evidence: `src/App.tsx`)
- Route table → Admin layout: routes admin pages (evidence: `src/App.tsx`)
- Route table → Role guard: guards admin routes (evidence: `src/App.tsx`)
- Public layout → Catalog and offers: hosts storefront
- Catalog and offers → Product repository: lists products (evidence: `src/Paginas/Catalogo.tsx`)
- Catalog and offers → Cart state: adds products (evidence: `src/Paginas/Catalogo.tsx`)
- Product detail → Product repository: loads product (evidence: `src/Paginas/DetalleProducto.tsx`)
- Product detail → Cart state: adds product (evidence: `src/Paginas/DetalleProducto.tsx`)
- Product repository → Product catalog: loads base catalog (evidence: `src/datos/repositorioProductos.ts`)
- Cart and checkout → Cart state: reads and updates (evidence: `src/Paginas/Carrito.tsx`)
- Cart and checkout → Product repository: checks stock (evidence: `src/Paginas/Carrito.tsx`)
- Cart and checkout → Session state: checks session (evidence: `src/Paginas/Carrito.tsx`)
- Cart and checkout → Order repository: creates order (evidence: `src/Paginas/Carrito.tsx`)
- Dispatch details → Order repository: saves dispatch (evidence: `src/Paginas/Despacho.tsx`)
- Purchase outcome → Order repository: loads order (evidence: `src/Paginas/CompraExitosa.tsx`)
- Order repository → Product repository: deducts stock (evidence: `src/datos/repositorioPedidos.ts`)
- Order repository → Session state: reads buyer (evidence: `src/datos/repositorioPedidos.ts`)
- Login and registration → User repository: registers account (evidence: `src/Paginas/Registro.tsx`)
- User repository → Session state: session on login (evidence: `src/datos/sesion.ts`)
- Role guard → Session state: checks role (evidence: `src/Componentes/organismos/RutaPrivada.tsx`)
- Product management → Product repository: manages products (evidence: `src/Paginas/AdminProductos.tsx`)
- User management → User repository: manages users (evidence: `src/Paginas/AdminUsuarios.tsx`)
- User management → Order repository: lists purchase history (evidence: `src/Paginas/AdminUsuarios.tsx`)
- User management → RUT validation: validates RUT (evidence: `src/Paginas/AdminUsuarios.tsx`)
- User management → Regions: uses regions (evidence: `src/Paginas/AdminUsuarios.tsx`)
- Order management → Order repository: manages orders (evidence: `src/Paginas/AdminPedidos.tsx`)
- Store dashboard → Order repository: summarizes orders (evidence: `src/Paginas/AdminDashboard.tsx`)
- Store dashboard → Product repository: summarizes products (evidence: `src/Paginas/AdminDashboard.tsx`)
- Store dashboard → User repository: summarizes users (evidence: `src/Paginas/AdminDashboard.tsx`)
- Form fields → Selection field: shares form layer
- Product management → Form fields: renders fields (evidence: `src/Paginas/AdminProductos.tsx`)
- Product management → Selection field: renders selectors (evidence: `src/Paginas/AdminProductos.tsx`)
- User management → Form fields: renders fields (evidence: `src/Paginas/AdminUsuarios.tsx`)
- User management → Selection field: renders selectors (evidence: `src/Paginas/AdminUsuarios.tsx`)
- Contact → Form fields: renders fields (evidence: `src/Paginas/Contacto.tsx`)
- Contact → Selection field: renders selectors (evidence: `src/Paginas/Contacto.tsx`)
- Cart state → Product repository: checks stock (evidence: `src/datos/carrito.ts`)
- Cart state → Price and date formatting: calculates price (evidence: `src/datos/carrito.ts`)
- News → Product catalog: reads news data