# jacobo-g-m/cromoverso architecture

> Architecture diagram of the GitHub repository jacobo-g-m/cromoverso, 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/jacobo-g-m/cromoverso
- Repository: https://github.com/jacobo-g-m/cromoverso

## Overview

Cromoverso is a React web app for discovering six fantasy worlds and browsing a collectible-card catalog. The main flow runs from the home page or navigation into a selected world, where catalog data is fetched and cards are filtered, sorted, and shown; README documents URL-synchronized filters and responsive layouts. Shared localization and cookie preferences support the experience. The login and signup views exist, but the sampled evidence does not show authentication behavior. Some capabilities are documented but their implementation was not sampled, so only evidenced links are drawn.

Main entry points: [`src/App.jsx`](https://github.com/jacobo-g-m/cromoverso/blob/main/src/App.jsx) (App routing), [`src/components/layout/Navbar.jsx`](https://github.com/jacobo-g-m/cromoverso/blob/main/src/components/layout/Navbar.jsx) (Navigation bar), [`src/views/Worlds.jsx`](https://github.com/jacobo-g-m/cromoverso/blob/main/src/views/Worlds.jsx) (World catalog), [`src/components/layout/CookiePreferences.jsx`](https://github.com/jacobo-g-m/cromoverso/blob/main/src/components/layout/CookiePreferences.jsx) (Cookie preferences)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_navigation["App and navigation"]
  node_app["App routing<br/>[App.jsx]"]
  node_home["Home page<br/>[Home.jsx]"]
  node_login["Login view<br/>[Login.jsx]"]
  node_signup["Signup view<br/>[Signup.jsx]"]
  node_navbar["Navigation bar<br/>[Navbar.jsx]"]
  node_mobilemenu["Mobile menu<br/>[MobileMenu.jsx]"]
  node_footer["Footer<br/>[Footer.jsx]"]
end

subgraph group_catalog["Worlds and cards"]
  node_worlds["World catalog<br/>[Worlds.jsx]"]
  node_worlddata["World data hook<br/>[useMundos.js]"]
  node_cardsgrid["Cards grid<br/>[CardsGrid.jsx]"]
  node_card["Collectible card<br/>[Card.jsx]"]
end

subgraph group_shared["Localization and consent"]
  node_texts["Text hook<br/>[useTexts.js]"]
  node_cookies["Cookie banner<br/>[Cookies.jsx]"]
  node_preferences["Cookie preferences"]
  node_cookieutil["Cookie utilities<br/>[cookies.js]"]
end

subgraph group_ui["Reusable interface"]
  node_button["Button<br/>[Button.jsx]"]
  node_dropdown["Dropdown<br/>[Dropdown.jsx]"]
  node_pillswitch["Pill switch<br/>[PillSwitch.jsx]"]
  node_switch["Toggle switch<br/>[Switch.jsx]"]
end

node_visitor(("Visitor"))
node_browsercookies[("Browser cookies")]
node_api{{"Cromoverso REST API"}}

node_visitor -->|"uses"| node_app
node_app -->|"renders"| node_navbar
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_worlds
node_app -->|"routes to"| node_login
node_app -->|"routes to"| node_signup
node_app -->|"renders"| node_footer
node_app -->|"renders"| node_cookies
node_app -->|"renders"| node_preferences
node_app -->|"loads texts"| node_texts
node_app -->|"sets consent"| node_cookieutil
node_navbar -->|"renders"| node_mobilemenu
node_navbar -->|"uses"| node_dropdown
node_navbar -->|"uses"| node_pillswitch
node_home -->|"loads worlds"| node_worlddata
node_home -->|"uses"| node_button
node_worlds -->|"loads catalog"| node_worlddata
node_worlds -->|"renders cards"| node_cardsgrid
node_worlds -->|"uses filters"| node_dropdown
node_cardsgrid -->|"renders"| node_card
node_worlddata -->|"fetches worlds"| node_api
node_texts -->|"fetches translations"| node_api
node_preferences -->|"reads and writes"| node_cookieutil
node_preferences -->|"uses"| node_switch
node_preferences -->|"uses"| node_button
node_cookies -->|"uses"| node_button
node_cookieutil -->|"reads and writes"| node_browsercookies

click node_app "https://github.com/jacobo-g-m/cromoverso/blob/main/src/App.jsx"
click node_home "https://github.com/jacobo-g-m/cromoverso/blob/main/src/views/Home.jsx"
click node_login "https://github.com/jacobo-g-m/cromoverso/blob/main/src/views/Login.jsx"
click node_signup "https://github.com/jacobo-g-m/cromoverso/blob/main/src/views/Signup.jsx"
click node_navbar "https://github.com/jacobo-g-m/cromoverso/blob/main/src/components/layout/Navbar.jsx"
click node_mobilemenu "https://github.com/jacobo-g-m/cromoverso/blob/main/src/components/layout/MobileMenu.jsx"
click node_footer "https://github.com/jacobo-g-m/cromoverso/blob/main/src/components/layout/Footer.jsx"
click node_worlds "https://github.com/jacobo-g-m/cromoverso/blob/main/src/views/Worlds.jsx"
click node_worlddata "https://github.com/jacobo-g-m/cromoverso/blob/main/src/hooks/useMundos.js"
click node_cardsgrid "https://github.com/jacobo-g-m/cromoverso/blob/main/src/components/ui/CardsGrid/CardsGrid.jsx"
click node_card "https://github.com/jacobo-g-m/cromoverso/blob/main/src/components/ui/Card/Card.jsx"
click node_texts "https://github.com/jacobo-g-m/cromoverso/blob/main/src/hooks/useTexts.js"
click node_cookies "https://github.com/jacobo-g-m/cromoverso/blob/main/src/components/layout/Cookies.jsx"
click node_preferences "https://github.com/jacobo-g-m/cromoverso/blob/main/src/components/layout/CookiePreferences.jsx"
click node_cookieutil "https://github.com/jacobo-g-m/cromoverso/blob/main/src/utils/cookies.js"
click node_button "https://github.com/jacobo-g-m/cromoverso/blob/main/src/components/ui/Button/Button.jsx"
click node_dropdown "https://github.com/jacobo-g-m/cromoverso/blob/main/src/components/ui/Dropdown/Dropdown.jsx"
click node_pillswitch "https://github.com/jacobo-g-m/cromoverso/blob/main/src/components/ui/PillSwitch/PillSwitch.jsx"
click node_switch "https://github.com/jacobo-g-m/cromoverso/blob/main/src/components/ui/Switch/Switch.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_home,node_login,node_signup,node_navbar,node_mobilemenu,node_footer toneBlue
class node_worlds,node_worlddata,node_cardsgrid,node_card,node_browsercookies toneAmber
class node_texts,node_cookies,node_preferences,node_cookieutil,node_api toneMint
class node_button,node_dropdown,node_pillswitch,node_switch toneRose
class node_visitor toneIndigo
```

## Components

### App and navigation

- [App routing](https://github.com/jacobo-g-m/cromoverso/blob/main/src/App.jsx): `src/App.jsx`
- [Home page](https://github.com/jacobo-g-m/cromoverso/blob/main/src/views/Home.jsx): `src/views/Home.jsx`
- [Login view](https://github.com/jacobo-g-m/cromoverso/blob/main/src/views/Login.jsx): `src/views/Login.jsx`
- [Signup view](https://github.com/jacobo-g-m/cromoverso/blob/main/src/views/Signup.jsx): `src/views/Signup.jsx`
- [Navigation bar](https://github.com/jacobo-g-m/cromoverso/blob/main/src/components/layout/Navbar.jsx): `src/components/layout/Navbar.jsx`
- [Mobile menu](https://github.com/jacobo-g-m/cromoverso/blob/main/src/components/layout/MobileMenu.jsx): `src/components/layout/MobileMenu.jsx`
- [Footer](https://github.com/jacobo-g-m/cromoverso/blob/main/src/components/layout/Footer.jsx): `src/components/layout/Footer.jsx`

### Worlds and cards

- [World catalog](https://github.com/jacobo-g-m/cromoverso/blob/main/src/views/Worlds.jsx): `src/views/Worlds.jsx`
- [World data hook](https://github.com/jacobo-g-m/cromoverso/blob/main/src/hooks/useMundos.js): `src/hooks/useMundos.js`
- [Cards grid](https://github.com/jacobo-g-m/cromoverso/blob/main/src/components/ui/CardsGrid/CardsGrid.jsx): `src/components/ui/CardsGrid/CardsGrid.jsx`
- [Collectible card](https://github.com/jacobo-g-m/cromoverso/blob/main/src/components/ui/Card/Card.jsx): `src/components/ui/Card/Card.jsx`

### Localization and consent

- [Text hook](https://github.com/jacobo-g-m/cromoverso/blob/main/src/hooks/useTexts.js): `src/hooks/useTexts.js`
- [Cookie banner](https://github.com/jacobo-g-m/cromoverso/blob/main/src/components/layout/Cookies.jsx): `src/components/layout/Cookies.jsx`
- [Cookie preferences](https://github.com/jacobo-g-m/cromoverso/blob/main/src/components/layout/CookiePreferences.jsx): `src/components/layout/CookiePreferences.jsx`
- [Cookie utilities](https://github.com/jacobo-g-m/cromoverso/blob/main/src/utils/cookies.js): `src/utils/cookies.js`

### Reusable interface

- [Button](https://github.com/jacobo-g-m/cromoverso/blob/main/src/components/ui/Button/Button.jsx): `src/components/ui/Button/Button.jsx`
- [Dropdown](https://github.com/jacobo-g-m/cromoverso/blob/main/src/components/ui/Dropdown/Dropdown.jsx): `src/components/ui/Dropdown/Dropdown.jsx`
- [Pill switch](https://github.com/jacobo-g-m/cromoverso/blob/main/src/components/ui/PillSwitch/PillSwitch.jsx): `src/components/ui/PillSwitch/PillSwitch.jsx`
- [Toggle switch](https://github.com/jacobo-g-m/cromoverso/blob/main/src/components/ui/Switch/Switch.jsx): `src/components/ui/Switch/Switch.jsx`

### Other components

- **Visitor**
- **Browser cookies**
- **Cromoverso REST API**

## Connections

- Visitor → App routing: uses
- App routing → Navigation bar: renders (evidence: `src/App.jsx`)
- App routing → Home page: routes to (evidence: `src/App.jsx`)
- App routing → World catalog: routes to (evidence: `src/App.jsx`)
- App routing → Login view: routes to (evidence: `src/App.jsx`)
- App routing → Signup view: routes to (evidence: `src/App.jsx`)
- App routing → Footer: renders (evidence: `src/App.jsx`)
- App routing → Cookie banner: renders (evidence: `src/App.jsx`)
- App routing → Cookie preferences: renders (evidence: `src/App.jsx`)
- App routing → Text hook: loads texts (evidence: `src/App.jsx`)
- App routing → Cookie utilities: sets consent (evidence: `src/App.jsx`)
- Navigation bar → Mobile menu: renders (evidence: `src/components/layout/Navbar.jsx`)
- Navigation bar → Dropdown: uses (evidence: `src/components/layout/Navbar.jsx`)
- Navigation bar → Pill switch: uses (evidence: `src/components/layout/Navbar.jsx`)
- Home page → World data hook: loads worlds (evidence: `src/views/Home.jsx`)
- Home page → Button: uses (evidence: `src/views/Home.jsx`)
- World catalog → World data hook: loads catalog (evidence: `src/views/Worlds.jsx`)
- World catalog → Cards grid: renders cards (evidence: `src/views/Worlds.jsx`)
- World catalog → Dropdown: uses filters (evidence: `src/views/Worlds.jsx`)
- Cards grid → Collectible card: renders (evidence: `src/components/ui/CardsGrid/CardsGrid.jsx`)
- World data hook → Cromoverso REST API: fetches worlds (evidence: `src/hooks/useMundos.js`)
- Text hook → Cromoverso REST API: fetches translations (evidence: `src/hooks/useTexts.js`)
- Cookie preferences → Cookie utilities: reads and writes (evidence: `src/components/layout/CookiePreferences.jsx`)
- Cookie preferences → Toggle switch: uses (evidence: `src/components/layout/CookiePreferences.jsx`)
- Cookie preferences → Button: uses (evidence: `src/components/layout/CookiePreferences.jsx`)
- Cookie banner → Button: uses (evidence: `src/components/layout/Cookies.jsx`)
- Cookie utilities → Browser cookies: reads and writes (evidence: `src/utils/cookies.js`)