# josue1414/predicamap architecture

> Architecture diagram of the GitHub repository josue1414/predicamap, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-27). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/josue1414/predicamap
- Repository: https://github.com/josue1414/predicamap

## Overview

1. This is a React single-page application built with Vite. The runtime entry is `src/main.jsx`, which mounts `App.jsx` and loads global styles from `src/index.css`. The repo is set up for modern frontend delivery with Vite, Tailwind/PostCSS, ESLint, and Vercel deployment.

2. The app’s top-level structure is view-based, not route-heavy in the file tree. The main screens live under `src/vistas`: `VistaLogin.jsx`, `VistaDashboard.jsx`, and `VistaPublicador.jsx`. These likely represent the unauthenticated entry point, the main authenticated workspace, and a role-specific/publicador workspace.

3. A central architectural concern is map-centric territory management. The `src/hooks/useMapa.js` hook appears to be the main map integration layer, and several UI pieces support it: `VisorMapa.jsx` renders the map, `ManejadorClicksMapa.jsx` handles interaction on the map surface, `ControlesTrazado.jsx` provides drawing controls, and `ModalTachuela.jsx` supports pin/marker editing.

4. Most domain behavior is organized into “manager” hooks under `src/hooks/modulos`. These hooks split responsibilities by feature: `useGestorTerritorios`, `useGestorTachuelas`, `useGestorHistorial`, `useGestorProgreso`, `useMarcadoresPersonales`, plus `useControlesUI` and `useEstadoGlobal`. This suggests a layered design where React components stay mostly presentational while hooks own state and business rules.

5. The app’s state boundaries appear to be: global UI state, map state, and feature-specific domain state. `useEstadoGlobal` and `useControlesUI` likely coordinate cross-cutting concerns, while the other hooks manage separate datasets such as territories, history, progress, personal markers, and “tachuelas” (pins). This separation is important for drawing the architecture because the UI components probably consume these hooks rather than talking directly to backend services.

6. There is a notable sidebar/menu subsystem under `src/componentes/menu-lateral`. It contains section components such as `SeccionAjustesGenerales`, `SeccionBuscarMapa`, `SeccionDibujarTerritorio`, `SeccionDirectorio`, `SeccionHistorial`, `SeccionMiPerfil`, `SeccionMiProgreso`, `SeccionMisRevisitas`, `SeccionSembrarCasas`, `SeccionTerritorios`, and master/admin flows for congregations. `MenuLateral.jsx` and `MenuTerritorio.jsx` likely orchestrate which section is visible based on role and current task.

7. Additional UI components support the workflow around congregation, city, and building context. Examples include `CabeceraCongregacion.jsx`, `BuscadorCiudad.jsx`, `FormularioSeccion.jsx`, and `MenuEdificio.jsx`. These imply that the app is not just a map viewer; it also manages structured operational data tied to congregations and locations.

8. The presence of `src/componentes/menu-lateral/SeccionMasterCongregaciones.jsx` and `SeccionMasterNuevaCongregacion.jsx` suggests a privileged administrative subsystem. That is a separate boundary from the regular “publicador” experience and likely controls organization-level setup and management.

9. Backend connectivity is centralized through `src/utilidades/clienteSupabase.js`, which strongly indicates Supabase is the primary external data store/auth provider. From an architecture perspective, the frontend talks to Supabase for persistence and probably authentication, while the various “gestor” hooks mediate all domain reads and writes.

10. The app likely uses role-based access and workflow state to switch between major areas: login, dashboard, and publisher/publicador mode. The `VistaDashboard` and `VistaPublicador` separation implies that once authenticated, users enter different feature sets depending on their role or responsibility.

11. The repository also contains deployment and environment scaffolding: `.env.example` for configuration, `vercel.json` for hosting/deployment behavior, and `public/` for static assets. This means the diagram should include a frontend hosting boundary plus an external Supabase boundary, with the browser as the primary runtime.

12. In short, the architecture is: React/Vite UI at the edge, role-based views in the middle, feature-specific state hooks as the domain layer, and Supabase as the persistence/auth backend. The map and territory workflow is the core business subsystem, and the sidebar sections are the main user-facing entry points into that workflow.

