# jacomatisa/cromoverso architecture

> Architecture diagram of the GitHub repository jacomatisa/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/jacomatisa/cromoverso
- Repository: https://github.com/jacomatisa/cromoverso

## Overview

Cromoverso is a React frontend for exploring six themed worlds and their collectible cards. Visitors enter through the home page, browse a world catalog, and view/filter that world's cards; the app also loads localized interface text and provides accessibility and cookie-preference controls. The graph preserves the documented hero, worlds, catalog, and shared-site capabilities. Some domain components are represented from the README and source index; their internal wiring is omitted where no excerpt establishes it.

Main entry points: [`src/App.jsx`](https://github.com/jacomatisa/cromoverso/blob/main/src/App.jsx) (App Router), [`src/components/AbanicoCromos.jsx`](https://github.com/jacomatisa/cromoverso/blob/main/src/components/AbanicoCromos.jsx) (Featured Cards), [`src/components/VistaMundo.jsx`](https://github.com/jacomatisa/cromoverso/blob/main/src/components/VistaMundo.jsx) (World Catalog View), [`src/components/LayoutPublico.jsx`](https://github.com/jacomatisa/cromoverso/blob/main/src/components/LayoutPublico.jsx) (Public Layout)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application"]
  node_app["App Router<br/>[App.jsx]"]
  node_texts["Localized Texts<br/>[useTextos.js]"]
  node_api["API Client<br/>[api.js]"]
end

subgraph group_discovery["World Discovery"]
  node_home["Home View<br/>[VistaInicio.jsx]"]
  node_hero["Hero Section<br/>[HeroCromoverso.jsx]"]
  node_fan["Featured Cards<br/>[AbanicoCromos.jsx]"]
  node_worlds["Worlds Section<br/>[SeccionMundos.jsx]"]
end

subgraph group_catalog["Card Catalog"]
  node_worldview["World Catalog View<br/>[VistaMundo.jsx]"]
  node_worldmenu["World Filters"]
  node_card["Card Tile<br/>[TarjetaCromo.jsx]"]
  node_art["Card Artwork<br/>[ArteCromo.jsx]"]
  node_images["Image Resolver<br/>[imagenes.js]"]
end

subgraph group_shared["Shared Experience"]
  node_layout["Public Layout<br/>[LayoutPublico.jsx]"]
  node_navbar["Navigation Bar<br/>[Navbar.jsx]"]
  node_accessibility["Accessibility Menu"]
  node_language["Language Selector<br/>[SelectorIdioma.jsx]"]
  node_footer["Site Footer<br/>[Footer.jsx]"]
  node_cookies["Cookie Manager<br/>[GestorCookies.jsx]"]
  node_cookiebanner["Cookie Banner<br/>[BannerCookies.jsx]"]
  node_cookieprefs["Cookie Preferences"]
  node_cookieutils["Cookie Utilities<br/>[cookies.js]"]
end

node_visitor(("Visitor"))
node_backend{{"Cromoverso API"}}

node_visitor -->|"opens"| node_app
node_app -->|"loads texts"| node_texts
node_texts -->|"requests text"| node_api
node_api -.->|"fetches data"| node_backend
node_app -->|"renders"| node_layout
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_worldview
node_layout -->|"renders"| node_navbar
node_layout -->|"renders"| node_footer
node_layout -->|"renders"| node_cookies
node_navbar -->|"renders"| node_accessibility
node_navbar -->|"renders"| node_language
node_cookies -->|"renders"| node_cookiebanner
node_cookies -->|"renders"| node_cookieprefs
node_cookies -->|"uses"| node_cookieutils
node_app -->|"reads and writes"| node_cookieutils
node_home -->|"renders"| node_hero
node_home -->|"renders"| node_worlds
node_hero -->|"renders"| node_fan
node_fan -->|"loads featured cards"| node_api
node_fan -->|"renders artwork"| node_art
node_fan -->|"resolves illustration"| node_images
node_worldview -->|"loads world and cards"| node_api
node_worldview -->|"renders filters"| node_worldmenu
node_worldview -->|"renders cards"| node_card
node_card -->|"renders artwork"| node_art
node_art -->|"resolves card art"| node_images

click node_app "https://github.com/jacomatisa/cromoverso/blob/main/src/App.jsx"
click node_texts "https://github.com/jacomatisa/cromoverso/blob/main/src/hooks/useTextos.js"
click node_api "https://github.com/jacomatisa/cromoverso/blob/main/src/services/api.js"
click node_layout "https://github.com/jacomatisa/cromoverso/blob/main/src/components/LayoutPublico.jsx"
click node_navbar "https://github.com/jacomatisa/cromoverso/blob/main/src/components/Navbar.jsx"
click node_accessibility "https://github.com/jacomatisa/cromoverso/blob/main/src/components/MenuAccesibilidad.jsx"
click node_language "https://github.com/jacomatisa/cromoverso/blob/main/src/components/SelectorIdioma.jsx"
click node_footer "https://github.com/jacomatisa/cromoverso/blob/main/src/components/Footer.jsx"
click node_cookies "https://github.com/jacomatisa/cromoverso/blob/main/src/components/GestorCookies.jsx"
click node_cookiebanner "https://github.com/jacomatisa/cromoverso/blob/main/src/components/BannerCookies.jsx"
click node_cookieprefs "https://github.com/jacomatisa/cromoverso/blob/main/src/components/PreferenciasCookies.jsx"
click node_cookieutils "https://github.com/jacomatisa/cromoverso/blob/main/src/utils/cookies.js"
click node_home "https://github.com/jacomatisa/cromoverso/blob/main/src/components/VistaInicio.jsx"
click node_hero "https://github.com/jacomatisa/cromoverso/blob/main/src/components/HeroCromoverso.jsx"
click node_fan "https://github.com/jacomatisa/cromoverso/blob/main/src/components/AbanicoCromos.jsx"
click node_worlds "https://github.com/jacomatisa/cromoverso/blob/main/src/components/SeccionMundos.jsx"
click node_worldview "https://github.com/jacomatisa/cromoverso/blob/main/src/components/VistaMundo.jsx"
click node_worldmenu "https://github.com/jacomatisa/cromoverso/blob/main/src/components/MenuLateralMundos.jsx"
click node_card "https://github.com/jacomatisa/cromoverso/blob/main/src/components/TarjetaCromo.jsx"
click node_art "https://github.com/jacomatisa/cromoverso/blob/main/src/components/ArteCromo.jsx"
click node_images "https://github.com/jacomatisa/cromoverso/blob/main/src/assets/imagenes.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_texts,node_api toneBlue
class node_home,node_hero,node_fan,node_worlds toneAmber
class node_worldview,node_worldmenu,node_card,node_art,node_images,node_backend toneMint
class node_layout,node_navbar,node_accessibility,node_language,node_footer,node_cookies,node_cookiebanner,node_cookieprefs,node_cookieutils toneRose
class node_visitor toneIndigo
```

## Components

### Application

- [App Router](https://github.com/jacomatisa/cromoverso/blob/main/src/App.jsx): `src/App.jsx`
- [Localized Texts](https://github.com/jacomatisa/cromoverso/blob/main/src/hooks/useTextos.js): `src/hooks/useTextos.js`
- [API Client](https://github.com/jacomatisa/cromoverso/blob/main/src/services/api.js): `src/services/api.js`

### World Discovery

- [Home View](https://github.com/jacomatisa/cromoverso/blob/main/src/components/VistaInicio.jsx): `src/components/VistaInicio.jsx`
- [Hero Section](https://github.com/jacomatisa/cromoverso/blob/main/src/components/HeroCromoverso.jsx): `src/components/HeroCromoverso.jsx`
- [Featured Cards](https://github.com/jacomatisa/cromoverso/blob/main/src/components/AbanicoCromos.jsx): `src/components/AbanicoCromos.jsx`
- [Worlds Section](https://github.com/jacomatisa/cromoverso/blob/main/src/components/SeccionMundos.jsx): `src/components/SeccionMundos.jsx`

### Card Catalog

- [World Catalog View](https://github.com/jacomatisa/cromoverso/blob/main/src/components/VistaMundo.jsx): `src/components/VistaMundo.jsx`
- [World Filters](https://github.com/jacomatisa/cromoverso/blob/main/src/components/MenuLateralMundos.jsx): `src/components/MenuLateralMundos.jsx`
- [Card Tile](https://github.com/jacomatisa/cromoverso/blob/main/src/components/TarjetaCromo.jsx): `src/components/TarjetaCromo.jsx`
- [Card Artwork](https://github.com/jacomatisa/cromoverso/blob/main/src/components/ArteCromo.jsx): `src/components/ArteCromo.jsx`
- [Image Resolver](https://github.com/jacomatisa/cromoverso/blob/main/src/assets/imagenes.js): `src/assets/imagenes.js`

### Shared Experience

- [Public Layout](https://github.com/jacomatisa/cromoverso/blob/main/src/components/LayoutPublico.jsx): `src/components/LayoutPublico.jsx`
- [Navigation Bar](https://github.com/jacomatisa/cromoverso/blob/main/src/components/Navbar.jsx): `src/components/Navbar.jsx`
- [Accessibility Menu](https://github.com/jacomatisa/cromoverso/blob/main/src/components/MenuAccesibilidad.jsx): `src/components/MenuAccesibilidad.jsx`
- [Language Selector](https://github.com/jacomatisa/cromoverso/blob/main/src/components/SelectorIdioma.jsx): `src/components/SelectorIdioma.jsx`
- [Site Footer](https://github.com/jacomatisa/cromoverso/blob/main/src/components/Footer.jsx): `src/components/Footer.jsx`
- [Cookie Manager](https://github.com/jacomatisa/cromoverso/blob/main/src/components/GestorCookies.jsx): `src/components/GestorCookies.jsx`
- [Cookie Banner](https://github.com/jacomatisa/cromoverso/blob/main/src/components/BannerCookies.jsx): `src/components/BannerCookies.jsx`
- [Cookie Preferences](https://github.com/jacomatisa/cromoverso/blob/main/src/components/PreferenciasCookies.jsx): `src/components/PreferenciasCookies.jsx`
- [Cookie Utilities](https://github.com/jacomatisa/cromoverso/blob/main/src/utils/cookies.js): `src/utils/cookies.js`

### Other components

- **Visitor**
- **Cromoverso API**

## Connections

- Visitor → App Router: opens
- App Router → Localized Texts: loads texts (evidence: `src/App.jsx`)
- Localized Texts → API Client: requests text (evidence: `src/hooks/useTextos.js`)
- API Client → Cromoverso API: fetches data (evidence: `README.md`)
- App Router → Public Layout: renders (evidence: `src/App.jsx`)
- App Router → Home View: routes to (evidence: `src/App.jsx`)
- App Router → World Catalog View: routes to (evidence: `src/App.jsx`)
- Public Layout → Navigation Bar: renders (evidence: `src/components/LayoutPublico.jsx`)
- Public Layout → Site Footer: renders (evidence: `src/components/LayoutPublico.jsx`)
- Public Layout → Cookie Manager: renders (evidence: `src/components/LayoutPublico.jsx`)
- Navigation Bar → Accessibility Menu: renders (evidence: `src/components/Navbar.jsx`)
- Navigation Bar → Language Selector: renders (evidence: `src/components/Navbar.jsx`)
- Cookie Manager → Cookie Banner: renders (evidence: `src/components/GestorCookies.jsx`)
- Cookie Manager → Cookie Preferences: renders (evidence: `src/components/GestorCookies.jsx`)
- Cookie Manager → Cookie Utilities: uses (evidence: `src/components/GestorCookies.jsx`)
- App Router → Cookie Utilities: reads and writes (evidence: `src/App.jsx`)
- Home View → Hero Section: renders (evidence: `src/components/VistaInicio.jsx`)
- Home View → Worlds Section: renders (evidence: `src/components/VistaInicio.jsx`)
- Hero Section → Featured Cards: renders (evidence: `src/components/HeroCromoverso.jsx`)
- Featured Cards → API Client: loads featured cards (evidence: `src/components/AbanicoCromos.jsx`)
- Featured Cards → Card Artwork: renders artwork (evidence: `src/components/AbanicoCromos.jsx`)
- Featured Cards → Image Resolver: resolves illustration (evidence: `src/components/AbanicoCromos.jsx`)
- World Catalog View → API Client: loads world and cards (evidence: `src/components/VistaMundo.jsx`)
- World Catalog View → World Filters: renders filters (evidence: `src/components/VistaMundo.jsx`)
- World Catalog View → Card Tile: renders cards (evidence: `src/components/VistaMundo.jsx`)
- Card Tile → Card Artwork: renders artwork (evidence: `src/components/TarjetaCromo.jsx`)
- Card Artwork → Image Resolver: resolves card art (evidence: `src/components/ArteCromo.jsx`)