# pyeimy811-max/sinfonia architecture

> Architecture diagram of the GitHub repository pyeimy811-max/sinfonia, 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/pyeimy811-max/sinfonia
- Repository: https://github.com/pyeimy811-max/sinfonia

## Overview

Sinfonia is a Spanish/English music-discovery frontend. Visitors browse a home page or catalog, filter by genre, inspect genre-specific artists, albums and tracks, and select albums for a detail view. The app also provides localized navigation, accessibility controls, and cookie preferences. The README gives no further product detail; some capabilities are represented from the source index, so links to unsampled implementations are omitted or marked unverified.

Main entry points: [`src/App.jsx`](https://github.com/pyeimy811-max/sinfonia/blob/main/src/App.jsx) (App shell), [`src/pages/Catalogo/Catalogo.jsx`](https://github.com/pyeimy811-max/sinfonia/blob/main/src/pages/Catalogo/Catalogo.jsx) (Catalog page), [`src/components/Navbar/Navbar.jsx`](https://github.com/pyeimy811-max/sinfonia/blob/main/src/components/Navbar/Navbar.jsx) (Navigation), [`src/components/SeccionesAlbumes/SeccionesAlbumes.jsx`](https://github.com/pyeimy811-max/sinfonia/blob/main/src/components/SeccionesAlbumes/SeccionesAlbumes.jsx) (Album sections)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application shell"]
  node_entry["React entry<br/>[main.jsx]"]
  node_app_shell["App shell<br/>[App.jsx]"]
end

subgraph group_discovery["Music discovery"]
  node_hero["Home hero<br/>[HeroSintonia.jsx]"]
  node_collage["Cover collage"]
  node_album_sections["Album sections"]
  node_album_card["Album card<br/>[TarjetaAlbum.jsx]"]
  node_genre_sections["Genre sections<br/>[SeccionGeneros.jsx]"]
  node_genre_card["Genre card<br/>[TarjetaGenero.jsx]"]
  node_catalog["Catalog page<br/>[Catalogo.jsx]"]
  node_catalog_heading["Catalog heading"]
  node_artist_card["Artist card<br/>[TarjetaArtista.jsx]"]
  node_track_list["Track list<br/>[ListaCanciones.jsx]"]
end

subgraph group_shared["Shared interface"]
  node_navbar["Navigation<br/>[Navbar.jsx]"]
  node_accessibility["Accessibility panel"]
  node_icons["Interface icons<br/>[Icono.jsx]"]
  node_cover_art["Album artwork<br/>[PortadaAlbum.jsx]"]
  node_registration["Registration invitation"]
  node_cookie_banner["Cookie banner<br/>[BannerCookies.jsx]"]
  node_footer["Footer<br/>[Footer.jsx]"]
end

subgraph group_data["Data and preferences"]
  node_text_hook["Text loader<br/>[useTextos.js]"]
  node_album_hook["Album loader<br/>[useALbumes.js]"]
  node_genres_hook["Genre loader<br/>[useGeneros.js]"]
  node_genre_hook["Genre detail loader<br/>[useGenero.js]"]
  node_cookie_service["Cookie preferences<br/>[cookies.js]"]
end

node_visitor(("Visitor"))
node_music_api{{"Sinfonia API"}}

node_visitor -->|"opens app"| node_entry
node_entry -->|"renders"| node_app_shell
node_app_shell -->|"renders"| node_navbar
node_app_shell -->|"renders"| node_hero
node_app_shell -->|"renders"| node_album_sections
node_app_shell -->|"renders"| node_genre_sections
node_app_shell -->|"routes to"| node_catalog
node_app_shell -->|"renders"| node_registration
node_app_shell -->|"renders"| node_cookie_banner
node_app_shell -->|"renders"| node_footer
node_app_shell -->|"loads text"| node_text_hook
node_app_shell -->|"loads albums"| node_album_hook
node_app_shell -->|"loads genres"| node_genres_hook
node_app_shell -->|"reads language"| node_cookie_service
node_navbar -->|"opens panel"| node_accessibility
node_navbar -->|"renders"| node_icons
node_accessibility -->|"renders"| node_icons
node_hero -->|"renders"| node_collage
node_collage -->|"renders"| node_cover_art
node_album_sections -->|"renders"| node_album_card
node_album_card -->|"renders"| node_cover_art
node_genre_sections -->|"renders"| node_genre_card
node_genre_card -->|"renders"| node_cover_art
node_catalog -->|"renders"| node_catalog_heading
node_catalog -->|"renders"| node_genre_sections
node_catalog -->|"renders"| node_album_sections
node_catalog -->|"renders"| node_artist_card
node_catalog -->|"renders"| node_track_list
node_catalog -->|"loads genre detail"| node_genre_hook
node_catalog -->|"loads albums"| node_album_hook
node_cookie_banner -->|"uses preferences"| node_cookie_service
node_text_hook -->|"fetches translations"| node_music_api
node_album_hook -->|"fetches albums"| node_music_api
node_genre_hook -->|"fetches genre detail"| node_music_api
node_genres_hook -.-> node_music_api

click node_entry "https://github.com/pyeimy811-max/sinfonia/blob/main/src/main.jsx"
click node_app_shell "https://github.com/pyeimy811-max/sinfonia/blob/main/src/App.jsx"
click node_navbar "https://github.com/pyeimy811-max/sinfonia/blob/main/src/components/Navbar/Navbar.jsx"
click node_accessibility "https://github.com/pyeimy811-max/sinfonia/blob/main/src/components/PanelAccesibilidad/PanelAccesibilidad.jsx"
click node_icons "https://github.com/pyeimy811-max/sinfonia/blob/main/src/components/Icono.jsx"
click node_hero "https://github.com/pyeimy811-max/sinfonia/blob/main/src/components/HeroSintonia/HeroSintonia.jsx"
click node_collage "https://github.com/pyeimy811-max/sinfonia/blob/main/src/components/CollagePortadas/CollagePortadas.jsx"
click node_album_sections "https://github.com/pyeimy811-max/sinfonia/blob/main/src/components/SeccionesAlbumes/SeccionesAlbumes.jsx"
click node_album_card "https://github.com/pyeimy811-max/sinfonia/blob/main/src/components/TarjetaAlbum/TarjetaAlbum.jsx"
click node_genre_sections "https://github.com/pyeimy811-max/sinfonia/blob/main/src/components/SeccionGeneros/SeccionGeneros.jsx"
click node_genre_card "https://github.com/pyeimy811-max/sinfonia/blob/main/src/components/TarjetaGenero/TarjetaGenero.jsx"
click node_catalog "https://github.com/pyeimy811-max/sinfonia/blob/main/src/pages/Catalogo/Catalogo.jsx"
click node_catalog_heading "https://github.com/pyeimy811-max/sinfonia/blob/main/src/components/EncabezadoCatalogo/EncabezadoCatalogo.jsx"
click node_artist_card "https://github.com/pyeimy811-max/sinfonia/blob/main/src/components/TarjetaArtista/TarjetaArtista.jsx"
click node_track_list "https://github.com/pyeimy811-max/sinfonia/blob/main/src/components/ListaCanciones/ListaCanciones.jsx"
click node_cover_art "https://github.com/pyeimy811-max/sinfonia/blob/main/src/components/PortadaAlbum/PortadaAlbum.jsx"
click node_registration "https://github.com/pyeimy811-max/sinfonia/blob/main/src/components/InvitacionRegistro/InvitacionRegistro.jsx"
click node_cookie_banner "https://github.com/pyeimy811-max/sinfonia/blob/main/src/components/BannerCookies/BannerCookies.jsx"
click node_footer "https://github.com/pyeimy811-max/sinfonia/blob/main/src/components/Footer/Footer.jsx"
click node_text_hook "https://github.com/pyeimy811-max/sinfonia/blob/main/src/hooks/useTextos.js"
click node_album_hook "https://github.com/pyeimy811-max/sinfonia/blob/main/src/hooks/useALbumes.js"
click node_genres_hook "https://github.com/pyeimy811-max/sinfonia/blob/main/src/hooks/useGeneros.js"
click node_genre_hook "https://github.com/pyeimy811-max/sinfonia/blob/main/src/hooks/useGenero.js"
click node_cookie_service "https://github.com/pyeimy811-max/sinfonia/blob/main/src/services/cookies.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_entry,node_app_shell toneBlue
class node_hero,node_collage,node_album_sections,node_album_card,node_genre_sections,node_genre_card,node_catalog,node_catalog_heading,node_artist_card,node_track_list toneAmber
class node_navbar,node_accessibility,node_icons,node_cover_art,node_registration,node_cookie_banner,node_footer,node_music_api toneMint
class node_text_hook,node_album_hook,node_genres_hook,node_genre_hook,node_cookie_service toneRose
class node_visitor toneIndigo
```

## Components

### Application shell

- [React entry](https://github.com/pyeimy811-max/sinfonia/blob/main/src/main.jsx): `src/main.jsx`
- [App shell](https://github.com/pyeimy811-max/sinfonia/blob/main/src/App.jsx): `src/App.jsx`

### Music discovery

- [Home hero](https://github.com/pyeimy811-max/sinfonia/blob/main/src/components/HeroSintonia/HeroSintonia.jsx): `src/components/HeroSintonia/HeroSintonia.jsx`
- [Cover collage](https://github.com/pyeimy811-max/sinfonia/blob/main/src/components/CollagePortadas/CollagePortadas.jsx): `src/components/CollagePortadas/CollagePortadas.jsx`
- [Album sections](https://github.com/pyeimy811-max/sinfonia/blob/main/src/components/SeccionesAlbumes/SeccionesAlbumes.jsx): `src/components/SeccionesAlbumes/SeccionesAlbumes.jsx`
- [Album card](https://github.com/pyeimy811-max/sinfonia/blob/main/src/components/TarjetaAlbum/TarjetaAlbum.jsx): `src/components/TarjetaAlbum/TarjetaAlbum.jsx`
- [Genre sections](https://github.com/pyeimy811-max/sinfonia/blob/main/src/components/SeccionGeneros/SeccionGeneros.jsx): `src/components/SeccionGeneros/SeccionGeneros.jsx`
- [Genre card](https://github.com/pyeimy811-max/sinfonia/blob/main/src/components/TarjetaGenero/TarjetaGenero.jsx): `src/components/TarjetaGenero/TarjetaGenero.jsx`
- [Catalog page](https://github.com/pyeimy811-max/sinfonia/blob/main/src/pages/Catalogo/Catalogo.jsx): `src/pages/Catalogo/Catalogo.jsx`
- [Catalog heading](https://github.com/pyeimy811-max/sinfonia/blob/main/src/components/EncabezadoCatalogo/EncabezadoCatalogo.jsx): `src/components/EncabezadoCatalogo/EncabezadoCatalogo.jsx`
- [Artist card](https://github.com/pyeimy811-max/sinfonia/blob/main/src/components/TarjetaArtista/TarjetaArtista.jsx): `src/components/TarjetaArtista/TarjetaArtista.jsx`
- [Track list](https://github.com/pyeimy811-max/sinfonia/blob/main/src/components/ListaCanciones/ListaCanciones.jsx): `src/components/ListaCanciones/ListaCanciones.jsx`

### Shared interface

- [Navigation](https://github.com/pyeimy811-max/sinfonia/blob/main/src/components/Navbar/Navbar.jsx): `src/components/Navbar/Navbar.jsx`
- [Accessibility panel](https://github.com/pyeimy811-max/sinfonia/blob/main/src/components/PanelAccesibilidad/PanelAccesibilidad.jsx): `src/components/PanelAccesibilidad/PanelAccesibilidad.jsx`
- [Interface icons](https://github.com/pyeimy811-max/sinfonia/blob/main/src/components/Icono.jsx): `src/components/Icono.jsx`
- [Album artwork](https://github.com/pyeimy811-max/sinfonia/blob/main/src/components/PortadaAlbum/PortadaAlbum.jsx): `src/components/PortadaAlbum/PortadaAlbum.jsx`
- [Registration invitation](https://github.com/pyeimy811-max/sinfonia/blob/main/src/components/InvitacionRegistro/InvitacionRegistro.jsx): `src/components/InvitacionRegistro/InvitacionRegistro.jsx`
- [Cookie banner](https://github.com/pyeimy811-max/sinfonia/blob/main/src/components/BannerCookies/BannerCookies.jsx): `src/components/BannerCookies/BannerCookies.jsx`
- [Footer](https://github.com/pyeimy811-max/sinfonia/blob/main/src/components/Footer/Footer.jsx): `src/components/Footer/Footer.jsx`

### Data and preferences

- [Text loader](https://github.com/pyeimy811-max/sinfonia/blob/main/src/hooks/useTextos.js): `src/hooks/useTextos.js`
- [Album loader](https://github.com/pyeimy811-max/sinfonia/blob/main/src/hooks/useALbumes.js): `src/hooks/useALbumes.js`
- [Genre loader](https://github.com/pyeimy811-max/sinfonia/blob/main/src/hooks/useGeneros.js): `src/hooks/useGeneros.js`
- [Genre detail loader](https://github.com/pyeimy811-max/sinfonia/blob/main/src/hooks/useGenero.js): `src/hooks/useGenero.js`
- [Cookie preferences](https://github.com/pyeimy811-max/sinfonia/blob/main/src/services/cookies.js): `src/services/cookies.js`

### Other components

- **Visitor**
- **Sinfonia API**

## Connections

- Visitor → React entry: opens app (evidence: `src/main.jsx`)
- React entry → App shell: renders (evidence: `src/main.jsx`)
- App shell → Navigation: renders (evidence: `src/App.jsx`)
- App shell → Home hero: renders (evidence: `src/App.jsx`)
- App shell → Album sections: renders (evidence: `src/App.jsx`)
- App shell → Genre sections: renders (evidence: `src/App.jsx`)
- App shell → Catalog page: routes to (evidence: `src/App.jsx`)
- App shell → Registration invitation: renders (evidence: `src/App.jsx`)
- App shell → Cookie banner: renders (evidence: `src/App.jsx`)
- App shell → Footer: renders (evidence: `src/App.jsx`)
- App shell → Text loader: loads text (evidence: `src/App.jsx`)
- App shell → Album loader: loads albums (evidence: `src/App.jsx`)
- App shell → Genre loader: loads genres (evidence: `src/App.jsx`)
- App shell → Cookie preferences: reads language (evidence: `src/App.jsx`)
- Navigation → Accessibility panel: opens panel (evidence: `src/components/Navbar/Navbar.jsx`)
- Navigation → Interface icons: renders (evidence: `src/components/Navbar/Navbar.jsx`)
- Accessibility panel → Interface icons: renders (evidence: `src/components/PanelAccesibilidad/PanelAccesibilidad.jsx`)
- Home hero → Cover collage: renders (evidence: `src/components/HeroSintonia/HeroSintonia.jsx`)
- Cover collage → Album artwork: renders (evidence: `src/components/CollagePortadas/CollagePortadas.jsx`)
- Album sections → Album card: renders (evidence: `src/components/SeccionesAlbumes/SeccionesAlbumes.jsx`)
- Album card → Album artwork: renders (evidence: `src/components/TarjetaAlbum/TarjetaAlbum.jsx`)
- Genre sections → Genre card: renders (evidence: `src/components/SeccionGeneros/SeccionGeneros.jsx`)
- Genre card → Album artwork: renders (evidence: `src/components/TarjetaGenero/TarjetaGenero.jsx`)
- Catalog page → Catalog heading: renders (evidence: `src/pages/Catalogo/Catalogo.jsx`)
- Catalog page → Genre sections: renders (evidence: `src/pages/Catalogo/Catalogo.jsx`)
- Catalog page → Album sections: renders (evidence: `src/pages/Catalogo/Catalogo.jsx`)
- Catalog page → Artist card: renders (evidence: `src/pages/Catalogo/Catalogo.jsx`)
- Catalog page → Track list: renders (evidence: `src/pages/Catalogo/Catalogo.jsx`)
- Catalog page → Genre detail loader: loads genre detail (evidence: `src/pages/Catalogo/Catalogo.jsx`)
- Catalog page → Album loader: loads albums (evidence: `src/pages/Catalogo/Catalogo.jsx`)
- Cookie banner → Cookie preferences: uses preferences (evidence: `src/components/BannerCookies/BannerCookies.jsx`)
- Text loader → Sinfonia API: fetches translations (evidence: `src/hooks/useTextos.js`)
- Album loader → Sinfonia API: fetches albums (evidence: `src/hooks/useALbumes.js`)
- Genre detail loader → Sinfonia API: fetches genre detail (evidence: `src/hooks/useGenero.js`)
- Genre loader → Sinfonia API