# juanchit300y-art/sinfonia-proyect architecture

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

## Overview

Sintonia is a React frontend for a music and podcast platform. Visitors enter through the app shell, browse the public landing page or catalog, and use navigation to explore genres, artists, albums, and songs; the hooks load catalog and landing-page data from the configured API. The interface also includes language, cookie-consent, and accessibility controls. Edges reflect imports, calls, and API requests shown in the supplied excerpts or source index; unsampled implementation details are not inferred.

Main entry points: [`src/App.jsx`](https://github.com/juanchit300y-art/sinfonia-proyect/blob/main/src/App.jsx) (App and routing), [`src/components/CatalogoMusical.jsx`](https://github.com/juanchit300y-art/sinfonia-proyect/blob/main/src/components/CatalogoMusical.jsx) (Music catalog), [`src/components/InicioPublico.jsx`](https://github.com/juanchit300y-art/sinfonia-proyect/blob/main/src/components/InicioPublico.jsx) (Public home), [`src/components/Icono.jsx`](https://github.com/juanchit300y-art/sinfonia-proyect/blob/main/src/components/Icono.jsx) (Icon renderer)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["App shell"]
  node_app["App and routing<br/>[App.jsx]"]
  node_texts["Interface text<br/>[useTextos.js]"]
  node_navbar["Navigation bar<br/>[Navbar.jsx]"]
  node_footer["Footer<br/>[Footer.jsx]"]
end

subgraph group_discovery["Music discovery"]
  node_home["Public home<br/>[InicioPublico.jsx]"]
  node_hero["Landing hero<br/>[HeroSintonia.jsx]"]
  node_cta["Call to action<br/>[BannerCta.jsx]"]
  node_catalog["Music catalog"]
  node_homehook["Home data hook<br/>[useInicio.js]"]
  node_cataloghook["Catalog data hook<br/>[useCatalogo.js]"]
  node_genres["Genre sections<br/>[SeccionGeneros.jsx]"]
  node_artists["Artist section<br/>[SeccionArtista.jsx]"]
  node_albums["Album sections<br/>[SeccionAlbumes.jsx]"]
  node_songs["Song list<br/>[ListaCanciones.jsx]"]
end

subgraph group_preferences["User preferences"]
  node_cookies["Cookie banner<br/>[BannerCookies.jsx]"]
  node_cookieprefs["Cookie preferences"]
  node_accessibility["Accessibility controls<br/>[Accesibilidad.jsx]"]
end

subgraph group_visuals["Shared visuals"]
  node_covers["Cover collage"]
  node_cover["Cover artwork<br/>[Portada.jsx]"]
  node_icon["Icon renderer<br/>[Icono.jsx]"]
end

node_visitor(("Visitor"))
node_api{{"Sintonia API"}}

node_visitor -->|"uses"| node_app
node_app -->|"loads text"| node_texts
node_app -->|"loads home data"| node_homehook
node_app -->|"renders"| node_navbar
node_app -->|"renders"| node_footer
node_app -->|"renders"| node_home
node_app -->|"renders"| node_catalog
node_app -->|"renders"| node_cookies
node_homehook -->|"fetches genres"| node_api
node_cataloghook -->|"fetches catalog"| node_api
node_home -->|"renders"| node_hero
node_home -->|"renders"| node_albums
node_home -->|"renders"| node_genres
node_home -->|"renders"| node_cta
node_catalog -->|"calls"| node_cataloghook
node_catalog -->|"renders"| node_genres
node_catalog -->|"renders"| node_artists
node_catalog -->|"renders"| node_albums
node_catalog -->|"renders"| node_songs
node_hero -->|"renders"| node_covers
node_covers -->|"renders"| node_cover
node_albums -->|"renders"| node_cover
node_genres -->|"renders"| node_cover
node_navbar -->|"renders"| node_accessibility
node_navbar -->|"renders"| node_icon
node_footer -->|"renders"| node_cookieprefs
node_footer -->|"renders"| node_icon
node_accessibility -->|"renders"| node_icon
node_cookieprefs -->|"renders"| node_icon
node_cookies -->|"opens by event"| node_cookieprefs

click node_app "https://github.com/juanchit300y-art/sinfonia-proyect/blob/main/src/App.jsx"
click node_texts "https://github.com/juanchit300y-art/sinfonia-proyect/blob/main/src/hooks/useTextos.js"
click node_navbar "https://github.com/juanchit300y-art/sinfonia-proyect/blob/main/src/components/Navbar.jsx"
click node_footer "https://github.com/juanchit300y-art/sinfonia-proyect/blob/main/src/components/Footer.jsx"
click node_home "https://github.com/juanchit300y-art/sinfonia-proyect/blob/main/src/components/InicioPublico.jsx"
click node_hero "https://github.com/juanchit300y-art/sinfonia-proyect/blob/main/src/components/HeroSintonia.jsx"
click node_cta "https://github.com/juanchit300y-art/sinfonia-proyect/blob/main/src/components/BannerCta.jsx"
click node_catalog "https://github.com/juanchit300y-art/sinfonia-proyect/blob/main/src/components/CatalogoMusical.jsx"
click node_homehook "https://github.com/juanchit300y-art/sinfonia-proyect/blob/main/src/hooks/useInicio.js"
click node_cataloghook "https://github.com/juanchit300y-art/sinfonia-proyect/blob/main/src/hooks/useCatalogo.js"
click node_genres "https://github.com/juanchit300y-art/sinfonia-proyect/blob/main/src/components/SeccionGeneros.jsx"
click node_artists "https://github.com/juanchit300y-art/sinfonia-proyect/blob/main/src/components/SeccionArtista.jsx"
click node_albums "https://github.com/juanchit300y-art/sinfonia-proyect/blob/main/src/components/SeccionAlbumes.jsx"
click node_songs "https://github.com/juanchit300y-art/sinfonia-proyect/blob/main/src/components/ListaCanciones.jsx"
click node_cookies "https://github.com/juanchit300y-art/sinfonia-proyect/blob/main/src/components/BannerCookies.jsx"
click node_cookieprefs "https://github.com/juanchit300y-art/sinfonia-proyect/blob/main/src/components/PreferenciasCookies.jsx"
click node_accessibility "https://github.com/juanchit300y-art/sinfonia-proyect/blob/main/src/components/Accesibilidad.jsx"
click node_covers "https://github.com/juanchit300y-art/sinfonia-proyect/blob/main/src/components/CollagePortadas.jsx"
click node_cover "https://github.com/juanchit300y-art/sinfonia-proyect/blob/main/src/components/Portada.jsx"
click node_icon "https://github.com/juanchit300y-art/sinfonia-proyect/blob/main/src/components/Icono.jsx"

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_texts,node_navbar,node_footer toneBlue
class node_home,node_hero,node_cta,node_catalog,node_homehook,node_cataloghook,node_genres,node_artists,node_albums,node_songs toneAmber
class node_cookies,node_cookieprefs,node_accessibility,node_api toneMint
class node_covers,node_cover,node_icon toneRose
class node_visitor toneIndigo
```

## Components

### App shell

- [App and routing](https://github.com/juanchit300y-art/sinfonia-proyect/blob/main/src/App.jsx): `src/App.jsx`
- [Interface text](https://github.com/juanchit300y-art/sinfonia-proyect/blob/main/src/hooks/useTextos.js): `src/hooks/useTextos.js`
- [Navigation bar](https://github.com/juanchit300y-art/sinfonia-proyect/blob/main/src/components/Navbar.jsx): `src/components/Navbar.jsx`
- [Footer](https://github.com/juanchit300y-art/sinfonia-proyect/blob/main/src/components/Footer.jsx): `src/components/Footer.jsx`

### Music discovery

- [Public home](https://github.com/juanchit300y-art/sinfonia-proyect/blob/main/src/components/InicioPublico.jsx): `src/components/InicioPublico.jsx`
- [Landing hero](https://github.com/juanchit300y-art/sinfonia-proyect/blob/main/src/components/HeroSintonia.jsx): `src/components/HeroSintonia.jsx`
- [Call to action](https://github.com/juanchit300y-art/sinfonia-proyect/blob/main/src/components/BannerCta.jsx): `src/components/BannerCta.jsx`
- [Music catalog](https://github.com/juanchit300y-art/sinfonia-proyect/blob/main/src/components/CatalogoMusical.jsx): `src/components/CatalogoMusical.jsx`
- [Home data hook](https://github.com/juanchit300y-art/sinfonia-proyect/blob/main/src/hooks/useInicio.js): `src/hooks/useInicio.js`
- [Catalog data hook](https://github.com/juanchit300y-art/sinfonia-proyect/blob/main/src/hooks/useCatalogo.js): `src/hooks/useCatalogo.js`
- [Genre sections](https://github.com/juanchit300y-art/sinfonia-proyect/blob/main/src/components/SeccionGeneros.jsx): `src/components/SeccionGeneros.jsx`
- [Artist section](https://github.com/juanchit300y-art/sinfonia-proyect/blob/main/src/components/SeccionArtista.jsx): `src/components/SeccionArtista.jsx`
- [Album sections](https://github.com/juanchit300y-art/sinfonia-proyect/blob/main/src/components/SeccionAlbumes.jsx): `src/components/SeccionAlbumes.jsx`
- [Song list](https://github.com/juanchit300y-art/sinfonia-proyect/blob/main/src/components/ListaCanciones.jsx): `src/components/ListaCanciones.jsx`

### User preferences

- [Cookie banner](https://github.com/juanchit300y-art/sinfonia-proyect/blob/main/src/components/BannerCookies.jsx): `src/components/BannerCookies.jsx`
- [Cookie preferences](https://github.com/juanchit300y-art/sinfonia-proyect/blob/main/src/components/PreferenciasCookies.jsx): `src/components/PreferenciasCookies.jsx`
- [Accessibility controls](https://github.com/juanchit300y-art/sinfonia-proyect/blob/main/src/components/Accesibilidad.jsx): `src/components/Accesibilidad.jsx`

### Shared visuals

- [Cover collage](https://github.com/juanchit300y-art/sinfonia-proyect/blob/main/src/components/CollagePortadas.jsx): `src/components/CollagePortadas.jsx`
- [Cover artwork](https://github.com/juanchit300y-art/sinfonia-proyect/blob/main/src/components/Portada.jsx): `src/components/Portada.jsx`
- [Icon renderer](https://github.com/juanchit300y-art/sinfonia-proyect/blob/main/src/components/Icono.jsx): `src/components/Icono.jsx`

### Other components

- **Visitor**
- **Sintonia API**

## Connections

- Visitor → App and routing: uses (evidence: `src/App.jsx`)
- App and routing → Interface text: loads text (evidence: `src/App.jsx`)
- App and routing → Home data hook: loads home data (evidence: `src/App.jsx`)
- App and routing → Navigation bar: renders (evidence: `src/App.jsx`)
- App and routing → Footer: renders (evidence: `src/App.jsx`)
- App and routing → Public home: renders (evidence: `src/App.jsx`)
- App and routing → Music catalog: renders (evidence: `src/App.jsx`)
- App and routing → Cookie banner: renders (evidence: `src/App.jsx`)
- Home data hook → Sintonia API: fetches genres (evidence: `src/hooks/useInicio.js`)
- Catalog data hook → Sintonia API: fetches catalog (evidence: `src/hooks/useCatalogo.js`)
- Public home → Landing hero: renders (evidence: `src/components/InicioPublico.jsx`)
- Public home → Album sections: renders (evidence: `src/components/InicioPublico.jsx`)
- Public home → Genre sections: renders (evidence: `src/components/InicioPublico.jsx`)
- Public home → Call to action: renders (evidence: `src/components/InicioPublico.jsx`)
- Music catalog → Catalog data hook: calls (evidence: `src/components/CatalogoMusical.jsx`)
- Music catalog → Genre sections: renders (evidence: `src/components/CatalogoMusical.jsx`)
- Music catalog → Artist section: renders (evidence: `src/components/CatalogoMusical.jsx`)
- Music catalog → Album sections: renders (evidence: `src/components/CatalogoMusical.jsx`)
- Music catalog → Song list: renders (evidence: `src/components/CatalogoMusical.jsx`)
- Landing hero → Cover collage: renders (evidence: `src/components/HeroSintonia.jsx`)
- Cover collage → Cover artwork: renders (evidence: `src/components/CollagePortadas.jsx`)
- Album sections → Cover artwork: renders (evidence: `src/components/SeccionAlbumes.jsx`)
- Genre sections → Cover artwork: renders (evidence: `src/components/SeccionGeneros.jsx`)
- Navigation bar → Accessibility controls: renders (evidence: `src/components/Navbar.jsx`)
- Navigation bar → Icon renderer: renders (evidence: `src/components/Navbar.jsx`)
- Footer → Cookie preferences: renders (evidence: `src/components/Footer.jsx`)
- Footer → Icon renderer: renders (evidence: `src/components/Footer.jsx`)
- Accessibility controls → Icon renderer: renders (evidence: `src/components/Accesibilidad.jsx`)
- Cookie preferences → Icon renderer: renders (evidence: `src/components/PreferenciasCookies.jsx`)
- Cookie banner → Cookie preferences: opens by event (evidence: `src/components/PreferenciasCookies.jsx`)