Main entry points: [`src/hooks/useMapa.js`](https://github.com/josue1414/predicamap/blob/main/src/hooks/useMapa.js) (useMapa), [`src/componentes/VisorMapa.jsx`](https://github.com/josue1414/predicamap/blob/main/src/componentes/VisorMapa.jsx) (Mapa), [`src/utilidades/clienteSupabase.js`](https://github.com/josue1414/predicamap/blob/main/src/utilidades/clienteSupabase.js) (Supabase), [`src/componentes/MenuLateral.jsx`](https://github.com/josue1414/predicamap/blob/main/src/componentes/MenuLateral.jsx) (Menu lateral)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["Shell"]
  node_src_main["main<br/>entrypoint<br/>[main.jsx]"]
  node_src_app["App<br/>root component<br/>[App.jsx]"]
  node_src_styles["Global CSS<br/>styles<br/>[index.css]"]
  node_src_controlador["Vista router<br/>ui coordinator"]
end

subgraph group_views["Views"]
  node_vista_login["Login<br/>screen<br/>[VistaLogin.jsx]"]
  node_vista_dashboard["Dashboard<br/>screen<br/>[VistaDashboard.jsx]"]
  node_vista_publicador["Publicador<br/>screen"]
end

subgraph group_workflow["Workflow"]
  node_menu_lateral["Menu lateral<br/>nav shell<br/>[MenuLateral.jsx]"]
  node_menu_territorio["Menu territorio<br/>workflow nav<br/>[MenuTerritorio.jsx]"]
  node_menu_publicador["Menu publicador<br/>workflow nav"]
  node_visor_mapa["Mapa<br/>map view<br/>[VisorMapa.jsx]"]
  node_map_clicks["Clicks mapa<br/>map interaction"]
  node_trazado["Trazado<br/>map tools"]
  node_tachuela_modal["Tachuela modal<br/>editor modal<br/>[ModalTachuela.jsx]"]
  node_busqueda_ciudad["Buscar ciudad<br/>utility panel<br/>[BuscadorCiudad.jsx]"]
  node_cabecera_cong["Cabecera cong.<br/>context header"]
  node_menu_edificio["Menu edificio<br/>context menu<br/>[MenuEdificio.jsx]"]
  node_hook_mapa["useMapa<br/>map state hook<br/>[useMapa.js]"]
  node_estado_global["Estado global<br/>state hook<br/>[useEstadoGlobal.js]"]
  node_controles_ui["Controles UI<br/>state hook<br/>[useControlesUI.js]"]
  node_gestor_territorios["Territorios<br/>domain hook"]
  node_gestor_tachuelas["Tachuelas<br/>domain hook"]
  node_gestor_historial["Historial<br/>domain hook"]
  node_gestor_progreso["Progreso<br/>domain hook"]
  node_marcadores_personales["Marcadores<br/>domain hook"]
end

subgraph group_infra["Infra"]
  node_supabase[("Supabase<br/>backend service<br/>[clienteSupabase.js]")]
end

node_src_main -->|"mounts"| node_src_app
node_src_app -->|"loads"| node_src_styles
node_src_app -->|"delegates"| node_src_controlador
node_src_controlador -->|"shows"| node_vista_login
node_src_controlador -->|"shows"| node_vista_dashboard
node_src_controlador -->|"shows"| node_vista_publicador
node_vista_dashboard -->|"contains"| node_menu_lateral
node_vista_dashboard -->|"renders"| node_visor_mapa
node_vista_publicador -->|"contains"| node_menu_publicador
node_vista_publicador -->|"renders"| node_visor_mapa
node_menu_lateral -->|"orchestrates"| node_menu_territorio
node_menu_lateral -->|"exposes"| node_busqueda_ciudad
node_menu_lateral -->|"shows"| node_cabecera_cong
node_menu_lateral -->|"includes"| node_menu_edificio
node_visor_mapa -->|"driven by"| node_hook_mapa
node_visor_mapa -->|"uses"| node_map_clicks
node_visor_mapa -->|"uses"| node_trazado
node_visor_mapa -->|"opens"| node_tachuela_modal
node_hook_mapa -->|"reads"| node_estado_global
node_hook_mapa -->|"coordinates"| node_controles_ui
node_hook_mapa -->|"reads"| node_gestor_territorios
node_hook_mapa -->|"reads"| node_gestor_tachuelas
node_hook_mapa -->|"records"| node_gestor_historial
node_hook_mapa -->|"updates"| node_gestor_progreso
node_hook_mapa -->|"syncs"| node_marcadores_personales
node_gestor_territorios -->|"persists"| node_supabase
node_gestor_tachuelas -->|"persists"| node_supabase
node_gestor_historial -->|"persists"| node_supabase
node_gestor_progreso -->|"persists"| node_supabase
node_marcadores_personales -->|"persists"| node_supabase
node_estado_global -->|"auth/state"| node_supabase

click node_src_main "https://github.com/josue1414/predicamap/blob/main/src/main.jsx"
click node_src_app "https://github.com/josue1414/predicamap/blob/main/src/App.jsx"
click node_src_styles "https://github.com/josue1414/predicamap/blob/main/src/index.css"
click node_src_controlador "https://github.com/josue1414/predicamap/blob/main/src/componentes/ControladorVista.jsx"
click node_vista_login "https://github.com/josue1414/predicamap/blob/main/src/vistas/VistaLogin.jsx"
click node_vista_dashboard "https://github.com/josue1414/predicamap/blob/main/src/vistas/VistaDashboard.jsx"
click node_vista_publicador "https://github.com/josue1414/predicamap/blob/main/src/vistas/VistaPublicador.jsx"
click node_menu_lateral "https://github.com/josue1414/predicamap/blob/main/src/componentes/MenuLateral.jsx"
click node_menu_territorio "https://github.com/josue1414/predicamap/blob/main/src/componentes/MenuTerritorio.jsx"
click node_menu_publicador "https://github.com/josue1414/predicamap/blob/main/src/componentes/menu-lateral/MenuLateralPublicador.jsx"
click node_visor_mapa "https://github.com/josue1414/predicamap/blob/main/src/componentes/VisorMapa.jsx"
click node_map_clicks "https://github.com/josue1414/predicamap/blob/main/src/componentes/ManejadorClicksMapa.jsx"
click node_trazado "https://github.com/josue1414/predicamap/blob/main/src/componentes/ControlesTrazado.jsx"
click node_tachuela_modal "https://github.com/josue1414/predicamap/blob/main/src/componentes/ModalTachuela.jsx"
click node_busqueda_ciudad "https://github.com/josue1414/predicamap/blob/main/src/componentes/BuscadorCiudad.jsx"
click node_cabecera_cong "https://github.com/josue1414/predicamap/blob/main/src/componentes/CabeceraCongregacion.jsx"
click node_menu_edificio "https://github.com/josue1414/predicamap/blob/main/src/componentes/MenuEdificio.jsx"
click node_hook_mapa "https://github.com/josue1414/predicamap/blob/main/src/hooks/useMapa.js"
click node_estado_global "https://github.com/josue1414/predicamap/blob/main/src/hooks/modulos/useEstadoGlobal.js"
click node_controles_ui "https://github.com/josue1414/predicamap/blob/main/src/hooks/modulos/useControlesUI.js"
click node_gestor_territorios "https://github.com/josue1414/predicamap/blob/main/src/hooks/modulos/useGestorTerritorios.js"
click node_gestor_tachuelas "https://github.com/josue1414/predicamap/blob/main/src/hooks/modulos/useGestorTachuelas.js"
click node_gestor_historial "https://github.com/josue1414/predicamap/blob/main/src/hooks/modulos/useGestorHistorial.js"
click node_gestor_progreso "https://github.com/josue1414/predicamap/blob/main/src/hooks/modulos/useGestorProgreso.js"
click node_marcadores_personales "https://github.com/josue1414/predicamap/blob/main/src/hooks/modulos/useMarcadoresPersonales.js"
click node_supabase "https://github.com/josue1414/predicamap/blob/main/src/utilidades/clienteSupabase.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_src_main,node_src_app,node_src_styles,node_src_controlador toneBlue
class node_vista_login,node_vista_dashboard,node_vista_publicador toneAmber
class node_menu_lateral,node_menu_territorio,node_menu_publicador,node_visor_mapa,node_map_clicks,node_trazado,node_tachuela_modal,node_busqueda_ciudad,node_cabecera_cong,node_menu_edificio,node_hook_mapa,node_estado_global,node_controles_ui,node_gestor_territorios,node_gestor_tachuelas,node_gestor_historial,node_gestor_progreso,node_marcadores_personales toneMint
class node_supabase toneRose
```

## Components

### Shell

React/Vite entry and shared app composition

- [main](https://github.com/josue1414/predicamap/blob/main/src/main.jsx): entrypoint · Bootstraps React and mounts the app · `src/main.jsx`
- [App](https://github.com/josue1414/predicamap/blob/main/src/App.jsx): root component · Top-level composition and app wiring · `src/App.jsx`
- [Global CSS](https://github.com/josue1414/predicamap/blob/main/src/index.css): styles · Shared application styling · `src/index.css`
- [Vista router](https://github.com/josue1414/predicamap/blob/main/src/componentes/ControladorVista.jsx): ui coordinator · Chooses the active view and layout · `src/componentes/ControladorVista.jsx`

### Views

Top-level screen states for login and workspaces

- [Login](https://github.com/josue1414/predicamap/blob/main/src/vistas/VistaLogin.jsx): screen · Unauthenticated entry screen · `src/vistas/VistaLogin.jsx`
- [Dashboard](https://github.com/josue1414/predicamap/blob/main/src/vistas/VistaDashboard.jsx): screen · Primary authenticated workspace · `src/vistas/VistaDashboard.jsx`
- [Publicador](https://github.com/josue1414/predicamap/blob/main/src/vistas/VistaPublicador.jsx): screen · Role-specific publishing workspace · `src/vistas/VistaPublicador.jsx`

### Workflow

Map-centric UI, sidebar sections, and domain hooks

- [Menu lateral](https://github.com/josue1414/predicamap/blob/main/src/componentes/MenuLateral.jsx): nav shell · Main sidebar container and section host · `src/componentes/MenuLateral.jsx`
- [Menu territorio](https://github.com/josue1414/predicamap/blob/main/src/componentes/MenuTerritorio.jsx): workflow nav · Territory-specific menu orchestration · `src/componentes/MenuTerritorio.jsx`
- [Menu publicador](https://github.com/josue1414/predicamap/blob/main/src/componentes/menu-lateral/MenuLateralPublicador.jsx): workflow nav · Sidebar variant for publisher flows · `src/componentes/menu-lateral/MenuLateralPublicador.jsx`
- [Mapa](https://github.com/josue1414/predicamap/blob/main/src/componentes/VisorMapa.jsx): map view · Primary map canvas and rendering surface · `src/componentes/VisorMapa.jsx`
- [Clicks mapa](https://github.com/josue1414/predicamap/blob/main/src/componentes/ManejadorClicksMapa.jsx): map interaction · Handles pointer interaction on the map · `src/componentes/ManejadorClicksMapa.jsx`
- [Trazado](https://github.com/josue1414/predicamap/blob/main/src/componentes/ControlesTrazado.jsx): map tools · Drawing controls for territory creation · `src/componentes/ControlesTrazado.jsx`
- [Tachuela modal](https://github.com/josue1414/predicamap/blob/main/src/componentes/ModalTachuela.jsx): editor modal · Edits pins and marker details · `src/componentes/ModalTachuela.jsx`
- [Buscar ciudad](https://github.com/josue1414/predicamap/blob/main/src/componentes/BuscadorCiudad.jsx): utility panel · City search and location lookup · `src/componentes/BuscadorCiudad.jsx`
- [Cabecera cong.](https://github.com/josue1414/predicamap/blob/main/src/componentes/CabeceraCongregacion.jsx): context header · Congregation context and identity header · `src/componentes/CabeceraCongregacion.jsx`
- [Menu edificio](https://github.com/josue1414/predicamap/blob/main/src/componentes/MenuEdificio.jsx): context menu · Building-specific actions and context · `src/componentes/MenuEdificio.jsx`
- [useMapa](https://github.com/josue1414/predicamap/blob/main/src/hooks/useMapa.js): map state hook · Central map integration layer · `src/hooks/useMapa.js`
- [Estado global](https://github.com/josue1414/predicamap/blob/main/src/hooks/modulos/useEstadoGlobal.js): state hook · Cross-cutting UI and app state · `src/hooks/modulos/useEstadoGlobal.js`
- [Controles UI](https://github.com/josue1414/predicamap/blob/main/src/hooks/modulos/useControlesUI.js): state hook · UI controls and shared interaction state · `src/hooks/modulos/useControlesUI.js`
- [Territorios](https://github.com/josue1414/predicamap/blob/main/src/hooks/modulos/useGestorTerritorios.js): domain hook · Territory data and business rules · `src/hooks/modulos/useGestorTerritorios.js`
- [Tachuelas](https://github.com/josue1414/predicamap/blob/main/src/hooks/modulos/useGestorTachuelas.js): domain hook · Pin and marker management · `src/hooks/modulos/useGestorTachuelas.js`
- [Historial](https://github.com/josue1414/predicamap/blob/main/src/hooks/modulos/useGestorHistorial.js): domain hook · Change history and audit trail · `src/hooks/modulos/useGestorHistorial.js`
- [Progreso](https://github.com/josue1414/predicamap/blob/main/src/hooks/modulos/useGestorProgreso.js): domain hook · Progress tracking and completion state · `src/hooks/modulos/useGestorProgreso.js`
- [Marcadores](https://github.com/josue1414/predicamap/blob/main/src/hooks/modulos/useMarcadoresPersonales.js): domain hook · Personal marker management · `src/hooks/modulos/useMarcadoresPersonales.js`

### Infra

External persistence and auth boundary

- [Supabase](https://github.com/josue1414/predicamap/blob/main/src/utilidades/clienteSupabase.js): backend service · Auth and persistent data store · `src/utilidades/clienteSupabase.js`

## Connections

- main → App: mounts · App bootstrap renders the root component
- App → Global CSS: loads · Global styling is applied at app start
- App → Vista router: delegates · App hands layout and screen selection to the controller
- Vista router → Login: shows · Unauthenticated state routes to login
- Vista router → Dashboard: shows · Authenticated default workspace
- Vista router → Publicador: shows · Role-based publisher workspace
- Dashboard → Menu lateral: contains · Dashboard includes the main sidebar
- Dashboard → Mapa: renders · Primary map workspace
- Publicador → Menu publicador: contains · Publisher-specific sidebar
- Publicador → Mapa: renders · Publisher workspace centers on the map
- Menu lateral → Menu territorio: orchestrates · Sidebar switches between workflow sections
- Menu lateral → Buscar ciudad: exposes · Search and lookup entry point
- Menu lateral → Cabecera cong.: shows · Shared congregation context header
- Menu lateral → Menu edificio: includes · Building context actions
- Mapa → useMapa: driven by · Map rendering and state are coordinated by the map hook
- Mapa → Clicks mapa: uses · Surface interaction is handled separately
- Mapa → Trazado: uses · Drawing tools attach to the map workspace
- Mapa → Tachuela modal: opens · Marker editing is surfaced through a modal
- useMapa → Estado global: reads · Map layer consumes shared app state
- useMapa → Controles UI: coordinates · UI control state influences map behavior
- useMapa → Territorios: reads · Territory data feeds map behavior
- useMapa → Tachuelas: reads · Pins and markers are sourced from domain state
- useMapa → Historial: records · Map actions contribute to history
- useMapa → Progreso: updates · Map activity affects progress tracking
- useMapa → Marcadores: syncs · Personal markers are integrated into the map layer
- Territorios → Supabase: persists · Territory data is stored through Supabase
- Tachuelas → Supabase: persists · Pin changes are saved to backend storage
- Historial → Supabase: persists · History entries are backed by Supabase
- Progreso → Supabase: persists · Progress state is stored remotely
- Marcadores → Supabase: persists · Personal markers are synchronized with backend data
- Estado global → Supabase: auth/state · Cross-cutting state depends on the backend client