feb 2024 - jul 2024

Zelmira Learning

Siltium | Empleo | Finalizado

Descripción

Zelmira Learning es un sistema educativo multiinquilino compuesto por una plataforma para alumnos y un panel administrativo para docentes y administradores. Está orientado a instituciones educativas que buscan una solución que contemple diferentes perfiles de usuario, incluyendo opciones de accesibilidad para personas con discapacidad.

Entre sus funcionalidades principales se incluyen:

Autenticación y control de accesos.
Visualización de materias y clases, y resolución de actividades.
Gestión de notificaciones en tiempo real.
Foro con gestión de consultas y comentarios por clase.
Chat en tiempo real para comunicación entre estudiantes, docentes y administradores.
Configuración del perfil y opciones de seguridad (como cambio o restablecimiento de contraseña).
Gestión de contenidos tanto propios de Zelmira como específicos de cada inquilino.
Gestión de materias, clases, cursos, estudiantes, docentes, usuarios e inquilinos.
Panel administrativo con reportes sobre el desempeño académico de los alumnos.
Dashboard con métricas relacionadas con clases y materias.

Rol

Me desempeñé como desarrollador frontend tanto en la plataforma para alumnos como en el panel administrativo, trabajando en conjunto con diseñadores, analistas, desarrolladores backend y otros desarrolladores frontend. Mi enfoque principal fue la construcción de una interfaz intuitiva y la integración de funcionalidades. Además, cumplí los roles de referente en maquetación y asesor del equipo en cuanto a la arquitectura y metodología utilizada en los estilos, así como en la implementación de páginas con estrategias SSR, ISR y CSR.

Responsabilidades

Implementación y adaptación de los estándares definidos en la plantilla base Uther Template.
Implementación de páginas públicas y privadas.
Desarrollo de componentes reutilizables.
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 server actions para la comunicación con API RESTful.
Adaptación de modelos para el manejo de respuestas HTTP.
Gestión del estado global de la aplicación.
Manejo de cookies para la persistencia de información.
Integración de librerías de terceros.

Logros

Contribuí en el desarrollo de aplicaciones de página única con mejoras progresivas (PESPA) en Next.js 14, implementando estrategias SSR, ISR y CSR para optimizar la experiencia del usuario y el uso de recursos, logrando cumplir con los objetivos del proyecto.
Modifiqué la estructura de directorios y convenciones definidas en el proyecto Uther Template, lo que ayudo a potenciar el generador de páginas para operaciones CRUD básicas.
Desarrollé nuevos componentes de interfaz, que gracias al éxito del proyecto fueron aprobados para ser incluidos en el proyecto base Uther Template.

Implementación técnica

Tanto la plataforma como el panel administrativo están construidos bajo una arquitectura desacoplada de tipo cliente-servidor. El frontend de ambos se desarrolla como una aplicación de página única con mejoras progresivas (PESPA) mediante Next.js 14 App Router, combinando páginas renderizadas del lado del servidor (SSR) y del cliente (CSR), así como páginas regeneradas de forma incremental (ISR), según las necesidades, lo que permite optimizar la carga inicial, la interacción del usuario y el uso de recursos. La comunicación con el backend se realiza a través de una API RESTful desarrollada por el equipo interno.

La interfaz se implementó con React 18 y TypeScript, organizando algunas páginas por secciones mediante rutas paralelas. Los estilos se realizaron con Sass bajo la arquitectura 7-1 Pattern y la metodología SUIT CSS, asegurando consistencia y mantenibilidad en toda la interfaz.

Ambas aplicaciones adoptaron los lineamientos técnicos planteados en el proyecto Uther Template, excluyendo:

Soporte multilenguaje.
Implementación de modales mediante rutas paralelas y de interceptación.
Automatización de operaciones CRUD básicas mediante el generador de páginas.

Adicionalmente, todos los métodos personalizados de consulta a la API se implementaron mediante server actions, siguiendo los lineamientos definidos en Uther Template.

Finalmente, se implementó comunicación en tiempo real utilizando WebSocket de forma nativa, para funcionalidades como el chat y las notificaciones.

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

Proyectos relacionados

Uther Template

Plantilla base para el desarrollo de sitios y aplicaciones web, con soporte especial para sistemas internos de administración. Incorpora organización lógica de carpetas y archivos, estandarización de procesos, automatización de operaciones CRUD, autenticación, control de accesos, gestión de estado de la aplicación y componentes clave de interfaz.