# juanjoseia-udc/taquilla-project architecture

> Architecture diagram of the GitHub repository juanjoseia-udc/taquilla-project, 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/juanjoseia-udc/taquilla-project
- Repository: https://github.com/juanjoseia-udc/taquilla-project

## Overview

Taquilla is a Spanish-language events discovery frontend. Visitors can explore a home page of featured and upcoming events, or search and filter a catalog; the explore page synchronizes filters and pagination with the URL. Shared runtime concerns include localized text and preferences, public-site layout, and reusable accessibility controls. The README is empty, so capabilities and relationships are based on the source index and excerpts; connections not evidenced there are omitted.

Main entry points: [`src/pages/Explorar.jsx`](https://github.com/juanjoseia-udc/taquilla-project/blob/main/src/pages/Explorar.jsx) (Explore page), [`src/App.jsx`](https://github.com/juanjoseia-udc/taquilla-project/blob/main/src/App.jsx) (App router), [`src/pages/Inicio.jsx`](https://github.com/juanjoseia-udc/taquilla-project/blob/main/src/pages/Inicio.jsx) (Home page), [`src/services/eventos.js`](https://github.com/juanjoseia-udc/taquilla-project/blob/main/src/services/eventos.js) (Event service)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application shell"]
  node_app["App router<br/>[App.jsx]"]
  node_layout["Public layout<br/>[LayoutPublico.jsx]"]
end

subgraph group_home["Home discovery"]
  node_home_page["Home page<br/>[Inicio.jsx]"]
  node_home_sections["Home sections"]
  node_featured_hook["Featured events"]
  node_upcoming_hook["Upcoming events"]
  node_weekend_hook["Weekend events"]
end

subgraph group_explore["Event exploration"]
  node_explore_page["Explore page<br/>[Explorar.jsx]"]
  node_explore_header["Search header"]
  node_explore_content["Explore content"]
  node_filters["Catalog filters"]
  node_mobile_filters["Mobile filters"]
  node_results["Event results"]
  node_explore_hook["Explore query"]
  node_category_hook["Category query<br/>[useCategorias.js]"]
  node_explore_service["Catalog service<br/>[explorar.js]"]
  node_event_service["Event service<br/>[eventos.js]"]
  node_route_utils["Filter URL state<br/>[rutas.js]"]
end

subgraph group_shared["Shared experience"]
  node_text_hook["Localized text<br/>[useTextos.js]"]
  node_text_service["Text service<br/>[textos.js]"]
  node_text_fallback["Fallback text<br/>[textosRespaldo.js]"]
  node_preferences["Language preferences<br/>[usePreferencias.js]"]
  node_cookies["Cookie helpers<br/>[cookies.js]"]
  node_accessibility["Accessibility panel"]
  node_accessibility_config["Accessibility settings<br/>[accesibilidad.js]"]
end

node_visitor(("Visitor"))
node_event_api(("Events API"))

node_visitor -->|"opens"| node_app
node_app -->|"wraps routes"| node_layout
node_app -->|"routes to"| node_home_page
node_app -->|"routes to"| node_explore_page
node_app -->|"loads text"| node_text_hook
node_app -->|"loads preferences"| node_preferences
node_home_page -->|"renders"| node_home_sections
node_home_page -->|"loads featured"| node_featured_hook
node_home_page -->|"loads categories"| node_category_hook
node_home_page -->|"loads upcoming"| node_upcoming_hook
node_home_page -->|"loads weekend"| node_weekend_hook
node_explore_page -->|"loads catalog"| node_explore_hook
node_explore_page -->|"loads categories"| node_category_hook
node_explore_page -->|"renders"| node_explore_header
node_explore_page -->|"renders"| node_explore_content
node_explore_page -->|"renders"| node_filters
node_explore_page -->|"renders"| node_mobile_filters
node_explore_page -->|"renders"| node_results
node_explore_page -->|"builds filter routes"| node_route_utils
node_explore_hook -->|"queries"| node_explore_service
node_explore_service -->|"uses event data"| node_event_service
node_event_service -->|"fetches events"| node_event_api
node_upcoming_hook -->|"queries events"| node_event_service
node_weekend_hook -->|"queries events"| node_event_service
node_text_hook -->|"loads translations"| node_text_service
node_text_hook -->|"uses fallback"| node_text_fallback
node_preferences -->|"reads and writes"| node_cookies
node_accessibility -->|"uses settings"| node_accessibility_config

click node_app "https://github.com/juanjoseia-udc/taquilla-project/blob/main/src/App.jsx"
click node_layout "https://github.com/juanjoseia-udc/taquilla-project/blob/main/src/components/layout/LayoutPublico.jsx"
click node_home_page "https://github.com/juanjoseia-udc/taquilla-project/blob/main/src/pages/Inicio.jsx"
click node_home_sections "https://github.com/juanjoseia-udc/taquilla-project/tree/main/src/components/home"
click node_featured_hook "https://github.com/juanjoseia-udc/taquilla-project/blob/main/src/hooks/useEventosDestacados.js"
click node_upcoming_hook "https://github.com/juanjoseia-udc/taquilla-project/blob/main/src/hooks/useProximosEventos.js"
click node_weekend_hook "https://github.com/juanjoseia-udc/taquilla-project/blob/main/src/hooks/useEventosFinDeSemana.js"
click node_explore_page "https://github.com/juanjoseia-udc/taquilla-project/blob/main/src/pages/Explorar.jsx"
click node_explore_header "https://github.com/juanjoseia-udc/taquilla-project/blob/main/src/components/explore/EncabezadoExplorar.jsx"
click node_explore_content "https://github.com/juanjoseia-udc/taquilla-project/blob/main/src/components/explore/ContenidoExplorar.jsx"
click node_filters "https://github.com/juanjoseia-udc/taquilla-project/tree/main/src/components/explore"
click node_mobile_filters "https://github.com/juanjoseia-udc/taquilla-project/blob/main/src/components/explore/PanelFiltrosMovil.jsx"
click node_results "https://github.com/juanjoseia-udc/taquilla-project/blob/main/src/components/explore/ResultadosExplorar.jsx"
click node_explore_hook "https://github.com/juanjoseia-udc/taquilla-project/blob/main/src/hooks/useEventosExplorar.js"
click node_category_hook "https://github.com/juanjoseia-udc/taquilla-project/blob/main/src/hooks/useCategorias.js"
click node_explore_service "https://github.com/juanjoseia-udc/taquilla-project/blob/main/src/services/explorar.js"
click node_event_service "https://github.com/juanjoseia-udc/taquilla-project/blob/main/src/services/eventos.js"
click node_route_utils "https://github.com/juanjoseia-udc/taquilla-project/blob/main/src/utils/rutas.js"
click node_text_hook "https://github.com/juanjoseia-udc/taquilla-project/blob/main/src/hooks/useTextos.js"
click node_text_service "https://github.com/juanjoseia-udc/taquilla-project/blob/main/src/services/textos.js"
click node_text_fallback "https://github.com/juanjoseia-udc/taquilla-project/blob/main/src/data/textosRespaldo.js"
click node_preferences "https://github.com/juanjoseia-udc/taquilla-project/blob/main/src/hooks/usePreferencias.js"
click node_cookies "https://github.com/juanjoseia-udc/taquilla-project/blob/main/src/utils/cookies.js"
click node_accessibility "https://github.com/juanjoseia-udc/taquilla-project/blob/main/src/components/accessibility/PanelAccesibilidad.jsx"
click node_accessibility_config "https://github.com/juanjoseia-udc/taquilla-project/blob/main/src/config/accesibilidad.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_page,node_home_sections,node_featured_hook,node_upcoming_hook,node_weekend_hook toneAmber
class node_explore_page,node_explore_header,node_explore_content,node_filters,node_mobile_filters,node_results,node_explore_hook,node_category_hook,node_explore_service,node_event_service,node_route_utils,node_event_api toneMint
class node_text_hook,node_text_service,node_text_fallback,node_preferences,node_cookies,node_accessibility,node_accessibility_config toneRose
class node_visitor toneIndigo
```

## Components

### Application shell

- [App router](https://github.com/juanjoseia-udc/taquilla-project/blob/main/src/App.jsx): `src/App.jsx`
- [Public layout](https://github.com/juanjoseia-udc/taquilla-project/blob/main/src/components/layout/LayoutPublico.jsx): `src/components/layout/LayoutPublico.jsx`

### Home discovery

- [Home page](https://github.com/juanjoseia-udc/taquilla-project/blob/main/src/pages/Inicio.jsx): `src/pages/Inicio.jsx`
- [Home sections](https://github.com/juanjoseia-udc/taquilla-project/tree/main/src/components/home): `src/components/home`
- [Featured events](https://github.com/juanjoseia-udc/taquilla-project/blob/main/src/hooks/useEventosDestacados.js): `src/hooks/useEventosDestacados.js`
- [Upcoming events](https://github.com/juanjoseia-udc/taquilla-project/blob/main/src/hooks/useProximosEventos.js): `src/hooks/useProximosEventos.js`
- [Weekend events](https://github.com/juanjoseia-udc/taquilla-project/blob/main/src/hooks/useEventosFinDeSemana.js): `src/hooks/useEventosFinDeSemana.js`

### Event exploration

- [Explore page](https://github.com/juanjoseia-udc/taquilla-project/blob/main/src/pages/Explorar.jsx): `src/pages/Explorar.jsx`
- [Search header](https://github.com/juanjoseia-udc/taquilla-project/blob/main/src/components/explore/EncabezadoExplorar.jsx): `src/components/explore/EncabezadoExplorar.jsx`
- [Explore content](https://github.com/juanjoseia-udc/taquilla-project/blob/main/src/components/explore/ContenidoExplorar.jsx): `src/components/explore/ContenidoExplorar.jsx`
- [Catalog filters](https://github.com/juanjoseia-udc/taquilla-project/tree/main/src/components/explore): `src/components/explore`
- [Mobile filters](https://github.com/juanjoseia-udc/taquilla-project/blob/main/src/components/explore/PanelFiltrosMovil.jsx): `src/components/explore/PanelFiltrosMovil.jsx`
- [Event results](https://github.com/juanjoseia-udc/taquilla-project/blob/main/src/components/explore/ResultadosExplorar.jsx): `src/components/explore/ResultadosExplorar.jsx`
- [Explore query](https://github.com/juanjoseia-udc/taquilla-project/blob/main/src/hooks/useEventosExplorar.js): `src/hooks/useEventosExplorar.js`
- [Category query](https://github.com/juanjoseia-udc/taquilla-project/blob/main/src/hooks/useCategorias.js): `src/hooks/useCategorias.js`
- [Catalog service](https://github.com/juanjoseia-udc/taquilla-project/blob/main/src/services/explorar.js): `src/services/explorar.js`
- [Event service](https://github.com/juanjoseia-udc/taquilla-project/blob/main/src/services/eventos.js): `src/services/eventos.js`
- [Filter URL state](https://github.com/juanjoseia-udc/taquilla-project/blob/main/src/utils/rutas.js): `src/utils/rutas.js`

### Shared experience

- [Localized text](https://github.com/juanjoseia-udc/taquilla-project/blob/main/src/hooks/useTextos.js): `src/hooks/useTextos.js`
- [Text service](https://github.com/juanjoseia-udc/taquilla-project/blob/main/src/services/textos.js): `src/services/textos.js`
- [Fallback text](https://github.com/juanjoseia-udc/taquilla-project/blob/main/src/data/textosRespaldo.js): `src/data/textosRespaldo.js`
- [Language preferences](https://github.com/juanjoseia-udc/taquilla-project/blob/main/src/hooks/usePreferencias.js): `src/hooks/usePreferencias.js`
- [Cookie helpers](https://github.com/juanjoseia-udc/taquilla-project/blob/main/src/utils/cookies.js): `src/utils/cookies.js`
- [Accessibility panel](https://github.com/juanjoseia-udc/taquilla-project/blob/main/src/components/accessibility/PanelAccesibilidad.jsx): `src/components/accessibility/PanelAccesibilidad.jsx`
- [Accessibility settings](https://github.com/juanjoseia-udc/taquilla-project/blob/main/src/config/accesibilidad.js): `src/config/accesibilidad.js`

### Other components

- **Visitor**
- **Events API**

## Connections

- Visitor → App router: opens
- App router → Public layout: wraps routes (evidence: `src/App.jsx`)
- App router → Home page: routes to (evidence: `src/App.jsx`)
- App router → Explore page: routes to (evidence: `src/App.jsx`)
- App router → Localized text: loads text (evidence: `src/App.jsx`)
- App router → Language preferences: loads preferences (evidence: `src/App.jsx`)
- Home page → Home sections: renders (evidence: `src/pages/Inicio.jsx`)
- Home page → Featured events: loads featured (evidence: `src/pages/Inicio.jsx`)
- Home page → Category query: loads categories (evidence: `src/pages/Inicio.jsx`)
- Home page → Upcoming events: loads upcoming (evidence: `src/pages/Inicio.jsx`)
- Home page → Weekend events: loads weekend (evidence: `src/pages/Inicio.jsx`)
- Explore page → Explore query: loads catalog (evidence: `src/pages/Explorar.jsx`)
- Explore page → Category query: loads categories (evidence: `src/pages/Explorar.jsx`)
- Explore page → Search header: renders (evidence: `src/pages/Explorar.jsx`)
- Explore page → Explore content: renders (evidence: `src/pages/Explorar.jsx`)
- Explore page → Catalog filters: renders (evidence: `src/pages/Explorar.jsx`)
- Explore page → Mobile filters: renders (evidence: `src/pages/Explorar.jsx`)
- Explore page → Event results: renders (evidence: `src/pages/Explorar.jsx`)
- Explore page → Filter URL state: builds filter routes (evidence: `src/pages/Explorar.jsx`)
- Explore query → Catalog service: queries (evidence: `src/hooks/useEventosExplorar.js`)
- Catalog service → Event service: uses event data (evidence: `src/services/explorar.js`)
- Event service → Events API: fetches events (evidence: `src/services/eventos.js`)
- Upcoming events → Event service: queries events (evidence: `src/hooks/useProximosEventos.js`)
- Weekend events → Event service: queries events (evidence: `src/hooks/useEventosFinDeSemana.js`)
- Localized text → Text service: loads translations (evidence: `src/hooks/useTextos.js`)
- Localized text → Fallback text: uses fallback (evidence: `src/hooks/useTextos.js`)
- Language preferences → Cookie helpers: reads and writes (evidence: `src/hooks/usePreferencias.js`)
- Accessibility panel → Accessibility settings: uses settings (evidence: `src/components/accessibility/PanelAccesibilidad.jsx`)