How simoncarde/cromoverso works
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: App.jsx Router and App · DetalleMundo.jsx World Album · api.js API Endpoints · Mundos.jsx World Catalog
Components 21
Application Shell
- Router and App
src/App.jsx - Navigation
src/components/Navbar/Navbar.jsx - Home Hero
src/components/Hero/Hero.jsx - Cookie Banner
src/components/Cookies/Cookies.jsx - Footer
src/components/Footer/Footer.jsx
Worlds and Albums
- World Catalog
src/components/Mundos/Mundos.jsx - World Album
src/components/Mundos/DetalleMundo/DetalleMundo.jsx - Album Controls
src/components/Mundos/DetalleMundo - Card Tile
src/components/Mundos/DetalleMundo/TarjetaCromo.jsx - UI Icons
src/components/Iconos.jsx
Remote Data
- Text Templates
src/utils/textos.js - Translation Hook
src/hooks/useTextos.js - Worlds Hook
src/hooks/useMundos.js - Featured Cards Hook
src/hooks/useCromos.js - Album Collection Hook
src/hooks/useColeccionCromos.js - API Endpoints
src/services/api.js
Site Preferences
- Accessibility Preferences
src/hooks/useAccesibilidad.js - Accessibility Dialog
src/components/PanelAccesibilidad/PanelAccesibilidad.jsx
Other components
- Visitor
- Cromoverso API
- Browser localStorage
Connections 31
- Visitor → Router and App: opens
README.md - Router and App → Navigation: renders
src/App.jsx - Router and App → Home Hero: routes home to
src/App.jsx - Router and App → World Catalog: renders
src/App.jsx - Router and App → World Album: routes album to
src/App.jsx - Router and App → Cookie Banner: renders
src/App.jsx - Router and App → Footer: renders
src/App.jsx - Router and App → Translation Hook: loads translations
src/App.jsx - Router and App → Worlds Hook: loads worlds
src/App.jsx - Router and App → Accessibility Preferences: loads preferences
src/App.jsx - Router and App → Accessibility Dialog: opens dialog
src/App.jsx - Router and App → Navigation: passes language control
README.md - Home Hero → Featured Cards Hook: loads featured cards
src/components/Hero/Hero.jsx - World Catalog → Text Templates: formats labels
src/components/Mundos/Mundos.jsx - World Catalog → World Album: links to world
src/components/Mundos/Mundos.jsx - World Album → Album Collection Hook: loads card collection
src/components/Mundos/DetalleMundo/DetalleMundo.jsx - World Album → Album Controls: renders controls
src/components/Mundos/DetalleMundo/DetalleMundo.jsx - World Album → Card Tile: renders cards
src/components/Mundos/DetalleMundo/DetalleMundo.jsx - World Album → Text Templates: formats text
src/components/Mundos/DetalleMundo/DetalleMundo.jsx - Home Hero → UI Icons: renders icons
src/components/Hero/Hero.jsx - World Catalog → UI Icons: renders icons
src/components/Mundos/Mundos.jsx - Card Tile → UI Icons: renders icons
src/components/Mundos/DetalleMundo/TarjetaCromo.jsx - Card Tile → Text Templates: formats text
src/components/Mundos/DetalleMundo/TarjetaCromo.jsx - Translation Hook → API Endpoints: requests text endpoint
src/hooks/useTextos.js - Worlds Hook → API Endpoints: requests worlds endpoint
src/hooks/useMundos.js - Featured Cards Hook → API Endpoints: requests card data
src/hooks/useCromos.js - Album Collection Hook → API Endpoints: requests paginated cards
src/hooks/useColeccionCromos.js - API Endpoints → Cromoverso API: configures requests
README.md - Accessibility Preferences → Browser localStorage: persists preferences
README.md - Accessibility Preferences → Accessibility Dialog: supplies preferences
src/App.jsx - Accessibility Dialog → Accessibility Preferences: changes preferences
src/App.jsx