Senior Frontend Engineer | Riot Games

Designed and developed "Site-Builder", a Multi-tenant architecture with Next.js capable of rendering multiple global gaming portals from a single codebase, deployed on Netlify.

Overview

As Senior Frontend Engineer at Riot Games, I led the design and development of "Site-Builder", a revolutionary Multi-tenant architecture built with Next.js that enables rendering multiple global gaming portals from a single codebase. This architecture was deployed on Netlify and served as the foundation for modernizing Riot Games' web presence across different regions and games.

Challenges

The project faced several critical challenges:

• Multi-tenant Architecture Complexity: Building a scalable system capable of serving multiple global gaming portals with different content, languages, and configurations from a single codebase
• Legacy System Migration: Migrating massive legacy web portals from outdated Gatsby versions (v1/v2) to modern Gatsby v5 without service interruptions
• Technical Debt Elimination: Standardizing dependencies and removing accumulated technical debt across multiple portal implementations
• CMS Decoupling: Implementing a solution to decouple the Frontend from the CMS to enable seamless migrations and future flexibility
• SEO Optimization at Scale: Ensuring proper SEO indexing for multiple global portals with localized sitemaps
• Development Velocity: Accelerating the creation of new marketing pages while maintaining consistency and quality

Solution

I implemented a comprehensive solution addressing all these challenges:

Multi-tenant Site-Builder Architecture: Designed and developed a Next.js-based Multi-tenant architecture that can render multiple global gaming portals from a single codebase. This architecture enables code reuse, consistent user experiences, and simplified maintenance while supporting different regional configurations and content.

Legacy Portal Migration: Led the massive migration of legacy web portals from Gatsby v1/v2 to Gatsby v5, eliminating technical debt and standardizing dependencies. This migration enabled the transition to a Server-Side Rendering (SSR) architecture, improving performance and SEO capabilities.

Adapter Pattern Implementation: Implemented the Adapter Pattern to decouple the Frontend from the CMS layer. This architectural decision enabled a successful migration from Contentstack to Sanity without any service interruptions, demonstrating the flexibility and maintainability of the system design.

CI/CD & Cloud Engineering: Created Jenkins pipelines for asynchronous generation of localized Sitemaps, integrating AWS S3 and implementing rate-limit handling logic to ensure proper global SEO indexing. This automated solution reduced manual work and ensured consistent SEO performance across all portals.

Modular UI Component Library: Developed a reusable modular UI component library called "Blades", optimizing the speed of creating new marketing pages. This library standardized design patterns, reduced development time, and ensured consistency across all portals.

Results

The project achieved significant success:

• Multi-tenant Architecture Success: Successfully deployed Site-Builder architecture capable of serving multiple global gaming portals from a single codebase, reducing code duplication and maintenance overhead
• Zero-Downtime Legacy Migration: Completed massive migration of legacy portals from Gatsby v1/v2 to v5 without service interruptions, eliminating technical debt and standardizing dependencies
• Seamless CMS Migration: Successfully migrated from Contentstack to Sanity using the Adapter Pattern, demonstrating system flexibility and architectural excellence
• Automated SEO Infrastructure: Implemented automated CI/CD pipelines for localized sitemap generation with AWS S3 integration, ensuring proper global SEO indexing
• Accelerated Development: Created reusable "Blades" component library, significantly optimizing the speed of creating new marketing pages
• SSR Architecture Enablement: Standardized dependencies and modernized architecture enabled transition to Server-Side Rendering, improving performance and SEO capabilities