# juan-josegs/proyecto-sintonia-next architecture

> Architecture diagram of the GitHub repository juan-josegs/proyecto-sintonia-next, 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/juan-josegs/proyecto-sintonia-next
- Repository: https://github.com/juan-josegs/proyecto-sintonia-next

## Overview

Sintonia is a music-discovery website: visitors explore featured albums and genres on the home page, then browse the catalog and open a genre’s artists, albums, and tracks. Shared language and consent state supports the public experience. Album and genre data, genre details, and translated text are fetched from an external API. The map reflects the README’s limited product description and the supplied source excerpts and index; unsampled interactions are omitted or shown as unverified.

Main entry points: [`src/app/page.tsx`](https://github.com/juan-josegs/proyecto-sintonia-next/blob/main/src/app/page.tsx) (Home page), [`src/components/VistaCatalogo/VistaCatalogo.tsx`](https://github.com/juan-josegs/proyecto-sintonia-next/blob/main/src/components/VistaCatalogo/VistaCatalogo.tsx) (Catalog view), [`src/components/SeccionAlbumes/SeccionAlbumes.tsx`](https://github.com/juan-josegs/proyecto-sintonia-next/blob/main/src/components/SeccionAlbumes/SeccionAlbumes.tsx) (Album section), [`src/components/SeccionGeneros/SeccionGeneros.tsx`](https://github.com/juan-josegs/proyecto-sintonia-next/blob/main/src/components/SeccionGeneros/SeccionGeneros.tsx) (Genre section)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_routes["Public pages"]
  node_home["Home page<br/>[page.tsx]"]
  node_catalog_route["Catalog route<br/>[page.tsx]"]
end

subgraph group_discovery["Music discovery"]
  node_catalog_view["Catalog view<br/>[VistaCatalogo.tsx]"]
  node_hero["Home hero<br/>[HeroSintonia.tsx]"]
  node_album_section["Album section<br/>[SeccionAlbumes.tsx]"]
  node_genre_section["Genre section<br/>[SeccionGeneros.tsx]"]
  node_genre_detail["Genre detail<br/>[DetalleGenero.tsx]"]
  node_cover["Cover renderer<br/>[PortadaSVG.tsx]"]
  node_cta["Call to action<br/>[BannerCTA.tsx]"]
end

subgraph group_shared["Shared experience"]
  node_language["Language state"]
  node_navbar["Navigation<br/>[Navbar.tsx]"]
  node_brand["Brand mark<br/>[Marca.tsx]"]
  node_accessibility["Accessibility panel"]
  node_cookie_manager["Cookie manager<br/>[GestorCookies.tsx]"]
  node_cookie_banner["Cookie banner<br/>[BannerCookies.tsx]"]
  node_footer["Footer<br/>[Footer.tsx]"]
end

subgraph group_data["Content and data"]
  node_text_hook["Text loader<br/>[useTextos.ts]"]
end

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

node_visitor -.->|"opens"| node_home
node_visitor -.->|"opens"| node_catalog_route
node_home -->|"reads text"| node_language
node_home -->|"renders"| node_hero
node_home -->|"renders"| node_album_section
node_home -->|"renders"| node_genre_section
node_home -->|"renders"| node_cta
node_catalog_route -->|"renders"| node_catalog_view
node_catalog_view -->|"reads text"| node_language
node_catalog_view -->|"renders"| node_genre_section
node_catalog_view -->|"renders"| node_album_section
node_catalog_view -->|"renders"| node_genre_detail
node_hero -.->|"fetches genres"| node_api
node_album_section -->|"fetches albums"| node_api
node_genre_section -->|"fetches genres"| node_api
node_genre_detail -->|"fetches details"| node_api
node_album_section -->|"renders"| node_cover
node_genre_section -->|"renders"| node_cover
node_genre_detail -->|"renders"| node_cover
node_language -->|"loads text"| node_text_hook
node_text_hook -->|"fetches translations"| node_api
node_navbar -->|"renders"| node_brand
node_navbar -->|"opens"| node_accessibility
node_cookie_manager -->|"reads consent"| node_language
node_cookie_manager -->|"renders"| node_cookie_banner
node_cookie_banner -->|"loads labels"| node_text_hook

click node_home "https://github.com/juan-josegs/proyecto-sintonia-next/blob/main/src/app/page.tsx"
click node_catalog_route "https://github.com/juan-josegs/proyecto-sintonia-next/blob/main/src/app/catalogo/page.tsx"
click node_catalog_view "https://github.com/juan-josegs/proyecto-sintonia-next/blob/main/src/components/VistaCatalogo/VistaCatalogo.tsx"
click node_hero "https://github.com/juan-josegs/proyecto-sintonia-next/blob/main/src/components/HeroSintonia/HeroSintonia.tsx"
click node_album_section "https://github.com/juan-josegs/proyecto-sintonia-next/blob/main/src/components/SeccionAlbumes/SeccionAlbumes.tsx"
click node_genre_section "https://github.com/juan-josegs/proyecto-sintonia-next/blob/main/src/components/SeccionGeneros/SeccionGeneros.tsx"
click node_genre_detail "https://github.com/juan-josegs/proyecto-sintonia-next/blob/main/src/components/DetalleGenero/DetalleGenero.tsx"
click node_cover "https://github.com/juan-josegs/proyecto-sintonia-next/blob/main/src/components/PortadaSVG/PortadaSVG.tsx"
click node_cta "https://github.com/juan-josegs/proyecto-sintonia-next/blob/main/src/components/BannerCTA/BannerCTA.tsx"
click node_language "https://github.com/juan-josegs/proyecto-sintonia-next/blob/main/src/context/LanguageContext.tsx"
click node_text_hook "https://github.com/juan-josegs/proyecto-sintonia-next/blob/main/src/hooks/useTextos.ts"
click node_navbar "https://github.com/juan-josegs/proyecto-sintonia-next/blob/main/src/components/Navbar/Navbar.tsx"
click node_brand "https://github.com/juan-josegs/proyecto-sintonia-next/blob/main/src/components/Marca/Marca.tsx"
click node_accessibility "https://github.com/juan-josegs/proyecto-sintonia-next/blob/main/src/components/PanelAccesibilidad/PanelAccesibilidad.tsx"
click node_cookie_manager "https://github.com/juan-josegs/proyecto-sintonia-next/blob/main/src/components/Cookies/GestorCookies.tsx"
click node_cookie_banner "https://github.com/juan-josegs/proyecto-sintonia-next/blob/main/src/components/Cookies/BannerCookies.tsx"
click node_footer "https://github.com/juan-josegs/proyecto-sintonia-next/blob/main/src/components/Footer/Footer.tsx"

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_home,node_catalog_route toneBlue
class node_catalog_view,node_hero,node_album_section,node_genre_section,node_genre_detail,node_cover,node_cta toneAmber
class node_language,node_navbar,node_brand,node_accessibility,node_cookie_manager,node_cookie_banner,node_footer,node_api toneMint
class node_text_hook toneRose
class node_visitor toneIndigo
```

## Components

### Public pages

- [Home page](https://github.com/juan-josegs/proyecto-sintonia-next/blob/main/src/app/page.tsx): `src/app/page.tsx`
- [Catalog route](https://github.com/juan-josegs/proyecto-sintonia-next/blob/main/src/app/catalogo/page.tsx): `src/app/catalogo/page.tsx`

### Music discovery

- [Catalog view](https://github.com/juan-josegs/proyecto-sintonia-next/blob/main/src/components/VistaCatalogo/VistaCatalogo.tsx): `src/components/VistaCatalogo/VistaCatalogo.tsx`
- [Home hero](https://github.com/juan-josegs/proyecto-sintonia-next/blob/main/src/components/HeroSintonia/HeroSintonia.tsx): `src/components/HeroSintonia/HeroSintonia.tsx`
- [Album section](https://github.com/juan-josegs/proyecto-sintonia-next/blob/main/src/components/SeccionAlbumes/SeccionAlbumes.tsx): `src/components/SeccionAlbumes/SeccionAlbumes.tsx`
- [Genre section](https://github.com/juan-josegs/proyecto-sintonia-next/blob/main/src/components/SeccionGeneros/SeccionGeneros.tsx): `src/components/SeccionGeneros/SeccionGeneros.tsx`
- [Genre detail](https://github.com/juan-josegs/proyecto-sintonia-next/blob/main/src/components/DetalleGenero/DetalleGenero.tsx): `src/components/DetalleGenero/DetalleGenero.tsx`
- [Cover renderer](https://github.com/juan-josegs/proyecto-sintonia-next/blob/main/src/components/PortadaSVG/PortadaSVG.tsx): `src/components/PortadaSVG/PortadaSVG.tsx`
- [Call to action](https://github.com/juan-josegs/proyecto-sintonia-next/blob/main/src/components/BannerCTA/BannerCTA.tsx): `src/components/BannerCTA/BannerCTA.tsx`

### Shared experience

- [Language state](https://github.com/juan-josegs/proyecto-sintonia-next/blob/main/src/context/LanguageContext.tsx): `src/context/LanguageContext.tsx`
- [Navigation](https://github.com/juan-josegs/proyecto-sintonia-next/blob/main/src/components/Navbar/Navbar.tsx): `src/components/Navbar/Navbar.tsx`
- [Brand mark](https://github.com/juan-josegs/proyecto-sintonia-next/blob/main/src/components/Marca/Marca.tsx): `src/components/Marca/Marca.tsx`
- [Accessibility panel](https://github.com/juan-josegs/proyecto-sintonia-next/blob/main/src/components/PanelAccesibilidad/PanelAccesibilidad.tsx): `src/components/PanelAccesibilidad/PanelAccesibilidad.tsx`
- [Cookie manager](https://github.com/juan-josegs/proyecto-sintonia-next/blob/main/src/components/Cookies/GestorCookies.tsx): `src/components/Cookies/GestorCookies.tsx`
- [Cookie banner](https://github.com/juan-josegs/proyecto-sintonia-next/blob/main/src/components/Cookies/BannerCookies.tsx): `src/components/Cookies/BannerCookies.tsx`
- [Footer](https://github.com/juan-josegs/proyecto-sintonia-next/blob/main/src/components/Footer/Footer.tsx): `src/components/Footer/Footer.tsx`

### Content and data

- [Text loader](https://github.com/juan-josegs/proyecto-sintonia-next/blob/main/src/hooks/useTextos.ts): `src/hooks/useTextos.ts`

### Other components

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

## Connections

- Visitor → Home page: opens
- Visitor → Catalog route: opens
- Home page → Language state: reads text (evidence: `src/app/page.tsx`)
- Home page → Home hero: renders (evidence: `src/app/page.tsx`)
- Home page → Album section: renders (evidence: `src/app/page.tsx`)
- Home page → Genre section: renders (evidence: `src/app/page.tsx`)
- Home page → Call to action: renders (evidence: `src/app/page.tsx`)
- Catalog route → Catalog view: renders (evidence: `src/app/catalogo/page.tsx`)
- Catalog view → Language state: reads text (evidence: `src/components/VistaCatalogo/VistaCatalogo.tsx`)
- Catalog view → Genre section: renders (evidence: `src/components/VistaCatalogo/VistaCatalogo.tsx`)
- Catalog view → Album section: renders (evidence: `src/components/VistaCatalogo/VistaCatalogo.tsx`)
- Catalog view → Genre detail: renders (evidence: `src/components/VistaCatalogo/VistaCatalogo.tsx`)
- Home hero → Sintonia API: fetches genres
- Album section → Sintonia API: fetches albums (evidence: `src/components/SeccionAlbumes/SeccionAlbumes.tsx`)
- Genre section → Sintonia API: fetches genres (evidence: `src/components/SeccionGeneros/SeccionGeneros.tsx`)
- Genre detail → Sintonia API: fetches details (evidence: `src/components/DetalleGenero/DetalleGenero.tsx`)
- Album section → Cover renderer: renders (evidence: `src/components/SeccionAlbumes/SeccionAlbumes.tsx`)
- Genre section → Cover renderer: renders (evidence: `src/components/SeccionGeneros/SeccionGeneros.tsx`)
- Genre detail → Cover renderer: renders (evidence: `src/components/DetalleGenero/DetalleGenero.tsx`)
- Language state → Text loader: loads text (evidence: `src/context/LanguageContext.tsx`)
- Text loader → Sintonia API: fetches translations (evidence: `src/hooks/useTextos.ts`)
- Navigation → Brand mark: renders (evidence: `src/components/Navbar/Navbar.tsx`)
- Navigation → Accessibility panel: opens (evidence: `src/components/Navbar/Navbar.tsx`)
- Cookie manager → Language state: reads consent (evidence: `src/components/Cookies/GestorCookies.tsx`)
- Cookie manager → Cookie banner: renders (evidence: `src/components/Cookies/GestorCookies.tsx`)
- Cookie banner → Text loader: loads labels (evidence: `src/components/Cookies/BannerCookies.tsx`)