si-gon/sonido-vivo-2

How si-gon/sonido-vivo-2 works

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: repositorioPedidos.ts Order repository · repositorioProductos.ts Product repository · AdminUsuarios.tsx User management · App.tsx Route table

Components 29

Routing and layouts

Route table src/App.tsx
Public layout src/Componentes/organismos/LayoutPublico.tsx
Admin layout src/Componentes/organismos/LayoutAdmin.tsx
Role guard src/Componentes/organismos/RutaPrivada.tsx
Form fields src/Componentes/moleculas/CampoFormulario.tsx
Selection field src/Componentes/moleculas/CampoSeleccion.tsx

Storefront experience

Catalog and offers src/Paginas/Catalogo.tsx
Product detail src/Paginas/DetalleProducto.tsx
News src/Paginas/Novedades.tsx
Contact src/Paginas/Contacto.tsx

Cart and orders

Cart and checkout src/Paginas/Carrito.tsx
Dispatch details src/Paginas/Despacho.tsx
Purchase outcome src/Paginas/CompraExitosa.tsx

Accounts and administration

Login and registration src/Paginas/Registro.tsx
Product management src/Paginas/AdminProductos.tsx
User management src/Paginas/AdminUsuarios.tsx
Order management src/Paginas/AdminPedidos.tsx
Store dashboard src/Paginas/AdminDashboard.tsx

Local data and utilities

Product catalog src/datos/productos.ts
Product repository src/datos/repositorioProductos.ts
Cart state src/datos/carrito.ts
Order repository src/datos/repositorioPedidos.ts
User repository src/datos/repositorioUsuarios.ts
Session state src/datos/sesion.ts
Price and date formatting src/utilidades/formato.ts
RUT validation src/utilidades/rut.ts
Regions src/datos/regiones.ts

Other components

Shopper
Administrator

Connections 41

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

Drawn by GitDiagram on November 11, 2026 from the repository's file tree, README and source files. Read as Markdown ·