How joseherrera891/proyecto-cromoverso works
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: App.jsx Application shell · Navbar.jsx Navigation bar · api.js API URL helper · CatalogoMundo.jsx World catalog
Components 21
App and navigation
- React entry
src/main.jsx - Application shell
src/App.jsx
Catalog experience
- Home hero
src/components/InicioHero.jsx - Home worlds
src/components/InicioMundos.jsx - World catalog
src/components/CatalogoMundo.jsx - Card details
src/components/DetalleCromo.jsx - Home rareties
src/components/InicioRarezas.jsx
Shared interface
- Navigation bar
src/components/Navbar.jsx - Language selector
src/components/LanguageSelector.jsx - Accessibility panel
src/components/PanelAccesibilidad.jsx - Footer
src/components/Footer.jsx - Cookie consent
src/components/CookieBanner.jsx - Icon renderer
src/components/Icono.jsx - Card illustrations
src/utils/figuras.jsx
Data access
- Home data hook
src/hooks/useInicioPublico.js - Catalog data hook
src/hooks/useCatalogoMundo.js - Card data hook
src/hooks/useDetalleCromo.js - Interface text hook
src/hooks/useTextos.js - API URL helper
src/utils/api.js
Other components
- Visitor
- Catalog API
Connections 26
- Visitor → React entry: opens app
- React entry → Application shell: renders
src/main.jsx - Application shell → Navigation bar: renders
src/App.jsx - Application shell → Home hero: renders home
src/App.jsx - Application shell → Home worlds: renders home
src/App.jsx - Application shell → World catalog: routes to
src/App.jsx - Application shell → Card details: routes to
src/App.jsx - Application shell → Footer: renders
src/App.jsx - Application shell → Cookie consent: renders consent
src/App.jsx - Application shell → Interface text hook: loads text
src/App.jsx - Home worlds → Home data hook: loads worlds
src/components/InicioMundos.jsx - World catalog → Catalog data hook: loads catalog
src/components/CatalogoMundo.jsx - Card details → Card data hook: loads card
src/components/DetalleCromo.jsx - Navigation bar → Language selector: renders
src/components/Navbar.jsx - Navigation bar → Accessibility panel: renders
src/components/Navbar.jsx - Navigation bar → Icon renderer: renders
src/components/Navbar.jsx - World catalog → Icon renderer: renders
src/components/CatalogoMundo.jsx - Card details → Card illustrations: uses shapes
src/components/DetalleCromo.jsx - Home data hook → API URL helper: builds API URLs
src/hooks/useInicioPublico.js - Catalog data hook → API URL helper: builds API URLs
src/hooks/useCatalogoMundo.js - Card data hook → API URL helper: builds API URLs
src/hooks/useDetalleCromo.js - Interface text hook → API URL helper: builds API URLs
src/hooks/useTextos.js - Home data hook → Catalog API: fetches worlds and rareties
src/hooks/useInicioPublico.js - Catalog data hook → Catalog API: fetches catalog data
src/hooks/useCatalogoMundo.js - Card data hook → Catalog API: fetches card data
src/hooks/useDetalleCromo.js - Interface text hook → Catalog API: fetches interface text
src/hooks/useTextos.js