# naticasta777-ai/cromoverso architecture

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

- Interactive diagram: https://gitdiagram.com/naticasta777-ai/cromoverso
- Repository: https://github.com/naticasta777-ai/cromoverso

## Overview

Cromoverso is a React web interface for a collectible-card album. Visitors enter through the public home page, browse worlds, then open a world catalog and filter/search its cards. Supporting branches provide API-backed interface text and catalog data, plus language, cookie-consent, and accessibility preferences. The README documents the API capabilities; unsampled page/component internals are represented only where the README or source index supports them.

Main entry points: [`src/pages/CatalogoMundo.jsx`](https://github.com/naticasta777-ai/cromoverso/blob/main/src/pages/CatalogoMundo.jsx) (World catalog page), [`src/App.jsx`](https://github.com/naticasta777-ai/cromoverso/blob/main/src/App.jsx) (Route dispatcher), [`src/pages/Inicio.jsx`](https://github.com/naticasta777-ai/cromoverso/blob/main/src/pages/Inicio.jsx) (Home page), [`src/components/LayoutPublico/LayoutPublico.jsx`](https://github.com/naticasta777-ai/cromoverso/blob/main/src/components/LayoutPublico/LayoutPublico.jsx) (Public layout)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_routing["Routing and shell"]
  node_app["Route dispatcher<br/>[App.jsx]"]
  node_public_layout["Public layout<br/>[LayoutPublico.jsx]"]
  node_navbar["Navigation bar<br/>[Navbar.jsx]"]
end

subgraph group_discovery["World discovery"]
  node_home["Home page<br/>[Inicio.jsx]"]
  node_worlds["Worlds page<br/>[Mundos.jsx]"]
  node_home_sections["Home sections<br/>[SeccionMundos.jsx]"]
  node_home_hero["Home hero<br/>[HeroCromoverso.jsx]"]
end

subgraph group_catalog["Card catalog"]
  node_catalog_page["World catalog page<br/>[CatalogoMundo.jsx]"]
  node_catalog_hook["Catalog data hook<br/>[useCatalogo.js]"]
  node_world_hook["World data hook<br/>[useMundos.js]"]
  node_world_header["World header<br/>[CabeceraMundo.jsx]"]
  node_filters["Catalog filters"]
  node_mobile_filters["Mobile filters<br/>[FiltrosMovil.jsx]"]
  node_card_grid["Card grid<br/>[GrillaCromos.jsx]"]
  node_card["Card rendering<br/>[Cromo.jsx]"]
end

subgraph group_shared["Data and preferences"]
  node_api_hook["API request hook<br/>[useApi.js]"]
  node_api_client["API client<br/>[cliente.js]"]
  node_text_context["Interface language text<br/>[TextosContext.jsx]"]
  node_preferences["Consent and language"]
  node_accessibility["Accessibility settings"]
  node_cookie_manager["Cookie manager<br/>[GestorCookies.jsx]"]
  node_accessibility_panel["Accessibility panel"]
end

node_visitor(("Visitor"))
node_service{{"Cromoverso REST API"}}
node_cookie_storage[("Browser cookies")]

node_visitor -->|"opens app"| node_app
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_worlds
node_app -->|"routes to"| node_catalog_page
node_home -->|"renders"| node_home_hero
node_home -->|"renders"| node_home_sections
node_worlds -->|"loads worlds"| node_world_hook
node_catalog_page -->|"loads catalog"| node_catalog_hook
node_catalog_page -->|"renders"| node_world_header
node_catalog_page -->|"renders"| node_filters
node_catalog_page -->|"renders"| node_mobile_filters
node_catalog_page -->|"renders"| node_card_grid
node_card_grid -->|"renders cards"| node_card
node_catalog_hook -->|"uses worlds"| node_world_hook
node_catalog_hook -->|"requests data"| node_api_hook
node_world_hook -->|"requests data"| node_api_hook
node_api_hook -->|"calls"| node_api_client
node_api_client -.->|"requests API"| node_service
node_home -->|"uses layout"| node_public_layout
node_catalog_page -->|"uses layout"| node_public_layout
node_public_layout -->|"renders"| node_navbar
node_text_context -->|"fetches translations"| node_api_client
node_text_context -->|"reads language"| node_preferences
node_public_layout -->|"reads language"| node_preferences
node_app -->|"mounts"| node_cookie_manager
node_app -->|"mounts"| node_accessibility_panel
node_accessibility_panel -->|"controls"| node_accessibility
node_accessibility -->|"checks consent"| node_preferences
node_preferences -->|"reads and writes"| node_cookie_storage
node_accessibility -->|"reads and writes"| node_cookie_storage

click node_app "https://github.com/naticasta777-ai/cromoverso/blob/main/src/App.jsx"
click node_home "https://github.com/naticasta777-ai/cromoverso/blob/main/src/pages/Inicio.jsx"
click node_worlds "https://github.com/naticasta777-ai/cromoverso/blob/main/src/pages/Mundos.jsx"
click node_home_sections "https://github.com/naticasta777-ai/cromoverso/blob/main/src/components/SeccionMundos/SeccionMundos.jsx"
click node_home_hero "https://github.com/naticasta777-ai/cromoverso/blob/main/src/components/HeroCromoverso/HeroCromoverso.jsx"
click node_catalog_page "https://github.com/naticasta777-ai/cromoverso/blob/main/src/pages/CatalogoMundo.jsx"
click node_catalog_hook "https://github.com/naticasta777-ai/cromoverso/blob/main/src/hooks/useCatalogo.js"
click node_world_hook "https://github.com/naticasta777-ai/cromoverso/blob/main/src/hooks/useMundos.js"
click node_api_hook "https://github.com/naticasta777-ai/cromoverso/blob/main/src/hooks/useApi.js"
click node_api_client "https://github.com/naticasta777-ai/cromoverso/blob/main/src/api/cliente.js"
click node_world_header "https://github.com/naticasta777-ai/cromoverso/blob/main/src/components/CabeceraMundo/CabeceraMundo.jsx"
click node_filters "https://github.com/naticasta777-ai/cromoverso/blob/main/src/components/BarraLateralMundo/BarraLateralMundo.jsx"
click node_mobile_filters "https://github.com/naticasta777-ai/cromoverso/blob/main/src/components/FiltrosMovil/FiltrosMovil.jsx"
click node_card_grid "https://github.com/naticasta777-ai/cromoverso/blob/main/src/components/GrillaCromos/GrillaCromos.jsx"
click node_card "https://github.com/naticasta777-ai/cromoverso/blob/main/src/components/Cromo/Cromo.jsx"
click node_public_layout "https://github.com/naticasta777-ai/cromoverso/blob/main/src/components/LayoutPublico/LayoutPublico.jsx"
click node_navbar "https://github.com/naticasta777-ai/cromoverso/blob/main/src/components/Navbar/Navbar.jsx"
click node_text_context "https://github.com/naticasta777-ai/cromoverso/blob/main/src/context/TextosContext.jsx"
click node_preferences "https://github.com/naticasta777-ai/cromoverso/blob/main/src/context/PreferenciasContext.jsx"
click node_accessibility "https://github.com/naticasta777-ai/cromoverso/blob/main/src/context/AccesibilidadContext.jsx"
click node_cookie_manager "https://github.com/naticasta777-ai/cromoverso/blob/main/src/components/GestorCookies/GestorCookies.jsx"
click node_accessibility_panel "https://github.com/naticasta777-ai/cromoverso/blob/main/src/components/PanelAccesibilidad/PanelAccesibilidad.jsx"

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_navbar toneBlue
class node_home,node_worlds,node_home_sections,node_home_hero,node_cookie_storage toneAmber
class node_catalog_page,node_catalog_hook,node_world_hook,node_world_header,node_filters,node_mobile_filters,node_card_grid,node_card,node_service toneMint
class node_api_hook,node_api_client,node_text_context,node_preferences,node_accessibility,node_cookie_manager,node_accessibility_panel toneRose
class node_visitor toneIndigo
```

## Components

### Routing and shell

- [Route dispatcher](https://github.com/naticasta777-ai/cromoverso/blob/main/src/App.jsx): `src/App.jsx`
- [Public layout](https://github.com/naticasta777-ai/cromoverso/blob/main/src/components/LayoutPublico/LayoutPublico.jsx): `src/components/LayoutPublico/LayoutPublico.jsx`
- [Navigation bar](https://github.com/naticasta777-ai/cromoverso/blob/main/src/components/Navbar/Navbar.jsx): `src/components/Navbar/Navbar.jsx`

### World discovery

- [Home page](https://github.com/naticasta777-ai/cromoverso/blob/main/src/pages/Inicio.jsx): `src/pages/Inicio.jsx`
- [Worlds page](https://github.com/naticasta777-ai/cromoverso/blob/main/src/pages/Mundos.jsx): `src/pages/Mundos.jsx`
- [Home sections](https://github.com/naticasta777-ai/cromoverso/blob/main/src/components/SeccionMundos/SeccionMundos.jsx): `src/components/SeccionMundos/SeccionMundos.jsx`
- [Home hero](https://github.com/naticasta777-ai/cromoverso/blob/main/src/components/HeroCromoverso/HeroCromoverso.jsx): `src/components/HeroCromoverso/HeroCromoverso.jsx`

### Card catalog

- [World catalog page](https://github.com/naticasta777-ai/cromoverso/blob/main/src/pages/CatalogoMundo.jsx): `src/pages/CatalogoMundo.jsx`
- [Catalog data hook](https://github.com/naticasta777-ai/cromoverso/blob/main/src/hooks/useCatalogo.js): `src/hooks/useCatalogo.js`
- [World data hook](https://github.com/naticasta777-ai/cromoverso/blob/main/src/hooks/useMundos.js): `src/hooks/useMundos.js`
- [World header](https://github.com/naticasta777-ai/cromoverso/blob/main/src/components/CabeceraMundo/CabeceraMundo.jsx): `src/components/CabeceraMundo/CabeceraMundo.jsx`
- [Catalog filters](https://github.com/naticasta777-ai/cromoverso/blob/main/src/components/BarraLateralMundo/BarraLateralMundo.jsx): `src/components/BarraLateralMundo/BarraLateralMundo.jsx`
- [Mobile filters](https://github.com/naticasta777-ai/cromoverso/blob/main/src/components/FiltrosMovil/FiltrosMovil.jsx): `src/components/FiltrosMovil/FiltrosMovil.jsx`
- [Card grid](https://github.com/naticasta777-ai/cromoverso/blob/main/src/components/GrillaCromos/GrillaCromos.jsx): `src/components/GrillaCromos/GrillaCromos.jsx`
- [Card rendering](https://github.com/naticasta777-ai/cromoverso/blob/main/src/components/Cromo/Cromo.jsx): `src/components/Cromo/Cromo.jsx`

### Data and preferences

- [API request hook](https://github.com/naticasta777-ai/cromoverso/blob/main/src/hooks/useApi.js): `src/hooks/useApi.js`
- [API client](https://github.com/naticasta777-ai/cromoverso/blob/main/src/api/cliente.js): `src/api/cliente.js`
- [Interface language text](https://github.com/naticasta777-ai/cromoverso/blob/main/src/context/TextosContext.jsx): `src/context/TextosContext.jsx`
- [Consent and language](https://github.com/naticasta777-ai/cromoverso/blob/main/src/context/PreferenciasContext.jsx): `src/context/PreferenciasContext.jsx`
- [Accessibility settings](https://github.com/naticasta777-ai/cromoverso/blob/main/src/context/AccesibilidadContext.jsx): `src/context/AccesibilidadContext.jsx`
- [Cookie manager](https://github.com/naticasta777-ai/cromoverso/blob/main/src/components/GestorCookies/GestorCookies.jsx): `src/components/GestorCookies/GestorCookies.jsx`
- [Accessibility panel](https://github.com/naticasta777-ai/cromoverso/blob/main/src/components/PanelAccesibilidad/PanelAccesibilidad.jsx): `src/components/PanelAccesibilidad/PanelAccesibilidad.jsx`

### Other components

- **Visitor**
- **Cromoverso REST API**
- **Browser cookies**

## Connections

- Visitor → Route dispatcher: opens app (evidence: `src/App.jsx`)
- Route dispatcher → Home page: routes to (evidence: `src/App.jsx`)
- Route dispatcher → Worlds page: routes to (evidence: `src/App.jsx`)
- Route dispatcher → World catalog page: routes to (evidence: `src/App.jsx`)
- Home page → Home hero: renders (evidence: `src/pages/Inicio.jsx`)
- Home page → Home sections: renders (evidence: `src/pages/Inicio.jsx`)
- Worlds page → World data hook: loads worlds (evidence: `src/pages/Mundos.jsx`)
- World catalog page → Catalog data hook: loads catalog (evidence: `src/pages/CatalogoMundo.jsx`)
- World catalog page → World header: renders (evidence: `src/pages/CatalogoMundo.jsx`)
- World catalog page → Catalog filters: renders (evidence: `src/pages/CatalogoMundo.jsx`)
- World catalog page → Mobile filters: renders (evidence: `src/pages/CatalogoMundo.jsx`)
- World catalog page → Card grid: renders (evidence: `src/pages/CatalogoMundo.jsx`)
- Card grid → Card rendering: renders cards (evidence: `src/components/GrillaCromos/GrillaCromos.jsx`)
- Catalog data hook → World data hook: uses worlds (evidence: `src/hooks/useCatalogo.js`)
- Catalog data hook → API request hook: requests data (evidence: `src/hooks/useCatalogo.js`)
- World data hook → API request hook: requests data (evidence: `src/hooks/useMundos.js`)
- API request hook → API client: calls (evidence: `src/hooks/useApi.js`)
- API client → Cromoverso REST API: requests API (evidence: `README.md`)
- Home page → Public layout: uses layout (evidence: `src/pages/Inicio.jsx`)
- World catalog page → Public layout: uses layout (evidence: `src/pages/CatalogoMundo.jsx`)
- Public layout → Navigation bar: renders (evidence: `src/components/LayoutPublico/LayoutPublico.jsx`)
- Interface language text → API client: fetches translations (evidence: `src/context/TextosContext.jsx`)
- Interface language text → Consent and language: reads language (evidence: `src/context/TextosContext.jsx`)
- Public layout → Consent and language: reads language (evidence: `src/components/LayoutPublico/LayoutPublico.jsx`)
- Route dispatcher → Cookie manager: mounts (evidence: `src/App.jsx`)
- Route dispatcher → Accessibility panel: mounts (evidence: `src/App.jsx`)
- Accessibility panel → Accessibility settings: controls (evidence: `src/components/PanelAccesibilidad/PanelAccesibilidad.jsx`)
- Accessibility settings → Consent and language: checks consent (evidence: `src/context/AccesibilidadContext.jsx`)
- Consent and language → Browser cookies: reads and writes (evidence: `src/context/PreferenciasContext.jsx`)
- Accessibility settings → Browser cookies: reads and writes (evidence: `src/context/AccesibilidadContext.jsx`)