# gitstabares/sintonia architecture

> Architecture diagram of the GitHub repository gitstabares/sintonia, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-12). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/gitstabares/sintonia
- Repository: https://github.com/gitstabares/sintonia

## Overview

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: [`src/App.jsx`](https://github.com/gitstabares/sintonia/blob/main/src/App.jsx) (Routes and state), [`src/pages/Catalogo/Catalogo.jsx`](https://github.com/gitstabares/sintonia/blob/main/src/pages/Catalogo/Catalogo.jsx) (Catalog page), [`src/hooks/useRecurso.js`](https://github.com/gitstabares/sintonia/blob/main/src/hooks/useRecurso.js) (HTTP resource loader), [`src/pages/Home/Home.jsx`](https://github.com/gitstabares/sintonia/blob/main/src/pages/Home/Home.jsx) (Home page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App and routing"]
  node_app["Routes and state<br/>[App.jsx]"]
  node_layout["Public layout<br/>[LayoutPublico.jsx]"]
end

subgraph group_discovery["Music discovery"]
  node_home["Home page<br/>[Home.jsx]"]
  node_hero["Discovery hero<br/>[Hero.jsx]"]
  node_now["Popular albums<br/>[SuenaAhora.jsx]"]
  node_homegenres["Home genres<br/>[Generos.jsx]"]
  node_catalog["Catalog page<br/>[Catalogo.jsx]"]
  node_genres["Genre catalog"]
  node_featured["Featured catalog"]
  node_artists["Artist catalog"]
  node_songs["Song catalog"]
end

subgraph group_shared["Shared interface"]
  node_navbar["Navigation<br/>[Navbar.jsx]"]
  node_cookie["Cookie consent<br/>[BannerCookies.jsx]"]
  node_requeststate["Request states<br/>[EstadoPeticion.jsx]"]
end

subgraph group_data["API and resources"]
  node_texts["General texts<br/>[useTextos.js]"]
  node_accessibilitytexts["Accessibility texts"]
  node_genresdata["Genre resource hook<br/>[useGeneros.js]"]
  node_albumsdata["Album resource hook<br/>[useAlbumes.js]"]
  node_resource["HTTP resource loader<br/>[useRecurso.js]"]
  node_apiurl["API URL builder<br/>[api.js]"]
end

subgraph group_prefs["Preferences and access"]
  node_accesspanel["Accessibility panel"]
  node_preferences["Preference persistence<br/>[preferencias.js]"]
  node_accessutils["Accessibility settings<br/>[accesibilidad.js]"]
end

node_visitor(("Visitor"))
node_backend{{"Sintonía API"}}
node_storage[("Browser storage")]

node_visitor -->|"opens routes"| node_app
node_app -->|"wraps routes"| node_layout
node_app -->|"routes home"| node_home
node_app -->|"routes catalog"| node_catalog
node_app -->|"loads texts"| node_texts
node_app -->|"loads access texts"| node_accessibilitytexts
node_layout -->|"renders"| node_navbar
node_layout -->|"renders consent"| node_cookie
node_home -->|"renders"| node_hero
node_home -->|"renders"| node_now
node_home -->|"renders"| node_homegenres
node_catalog -->|"renders"| node_genres
node_catalog -->|"renders"| node_featured
node_catalog -->|"renders filtered"| node_artists
node_catalog -->|"renders filtered"| node_songs
node_catalog -->|"loads genres"| node_genresdata
node_catalog -->|"loads albums"| node_albumsdata
node_homegenres -->|"loads genres"| node_genresdata
node_now -->|"loads albums"| node_albumsdata
node_navbar -->|"opens panel"| node_accesspanel
node_accesspanel -->|"updates settings"| node_app
node_app -->|"applies settings"| node_accessutils
node_app -->|"reads and saves"| node_preferences
node_app -->|"persists choices"| node_storage
node_resource -->|"builds URL"| node_apiurl
node_genresdata -->|"delegates request"| node_resource
node_albumsdata -->|"delegates request"| node_resource
node_texts -->|"delegates request"| node_resource
node_accessibilitytexts -->|"delegates request"| node_resource
node_resource -->|"fetches resources"| node_backend
node_genresdata -.->|"reports request state"| node_requeststate
node_albumsdata -.->|"reports request state"| node_requeststate

click node_app "https://github.com/gitstabares/sintonia/blob/main/src/App.jsx"
click node_layout "https://github.com/gitstabares/sintonia/blob/main/src/layouts/LayoutPublico.jsx"
click node_home "https://github.com/gitstabares/sintonia/blob/main/src/pages/Home/Home.jsx"
click node_hero "https://github.com/gitstabares/sintonia/blob/main/src/components/Hero/Hero.jsx"
click node_now "https://github.com/gitstabares/sintonia/blob/main/src/components/SuenaAhora/SuenaAhora.jsx"
click node_homegenres "https://github.com/gitstabares/sintonia/blob/main/src/components/Generos/Generos.jsx"
click node_catalog "https://github.com/gitstabares/sintonia/blob/main/src/pages/Catalogo/Catalogo.jsx"
click node_genres "https://github.com/gitstabares/sintonia/blob/main/src/components/GenerosCatalogo/GenerosCatalogo.jsx"
click node_featured "https://github.com/gitstabares/sintonia/blob/main/src/components/DestacadosCatalogo/DestacadosCatalogo.jsx"
click node_artists "https://github.com/gitstabares/sintonia/blob/main/src/components/ArtistasCatalogo/ArtistasCatalogo.jsx"
click node_songs "https://github.com/gitstabares/sintonia/blob/main/src/components/CancionesCatalogo/CancionesCatalogo.jsx"
click node_navbar "https://github.com/gitstabares/sintonia/blob/main/src/components/Navbar/Navbar.jsx"
click node_cookie "https://github.com/gitstabares/sintonia/blob/main/src/components/BannerCookies/BannerCookies.jsx"
click node_requeststate "https://github.com/gitstabares/sintonia/blob/main/src/components/EstadoPeticion/EstadoPeticion.jsx"
click node_accesspanel "https://github.com/gitstabares/sintonia/blob/main/src/components/PanelAccesibilidad/PanelAccesibilidad.jsx"
click node_preferences "https://github.com/gitstabares/sintonia/blob/main/src/utils/preferencias.js"
click node_accessutils "https://github.com/gitstabares/sintonia/blob/main/src/utils/accesibilidad.js"
click node_texts "https://github.com/gitstabares/sintonia/blob/main/src/hooks/useTextos.js"
click node_accessibilitytexts "https://github.com/gitstabares/sintonia/blob/main/src/hooks/useTextosAccesibilidad.js"
click node_genresdata "https://github.com/gitstabares/sintonia/blob/main/src/hooks/useGeneros.js"
click node_albumsdata "https://github.com/gitstabares/sintonia/blob/main/src/hooks/useAlbumes.js"
click node_resource "https://github.com/gitstabares/sintonia/blob/main/src/hooks/useRecurso.js"
click node_apiurl "https://github.com/gitstabares/sintonia/blob/main/src/utils/api.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_layout toneBlue
class node_home,node_hero,node_now,node_homegenres,node_catalog,node_genres,node_featured,node_artists,node_songs,node_storage toneAmber
class node_navbar,node_cookie,node_requeststate,node_backend toneMint
class node_texts,node_accessibilitytexts,node_genresdata,node_albumsdata,node_resource,node_apiurl toneRose
class node_accesspanel,node_preferences,node_accessutils,node_visitor toneIndigo
```

## Components

### App and routing

- [Routes and state](https://github.com/gitstabares/sintonia/blob/main/src/App.jsx): `src/App.jsx`
- [Public layout](https://github.com/gitstabares/sintonia/blob/main/src/layouts/LayoutPublico.jsx): `src/layouts/LayoutPublico.jsx`

### Music discovery

- [Home page](https://github.com/gitstabares/sintonia/blob/main/src/pages/Home/Home.jsx): `src/pages/Home/Home.jsx`
- [Discovery hero](https://github.com/gitstabares/sintonia/blob/main/src/components/Hero/Hero.jsx): `src/components/Hero/Hero.jsx`
- [Popular albums](https://github.com/gitstabares/sintonia/blob/main/src/components/SuenaAhora/SuenaAhora.jsx): `src/components/SuenaAhora/SuenaAhora.jsx`
- [Home genres](https://github.com/gitstabares/sintonia/blob/main/src/components/Generos/Generos.jsx): `src/components/Generos/Generos.jsx`
- [Catalog page](https://github.com/gitstabares/sintonia/blob/main/src/pages/Catalogo/Catalogo.jsx): `src/pages/Catalogo/Catalogo.jsx`
- [Genre catalog](https://github.com/gitstabares/sintonia/blob/main/src/components/GenerosCatalogo/GenerosCatalogo.jsx): `src/components/GenerosCatalogo/GenerosCatalogo.jsx`
- [Featured catalog](https://github.com/gitstabares/sintonia/blob/main/src/components/DestacadosCatalogo/DestacadosCatalogo.jsx): `src/components/DestacadosCatalogo/DestacadosCatalogo.jsx`
- [Artist catalog](https://github.com/gitstabares/sintonia/blob/main/src/components/ArtistasCatalogo/ArtistasCatalogo.jsx): `src/components/ArtistasCatalogo/ArtistasCatalogo.jsx`
- [Song catalog](https://github.com/gitstabares/sintonia/blob/main/src/components/CancionesCatalogo/CancionesCatalogo.jsx): `src/components/CancionesCatalogo/CancionesCatalogo.jsx`

### Shared interface

- [Navigation](https://github.com/gitstabares/sintonia/blob/main/src/components/Navbar/Navbar.jsx): `src/components/Navbar/Navbar.jsx`
- [Cookie consent](https://github.com/gitstabares/sintonia/blob/main/src/components/BannerCookies/BannerCookies.jsx): `src/components/BannerCookies/BannerCookies.jsx`
- [Request states](https://github.com/gitstabares/sintonia/blob/main/src/components/EstadoPeticion/EstadoPeticion.jsx): `src/components/EstadoPeticion/EstadoPeticion.jsx`

### API and resources

- [General texts](https://github.com/gitstabares/sintonia/blob/main/src/hooks/useTextos.js): `src/hooks/useTextos.js`
- [Accessibility texts](https://github.com/gitstabares/sintonia/blob/main/src/hooks/useTextosAccesibilidad.js): `src/hooks/useTextosAccesibilidad.js`
- [Genre resource hook](https://github.com/gitstabares/sintonia/blob/main/src/hooks/useGeneros.js): `src/hooks/useGeneros.js`
- [Album resource hook](https://github.com/gitstabares/sintonia/blob/main/src/hooks/useAlbumes.js): `src/hooks/useAlbumes.js`
- [HTTP resource loader](https://github.com/gitstabares/sintonia/blob/main/src/hooks/useRecurso.js): `src/hooks/useRecurso.js`
- [API URL builder](https://github.com/gitstabares/sintonia/blob/main/src/utils/api.js): `src/utils/api.js`

### Preferences and access

- [Accessibility panel](https://github.com/gitstabares/sintonia/blob/main/src/components/PanelAccesibilidad/PanelAccesibilidad.jsx): `src/components/PanelAccesibilidad/PanelAccesibilidad.jsx`
- [Preference persistence](https://github.com/gitstabares/sintonia/blob/main/src/utils/preferencias.js): `src/utils/preferencias.js`
- [Accessibility settings](https://github.com/gitstabares/sintonia/blob/main/src/utils/accesibilidad.js): `src/utils/accesibilidad.js`

### Other components

- **Visitor**
- **Sintonía API**
- **Browser storage**

## Connections

- Visitor → Routes and state: opens routes (evidence: `README.md`)
- Routes and state → Public layout: wraps routes (evidence: `src/App.jsx`)
- Routes and state → Home page: routes home (evidence: `src/App.jsx`)
- Routes and state → Catalog page: routes catalog (evidence: `src/App.jsx`)
- Routes and state → General texts: loads texts (evidence: `src/App.jsx`)
- Routes and state → Accessibility texts: loads access texts (evidence: `src/App.jsx`)
- Public layout → Navigation: renders (evidence: `src/layouts/LayoutPublico.jsx`)
- Public layout → Cookie consent: renders consent (evidence: `src/layouts/LayoutPublico.jsx`)
- Home page → Discovery hero: renders (evidence: `src/pages/Home/Home.jsx`)
- Home page → Popular albums: renders (evidence: `src/pages/Home/Home.jsx`)
- Home page → Home genres: renders (evidence: `src/pages/Home/Home.jsx`)
- Catalog page → Genre catalog: renders (evidence: `src/pages/Catalogo/Catalogo.jsx`)
- Catalog page → Featured catalog: renders (evidence: `src/pages/Catalogo/Catalogo.jsx`)
- Catalog page → Artist catalog: renders filtered (evidence: `src/pages/Catalogo/Catalogo.jsx`)
- Catalog page → Song catalog: renders filtered (evidence: `src/pages/Catalogo/Catalogo.jsx`)
- Catalog page → Genre resource hook: loads genres (evidence: `src/pages/Catalogo/Catalogo.jsx`)
- Catalog page → Album resource hook: loads albums (evidence: `src/pages/Catalogo/Catalogo.jsx`)
- Home genres → Genre resource hook: loads genres (evidence: `src/components/Generos/Generos.jsx`)
- Popular albums → Album resource hook: loads albums (evidence: `src/components/SuenaAhora/SuenaAhora.jsx`)
- Navigation → Accessibility panel: opens panel (evidence: `src/components/Navbar/Navbar.jsx`)
- Accessibility panel → Routes and state: updates settings (evidence: `src/App.jsx`)
- Routes and state → Accessibility settings: applies settings (evidence: `src/App.jsx`)
- Routes and state → Preference persistence: reads and saves (evidence: `src/App.jsx`)
- Routes and state → Browser storage: persists choices (evidence: `src/App.jsx`)
- HTTP resource loader → API URL builder: builds URL (evidence: `src/hooks/useRecurso.js`)
- Genre resource hook → HTTP resource loader: delegates request (evidence: `src/hooks/useGeneros.js`)
- Album resource hook → HTTP resource loader: delegates request (evidence: `src/hooks/useAlbumes.js`)
- General texts → HTTP resource loader: delegates request (evidence: `src/hooks/useTextos.js`)
- Accessibility texts → HTTP resource loader: delegates request (evidence: `src/hooks/useTextosAccesibilidad.js`)
- HTTP resource loader → Sintonía API: fetches resources (evidence: `README.md`)
- Genre resource hook → Request states: reports request state
- Album resource hook → Request states: reports request state