Senior Frontend Engineer | Riot Games

Diseñé y desarrollé "Site-Builder", una arquitectura Multi-tenant con Next.js capaz de renderizar múltiples portales globales de videojuegos desde una única base de código, desplegada en Netlify.

Resumen

Como Senior Frontend Engineer en Riot Games, lideré el diseño y desarrollo de "Site-Builder", una arquitectura Multi-tenant revolucionaria construida con Next.js que permite renderizar múltiples portales globales de videojuegos desde una única base de código. Esta arquitectura fue desplegada en Netlify y sirvió como base para modernizar la presencia web de Riot Games en diferentes regiones y juegos.

Desafíos

El proyecto enfrentó varios desafíos críticos:

• Complejidad de Arquitectura Multi-tenant: Construir un sistema escalable capaz de servir múltiples portales globales de videojuegos con diferentes contenidos, idiomas y configuraciones desde una única base de código
• Migración de Sistemas Legacy: Migrar portales web legacy masivos desde versiones obsoletas de Gatsby (v1/v2) a Gatsby v5 moderno sin interrupciones en el servicio
• Eliminación de Deuda Técnica: Estandarizar dependencias y eliminar deuda técnica acumulada en múltiples implementaciones de portales
• Desacoplamiento del CMS: Implementar una solución para desacoplar el Frontend del CMS para permitir migraciones sin problemas y flexibilidad futura
• Optimización SEO a Escala: Asegurar la indexación SEO adecuada para múltiples portales globales con sitemaps localizados
• Velocidad de Desarrollo: Acelerar la creación de nuevas páginas de marketing mientras se mantiene la consistencia y calidad

Solución

Implementé una solución integral que abordó todos estos desafíos:

Arquitectura Multi-tenant Site-Builder: Diseñé y desarrollé una arquitectura Multi-tenant basada en Next.js que puede renderizar múltiples portales globales de videojuegos desde una única base de código. Esta arquitectura permite la reutilización de código, experiencias de usuario consistentes y mantenimiento simplificado mientras soporta diferentes configuraciones y contenidos regionales.

Migración de Portales Legacy: Lideré la migración masiva de portales web legacy de Gatsby v1/v2 a Gatsby v5, eliminando deuda técnica y estandarizando dependencias. Esta migración habilitó la transición a una arquitectura Server-Side Rendering (SSR), mejorando el rendimiento y las capacidades SEO.

Implementación del Patrón Adaptador: Implementé el Patrón Adaptador para desacoplar el Frontend de la capa del CMS. Esta decisión arquitectónica permitió una migración exitosa de Contentstack a Sanity sin interrupciones en el servicio, demostrando la flexibilidad y mantenibilidad del diseño del sistema.

Ingeniería CI/CD y Cloud: Creé pipelines en Jenkins para la generación asíncrona de Sitemaps localizados, integrando AWS S3 e implementando lógica de manejo de rate-limits para asegurar la indexación SEO global adecuada. Esta solución automatizada redujo el trabajo manual y aseguró un rendimiento SEO consistente en todos los portales.

Librería de Componentes UI Modulares: Desarrollé una librería de componentes UI modulares reutilizables llamada "Blades", optimizando la velocidad de creación de nuevas páginas de marketing. Esta librería estandarizó patrones de diseño, redujo el tiempo de desarrollo y aseguró consistencia en todos los portales.

Resultados

El proyecto logró un éxito significativo:

• Éxito de Arquitectura Multi-tenant: Desplegué exitosamente la arquitectura Site-Builder capaz de servir múltiples portales globales de videojuegos desde una única base de código, reduciendo la duplicación de código y la sobrecarga de mantenimiento
• Migración Legacy sin Tiempo de Inactividad: Completé la migración masiva de portales legacy de Gatsby v1/v2 a v5 sin interrupciones en el servicio, eliminando deuda técnica y estandarizando dependencias
• Migración de CMS sin Problemas: Migré exitosamente de Contentstack a Sanity usando el Patrón Adaptador, demostrando flexibilidad del sistema y excelencia arquitectónica
• Infraestructura SEO Automatizada: Implementé pipelines de CI/CD automatizados para generación de sitemaps localizados con integración de AWS S3, asegurando la indexación SEO global adecuada
• Desarrollo Acelerado: Creé la librería de componentes "Blades" reutilizables, optimizando significativamente la velocidad de creación de nuevas páginas de marketing
• Habilitación de Arquitectura SSR: La estandarización de dependencias y modernización de arquitectura permitió la transición a Server-Side Rendering, mejorando el rendimiento y las capacidades SEO