Volver a proyectos
-

Maintain

Siltium | Empleo | Finalizado

Descripción

Maintain es un sistema web multiinquilino orientado a la gestión de mejoras en propiedades inmobiliarias, que centraliza el relevamiento de obras y facilita la toma de decisiones mediante el registro de intervenciones, asignación de responsables y seguimiento en tiempo real del estado de cada mejora. Ofrece funcionalidades como autenticación y control de accesos, gestión de usuarios, clientes y propiedades, notificaciones en tiempo real, configuración de preferencias y visualización de métricas.

Rol

Me desempeñé como desarrollador frontend en un equipo ágil, colaborando estrechamente con analistas, diseñadores, desarrolladores backend y otros desarrolladores frontend. Participé activamente en la implementación de la interfaz de usuario y la integración de funcionalidades. Además, cumplí el rol de referente en la arquitectura de estilos del proyecto, definiendo convenciones de nomenclatura, organización de archivos y lineamientos generales para su implementación.

Responsabilidades

  • Implementación de páginas públicas y privadas.
  • Desarrollo de componentes reutilizables.
  • Diseño y mantenimiento de la arquitectura de estilos del proyecto.
  • Adaptación de estilos y componentes visuales conforme a lineamientos de diseño.
  • Asesoramiento en convenciones de estilos, estructura de carpetas y buenas prácticas de nomenclatura.
  • Construcción de formularios para la gestión de datos.
  • Manejo del Context API en el entorno de React.
  • Creación de hooks personalizados para la reutilización de lógica.
  • Desarrollo de servicios para el consumo de API RESTful.
  • Adaptación de modelos para el manejo de respuestas HTTP.
  • Implementación de middlewares para la protección de rutas y el control de accesos.
  • Gestión del estado global de la aplicación.
  • Integración de librerías de terceros.

Logros

  • Contribuí en el desarrollo de una aplicación de página única con mejoras progresivas (PESPA) en Next.js 14, empleando estrategias SSR y CSR para optimizar la experiencia del usuario y el uso de recursos, logrando cumplir con los objetivos del proyecto.
  • Establecí un estándar para la arquitectura y metodología de estilos basada en 7-1 Pattern y SUIT CSS, lo que mejoró el mantenimiento, la organización y la legibilidad del código.

Implementación técnica

El sistema se construyó bajo una arquitectura desacoplada de tipo cliente-servidor, en la que el frontend opera como una aplicación de página única con mejoras progresivas (PESPA), desarrollada con Next.js 14 App Router. La aplicación combina páginas renderizadas del lado del servidor (SSR) y del lado del cliente (CSR), permitiendo una experiencia fluida y enriquecida para el usuario, sin sacrificar la estructura modular y mantenible de una aplicación multipágina. El backend fue implementado mediante una API RESTful desarrollada por el equipo interno.

Desde el rol de desarrollador frontend, se adoptaron prácticas inspiradas en la programación funcional para el desarrollo de componentes y la organización de la lógica de interfaz, utilizando React 18 y TypeScript tanto en la construcción de la interfaz de usuario como en la integración de funcionalidades. Las páginas se organizaron por secciones utilizando el sistema de rutas paralelas ofrecido por Next.js 14 App Router, lo que permitió una estructura clara, escalable y adaptable a los distintos contextos del sistema. Los estilos fueron implementados mediante Sass, aplicando la arquitectura 7-1 Pattern junto con la metodología SUIT CSS. Como base de componentes visuales se utilizó PrimeReact, complementado con utilidades CSS de PrimeFlex.

Durante el desarrollo se aplicó el patrón de diseño State, mediante Redux, para gestionar el estado global de la aplicación.

También, se aplicaron patrones de diseño propios del ecosistema de React, tales como:

  • Extensible Styles, para la personalización de estilos y componentes visuales.
  • Render Props, para la reutilización de lógica y la creación de componentes con funcionalidades extendidas.
  • Custom Hooks, para encapsular lógica reutilizable y mejorar la legibilidad del código.
  • High Order Components, para extender la funcionalidad de componentes y encapsular lógica común, como el control de acceso a páginas protegidas.
  • Compound Component, para construir interfaces compuestas por partes reutilizables que comparten un mismo contexto y se coordinan entre sí.

Contexto profesional

Este proyecto fue desarrollado en el marco de una relación laboral con Siltium (2022–2024), quien autoriza su inclusión en portafolios profesionales conforme al acuerdo de beneficios post-empleo. Sin embargo, y dado que se encuentra sujeto a cláusulas de confidencialidad, no es accesible al público ni se dispone de demostraciones privadas.

Tecnologías

Next.js Next.js React React TypeScript TypeScript HTML5 HTML5 SASS SASS PrimeReact PrimeReact Auth.js Auth.js Formik Formik Yup Yup Recharts Recharts Redux Redux ESLint ESLint Prettier Prettier npm npm Google Maps Platform Google Maps Platform