VCM
Una aplicación web basada en roles que reúne todo lo que necesita una comunidad residencial en una sola interfaz: propietarios, residentes, finanzas, reservas, solicitudes e informes.
React 19
React Router 7
Vite
TypeScript
SCSS
Jotai
SWR
Firebase Cloud Messaging
Descripción general
VCM es el front-end de una plataforma de gestión de propiedades y comunidades que atiende a dos públicos muy diferentes desde la misma base de código. Los administradores lo utilizan para gestionar las operaciones: propiedades, residentes, finanzas, incidencias, informes y comunicación. Los propietarios y residentes lo usan para gestionar sus propios asuntos, incluidos pagos, solicitudes de servicio, reservas de instalaciones, documentos e información comunitaria. El producto reúne un conjunto de flujos de trabajo manuales y dispersos en un único lugar coherente.
El problema
Gestionar una comunidad residencial implica coordinar muchas partes móviles al mismo tiempo: registros de residentes y propietarios, solicitudes de mantenimiento y servicio, reservas de instalaciones, quejas, historiales de pago, estados de cuenta, informes de inspección e incidencias, y avisos. Cuando todo esto vive disperso en hojas de cálculo, cadenas de correos electrónicos y herramientas desconectadas, surgen descuidos. El desafío consistía en crear una única interfaz que diera servicio tanto a un equipo de operaciones como a los residentes a los que atienden —dos experiencias realmente distintas— manteniendo el producto rápido, coherente y fácil de mantener a medida que se incorporan más flujos de trabajo.
Mi rol y enfoque
Lideré el desarrollo del front-end: la arquitectura de la aplicación, la capa de datos compartida, los patrones de UI reutilizables y la estructura basada en roles que articula todo el sistema. Como principal colaborador en la base de código, establecí las convenciones que siguió el resto del trabajo. Mi prioridad fue evitar el error habitual en este tipo de aplicaciones: reconstruir la misma lógica de tablas, filtros y formularios para cada nueva entidad. En su lugar, creé un conjunto reducido de primitivas sólidas y una estructura base con control de permisos, de modo que añadir un nuevo flujo de trabajo se convirtió en una cuestión de composición y no de reinvención.
Stack tecnológico
Características clave
Galería
Desafíos y soluciones
El reto principal fue la amplitud del alcance: decenas de tipos de entidades, cada una requiriendo listar, filtrar, crear, editar y exportar, para dos roles de usuario. Reescribir eso para cada funcionalidad habría dado lugar a una aplicación inmantenible. Lo resolví mediante primitivas reutilizables y un modelo de navegación configurable guiado por permisos, de modo que la interfaz se adapta a lo que otorga el backend sin menús fijos en el código ni duplicación de lógica.
La otra necesidad recurrente era un estado capaz de afrontar escenarios reales de uso. Gestioné la paginación y el filtrado de listas mediante los parámetros de la URL, lo que permite compartir vistas, mantiene el funcionamiento natural de avance y retroceso del navegador y preserva el estado de las tablas tras recargar. Centralicé la autenticación en el estado compartido y en la capa de solicitudes para que los componentes de funcionalidad sigan siendo ligeros, e integré un límite de errores (error boundary), estados de carga y una redirección limpia al expirar la sesión, evitando que un panel complejo falle en silencio.
Resultado
VCM es un front-end único que atiende de manera efectiva a ambas partes de la gestión comunitaria. Los equipos de operaciones administran todo el ciclo de vida de las propiedades desde un espacio de trabajo de administración, y los residentes gestionan por sí mismos pagos, solicitudes, reservas y documentos. Al estar desarrollado sobre primitivas compartidas y una estructura con control de permisos, la base de código sigue escalando a medida que se añaden nuevos flujos de trabajo en lugar de volverse más pesada con cada uno.
¿Tienes un problema de producto similar?
Comparte el producto actual, el resultado que necesitas y las limitaciones que ya existen en el camino. Usaré eso para definir un primer hito razonable.
servicios de desarrollo SaaS