Volver a proyectos
-

La Gaceta Scuore

Siltium | Empleo | Finalizado

Descripción

La Gaceta Scuore es un sistema web multiinquilino desarrollado para medios de comunicación, orientado a potenciar el trabajo diario de redactores y periodistas. Ofrece funcionalidades como autenticación y control de accesos, exploración de notas y entidades a través de listados con filtros personalizados, análisis de contenido con recomendaciones automáticas, visualización de indicadores mediante widgets interactivos, gestión de usuarios y clientes, y configuración integral de cuentas.

Rol

Me desempeñé como desarrollador frontend en un equipo ágil, colaborando estrechamente con analistas, diseñadores, desarrolladores backend y otros desarrolladores frontend. Mi enfoque principal fue la construcción de la interfaz de usuario y la integración de funcionalidades, garantizando una estructura sólida y una conexión eficiente con los servicios de backend.

Responsabilidades

  • Implementación de páginas públicas y privadas.
  • Desarrollo de la estructura y contenido para las páginas.
  • Desarrollo de componentes reutilizables.
  • Adaptación de estilos y componentes visuales conforme a lineamientos de diseño.
  • 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 SPA empleando CSR en Next.js 13 App Router, lo que ayudo a cumplir con los objetivos, incorporar una alta interactividad y reducir la carga en el servidor.
  • Desarrollé la estructura layout de la aplicación mediante el sistema de rutas paralelas proporcionado por Next.js 13 App Router, lo que facilitó la creación e integración de componentes asi como el consumo de las APIs.
  • Estandaricé la estructura de directorios, lo que mejoró la organización del código y facilitó su mantenimiento.

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 (SPA) desarrollada con Next.js 13 App Router utilizando renderizado del lado del cliente (CSR), y el backend fue implementado mediante dos API RESTful: una propia, desarrollada por el equipo de backend para la gestión de clientes, usuarios, widgets, autenticación y control de accesos; y otra de terceros, desarrollada por una entidad externa para la visualización de notas, entidades e indicadores.

Desde el rol de desarrollador frontend, se emplearon principios de programación funcional junto con React 18 y TypeScript, tanto para la construcción de la interfaz de usuario como para la incorporación de funcionalidades. Las páginas se organizaron por secciones utilizando el sistema de rutas paralelas ofrecido por Next.js 13 App Router, lo que permitió una estructura modular y escalable. Los estilos fueron implementados de manera modular mediante CSS Modules y Sass, utilizando PrimeReact como libreria de componentes principal.

Durante el desarrollo se implementaron diversos patrones de diseño, entre ellos:

  • State, mediante Redux para gestionar el estado global de la aplicación.
  • Adapter, mediante funciones para adaptar las respuestas de la API de terceros a las necesidades del sistema.
  • Decorator, mediante la librería reflect-metadata aplicado sobre propiedades de clases para añadir metadatos y definir comportamientos de forma declarativa.

También, se implementaron 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.

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 Formik Formik Yup Yup Recharts Recharts Redux Redux SVG SVG ESLint ESLint Prettier Prettier npm npm