How gitstabares/sintonia works
Sintonía is a public React music-catalog frontend. Visitors discover featured music and genres on the home page, browse catalog sections, and optionally filter by genre; shared UI supports language selection, cookie consent, and accessibility preferences. The app routes requests through page components, which invoke resource hooks for API-backed data. Preferences are applied and persisted separately from catalog data. The graph reflects README capabilities and shown imports/calls; unsampled implementations are represented only where documented, and no unverified call chains are inferred.
Main entry points: App.jsx Routes and state · Catalogo.jsx Catalog page · useRecurso.js HTTP resource loader · Home.jsx Home page
Components 26
App and routing
- Routes and state
src/App.jsx - Public layout
src/layouts/LayoutPublico.jsx
Music discovery
- Home page
src/pages/Home/Home.jsx - Discovery hero
src/components/Hero/Hero.jsx - Popular albums
src/components/SuenaAhora/SuenaAhora.jsx - Home genres
src/components/Generos/Generos.jsx - Catalog page
src/pages/Catalogo/Catalogo.jsx - Genre catalog
src/components/GenerosCatalogo/GenerosCatalogo.jsx - Featured catalog
src/components/DestacadosCatalogo/DestacadosCatalogo.jsx - Artist catalog
src/components/ArtistasCatalogo/ArtistasCatalogo.jsx - Song catalog
src/components/CancionesCatalogo/CancionesCatalogo.jsx
Shared interface
- Navigation
src/components/Navbar/Navbar.jsx - Cookie consent
src/components/BannerCookies/BannerCookies.jsx - Request states
src/components/EstadoPeticion/EstadoPeticion.jsx
API and resources
- General texts
src/hooks/useTextos.js - Accessibility texts
src/hooks/useTextosAccesibilidad.js - Genre resource hook
src/hooks/useGeneros.js - Album resource hook
src/hooks/useAlbumes.js - HTTP resource loader
src/hooks/useRecurso.js - API URL builder
src/utils/api.js
Preferences and access
- Accessibility panel
src/components/PanelAccesibilidad/PanelAccesibilidad.jsx - Preference persistence
src/utils/preferencias.js - Accessibility settings
src/utils/accesibilidad.js
Other components
- Visitor
- Sintonía API
- Browser storage
Connections 32
- Visitor → Routes and state: opens routes
README.md - Routes and state → Public layout: wraps routes
src/App.jsx - Routes and state → Home page: routes home
src/App.jsx - Routes and state → Catalog page: routes catalog
src/App.jsx - Routes and state → General texts: loads texts
src/App.jsx - Routes and state → Accessibility texts: loads access texts
src/App.jsx - Public layout → Navigation: renders
src/layouts/LayoutPublico.jsx - Public layout → Cookie consent: renders consent
src/layouts/LayoutPublico.jsx - Home page → Discovery hero: renders
src/pages/Home/Home.jsx - Home page → Popular albums: renders
src/pages/Home/Home.jsx - Home page → Home genres: renders
src/pages/Home/Home.jsx - Catalog page → Genre catalog: renders
src/pages/Catalogo/Catalogo.jsx - Catalog page → Featured catalog: renders
src/pages/Catalogo/Catalogo.jsx - Catalog page → Artist catalog: renders filtered
src/pages/Catalogo/Catalogo.jsx - Catalog page → Song catalog: renders filtered
src/pages/Catalogo/Catalogo.jsx - Catalog page → Genre resource hook: loads genres
src/pages/Catalogo/Catalogo.jsx - Catalog page → Album resource hook: loads albums
src/pages/Catalogo/Catalogo.jsx - Home genres → Genre resource hook: loads genres
src/components/Generos/Generos.jsx - Popular albums → Album resource hook: loads albums
src/components/SuenaAhora/SuenaAhora.jsx - Navigation → Accessibility panel: opens panel
src/components/Navbar/Navbar.jsx - Accessibility panel → Routes and state: updates settings
src/App.jsx - Routes and state → Accessibility settings: applies settings
src/App.jsx - Routes and state → Preference persistence: reads and saves
src/App.jsx - Routes and state → Browser storage: persists choices
src/App.jsx - HTTP resource loader → API URL builder: builds URL
src/hooks/useRecurso.js - Genre resource hook → HTTP resource loader: delegates request
src/hooks/useGeneros.js - Album resource hook → HTTP resource loader: delegates request
src/hooks/useAlbumes.js - General texts → HTTP resource loader: delegates request
src/hooks/useTextos.js - Accessibility texts → HTTP resource loader: delegates request
src/hooks/useTextosAccesibilidad.js - HTTP resource loader → Sintonía API: fetches resources
README.md - Genre resource hook → Request states: reports request state
- Album resource hook → Request states: reports request state