Technologies
Designed and developed "Site-Builder", a Multi-tenant architecture that powers Riot's biggest game portals.
Overview
As Senior Frontend Engineer at Riot Games, I worked on "Site-Builder". The idea was simple: instead of building a separate website for every game (VALORANT, League of Legends, etc.), we built one platform that could run them all. It modernized how Riot presents itself to the world.
Challenges
- Build Times: The old Gatsby sites were taking hours to build. Hours. For a simple content change.
- Spaghetti Code: Different teams had built different portals, leading to duplicated logic and technical debt everywhere.
- Migration: We had to move massive legacy sites to the new system without breaking them or taking them offline.
- SEO Scale: Managing SEO for global sites with dozens of languages is tricky.
Solution
One Codebase to Rule Them All: I developed a multi-tenant architecture using Next.js. It allows us to reuse components and logic while still letting each game portal look unique.
The "Blades" Library: We built a shared UI component library called "Blades". It sped up development because we weren't reinventing the button for every new page.
CMS Flexibility: I implemented an Adapter Pattern to separate the frontend from the CMS. This paid off huge when we migrated from Contentstack to Sanity—we didn't have to rewrite the frontend.
Automated SEO: I set up Jenkins pipelines to generate localized sitemaps automatically. It runs asynchronously, so it doesn't slow down the main build.
Results
- Fast Builds: We went from multi-hour builds to under a minute. That's a game-changer for content teams.
- Smooth Migration: We moved the legacy portals to the new system with zero downtime.
- Better SEO: The automated pipelines ensured we were being indexed correctly globally.
- Dev Velocity: With the shared component library, creating a new marketing page became a drag-and-drop task rather than a week of coding.
