Frontend
Sidebar y header como Custom Element
Implementé componentes transversales de navegación, como sidebar y header, usando custom elements dentro del módulo principal del shell de Pagmás+. Este trabajo permitió soportar una experiencia unificada entre microfrontends, facilitando la navegación, consistencia visual y escalabilidad de la plataforma.
Pagmás+ funcionaba como una plataforma central para integrar varios productos internos del banco bajo una arquitectura de microfrontends. En ese contexto, la navegación no podía depender de cada producto de forma aislada: necesitaba componentes transversales, consistentes y reutilizables.
Resumen del proyecto
Implementé el sidebar y el header del módulo principal del shell usando custom elements. Para esto, tomé como base componentes existentes del sistema de diseño SHERPA, como el navbar y el header, y los adapté para exponerlos como elementos reutilizables dentro del shell.
El trabajo se enfocó en convertir componentes ya alineados con el sistema visual del banco en piezas transversales, mantener una experiencia coherente y facilitar que los productos pudieran convivir dentro de una misma plataforma sin repetir lógica de navegación en cada microfrontend.
Mi aporte
- Implementación del sidebar del shell.
- Implementación del header principal.
- Uso de componentes de SHERPA como base para crear custom elements.
- Exposición del navbar y header como componentes transversales del shell.
- Integración dentro del módulo principal de Pagmás+.
- Apoyo a una experiencia de navegación consistente entre microfrontends.
Resultado
El shell contó con una base de navegación más unificada para los productos integrados en Pagmás+. Esto ayudó a mantener consistencia visual, reducir duplicación y preparar mejor la plataforma para seguir sumando microfrontends.
Aunque fue un proyecto puntual, tuvo impacto transversal porque el sidebar y el header eran piezas visibles y compartidas dentro de la experiencia principal de la plataforma.