Saltar al contenido principal

Frontend: vision general

Que cubre cutlyy-front​

cutlyy-front es la aplicacion web que pone el producto en manos de dos tipos de usuario:

  • personas clientes que reservan o gestionan su servicio
  • personas del negocio que operan el dia a dia desde el panel privado

Es una SPA en React que vive principalmente en dos superficies:

  • publico: landing, reserva, gestion del booking y reseñas
  • privado: panel administrativo bajo /admin

Rol del frontend dentro del ecosistema​

El frontend no es la fuente final de verdad del negocio. Su trabajo es:

  • presentar la informacion
  • guiar el flujo de uso
  • prevenir errores obvios
  • manejar sesion y contexto activo
  • consumir la API del backend

La regla final de negocio sigue viviendo en el backend.

Experiencias principales​

Experiencia publica​

Permite:

  • entrar al landing
  • reservar por slug del negocio
  • abrir un booking existente por bookingId
  • dejar reseñas cuando el servicio termina

Experiencia privada​

Permite:

  • iniciar sesion
  • seleccionar membresia activa
  • operar el negocio segun permisos
  • administrar agenda, bookings, usuarios, servicios, sedes y metricas

Mapa de alto nivel​

Stack principal​

CapaTecnologia
UIReact 19
ComponentesMaterial UI v7
BundlingVite 7
LenguajeTypeScript 5
Datos remotosTanStack React Query
Estado globalZustand
RoutingReact Router DOM v7
Infraestructura clienteFirebase Auth, Firestore, Storage, Messaging

Modulos funcionales visibles en el repo​

Las features principales del frontend incluyen:

  • auth
  • business
  • plans
  • business-memberships
  • bookings
  • appointments
  • services
  • branches
  • role
  • permission
  • module
  • reviews
  • metrics
  • users
  • notifications

Frontera entre frontend y backend​

TemaFrontendBackend
NavegacionDecide que pantalla mostrarNo participa
Sesion visualMantiene estado de UI y token activoValida el token
Validaciones previasPreviene requests invalidos comunesAplica validacion final
Regla de negocioExpresa contratos y ayudas de UXEs la fuente de verdad
AgendaMuestra calendario y permite accionesPersiste y protege estados
AutomatizacionesEscucha resultados y muestra feedbackPrograma tasks, notifica y recalcula

Piezas clave para comprender rapido​

  • src/app/App.tsx: arbol principal de providers
  • src/app/routes/AppRouter.tsx: mapa de rutas
  • src/config/apiClient.ts: capa HTTP compartida
  • src/shared/hooks/useCachedFetch.ts: patron base de hooks
  • src/stores/*: stores de usuario, membresia y permisos

Lecturas recomendadas​