Volver a proyectos
-

Uther Template

Siltium | Empleo | Finalizado

Descripción

Uther Template es una plantilla base dedicada al desarrollo de sitios y aplicaciones web, con soporte especial para sistemas internos de administración. Su objetivo principal es establecer y consolidar un conjunto de estándares que agilicen y unifiquen el desarrollo de proyectos dentro del equipo de Siltium. Dicha plantilla incluye:

  • Estructura de directorios y convenciones de nombres.
  • Estandarización de estilos.
  • Automatización de operaciones CRUD.
  • Autenticación y control de accesos.
  • Gestión de estado de la aplicación.
  • Estandarización de componentes.
  • Internacionalización.
  • Librerías principales.
  • Documentación y guías de uso.

Rol

Me desempeñé como desarrollador frontend trabajando en colaboración con desarrolladores backend y otros desarrolladores frontend. Mi enfoque principal fue la construcción de estándares de desarrollo para garantizar una base sólida, escalable y reutilizable en futuros proyectos.

Responsabilidades

  • Definición de la estructura de directorios y convenciones de nombres para recursos.
  • Estandarización de estilos mediante el uso de arquitecturas y metodologías.
  • Desarrollo de componentes reutilizables.
  • Automatización de operaciones CRUD.
  • Implementación de mecanismos de autenticación y control de accesos.
  • Implementación de server actions para la comunicación con API RESTful.
  • Manejo de librerías de gráficos, animaciones, formularios y validaciones.
  • Gestión del estado de la aplicación.
  • Documentación de componentes clave y guías de uso para el equipo.
  • Colaboración con otros desarrolladores para definir patrones de desarrollo comunes.
  • Mantenimiento de la coherencia visual y funcional en toda la interfaz.
  • Implementación de páginas modelo para demostrar el uso integrado de componentes clave.
  • Actualización de librerías y framework.

Logros

  • Contribuí en el desarrollo de estándares para proyectos futuros, lo que agilizó el arranque, facilito el desarrollo y optimizo el tiempo en los nuevos proyectos.
  • Mejoré la arquitectura de estilos 7-1 Pattern y metodología SUIT CSS definidas en el proyecto Maintain, lo que permitió obtener todos los beneficios relacionados que se presentaron en ese proyecto.
  • Desarrollé un generador de páginas dedicadas a operaciones CRUD básicas mediante Plop, lo que optimizó el tiempo de desarrollo en proyectos futuros.
  • Extendí las funcionalidades de los componentes de formulario de PrimeReact para el uso de la librería Formik mediante el uso de los patrones de diseño Render Props y High Order Component, lo que facilitó la implementación de estos en todos los proyectos.

Implementación técnica

La plantilla se construyó en Next.js tomando como base principal los proyectos La Gaceta Scuore y Maintain. Está pensada para sistemas que emplean la estrategia de renderizado del lado del servidor (SSR), aunque es fácilmente adaptable a otros enfoques como CSR, ISR, SSG o combinaciones entre ellos.

Los componentes de la interfaz de usuario fueron desarrollados con React y TypeScript. Se estandarizaron los métodos necesarios para operaciones CRUD, autenticación, gestión de sesiones y recuperación de contraseñas mediante el uso de server actions. Los estilos se definieron bajo la arquitectura 7-1 Pattern y la metodología SUIT CSS, utilizando Sass.

Adicionalmente, se implementó un generador de páginas utilizando Plop para estandarizar la creación de operaciones CRUD básicas. Se definió un enfoque uniforme para la implementación de modales, aprovechando el sistema de rutas paralelas y de interceptación de Next.js. La plantilla también ofrece soporte multilenguaje.

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

Asimismo, se incorporaron patrones de diseño del ecosistema de React, entre ellos:

  • 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 Zod Zod Yup Yup Recharts Recharts Zustand Zustand Motion Motion next-intl next-intl JavaScript JavaScript Plop Plop ESLint ESLint Prettier Prettier npm npm

Proyectos relacionados

Maintain

Sistema web multiinquilino desarrollado para la gestión de mejoras en propiedades inmobiliarias. Integra autenticación, control de accesos, gestión de estado de la aplicación, operaciones CRUD, visualización de métricas mediante gráficos, notificaciones y un tablero Kanban para el seguimiento de tareas.

La Gaceta Scuore

Sistema web con soporte multiinquilino desarrollado para medios de comunicación. Incorpora autenticación, control de accesos, gestión de estado de la aplicación, integración con servicios de terceros y visualización de métricas a través de gráficos.