# juan122421/cromoverso architecture

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

## Overview

Cromoverso is a public React frontend for browsing a digital sticker album. A visitor lands on the homepage, where the app loads worlds and featured stickers; choosing a world opens its catalog, whose rarity and type filters are reflected in the URL and whose data comes from the course API. Shared preferences provide interface translations, cookie consent, and accessibility settings across the public layout. The graph reflects documented routes and sampled calls; several component relationships are supported only by the source index, and unsampled implementation details are not inferred.

Main entry points: [`src/context/PreferenciasContext.jsx`](https://github.com/juan122421/cromoverso/blob/main/src/context/PreferenciasContext.jsx) (Preferences state), [`src/App.jsx`](https://github.com/juan122421/cromoverso/blob/main/src/App.jsx) (Route app), [`src/pages/CatalogoMundo.jsx`](https://github.com/juan122421/cromoverso/blob/main/src/pages/CatalogoMundo.jsx) (World catalog), [`src/pages/Inicio.jsx`](https://github.com/juan122421/cromoverso/blob/main/src/pages/Inicio.jsx) (Homepage)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_navigation["Pages and navigation"]
  node_app["Route app<br/>[App.jsx]"]
  node_home["Homepage<br/>[Inicio.jsx]"]
  node_catalog["World catalog<br/>[CatalogoMundo.jsx]"]
  node_notfound["Not found<br/>[NoEncontrado.jsx]"]
  node_destinations["Route destinations<br/>[destinos.js]"]
end

subgraph group_data["Catalog and API"]
  node_data_hook["Data loading hook<br/>[useDatos.js]"]
  node_api_client["Fetch client<br/>[api.js]"]
  node_api_config["API configuration<br/>[api.js]"]
  node_course_api["Course API"]
  node_formatting["Text formatting<br/>[formatear.js]"]
  node_world_config["World styling<br/>[mundos.js]"]
end

subgraph group_preferences["Preferences and language"]
  node_language_selector["Language selector<br/>[SelectorIdioma.jsx]"]
  node_preferences["Preferences state"]
  node_text_loader["Interface translations<br/>[useTextos.js]"]
  node_cookie_utils["Cookie utilities<br/>[cookies.js]"]
end

subgraph group_shell["Shared interface"]
  node_layout["Public layout<br/>[LayoutPublico.jsx]"]
  node_navbar["Navigation bar<br/>[Navbar.jsx]"]
  node_mobilemenu["Mobile menu<br/>[MenuMovil.jsx]"]
  node_cookie_manager["Cookie manager<br/>[GestorCookies.jsx]"]
  node_cookie_banner["Cookie notice<br/>[BannerCookies.jsx]"]
  node_access_panel["Accessibility panel"]
  node_access_button["Accessibility button"]
  node_sticker["Sticker card<br/>[Cromo.jsx]"]
  node_world_card["World card<br/>[TarjetaMundo.jsx]"]
  node_rarity_label["Rarity label<br/>[EtiquetaRareza.jsx]"]
end

node_visitor(("Visitor"))

node_visitor -->|"opens routes"| node_app
node_app -->|"provides state"| node_preferences
node_app -->|"renders shell"| node_layout
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_catalog
node_app -->|"routes to"| node_notfound
node_app -->|"reads initial world"| node_destinations
node_layout -->|"renders"| node_navbar
node_layout -->|"renders"| node_cookie_manager
node_layout -->|"renders"| node_access_panel
node_navbar -->|"renders"| node_mobilemenu
node_navbar -->|"reads text state"| node_preferences
node_navbar -->|"reads links"| node_destinations
node_mobilemenu -->|"reads text state"| node_preferences
node_mobilemenu -->|"reads links"| node_destinations
node_cookie_manager -->|"renders"| node_cookie_banner
node_cookie_manager -->|"reads consent"| node_preferences
node_access_button -->|"reads settings"| node_preferences
node_access_panel -->|"updates settings"| node_preferences
node_language_selector -->|"changes language"| node_preferences
node_preferences -->|"loads translations"| node_text_loader
node_preferences -->|"reads and writes"| node_cookie_utils
node_text_loader -->|"reads API URL"| node_api_config
node_home -->|"loads page data"| node_data_hook
node_catalog -->|"loads catalog data"| node_data_hook
node_home -->|"requests worlds and rarities"| node_api_client
node_catalog -->|"requests worlds and stickers"| node_api_client
node_api_client -->|"uses base URL"| node_api_config
node_api_client -->|"fetches JSON"| node_course_api
node_home -->|"renders featured cards"| node_sticker
node_home -->|"renders worlds"| node_world_card
node_catalog -->|"renders results"| node_sticker
node_catalog -->|"uses rarity labels"| node_rarity_label
node_home -->|"formats labels"| node_formatting
node_catalog -->|"formats labels"| node_formatting
node_catalog -->|"styles world"| node_world_config

click node_app "https://github.com/juan122421/cromoverso/blob/main/src/App.jsx"
click node_home "https://github.com/juan122421/cromoverso/blob/main/src/pages/Inicio.jsx"
click node_catalog "https://github.com/juan122421/cromoverso/blob/main/src/pages/CatalogoMundo.jsx"
click node_notfound "https://github.com/juan122421/cromoverso/blob/main/src/pages/NoEncontrado.jsx"
click node_layout "https://github.com/juan122421/cromoverso/blob/main/src/components/LayoutPublico/LayoutPublico.jsx"
click node_navbar "https://github.com/juan122421/cromoverso/blob/main/src/components/Navbar/Navbar.jsx"
click node_mobilemenu "https://github.com/juan122421/cromoverso/blob/main/src/components/MenuMovil/MenuMovil.jsx"
click node_cookie_manager "https://github.com/juan122421/cromoverso/blob/main/src/components/GestorCookies/GestorCookies.jsx"
click node_cookie_banner "https://github.com/juan122421/cromoverso/blob/main/src/components/BannerCookies/BannerCookies.jsx"
click node_access_panel "https://github.com/juan122421/cromoverso/blob/main/src/components/PanelAccesibilidad/PanelAccesibilidad.jsx"
click node_access_button "https://github.com/juan122421/cromoverso/blob/main/src/components/BotonAccesibilidad/BotonAccesibilidad.jsx"
click node_language_selector "https://github.com/juan122421/cromoverso/blob/main/src/components/SelectorIdioma/SelectorIdioma.jsx"
click node_preferences "https://github.com/juan122421/cromoverso/blob/main/src/context/PreferenciasContext.jsx"
click node_text_loader "https://github.com/juan122421/cromoverso/blob/main/src/hooks/useTextos.js"
click node_cookie_utils "https://github.com/juan122421/cromoverso/blob/main/src/utils/cookies.js"
click node_data_hook "https://github.com/juan122421/cromoverso/blob/main/src/hooks/useDatos.js"
click node_api_client "https://github.com/juan122421/cromoverso/blob/main/src/services/api.js"
click node_api_config "https://github.com/juan122421/cromoverso/blob/main/src/config/api.js"
click node_sticker "https://github.com/juan122421/cromoverso/blob/main/src/components/Cromo/Cromo.jsx"
click node_world_card "https://github.com/juan122421/cromoverso/blob/main/src/components/TarjetaMundo/TarjetaMundo.jsx"
click node_rarity_label "https://github.com/juan122421/cromoverso/blob/main/src/components/EtiquetaRareza/EtiquetaRareza.jsx"
click node_formatting "https://github.com/juan122421/cromoverso/blob/main/src/utils/formatear.js"
click node_destinations "https://github.com/juan122421/cromoverso/blob/main/src/config/destinos.js"
click node_world_config "https://github.com/juan122421/cromoverso/blob/main/src/config/mundos.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_home,node_catalog,node_notfound,node_destinations toneBlue
class node_data_hook,node_api_client,node_api_config,node_course_api,node_formatting,node_world_config toneAmber
class node_language_selector,node_preferences,node_text_loader,node_cookie_utils toneMint
class node_layout,node_navbar,node_mobilemenu,node_cookie_manager,node_cookie_banner,node_access_panel,node_access_button,node_sticker,node_world_card,node_rarity_label toneRose
class node_visitor toneIndigo
```

## Components

### Pages and navigation

- [Route app](https://github.com/juan122421/cromoverso/blob/main/src/App.jsx): `src/App.jsx`
- [Homepage](https://github.com/juan122421/cromoverso/blob/main/src/pages/Inicio.jsx): `src/pages/Inicio.jsx`
- [World catalog](https://github.com/juan122421/cromoverso/blob/main/src/pages/CatalogoMundo.jsx): `src/pages/CatalogoMundo.jsx`
- [Not found](https://github.com/juan122421/cromoverso/blob/main/src/pages/NoEncontrado.jsx): `src/pages/NoEncontrado.jsx`
- [Route destinations](https://github.com/juan122421/cromoverso/blob/main/src/config/destinos.js): `src/config/destinos.js`

### Catalog and API

- [Data loading hook](https://github.com/juan122421/cromoverso/blob/main/src/hooks/useDatos.js): `src/hooks/useDatos.js`
- [Fetch client](https://github.com/juan122421/cromoverso/blob/main/src/services/api.js): `src/services/api.js`
- [API configuration](https://github.com/juan122421/cromoverso/blob/main/src/config/api.js): `src/config/api.js`
- **Course API**
- [Text formatting](https://github.com/juan122421/cromoverso/blob/main/src/utils/formatear.js): `src/utils/formatear.js`
- [World styling](https://github.com/juan122421/cromoverso/blob/main/src/config/mundos.js): `src/config/mundos.js`

### Preferences and language

- [Language selector](https://github.com/juan122421/cromoverso/blob/main/src/components/SelectorIdioma/SelectorIdioma.jsx): `src/components/SelectorIdioma/SelectorIdioma.jsx`
- [Preferences state](https://github.com/juan122421/cromoverso/blob/main/src/context/PreferenciasContext.jsx): `src/context/PreferenciasContext.jsx`
- [Interface translations](https://github.com/juan122421/cromoverso/blob/main/src/hooks/useTextos.js): `src/hooks/useTextos.js`
- [Cookie utilities](https://github.com/juan122421/cromoverso/blob/main/src/utils/cookies.js): `src/utils/cookies.js`

### Shared interface

- [Public layout](https://github.com/juan122421/cromoverso/blob/main/src/components/LayoutPublico/LayoutPublico.jsx): `src/components/LayoutPublico/LayoutPublico.jsx`
- [Navigation bar](https://github.com/juan122421/cromoverso/blob/main/src/components/Navbar/Navbar.jsx): `src/components/Navbar/Navbar.jsx`
- [Mobile menu](https://github.com/juan122421/cromoverso/blob/main/src/components/MenuMovil/MenuMovil.jsx): `src/components/MenuMovil/MenuMovil.jsx`
- [Cookie manager](https://github.com/juan122421/cromoverso/blob/main/src/components/GestorCookies/GestorCookies.jsx): `src/components/GestorCookies/GestorCookies.jsx`
- [Cookie notice](https://github.com/juan122421/cromoverso/blob/main/src/components/BannerCookies/BannerCookies.jsx): `src/components/BannerCookies/BannerCookies.jsx`
- [Accessibility panel](https://github.com/juan122421/cromoverso/blob/main/src/components/PanelAccesibilidad/PanelAccesibilidad.jsx): `src/components/PanelAccesibilidad/PanelAccesibilidad.jsx`
- [Accessibility button](https://github.com/juan122421/cromoverso/blob/main/src/components/BotonAccesibilidad/BotonAccesibilidad.jsx): `src/components/BotonAccesibilidad/BotonAccesibilidad.jsx`
- [Sticker card](https://github.com/juan122421/cromoverso/blob/main/src/components/Cromo/Cromo.jsx): `src/components/Cromo/Cromo.jsx`
- [World card](https://github.com/juan122421/cromoverso/blob/main/src/components/TarjetaMundo/TarjetaMundo.jsx): `src/components/TarjetaMundo/TarjetaMundo.jsx`
- [Rarity label](https://github.com/juan122421/cromoverso/blob/main/src/components/EtiquetaRareza/EtiquetaRareza.jsx): `src/components/EtiquetaRareza/EtiquetaRareza.jsx`

### Other components

- **Visitor**

## Connections

- Visitor → Route app: opens routes (evidence: `README.md`)
- Route app → Preferences state: provides state (evidence: `src/App.jsx`)
- Route app → Public layout: renders shell (evidence: `src/App.jsx`)
- Route app → Homepage: routes to (evidence: `src/App.jsx`)
- Route app → World catalog: routes to (evidence: `src/App.jsx`)
- Route app → Not found: routes to (evidence: `src/App.jsx`)
- Route app → Route destinations: reads initial world (evidence: `src/App.jsx`)
- Public layout → Navigation bar: renders (evidence: `src/components/LayoutPublico/LayoutPublico.jsx`)
- Public layout → Cookie manager: renders (evidence: `src/components/LayoutPublico/LayoutPublico.jsx`)
- Public layout → Accessibility panel: renders (evidence: `src/components/LayoutPublico/LayoutPublico.jsx`)
- Navigation bar → Mobile menu: renders (evidence: `src/components/Navbar/Navbar.jsx`)
- Navigation bar → Preferences state: reads text state (evidence: `src/components/Navbar/Navbar.jsx`)
- Navigation bar → Route destinations: reads links (evidence: `src/components/Navbar/Navbar.jsx`)
- Mobile menu → Preferences state: reads text state (evidence: `src/components/MenuMovil/MenuMovil.jsx`)
- Mobile menu → Route destinations: reads links (evidence: `src/components/MenuMovil/MenuMovil.jsx`)
- Cookie manager → Cookie notice: renders (evidence: `src/components/GestorCookies/GestorCookies.jsx`)
- Cookie manager → Preferences state: reads consent (evidence: `src/components/GestorCookies/GestorCookies.jsx`)
- Accessibility button → Preferences state: reads settings (evidence: `src/components/BotonAccesibilidad/BotonAccesibilidad.jsx`)
- Accessibility panel → Preferences state: updates settings (evidence: `src/components/PanelAccesibilidad/PanelAccesibilidad.jsx`)
- Language selector → Preferences state: changes language (evidence: `src/components/SelectorIdioma/SelectorIdioma.jsx`)
- Preferences state → Interface translations: loads translations (evidence: `src/context/PreferenciasContext.jsx`)
- Preferences state → Cookie utilities: reads and writes (evidence: `src/context/PreferenciasContext.jsx`)
- Interface translations → API configuration: reads API URL (evidence: `src/hooks/useTextos.js`)
- Homepage → Data loading hook: loads page data (evidence: `src/pages/Inicio.jsx`)
- World catalog → Data loading hook: loads catalog data (evidence: `src/pages/CatalogoMundo.jsx`)
- Homepage → Fetch client: requests worlds and rarities (evidence: `src/pages/Inicio.jsx`)
- World catalog → Fetch client: requests worlds and stickers (evidence: `src/pages/CatalogoMundo.jsx`)
- Fetch client → API configuration: uses base URL (evidence: `src/services/api.js`)
- Fetch client → Course API: fetches JSON (evidence: `src/services/api.js`)
- Homepage → Sticker card: renders featured cards (evidence: `src/pages/Inicio.jsx`)
- Homepage → World card: renders worlds (evidence: `src/pages/Inicio.jsx`)
- World catalog → Sticker card: renders results (evidence: `src/pages/CatalogoMundo.jsx`)
- World catalog → Rarity label: uses rarity labels (evidence: `src/pages/CatalogoMundo.jsx`)
- Homepage → Text formatting: formats labels (evidence: `src/pages/Inicio.jsx`)
- World catalog → Text formatting: formats labels (evidence: `src/pages/CatalogoMundo.jsx`)
- World catalog → World styling: styles world (evidence: `src/pages/CatalogoMundo.jsx`)