# dana52855/taquilla architecture

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

## Overview

This is a Spanish-language event-discovery frontend. Visitors land on a home page with featured and upcoming events, then browse events with search, category, date, price, city, sort, and pagination controls. App owns routing, shared language and consent state; the public layout provides navigation, footer, cookie consent, and accessibility settings. The excerpts show text loading and accessibility persistence, but do not show the event-fetch implementations or Explore’s omitted request logic, so those data links are left unverified.

Main entry points: [`src/layouts/LayoutPublico.jsx`](https://github.com/dana52855/taquilla/blob/main/src/layouts/LayoutPublico.jsx) (Public layout), [`src/pages/Home/Home.jsx`](https://github.com/dana52855/taquilla/blob/main/src/pages/Home/Home.jsx) (Home discovery), [`src/components/Tarjeta/Tarjeta.jsx`](https://github.com/dana52855/taquilla/blob/main/src/components/Tarjeta/Tarjeta.jsx) (Event card), [`src/components/Navbar/Navbar.jsx`](https://github.com/dana52855/taquilla/blob/main/src/components/Navbar/Navbar.jsx) (Navigation)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application and routing"]
  node_app["App and routes<br/>[App.jsx]"]
  node_textloader["Text loader<br/>[useTextos.js]"]
  node_publiclayout["Public layout<br/>[LayoutPublico.jsx]"]
end

subgraph group_discovery["Event discovery"]
  node_home["Home discovery<br/>[Home.jsx]"]
  node_explore["Event explorer<br/>[Explorar.jsx]"]
  node_eventhook["Event data hook<br/>[useEventos.js]"]
  node_categoryhook["Category data hook<br/>[useCategorias.js]"]
  node_eventcard["Event card<br/>[Tarjeta.jsx]"]
  node_cover["Event cover<br/>[Portada.jsx]"]
end

subgraph group_shared["Shared interface"]
  node_navbar["Navigation<br/>[Navbar.jsx]"]
  node_footer["Footer<br/>[Footer.jsx]"]
  node_cookiebanner["Cookie banner<br/>[BannerCookies.jsx]"]
  node_button["Button<br/>[Boton.jsx]"]
  node_tag["Category tag<br/>[Etiqueta.jsx]"]
  node_icon["Icon renderer<br/>[Icono.jsx]"]
end

subgraph group_preferences["Visitor preferences"]
  node_accessibility["Accessibility panel"]
  node_language["Language selector<br/>[SelectorIdioma.jsx]"]
  node_mediaquery["Viewport hook<br/>[useMediaQuery.js]"]
end

node_visitor(("Visitor"))
node_textapi{{"Texts API"}}
node_browserstorage[("Browser local storage")]

node_visitor -->|"opens site"| node_app
node_app -->|"loads texts"| node_textloader
node_textloader -->|"fetches texts"| node_textapi
node_app -->|"routes through"| node_publiclayout
node_publiclayout -->|"renders route"| node_home
node_publiclayout -->|"renders route"| node_explore
node_publiclayout -->|"renders"| node_navbar
node_publiclayout -->|"renders"| node_footer
node_publiclayout -->|"renders"| node_cookiebanner
node_publiclayout -->|"renders"| node_accessibility
node_home -->|"loads events"| node_eventhook
node_home -->|"loads categories"| node_categoryhook
node_home -->|"renders events"| node_eventcard
node_home -->|"renders feature"| node_cover
node_home -->|"renders labels"| node_tag
node_explore -->|"renders results"| node_eventcard
node_eventcard -->|"renders cover"| node_cover
node_eventcard -->|"renders label"| node_tag
node_eventcard -->|"renders action"| node_button
node_eventcard -->|"renders icons"| node_icon
node_navbar -->|"renders actions"| node_button
node_navbar -->|"renders selector"| node_language
node_navbar -->|"checks viewport"| node_mediaquery
node_navbar -->|"renders icons"| node_icon
node_accessibility -->|"renders icon"| node_icon
node_accessibility -->|"persists settings"| node_browserstorage

click node_app "https://github.com/dana52855/taquilla/blob/main/src/App.jsx"
click node_textloader "https://github.com/dana52855/taquilla/blob/main/src/hooks/useTextos.js"
click node_publiclayout "https://github.com/dana52855/taquilla/blob/main/src/layouts/LayoutPublico.jsx"
click node_home "https://github.com/dana52855/taquilla/blob/main/src/pages/Home/Home.jsx"
click node_explore "https://github.com/dana52855/taquilla/blob/main/src/pages/Explorar/Explorar.jsx"
click node_eventhook "https://github.com/dana52855/taquilla/blob/main/src/hooks/useEventos.js"
click node_categoryhook "https://github.com/dana52855/taquilla/blob/main/src/hooks/useCategorias.js"
click node_eventcard "https://github.com/dana52855/taquilla/blob/main/src/components/Tarjeta/Tarjeta.jsx"
click node_cover "https://github.com/dana52855/taquilla/blob/main/src/components/Portada/Portada.jsx"
click node_navbar "https://github.com/dana52855/taquilla/blob/main/src/components/Navbar/Navbar.jsx"
click node_footer "https://github.com/dana52855/taquilla/blob/main/src/components/Footer/Footer.jsx"
click node_cookiebanner "https://github.com/dana52855/taquilla/blob/main/src/components/BannerCookies/BannerCookies.jsx"
click node_button "https://github.com/dana52855/taquilla/blob/main/src/components/Boton/Boton.jsx"
click node_tag "https://github.com/dana52855/taquilla/blob/main/src/components/Etiqueta/Etiqueta.jsx"
click node_icon "https://github.com/dana52855/taquilla/blob/main/src/components/Icono.jsx"
click node_accessibility "https://github.com/dana52855/taquilla/blob/main/src/components/PanelAccesibilidad/PanelAccesibilidad.jsx"
click node_language "https://github.com/dana52855/taquilla/blob/main/src/components/SelectorIdioma/SelectorIdioma.jsx"
click node_mediaquery "https://github.com/dana52855/taquilla/blob/main/src/hooks/useMediaQuery.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_textloader,node_publiclayout toneBlue
class node_home,node_explore,node_eventhook,node_categoryhook,node_eventcard,node_cover,node_browserstorage toneAmber
class node_navbar,node_footer,node_cookiebanner,node_button,node_tag,node_icon,node_textapi toneMint
class node_accessibility,node_language,node_mediaquery toneRose
class node_visitor toneIndigo
```

## Components

### Application and routing

- [App and routes](https://github.com/dana52855/taquilla/blob/main/src/App.jsx): `src/App.jsx`
- [Text loader](https://github.com/dana52855/taquilla/blob/main/src/hooks/useTextos.js): `src/hooks/useTextos.js`
- [Public layout](https://github.com/dana52855/taquilla/blob/main/src/layouts/LayoutPublico.jsx): `src/layouts/LayoutPublico.jsx`

### Event discovery

- [Home discovery](https://github.com/dana52855/taquilla/blob/main/src/pages/Home/Home.jsx): `src/pages/Home/Home.jsx`
- [Event explorer](https://github.com/dana52855/taquilla/blob/main/src/pages/Explorar/Explorar.jsx): `src/pages/Explorar/Explorar.jsx`
- [Event data hook](https://github.com/dana52855/taquilla/blob/main/src/hooks/useEventos.js): `src/hooks/useEventos.js`
- [Category data hook](https://github.com/dana52855/taquilla/blob/main/src/hooks/useCategorias.js): `src/hooks/useCategorias.js`
- [Event card](https://github.com/dana52855/taquilla/blob/main/src/components/Tarjeta/Tarjeta.jsx): `src/components/Tarjeta/Tarjeta.jsx`
- [Event cover](https://github.com/dana52855/taquilla/blob/main/src/components/Portada/Portada.jsx): `src/components/Portada/Portada.jsx`

### Shared interface

- [Navigation](https://github.com/dana52855/taquilla/blob/main/src/components/Navbar/Navbar.jsx): `src/components/Navbar/Navbar.jsx`
- [Footer](https://github.com/dana52855/taquilla/blob/main/src/components/Footer/Footer.jsx): `src/components/Footer/Footer.jsx`
- [Cookie banner](https://github.com/dana52855/taquilla/blob/main/src/components/BannerCookies/BannerCookies.jsx): `src/components/BannerCookies/BannerCookies.jsx`
- [Button](https://github.com/dana52855/taquilla/blob/main/src/components/Boton/Boton.jsx): `src/components/Boton/Boton.jsx`
- [Category tag](https://github.com/dana52855/taquilla/blob/main/src/components/Etiqueta/Etiqueta.jsx): `src/components/Etiqueta/Etiqueta.jsx`
- [Icon renderer](https://github.com/dana52855/taquilla/blob/main/src/components/Icono.jsx): `src/components/Icono.jsx`

### Visitor preferences

- [Accessibility panel](https://github.com/dana52855/taquilla/blob/main/src/components/PanelAccesibilidad/PanelAccesibilidad.jsx): `src/components/PanelAccesibilidad/PanelAccesibilidad.jsx`
- [Language selector](https://github.com/dana52855/taquilla/blob/main/src/components/SelectorIdioma/SelectorIdioma.jsx): `src/components/SelectorIdioma/SelectorIdioma.jsx`
- [Viewport hook](https://github.com/dana52855/taquilla/blob/main/src/hooks/useMediaQuery.js): `src/hooks/useMediaQuery.js`

### Other components

- **Visitor**
- **Texts API**
- **Browser local storage**

## Connections

- Visitor → App and routes: opens site (evidence: `src/App.jsx`)
- App and routes → Text loader: loads texts (evidence: `src/App.jsx`)
- Text loader → Texts API: fetches texts (evidence: `src/hooks/useTextos.js`)
- App and routes → Public layout: routes through (evidence: `src/App.jsx`)
- Public layout → Home discovery: renders route (evidence: `src/App.jsx`)
- Public layout → Event explorer: renders route (evidence: `src/App.jsx`)
- Public layout → Navigation: renders (evidence: `src/layouts/LayoutPublico.jsx`)
- Public layout → Footer: renders (evidence: `src/layouts/LayoutPublico.jsx`)
- Public layout → Cookie banner: renders (evidence: `src/layouts/LayoutPublico.jsx`)
- Public layout → Accessibility panel: renders (evidence: `src/layouts/LayoutPublico.jsx`)
- Home discovery → Event data hook: loads events (evidence: `src/pages/Home/Home.jsx`)
- Home discovery → Category data hook: loads categories (evidence: `src/pages/Home/Home.jsx`)
- Home discovery → Event card: renders events (evidence: `src/pages/Home/Home.jsx`)
- Home discovery → Event cover: renders feature (evidence: `src/pages/Home/Home.jsx`)
- Home discovery → Category tag: renders labels (evidence: `src/pages/Home/Home.jsx`)
- Event explorer → Event card: renders results (evidence: `src/pages/Explorar/Explorar.jsx`)
- Event card → Event cover: renders cover (evidence: `src/components/Tarjeta/Tarjeta.jsx`)
- Event card → Category tag: renders label (evidence: `src/components/Tarjeta/Tarjeta.jsx`)
- Event card → Button: renders action (evidence: `src/components/Tarjeta/Tarjeta.jsx`)
- Event card → Icon renderer: renders icons (evidence: `src/components/Tarjeta/Tarjeta.jsx`)
- Navigation → Button: renders actions (evidence: `src/components/Navbar/Navbar.jsx`)
- Navigation → Language selector: renders selector (evidence: `src/components/Navbar/Navbar.jsx`)
- Navigation → Viewport hook: checks viewport (evidence: `src/components/Navbar/Navbar.jsx`)
- Navigation → Icon renderer: renders icons (evidence: `src/components/Navbar/Navbar.jsx`)
- Accessibility panel → Icon renderer: renders icon (evidence: `src/components/PanelAccesibilidad/PanelAccesibilidad.jsx`)
- Accessibility panel → Browser local storage: persists settings (evidence: `src/components/PanelAccesibilidad/PanelAccesibilidad.jsx`)