Saltar al contenido principal

Frontend: arquitectura tecnica

Resumen​

El frontend es una SPA en React organizada por features. Combina:

  • React Router para navegacion
  • React Query para datos remotos
  • Zustand para estado transversal
  • Firebase para sesion e integraciones cliente
  • Material UI para el sistema de componentes

Stack confirmado​

AreaTecnologia
Framework UIReact 19
LenguajeTypeScript 5
BuildVite 7
RoutingReact Router DOM 7
UI kitMaterial UI 7
Fetch y cacheAxios + TanStack React Query
Estado globalZustand
PWAvite-plugin-pwa + Workbox

Bootstrap de la app​

La entrada parte en src/main.tsx y termina montando App.

El arbol de providers documentado hoy es:

  1. QueryClientProvider
  2. ThemeProvider
  3. ThemePaletteVars
  4. LocalizationProvider
  5. CssBaseline
  6. AuthProvider
  7. GlobalSnackbarProvider
  8. AppRouter

Organizacion del codigo​

src/
  app/
  config/
  features/
  shared/
  stores/

Significado practico​

  • app/: entrada, rutas y tema global
  • config/: clientes, env y configuracion base
  • features/: dominios funcionales
  • shared/: utilidades y componentes reutilizables
  • stores/: estado transversal

Patron de capas​

La ruta esperada del dato es:

page/component -> hook -> service -> apiClient -> backend

Que va en cada capa​

CapaResponsabilidad
Page o componentUI, interaccion y composicion
HookCoordinacion asincrona y transformacion ligera
ServiceHTTP o integracion externa
apiClientConfiguracion de headers, interceptores y errores

Estado global​

Los stores principales son:

StoreUso
useUserStoreUsuario autenticado
useBusinessMembershipStoreMembresia activa y contexto del negocio
useRoleStoreCache de permisos por rol

Datos remotos​

La base de los hooks de datos es useCachedFetch.

Ese patron estandariza:

  • lecturas cacheadas
  • invalidacion
  • refetch manual
  • cambio de parametros
  • reset de estado

Encima de eso viven hooks como:

  • useBookings
  • useAppointments
  • useBusiness
  • useServices
  • useMetrics

Autenticacion y permisos​

Autenticacion​

  • Firebase Auth mantiene la sesion del navegador
  • AuthProvider escucha cambios de autenticacion
  • el token se usa para identificar el usuario ante el backend

Permisos​

  • la membresia activa aporta roleId
  • el frontend consulta y cachea permisos del rol
  • guards y helpers resuelven si una accion esta permitida

Tiempo real​

El frontend usa listeners de Firestore para reaccionar a:

  • cambios en la membresia activa
  • cambios en permisos del rol activo

Con eso la UI puede corregirse sin depender de recarga manual.

PWA y notificaciones​

El repo incluye soporte para:

  • service worker
  • cache de assets
  • navegacion SPA
  • eventos push
  • click en notificaciones

Las push web se habilitan solo cuando se cumplen condiciones de soporte, permisos y configuracion.

Integraciones cliente importantes​

  • Firebase Auth
  • Firestore
  • Firebase Storage
  • Firebase Messaging
  • Google Maps

Limitaciones actuales​

  • no hay suite de tests automatizados configurada
  • mucha integridad del dominio depende del backend
  • la documentacion debe actualizarse cuando cambian rutas, permisos o flujos criticos

Documentos relacionados​