# simoncarde/cromoverso architecture

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

## Overview

Cromoverso is a React web app for browsing collectible-card worlds and albums, with Spanish/English text and customizable accessibility preferences. The main flow loads shared text and world data, presents a home catalog, routes users into a world album, and filters its cards; the home hero separately loads featured cards. README and excerpts support the routing, fetch, and accessibility flows. Several component implementations are only indexed, so edges for those relationships rely on the index or README rather than further source inspection.

Main entry points: [`src/App.jsx`](https://github.com/simoncarde/cromoverso/blob/main/src/App.jsx) (Router and App), [`src/components/Mundos/DetalleMundo/DetalleMundo.jsx`](https://github.com/simoncarde/cromoverso/blob/main/src/components/Mundos/DetalleMundo/DetalleMundo.jsx) (World Album), [`src/services/api.js`](https://github.com/simoncarde/cromoverso/blob/main/src/services/api.js) (API Endpoints), [`src/components/Mundos/Mundos.jsx`](https://github.com/simoncarde/cromoverso/blob/main/src/components/Mundos/Mundos.jsx) (World Catalog)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application Shell"]
  node_app["Router and App<br/>[App.jsx]"]
  node_navbar["Navigation<br/>[Navbar.jsx]"]
  node_hero["Home Hero<br/>[Hero.jsx]"]
  node_cookies["Cookie Banner<br/>[Cookies.jsx]"]
  node_footer["Footer<br/>[Footer.jsx]"]
end

subgraph group_browse["Worlds and Albums"]
  node_catalog["World Catalog<br/>[Mundos.jsx]"]
  node_album["World Album<br/>[DetalleMundo.jsx]"]
  node_album_controls["Album Controls"]
  node_card["Card Tile<br/>[TarjetaCromo.jsx]"]
  node_icons["UI Icons<br/>[Iconos.jsx]"]
end

subgraph group_data["Remote Data"]
  node_text_util["Text Templates<br/>[textos.js]"]
  node_texts["Translation Hook<br/>[useTextos.js]"]
  node_worlds["Worlds Hook<br/>[useMundos.js]"]
  node_featured_cards["Featured Cards Hook<br/>[useCromos.js]"]
  node_collection["Album Collection Hook"]
  node_api_client["API Endpoints<br/>[api.js]"]
end

subgraph group_preferences["Site Preferences"]
  node_access_hook["Accessibility Preferences"]
  node_access_panel["Accessibility Dialog"]
end

node_visitor(("Visitor"))
node_api_service{{"Cromoverso API"}}
node_local_storage[("Browser localStorage")]

node_visitor -->|"opens"| node_app
node_app -->|"renders"| node_navbar
node_app -->|"routes home to"| node_hero
node_app -->|"renders"| node_catalog
node_app -->|"routes album to"| node_album
node_app -->|"renders"| node_cookies
node_app -->|"renders"| node_footer
node_app -->|"loads translations"| node_texts
node_app -->|"loads worlds"| node_worlds
node_app -->|"loads preferences"| node_access_hook
node_app -->|"opens dialog"| node_access_panel
node_app -.->|"passes language control"| node_navbar
node_hero -->|"loads featured cards"| node_featured_cards
node_catalog -->|"formats labels"| node_text_util
node_catalog -->|"links to world"| node_album
node_album -->|"loads card collection"| node_collection
node_album -->|"renders controls"| node_album_controls
node_album -->|"renders cards"| node_card
node_album -->|"formats text"| node_text_util
node_hero -->|"renders icons"| node_icons
node_catalog -->|"renders icons"| node_icons
node_card -->|"renders icons"| node_icons
node_card -->|"formats text"| node_text_util
node_texts -->|"requests text endpoint"| node_api_client
node_worlds -->|"requests worlds endpoint"| node_api_client
node_featured_cards -->|"requests card data"| node_api_client
node_collection -->|"requests paginated cards"| node_api_client
node_api_client -.->|"configures requests"| node_api_service
node_access_hook -->|"persists preferences"| node_local_storage
node_access_hook -->|"supplies preferences"| node_access_panel
node_access_panel -->|"changes preferences"| node_access_hook

click node_app "https://github.com/simoncarde/cromoverso/blob/main/src/App.jsx"
click node_navbar "https://github.com/simoncarde/cromoverso/blob/main/src/components/Navbar/Navbar.jsx"
click node_hero "https://github.com/simoncarde/cromoverso/blob/main/src/components/Hero/Hero.jsx"
click node_cookies "https://github.com/simoncarde/cromoverso/blob/main/src/components/Cookies/Cookies.jsx"
click node_footer "https://github.com/simoncarde/cromoverso/blob/main/src/components/Footer/Footer.jsx"
click node_catalog "https://github.com/simoncarde/cromoverso/blob/main/src/components/Mundos/Mundos.jsx"
click node_album "https://github.com/simoncarde/cromoverso/blob/main/src/components/Mundos/DetalleMundo/DetalleMundo.jsx"
click node_album_controls "https://github.com/simoncarde/cromoverso/tree/main/src/components/Mundos/DetalleMundo"
click node_card "https://github.com/simoncarde/cromoverso/blob/main/src/components/Mundos/DetalleMundo/TarjetaCromo.jsx"
click node_icons "https://github.com/simoncarde/cromoverso/blob/main/src/components/Iconos.jsx"
click node_text_util "https://github.com/simoncarde/cromoverso/blob/main/src/utils/textos.js"
click node_texts "https://github.com/simoncarde/cromoverso/blob/main/src/hooks/useTextos.js"
click node_worlds "https://github.com/simoncarde/cromoverso/blob/main/src/hooks/useMundos.js"
click node_featured_cards "https://github.com/simoncarde/cromoverso/blob/main/src/hooks/useCromos.js"
click node_collection "https://github.com/simoncarde/cromoverso/blob/main/src/hooks/useColeccionCromos.js"
click node_api_client "https://github.com/simoncarde/cromoverso/blob/main/src/services/api.js"
click node_access_hook "https://github.com/simoncarde/cromoverso/blob/main/src/hooks/useAccesibilidad.js"
click node_access_panel "https://github.com/simoncarde/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_navbar,node_hero,node_cookies,node_footer toneBlue
class node_catalog,node_album,node_album_controls,node_card,node_icons,node_local_storage toneAmber
class node_text_util,node_texts,node_worlds,node_featured_cards,node_collection,node_api_client,node_api_service toneMint
class node_access_hook,node_access_panel toneRose
class node_visitor toneIndigo
```

## Components

### Application Shell

- [Router and App](https://github.com/simoncarde/cromoverso/blob/main/src/App.jsx): `src/App.jsx`
- [Navigation](https://github.com/simoncarde/cromoverso/blob/main/src/components/Navbar/Navbar.jsx): `src/components/Navbar/Navbar.jsx`
- [Home Hero](https://github.com/simoncarde/cromoverso/blob/main/src/components/Hero/Hero.jsx): `src/components/Hero/Hero.jsx`
- [Cookie Banner](https://github.com/simoncarde/cromoverso/blob/main/src/components/Cookies/Cookies.jsx): `src/components/Cookies/Cookies.jsx`
- [Footer](https://github.com/simoncarde/cromoverso/blob/main/src/components/Footer/Footer.jsx): `src/components/Footer/Footer.jsx`

### Worlds and Albums

- [World Catalog](https://github.com/simoncarde/cromoverso/blob/main/src/components/Mundos/Mundos.jsx): `src/components/Mundos/Mundos.jsx`
- [World Album](https://github.com/simoncarde/cromoverso/blob/main/src/components/Mundos/DetalleMundo/DetalleMundo.jsx): `src/components/Mundos/DetalleMundo/DetalleMundo.jsx`
- [Album Controls](https://github.com/simoncarde/cromoverso/tree/main/src/components/Mundos/DetalleMundo): `src/components/Mundos/DetalleMundo`
- [Card Tile](https://github.com/simoncarde/cromoverso/blob/main/src/components/Mundos/DetalleMundo/TarjetaCromo.jsx): `src/components/Mundos/DetalleMundo/TarjetaCromo.jsx`
- [UI Icons](https://github.com/simoncarde/cromoverso/blob/main/src/components/Iconos.jsx): `src/components/Iconos.jsx`

### Remote Data

- [Text Templates](https://github.com/simoncarde/cromoverso/blob/main/src/utils/textos.js): `src/utils/textos.js`
- [Translation Hook](https://github.com/simoncarde/cromoverso/blob/main/src/hooks/useTextos.js): `src/hooks/useTextos.js`
- [Worlds Hook](https://github.com/simoncarde/cromoverso/blob/main/src/hooks/useMundos.js): `src/hooks/useMundos.js`
- [Featured Cards Hook](https://github.com/simoncarde/cromoverso/blob/main/src/hooks/useCromos.js): `src/hooks/useCromos.js`
- [Album Collection Hook](https://github.com/simoncarde/cromoverso/blob/main/src/hooks/useColeccionCromos.js): `src/hooks/useColeccionCromos.js`
- [API Endpoints](https://github.com/simoncarde/cromoverso/blob/main/src/services/api.js): `src/services/api.js`

### Site Preferences

- [Accessibility Preferences](https://github.com/simoncarde/cromoverso/blob/main/src/hooks/useAccesibilidad.js): `src/hooks/useAccesibilidad.js`
- [Accessibility Dialog](https://github.com/simoncarde/cromoverso/blob/main/src/components/PanelAccesibilidad/PanelAccesibilidad.jsx): `src/components/PanelAccesibilidad/PanelAccesibilidad.jsx`

### Other components

- **Visitor**
- **Cromoverso API**
- **Browser localStorage**

## Connections

- Visitor → Router and App: opens (evidence: `README.md`)
- Router and App → Navigation: renders (evidence: `src/App.jsx`)
- Router and App → Home Hero: routes home to (evidence: `src/App.jsx`)
- Router and App → World Catalog: renders (evidence: `src/App.jsx`)
- Router and App → World Album: routes album to (evidence: `src/App.jsx`)
- Router and App → Cookie Banner: renders (evidence: `src/App.jsx`)
- Router and App → Footer: renders (evidence: `src/App.jsx`)
- Router and App → Translation Hook: loads translations (evidence: `src/App.jsx`)
- Router and App → Worlds Hook: loads worlds (evidence: `src/App.jsx`)
- Router and App → Accessibility Preferences: loads preferences (evidence: `src/App.jsx`)
- Router and App → Accessibility Dialog: opens dialog (evidence: `src/App.jsx`)
- Router and App → Navigation: passes language control (evidence: `README.md`)
- Home Hero → Featured Cards Hook: loads featured cards (evidence: `src/components/Hero/Hero.jsx`)
- World Catalog → Text Templates: formats labels (evidence: `src/components/Mundos/Mundos.jsx`)
- World Catalog → World Album: links to world (evidence: `src/components/Mundos/Mundos.jsx`)
- World Album → Album Collection Hook: loads card collection (evidence: `src/components/Mundos/DetalleMundo/DetalleMundo.jsx`)
- World Album → Album Controls: renders controls (evidence: `src/components/Mundos/DetalleMundo/DetalleMundo.jsx`)
- World Album → Card Tile: renders cards (evidence: `src/components/Mundos/DetalleMundo/DetalleMundo.jsx`)
- World Album → Text Templates: formats text (evidence: `src/components/Mundos/DetalleMundo/DetalleMundo.jsx`)
- Home Hero → UI Icons: renders icons (evidence: `src/components/Hero/Hero.jsx`)
- World Catalog → UI Icons: renders icons (evidence: `src/components/Mundos/Mundos.jsx`)
- Card Tile → UI Icons: renders icons (evidence: `src/components/Mundos/DetalleMundo/TarjetaCromo.jsx`)
- Card Tile → Text Templates: formats text (evidence: `src/components/Mundos/DetalleMundo/TarjetaCromo.jsx`)
- Translation Hook → API Endpoints: requests text endpoint (evidence: `src/hooks/useTextos.js`)
- Worlds Hook → API Endpoints: requests worlds endpoint (evidence: `src/hooks/useMundos.js`)
- Featured Cards Hook → API Endpoints: requests card data (evidence: `src/hooks/useCromos.js`)
- Album Collection Hook → API Endpoints: requests paginated cards (evidence: `src/hooks/useColeccionCromos.js`)
- API Endpoints → Cromoverso API: configures requests (evidence: `README.md`)
- Accessibility Preferences → Browser localStorage: persists preferences (evidence: `README.md`)
- Accessibility Preferences → Accessibility Dialog: supplies preferences (evidence: `src/App.jsx`)
- Accessibility Dialog → Accessibility Preferences: changes preferences (evidence: `src/App.jsx`)