How juan122421/cromoverso works
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: PreferenciasContext.jsx Preferences state · App.jsx Route app · CatalogoMundo.jsx World catalog · Inicio.jsx Homepage
Components 26
Pages and navigation
- Route app
src/App.jsx - Homepage
src/pages/Inicio.jsx - World catalog
src/pages/CatalogoMundo.jsx - Not found
src/pages/NoEncontrado.jsx - Route destinations
src/config/destinos.js
Catalog and API
- Data loading hook
src/hooks/useDatos.js - Fetch client
src/services/api.js - API configuration
src/config/api.js - Course API
- Text formatting
src/utils/formatear.js - World styling
src/config/mundos.js
Preferences and language
- Language selector
src/components/SelectorIdioma/SelectorIdioma.jsx - Preferences state
src/context/PreferenciasContext.jsx - Interface translations
src/hooks/useTextos.js - Cookie utilities
src/utils/cookies.js
Shared interface
- Public layout
src/components/LayoutPublico/LayoutPublico.jsx - Navigation bar
src/components/Navbar/Navbar.jsx - Mobile menu
src/components/MenuMovil/MenuMovil.jsx - Cookie manager
src/components/GestorCookies/GestorCookies.jsx - Cookie notice
src/components/BannerCookies/BannerCookies.jsx - Accessibility panel
src/components/PanelAccesibilidad/PanelAccesibilidad.jsx - Accessibility button
src/components/BotonAccesibilidad/BotonAccesibilidad.jsx - Sticker card
src/components/Cromo/Cromo.jsx - World card
src/components/TarjetaMundo/TarjetaMundo.jsx - Rarity label
src/components/EtiquetaRareza/EtiquetaRareza.jsx
Other components
- Visitor
Connections 36
- Visitor → Route app: opens routes
README.md - Route app → Preferences state: provides state
src/App.jsx - Route app → Public layout: renders shell
src/App.jsx - Route app → Homepage: routes to
src/App.jsx - Route app → World catalog: routes to
src/App.jsx - Route app → Not found: routes to
src/App.jsx - Route app → Route destinations: reads initial world
src/App.jsx - Public layout → Navigation bar: renders
src/components/LayoutPublico/LayoutPublico.jsx - Public layout → Cookie manager: renders
src/components/LayoutPublico/LayoutPublico.jsx - Public layout → Accessibility panel: renders
src/components/LayoutPublico/LayoutPublico.jsx - Navigation bar → Mobile menu: renders
src/components/Navbar/Navbar.jsx - Navigation bar → Preferences state: reads text state
src/components/Navbar/Navbar.jsx - Navigation bar → Route destinations: reads links
src/components/Navbar/Navbar.jsx - Mobile menu → Preferences state: reads text state
src/components/MenuMovil/MenuMovil.jsx - Mobile menu → Route destinations: reads links
src/components/MenuMovil/MenuMovil.jsx - Cookie manager → Cookie notice: renders
src/components/GestorCookies/GestorCookies.jsx - Cookie manager → Preferences state: reads consent
src/components/GestorCookies/GestorCookies.jsx - Accessibility button → Preferences state: reads settings
src/components/BotonAccesibilidad/BotonAccesibilidad.jsx - Accessibility panel → Preferences state: updates settings
src/components/PanelAccesibilidad/PanelAccesibilidad.jsx - Language selector → Preferences state: changes language
src/components/SelectorIdioma/SelectorIdioma.jsx - Preferences state → Interface translations: loads translations
src/context/PreferenciasContext.jsx - Preferences state → Cookie utilities: reads and writes
src/context/PreferenciasContext.jsx - Interface translations → API configuration: reads API URL
src/hooks/useTextos.js - Homepage → Data loading hook: loads page data
src/pages/Inicio.jsx - World catalog → Data loading hook: loads catalog data
src/pages/CatalogoMundo.jsx - Homepage → Fetch client: requests worlds and rarities
src/pages/Inicio.jsx - World catalog → Fetch client: requests worlds and stickers
src/pages/CatalogoMundo.jsx - Fetch client → API configuration: uses base URL
src/services/api.js - Fetch client → Course API: fetches JSON
src/services/api.js - Homepage → Sticker card: renders featured cards
src/pages/Inicio.jsx - Homepage → World card: renders worlds
src/pages/Inicio.jsx - World catalog → Sticker card: renders results
src/pages/CatalogoMundo.jsx - World catalog → Rarity label: uses rarity labels
src/pages/CatalogoMundo.jsx - Homepage → Text formatting: formats labels
src/pages/Inicio.jsx - World catalog → Text formatting: formats labels
src/pages/CatalogoMundo.jsx - World catalog → World styling: styles world
src/pages/CatalogoMundo.jsx