How keycrazy/proyecto-sintonia works
Sintonía is a Spanish-language music discovery website. Visitors enter the public home or catalog; the app loads localized text and music data, then presents genres, popular albums, and genre details. The catalog hook reuses the public-home data hook for genre lists and popular albums, while fetching genre details separately. Shared UI, language and cookie preferences, and accessibility controls support that flow. Source excerpts show these client-side relationships; the backend API’s internal behavior is not present in the repository evidence.
Main entry points: App.jsx App shell · Navbar.jsx Navigation bar · Catalogo.jsx Catalog view · useCatalogo.js Catalog data hook
Components 20
App and navigation
- React mount
src/main.jsx - App shell
src/App.jsx - Navigation bar
src/Components/Navbar.jsx - Footer
src/Components/Footer.jsx - Localized text hook
src/hooks/useTextos.js
Music discovery
- Public home
src/Components/InicioPublico.jsx - Catalog view
src/Components/Catalogo.jsx - Home data hook
src/hooks/useInicioPublico.js - Catalog data hook
src/hooks/useCatalogo.js
Preferences and accessibility
- Language data hook
src/hooks/useIdiomas.js - Accessibility panel
src/Components/AccessibilityPanel.jsx - Cookie notice
src/Components/base/CookieNotice.jsx - Cookie utilities
src/utils/cookies.js - Language selector
src/Components/base/LanguageSelector.jsx
Shared UI and API
- API URL builder
src/utils/api.js - Button
src/Components/base/Button.jsx - Cover artwork
src/Components/base/Portada.jsx - Icon renderer
src/Components/Icono.jsx
Other components
- Visitor
- Content API
Connections 30
- Visitor → React mount: opens site
- React mount → App shell: mounts
src/main.jsx - App shell → Localized text hook: loads text
src/App.jsx - App shell → Language data hook: loads languages
src/App.jsx - App shell → Navigation bar: renders
src/App.jsx - App shell → Footer: renders
src/App.jsx - App shell → Public home: renders
src/App.jsx - App shell → Catalog view: renders
src/App.jsx - App shell → Accessibility panel: renders
src/App.jsx - App shell → Cookie notice: renders
src/App.jsx - App shell → Cookie utilities: reads and writes
src/App.jsx - Public home → Home data hook: loads content
src/Components/InicioPublico.jsx - Catalog view → Catalog data hook: loads catalog
src/Components/Catalogo.jsx - Catalog data hook → Home data hook: reuses lists
src/hooks/useCatalogo.js - Home data hook → API URL builder: builds request URL
src/hooks/useInicioPublico.js - Catalog data hook → API URL builder: builds detail URL
src/hooks/useCatalogo.js - Localized text hook → API URL builder: builds request URL
src/hooks/useTextos.js - Language data hook → API URL builder: builds request URL
src/hooks/useIdiomas.js - Home data hook → Content API: fetches genres and albums
src/hooks/useInicioPublico.js - Catalog data hook → Content API: fetches genre details
src/hooks/useCatalogo.js - Localized text hook → Content API: fetches translations
src/hooks/useTextos.js - Language data hook → Content API: fetches languages
src/hooks/useIdiomas.js - Catalog view → Cover artwork: renders artwork
src/Components/Catalogo.jsx - Catalog view → Button: renders actions
src/Components/Catalogo.jsx - Navigation bar → Language selector: renders selector
src/Components/Navbar.jsx - Navigation bar → Button: renders action
src/Components/Navbar.jsx - Navigation bar → Icon renderer: renders icons
src/Components/Navbar.jsx - Cookie notice → Cookie utilities: stores consent
src/Components/base/CookieNotice.jsx - Cookie notice → Button: renders choices
src/Components/base/CookieNotice.jsx - Accessibility panel → Icon renderer: renders icons
src/Components/AccessibilityPanel.jsx