# joseherrera891/proyecto-cromoverso architecture

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

## Overview

This is a React frontend for a Spanish/English collectible-card catalog. Visitors enter through the home page, browse worlds and filtered card catalogs, then open individual card details; the app also loads interface text and manages language, cookie consent, and accessibility preferences. Page hooks fetch and validate catalog data from an external API. Edges reflect the sampled calls and imports; other capabilities visible only in the tree are not assumed to be wired into the runtime.

Main entry points: [`src/App.jsx`](https://github.com/joseherrera891/proyecto-cromoverso/blob/main/src/App.jsx) (Application shell), [`src/components/Navbar.jsx`](https://github.com/joseherrera891/proyecto-cromoverso/blob/main/src/components/Navbar.jsx) (Navigation bar), [`src/utils/api.js`](https://github.com/joseherrera891/proyecto-cromoverso/blob/main/src/utils/api.js) (API URL helper), [`src/components/CatalogoMundo.jsx`](https://github.com/joseherrera891/proyecto-cromoverso/blob/main/src/components/CatalogoMundo.jsx) (World catalog)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App and navigation"]
  node_entry["React entry<br/>[main.jsx]"]
  node_app["Application shell<br/>[App.jsx]"]
end

subgraph group_browse["Catalog experience"]
  node_home["Home hero<br/>[InicioHero.jsx]"]
  node_worlds["Home worlds<br/>[InicioMundos.jsx]"]
  node_catalog["World catalog<br/>[CatalogoMundo.jsx]"]
  node_detail["Card details<br/>[DetalleCromo.jsx]"]
  node_rareities["Home rareties<br/>[InicioRarezas.jsx]"]
end

subgraph group_shared["Shared interface"]
  node_navbar["Navigation bar<br/>[Navbar.jsx]"]
  node_language["Language selector"]
  node_accessibility["Accessibility panel"]
  node_footer["Footer<br/>[Footer.jsx]"]
  node_cookies["Cookie consent<br/>[CookieBanner.jsx]"]
  node_icon["Icon renderer<br/>[Icono.jsx]"]
  node_figures["Card illustrations<br/>[figuras.jsx]"]
end

subgraph group_data["Data access"]
  node_home_data["Home data hook"]
  node_catalog_data["Catalog data hook"]
  node_detail_data["Card data hook<br/>[useDetalleCromo.js]"]
  node_texts["Interface text hook<br/>[useTextos.js]"]
  node_api["API URL helper<br/>[api.js]"]
end

node_visitor(("Visitor"))
node_service["Catalog API"]

node_visitor -->|"opens app"| node_entry
node_entry -->|"renders"| node_app
node_app -->|"renders"| node_navbar
node_app -->|"renders home"| node_home
node_app -->|"renders home"| node_worlds
node_app -->|"routes to"| node_catalog
node_app -->|"routes to"| node_detail
node_app -->|"renders"| node_footer
node_app -->|"renders consent"| node_cookies
node_app -->|"loads text"| node_texts
node_worlds -->|"loads worlds"| node_home_data
node_catalog -->|"loads catalog"| node_catalog_data
node_detail -->|"loads card"| node_detail_data
node_navbar -->|"renders"| node_language
node_navbar -->|"renders"| node_accessibility
node_navbar -->|"renders"| node_icon
node_catalog -->|"renders"| node_icon
node_detail -->|"uses shapes"| node_figures
node_home_data -->|"builds API URLs"| node_api
node_catalog_data -->|"builds API URLs"| node_api
node_detail_data -->|"builds API URLs"| node_api
node_texts -->|"builds API URLs"| node_api
node_home_data -->|"fetches worlds and rareties"| node_service
node_catalog_data -->|"fetches catalog data"| node_service
node_detail_data -->|"fetches card data"| node_service
node_texts -->|"fetches interface text"| node_service

click node_entry "https://github.com/joseherrera891/proyecto-cromoverso/blob/main/src/main.jsx"
click node_app "https://github.com/joseherrera891/proyecto-cromoverso/blob/main/src/App.jsx"
click node_home "https://github.com/joseherrera891/proyecto-cromoverso/blob/main/src/components/InicioHero.jsx"
click node_worlds "https://github.com/joseherrera891/proyecto-cromoverso/blob/main/src/components/InicioMundos.jsx"
click node_catalog "https://github.com/joseherrera891/proyecto-cromoverso/blob/main/src/components/CatalogoMundo.jsx"
click node_detail "https://github.com/joseherrera891/proyecto-cromoverso/blob/main/src/components/DetalleCromo.jsx"
click node_home_data "https://github.com/joseherrera891/proyecto-cromoverso/blob/main/src/hooks/useInicioPublico.js"
click node_catalog_data "https://github.com/joseherrera891/proyecto-cromoverso/blob/main/src/hooks/useCatalogoMundo.js"
click node_detail_data "https://github.com/joseherrera891/proyecto-cromoverso/blob/main/src/hooks/useDetalleCromo.js"
click node_texts "https://github.com/joseherrera891/proyecto-cromoverso/blob/main/src/hooks/useTextos.js"
click node_api "https://github.com/joseherrera891/proyecto-cromoverso/blob/main/src/utils/api.js"
click node_navbar "https://github.com/joseherrera891/proyecto-cromoverso/blob/main/src/components/Navbar.jsx"
click node_language "https://github.com/joseherrera891/proyecto-cromoverso/blob/main/src/components/LanguageSelector.jsx"
click node_accessibility "https://github.com/joseherrera891/proyecto-cromoverso/blob/main/src/components/PanelAccesibilidad.jsx"
click node_footer "https://github.com/joseherrera891/proyecto-cromoverso/blob/main/src/components/Footer.jsx"
click node_cookies "https://github.com/joseherrera891/proyecto-cromoverso/blob/main/src/components/CookieBanner.jsx"
click node_icon "https://github.com/joseherrera891/proyecto-cromoverso/blob/main/src/components/Icono.jsx"
click node_figures "https://github.com/joseherrera891/proyecto-cromoverso/blob/main/src/utils/figuras.jsx"
click node_rareities "https://github.com/joseherrera891/proyecto-cromoverso/blob/main/src/components/InicioRarezas.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_entry,node_app toneBlue
class node_home,node_worlds,node_catalog,node_detail,node_rareities toneAmber
class node_navbar,node_language,node_accessibility,node_footer,node_cookies,node_icon,node_figures,node_service toneMint
class node_home_data,node_catalog_data,node_detail_data,node_texts,node_api toneRose
class node_visitor toneIndigo
```

## Components

### App and navigation

- [React entry](https://github.com/joseherrera891/proyecto-cromoverso/blob/main/src/main.jsx): `src/main.jsx`
- [Application shell](https://github.com/joseherrera891/proyecto-cromoverso/blob/main/src/App.jsx): `src/App.jsx`

### Catalog experience

- [Home hero](https://github.com/joseherrera891/proyecto-cromoverso/blob/main/src/components/InicioHero.jsx): `src/components/InicioHero.jsx`
- [Home worlds](https://github.com/joseherrera891/proyecto-cromoverso/blob/main/src/components/InicioMundos.jsx): `src/components/InicioMundos.jsx`
- [World catalog](https://github.com/joseherrera891/proyecto-cromoverso/blob/main/src/components/CatalogoMundo.jsx): `src/components/CatalogoMundo.jsx`
- [Card details](https://github.com/joseherrera891/proyecto-cromoverso/blob/main/src/components/DetalleCromo.jsx): `src/components/DetalleCromo.jsx`
- [Home rareties](https://github.com/joseherrera891/proyecto-cromoverso/blob/main/src/components/InicioRarezas.jsx): `src/components/InicioRarezas.jsx`

### Shared interface

- [Navigation bar](https://github.com/joseherrera891/proyecto-cromoverso/blob/main/src/components/Navbar.jsx): `src/components/Navbar.jsx`
- [Language selector](https://github.com/joseherrera891/proyecto-cromoverso/blob/main/src/components/LanguageSelector.jsx): `src/components/LanguageSelector.jsx`
- [Accessibility panel](https://github.com/joseherrera891/proyecto-cromoverso/blob/main/src/components/PanelAccesibilidad.jsx): `src/components/PanelAccesibilidad.jsx`
- [Footer](https://github.com/joseherrera891/proyecto-cromoverso/blob/main/src/components/Footer.jsx): `src/components/Footer.jsx`
- [Cookie consent](https://github.com/joseherrera891/proyecto-cromoverso/blob/main/src/components/CookieBanner.jsx): `src/components/CookieBanner.jsx`
- [Icon renderer](https://github.com/joseherrera891/proyecto-cromoverso/blob/main/src/components/Icono.jsx): `src/components/Icono.jsx`
- [Card illustrations](https://github.com/joseherrera891/proyecto-cromoverso/blob/main/src/utils/figuras.jsx): `src/utils/figuras.jsx`

### Data access

- [Home data hook](https://github.com/joseherrera891/proyecto-cromoverso/blob/main/src/hooks/useInicioPublico.js): `src/hooks/useInicioPublico.js`
- [Catalog data hook](https://github.com/joseherrera891/proyecto-cromoverso/blob/main/src/hooks/useCatalogoMundo.js): `src/hooks/useCatalogoMundo.js`
- [Card data hook](https://github.com/joseherrera891/proyecto-cromoverso/blob/main/src/hooks/useDetalleCromo.js): `src/hooks/useDetalleCromo.js`
- [Interface text hook](https://github.com/joseherrera891/proyecto-cromoverso/blob/main/src/hooks/useTextos.js): `src/hooks/useTextos.js`
- [API URL helper](https://github.com/joseherrera891/proyecto-cromoverso/blob/main/src/utils/api.js): `src/utils/api.js`

### Other components

- **Visitor**
- **Catalog API**

## Connections

- Visitor → React entry: opens app
- React entry → Application shell: renders (evidence: `src/main.jsx`)
- Application shell → Navigation bar: renders (evidence: `src/App.jsx`)
- Application shell → Home hero: renders home (evidence: `src/App.jsx`)
- Application shell → Home worlds: renders home (evidence: `src/App.jsx`)
- Application shell → World catalog: routes to (evidence: `src/App.jsx`)
- Application shell → Card details: routes to (evidence: `src/App.jsx`)
- Application shell → Footer: renders (evidence: `src/App.jsx`)
- Application shell → Cookie consent: renders consent (evidence: `src/App.jsx`)
- Application shell → Interface text hook: loads text (evidence: `src/App.jsx`)
- Home worlds → Home data hook: loads worlds (evidence: `src/components/InicioMundos.jsx`)
- World catalog → Catalog data hook: loads catalog (evidence: `src/components/CatalogoMundo.jsx`)
- Card details → Card data hook: loads card (evidence: `src/components/DetalleCromo.jsx`)
- Navigation bar → Language selector: renders (evidence: `src/components/Navbar.jsx`)
- Navigation bar → Accessibility panel: renders (evidence: `src/components/Navbar.jsx`)
- Navigation bar → Icon renderer: renders (evidence: `src/components/Navbar.jsx`)
- World catalog → Icon renderer: renders (evidence: `src/components/CatalogoMundo.jsx`)
- Card details → Card illustrations: uses shapes (evidence: `src/components/DetalleCromo.jsx`)
- Home data hook → API URL helper: builds API URLs (evidence: `src/hooks/useInicioPublico.js`)
- Catalog data hook → API URL helper: builds API URLs (evidence: `src/hooks/useCatalogoMundo.js`)
- Card data hook → API URL helper: builds API URLs (evidence: `src/hooks/useDetalleCromo.js`)
- Interface text hook → API URL helper: builds API URLs (evidence: `src/hooks/useTextos.js`)
- Home data hook → Catalog API: fetches worlds and rareties (evidence: `src/hooks/useInicioPublico.js`)
- Catalog data hook → Catalog API: fetches catalog data (evidence: `src/hooks/useCatalogoMundo.js`)
- Card data hook → Catalog API: fetches card data (evidence: `src/hooks/useDetalleCromo.js`)
- Interface text hook → Catalog API: fetches interface text (evidence: `src/hooks/useTextos.js`)