# keycrazy/proyecto-sintonia architecture

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

## Overview

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: [`src/App.jsx`](https://github.com/keycrazy/proyecto-sintonia/blob/main/src/App.jsx) (App shell), [`src/Components/Navbar.jsx`](https://github.com/keycrazy/proyecto-sintonia/blob/main/src/Components/Navbar.jsx) (Navigation bar), [`src/Components/Catalogo.jsx`](https://github.com/keycrazy/proyecto-sintonia/blob/main/src/Components/Catalogo.jsx) (Catalog view), [`src/hooks/useCatalogo.js`](https://github.com/keycrazy/proyecto-sintonia/blob/main/src/hooks/useCatalogo.js) (Catalog data hook)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App and navigation"]
  node_mount["React mount<br/>[main.jsx]"]
  node_app_shell["App shell<br/>[App.jsx]"]
  node_navbar["Navigation bar<br/>[Navbar.jsx]"]
  node_footer["Footer<br/>[Footer.jsx]"]
  node_texts["Localized text hook<br/>[useTextos.js]"]
end

subgraph group_discovery["Music discovery"]
  node_home_view["Public home<br/>[InicioPublico.jsx]"]
  node_catalog_view["Catalog view<br/>[Catalogo.jsx]"]
  node_home_data["Home data hook"]
  node_catalog_data["Catalog data hook<br/>[useCatalogo.js]"]
end

subgraph group_preferences["Preferences and accessibility"]
  node_languages["Language data hook<br/>[useIdiomas.js]"]
  node_accessibility["Accessibility panel"]
  node_cookie_notice["Cookie notice<br/>[CookieNotice.jsx]"]
  node_cookies["Cookie utilities<br/>[cookies.js]"]
  node_language_selector["Language selector"]
end

subgraph group_shared["Shared UI and API"]
  node_api_urls["API URL builder<br/>[api.js]"]
  node_button["Button<br/>[Button.jsx]"]
  node_cover["Cover artwork<br/>[Portada.jsx]"]
  node_icon["Icon renderer<br/>[Icono.jsx]"]
end

node_visitor(("Visitor"))
node_api_service[("Content API")]

node_visitor -->|"opens site"| node_mount
node_mount -->|"mounts"| node_app_shell
node_app_shell -->|"loads text"| node_texts
node_app_shell -->|"loads languages"| node_languages
node_app_shell -->|"renders"| node_navbar
node_app_shell -->|"renders"| node_footer
node_app_shell -->|"renders"| node_home_view
node_app_shell -->|"renders"| node_catalog_view
node_app_shell -->|"renders"| node_accessibility
node_app_shell -->|"renders"| node_cookie_notice
node_app_shell -->|"reads and writes"| node_cookies
node_home_view -->|"loads content"| node_home_data
node_catalog_view -->|"loads catalog"| node_catalog_data
node_catalog_data -->|"reuses lists"| node_home_data
node_home_data -->|"builds request URL"| node_api_urls
node_catalog_data -->|"builds detail URL"| node_api_urls
node_texts -->|"builds request URL"| node_api_urls
node_languages -->|"builds request URL"| node_api_urls
node_home_data -->|"fetches genres and albums"| node_api_service
node_catalog_data -->|"fetches genre details"| node_api_service
node_texts -->|"fetches translations"| node_api_service
node_languages -->|"fetches languages"| node_api_service
node_catalog_view -->|"renders artwork"| node_cover
node_catalog_view -->|"renders actions"| node_button
node_navbar -->|"renders selector"| node_language_selector
node_navbar -->|"renders action"| node_button
node_navbar -->|"renders icons"| node_icon
node_cookie_notice -->|"stores consent"| node_cookies
node_cookie_notice -->|"renders choices"| node_button
node_accessibility -->|"renders icons"| node_icon

click node_mount "https://github.com/keycrazy/proyecto-sintonia/blob/main/src/main.jsx"
click node_app_shell "https://github.com/keycrazy/proyecto-sintonia/blob/main/src/App.jsx"
click node_navbar "https://github.com/keycrazy/proyecto-sintonia/blob/main/src/Components/Navbar.jsx"
click node_footer "https://github.com/keycrazy/proyecto-sintonia/blob/main/src/Components/Footer.jsx"
click node_home_view "https://github.com/keycrazy/proyecto-sintonia/blob/main/src/Components/InicioPublico.jsx"
click node_catalog_view "https://github.com/keycrazy/proyecto-sintonia/blob/main/src/Components/Catalogo.jsx"
click node_home_data "https://github.com/keycrazy/proyecto-sintonia/blob/main/src/hooks/useInicioPublico.js"
click node_catalog_data "https://github.com/keycrazy/proyecto-sintonia/blob/main/src/hooks/useCatalogo.js"
click node_texts "https://github.com/keycrazy/proyecto-sintonia/blob/main/src/hooks/useTextos.js"
click node_languages "https://github.com/keycrazy/proyecto-sintonia/blob/main/src/hooks/useIdiomas.js"
click node_accessibility "https://github.com/keycrazy/proyecto-sintonia/blob/main/src/Components/AccessibilityPanel.jsx"
click node_cookie_notice "https://github.com/keycrazy/proyecto-sintonia/blob/main/src/Components/base/CookieNotice.jsx"
click node_cookies "https://github.com/keycrazy/proyecto-sintonia/blob/main/src/utils/cookies.js"
click node_language_selector "https://github.com/keycrazy/proyecto-sintonia/blob/main/src/Components/base/LanguageSelector.jsx"
click node_api_urls "https://github.com/keycrazy/proyecto-sintonia/blob/main/src/utils/api.js"
click node_button "https://github.com/keycrazy/proyecto-sintonia/blob/main/src/Components/base/Button.jsx"
click node_cover "https://github.com/keycrazy/proyecto-sintonia/blob/main/src/Components/base/Portada.jsx"
click node_icon "https://github.com/keycrazy/proyecto-sintonia/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_mount,node_app_shell,node_navbar,node_footer,node_texts toneBlue
class node_home_view,node_catalog_view,node_home_data,node_catalog_data,node_api_service toneAmber
class node_languages,node_accessibility,node_cookie_notice,node_cookies,node_language_selector toneMint
class node_api_urls,node_button,node_cover,node_icon toneRose
class node_visitor toneIndigo
```

## Components

### App and navigation

- [React mount](https://github.com/keycrazy/proyecto-sintonia/blob/main/src/main.jsx): `src/main.jsx`
- [App shell](https://github.com/keycrazy/proyecto-sintonia/blob/main/src/App.jsx): `src/App.jsx`
- [Navigation bar](https://github.com/keycrazy/proyecto-sintonia/blob/main/src/Components/Navbar.jsx): `src/Components/Navbar.jsx`
- [Footer](https://github.com/keycrazy/proyecto-sintonia/blob/main/src/Components/Footer.jsx): `src/Components/Footer.jsx`
- [Localized text hook](https://github.com/keycrazy/proyecto-sintonia/blob/main/src/hooks/useTextos.js): `src/hooks/useTextos.js`

### Music discovery

- [Public home](https://github.com/keycrazy/proyecto-sintonia/blob/main/src/Components/InicioPublico.jsx): `src/Components/InicioPublico.jsx`
- [Catalog view](https://github.com/keycrazy/proyecto-sintonia/blob/main/src/Components/Catalogo.jsx): `src/Components/Catalogo.jsx`
- [Home data hook](https://github.com/keycrazy/proyecto-sintonia/blob/main/src/hooks/useInicioPublico.js): `src/hooks/useInicioPublico.js`
- [Catalog data hook](https://github.com/keycrazy/proyecto-sintonia/blob/main/src/hooks/useCatalogo.js): `src/hooks/useCatalogo.js`

### Preferences and accessibility

- [Language data hook](https://github.com/keycrazy/proyecto-sintonia/blob/main/src/hooks/useIdiomas.js): `src/hooks/useIdiomas.js`
- [Accessibility panel](https://github.com/keycrazy/proyecto-sintonia/blob/main/src/Components/AccessibilityPanel.jsx): `src/Components/AccessibilityPanel.jsx`
- [Cookie notice](https://github.com/keycrazy/proyecto-sintonia/blob/main/src/Components/base/CookieNotice.jsx): `src/Components/base/CookieNotice.jsx`
- [Cookie utilities](https://github.com/keycrazy/proyecto-sintonia/blob/main/src/utils/cookies.js): `src/utils/cookies.js`
- [Language selector](https://github.com/keycrazy/proyecto-sintonia/blob/main/src/Components/base/LanguageSelector.jsx): `src/Components/base/LanguageSelector.jsx`

### Shared UI and API

- [API URL builder](https://github.com/keycrazy/proyecto-sintonia/blob/main/src/utils/api.js): `src/utils/api.js`
- [Button](https://github.com/keycrazy/proyecto-sintonia/blob/main/src/Components/base/Button.jsx): `src/Components/base/Button.jsx`
- [Cover artwork](https://github.com/keycrazy/proyecto-sintonia/blob/main/src/Components/base/Portada.jsx): `src/Components/base/Portada.jsx`
- [Icon renderer](https://github.com/keycrazy/proyecto-sintonia/blob/main/src/Components/Icono.jsx): `src/Components/Icono.jsx`

### Other components

- **Visitor**
- **Content API**

## Connections

- Visitor → React mount: opens site
- React mount → App shell: mounts (evidence: `src/main.jsx`)
- App shell → Localized text hook: loads text (evidence: `src/App.jsx`)
- App shell → Language data hook: loads languages (evidence: `src/App.jsx`)
- App shell → Navigation bar: renders (evidence: `src/App.jsx`)
- App shell → Footer: renders (evidence: `src/App.jsx`)
- App shell → Public home: renders (evidence: `src/App.jsx`)
- App shell → Catalog view: renders (evidence: `src/App.jsx`)
- App shell → Accessibility panel: renders (evidence: `src/App.jsx`)
- App shell → Cookie notice: renders (evidence: `src/App.jsx`)
- App shell → Cookie utilities: reads and writes (evidence: `src/App.jsx`)
- Public home → Home data hook: loads content (evidence: `src/Components/InicioPublico.jsx`)
- Catalog view → Catalog data hook: loads catalog (evidence: `src/Components/Catalogo.jsx`)
- Catalog data hook → Home data hook: reuses lists (evidence: `src/hooks/useCatalogo.js`)
- Home data hook → API URL builder: builds request URL (evidence: `src/hooks/useInicioPublico.js`)
- Catalog data hook → API URL builder: builds detail URL (evidence: `src/hooks/useCatalogo.js`)
- Localized text hook → API URL builder: builds request URL (evidence: `src/hooks/useTextos.js`)
- Language data hook → API URL builder: builds request URL (evidence: `src/hooks/useIdiomas.js`)
- Home data hook → Content API: fetches genres and albums (evidence: `src/hooks/useInicioPublico.js`)
- Catalog data hook → Content API: fetches genre details (evidence: `src/hooks/useCatalogo.js`)
- Localized text hook → Content API: fetches translations (evidence: `src/hooks/useTextos.js`)
- Language data hook → Content API: fetches languages (evidence: `src/hooks/useIdiomas.js`)
- Catalog view → Cover artwork: renders artwork (evidence: `src/Components/Catalogo.jsx`)
- Catalog view → Button: renders actions (evidence: `src/Components/Catalogo.jsx`)
- Navigation bar → Language selector: renders selector (evidence: `src/Components/Navbar.jsx`)
- Navigation bar → Button: renders action (evidence: `src/Components/Navbar.jsx`)
- Navigation bar → Icon renderer: renders icons (evidence: `src/Components/Navbar.jsx`)
- Cookie notice → Cookie utilities: stores consent (evidence: `src/Components/base/CookieNotice.jsx`)
- Cookie notice → Button: renders choices (evidence: `src/Components/base/CookieNotice.jsx`)
- Accessibility panel → Icon renderer: renders icons (evidence: `src/Components/AccessibilityPanel.jsx`)