Embedded Live Esports Widgets
GRID Esports
Customizable embeddable esports widgets. Powered by official live data. Supporting all major esports titles
Purpose
One of our first data products that we sold included live embedded widgets, supporting shadow dom or iframe integration to be includable on web interfaces of all kinds. But the problem was for every widget you added, multiple data instances would be loaded in and the bundle sizes were far too large. The mission of this project was to build a completely new architecture. We'd allow customers to load an SDK that would hold the data contracts based on the widgets that the user would then separately load up, allowing for leaner bundles, reusable data sources, massive performance improvements and a better look and feel.
Responsibilities
I assisted in creating many of the widgets as an frontend developer, through the introduction of comprehensive AI skills that were designed specifically to create the widgets. My personal flagship contribution was the map schematic widget, real time map positions of the players on the game map for CS2, Valorant, Mobile Legends Bang Bang, League of Legends and DOTA.
Other widgets I built included:
- Head to Head matchup widget, showcasing historic match data for an upcoming game
- Team Scoreboard (my contribution was the sorting of players from a team, and in league of legends comparative gold difference).
- Game drafts, for MOBA titles, where you see live the strategic impacts of how they select their characters for a game in a series.
- Team Net Worth, showcasing the net worth difference on a team level.
- Skill allowing new maps to be added to the map schematic widget. Tricky thing is map boundaries coming from the backend, orientation, and scale, needing live tests which a skill harness needed to support.
Alongside these widgets, I was also doing many optimization endeavors throughout the process, making design adjustments to other teammate’s contributions to better respect a game’s ruleset or broadcast behavior, and supporting the design enhancements across other widgets.