Saltar al contenido principal

Frontend: datos e integraciones

Como viajan los datos​

El frontend consume principalmente informacion del backend REST y la combina con infraestructura de Firebase.

La secuencia normal es:

  1. la pantalla dispara una accion
  2. el hook de feature organiza la peticion
  3. el service hace la llamada HTTP
  4. apiClient agrega headers e intercepta errores
  5. React Query cachea o invalida segun el caso

apiClient​

src/config/apiClient.ts centraliza la capa HTTP.

Sus responsabilidades principales son:

  • usar VITE_BACKEND_URL
  • enviar Authorization cuando hay sesion
  • inyectar businessId cuando aplica
  • mostrar feedback global
  • reaccionar a errores 401 y 403

Contexto del negocio en requests​

Cuando existe membresia activa y la ruta esta dentro del panel del negocio:

  • el frontend agrega businessId
  • los servicios consultan o mutan informacion de ese tenant

Esto es clave porque Cutlyy es multiempresa.

Integraciones del lado cliente​

Firebase Auth​

Se usa para:

  • mantener la sesion primaria
  • obtener el token que luego valida el backend

Firestore​

Se usa para listeners en tiempo real sobre:

  • membresia activa
  • permisos del rol activo

Firebase Storage​

Se usa en flujos de carga de imagenes y archivos asociados a perfiles o negocio.

Firebase Messaging​

Se usa para push web cuando:

  • el navegador lo soporta
  • la persona otorga permisos
  • la app esta instalada como PWA
  • existe configuracion VAPID valida

Google Maps​

Se usa sobre todo para formularios y experiencia de sedes:

  • autocompletado
  • ubicacion
  • coordenadas

Variables de entorno esperadas​

VariableUso
VITE_BACKEND_URLBase URL del backend
VITE_FIREBASE_API_KEYConfiguracion cliente de Firebase
VITE_FIREBASE_AUTH_DOMAINAuth de Firebase
VITE_FIREBASE_PROJECT_IDProyecto Firebase
VITE_FIREBASE_STORAGE_BUCKETStorage
VITE_FIREBASE_MESSAGING_SENDER_IDMessaging
VITE_FIREBASE_APP_IDApp Firebase
VITE_FIREBASE_VAPID_KEYPush web
VITE_GOOGLE_MAPS_API_KEYGoogle Maps
VITE_PUSH_NOTIFICATIONS_ENABLEDFeature flag de push

Setup local minimo​

npm install
npm run dev

Validaciones recomendadas antes de cerrar cambios:

npm run typecheck
npm run lint
npm run build:check

Hosting y Firebase CLI​

El frontend tiene configuracion de Firebase Hosting en firebase.json, pero .firebaserc se mantiene local y no versionado.

La politica actual recomendada es:

  • usar aliases locales como dev y prod
  • no definir alias default
  • desplegar de forma explicita para evitar errores

Ejemplos:

firebase use dev
firebase deploy

o:

firebase deploy --project dev

Puntos de integracion sensibles​

  • auth y claims del token
  • header businessId
  • listeners de Firestore
  • registro y limpieza de suscripciones push
  • llaves de Google Maps y VAPID

Riesgos actuales​

  • si cambia el contrato del backend, muchos hooks dependen de esa compatibilidad
  • si falla la resolucion de usuario o membresia activa, la sesion puede cerrarse
  • el frontend hace validaciones utiles, pero la proteccion final sigue del lado del backend

Documentos relacionados​