josue1414/predicamap

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.