Full-stack product · League of Legends analytics

SinManos

Public beta / 2026

A focused League of Legends companion for LAN players—designed to make tier lists, champion guidance, and match history fast to scan without inheriting the visual language of larger analytics sites.

Role
Product design + full-stack engineering
Stack
React · TypeScript · Cloudflare Workers
Data
Riot API · Data Dragon · LAN
SinManos landing page with Solo Q, Tier List, and ARAM destinations
SinManos · Three focused paths into the product

The brief

Turn a familiar stats product into a distinct LAN experience.

The challenge was not simply to reproduce a large analytics site. It was to understand the useful structure behind one and rebuild it as a smaller, original product with a clear audience.

SinManos combines champion discovery, build guidance, and player lookup in one public interface. The visual system deliberately uses brush textures, asymmetrical masks, and strong typographic contrast to make dense game data feel energetic without becoming difficult to navigate.

Product experience

From league-wide patterns to one champion or one player.

SinManos ranked tier list with role leaders and filters
Ranked overview · Role leaders, filters, and tier-list context
SinManos champion guide for Ekko with build and rune guidance
Champion guide · Build, runes, counters, and skill progression
SinManos LAN Riot ID player search experience
Player lookup · A LAN-focused Riot ID workflow

Architecture

Public game assets and protected live requests.

The React client is deployed as a fast static application. A Cloudflare Worker owns Riot API access, validates requests, and keeps the development or production key outside the browser. Data Dragon provides champion, item, spell, rune, and splash-art assets.

01

LAN-first scope

The product stays focused on the Latin America North server and prioritizes the workflows that matter most: Solo/Duo, ARAM, champions, and Riot ID lookup.

02

Server-side Riot access

Riot credentials stay inside a Cloudflare Worker. The browser receives only the response it needs and never handles the API key directly.

03

Static and live data separated

Data Dragon supplies stable game assets while live player requests use Riot endpoints, reducing unnecessary API calls and keeping the interface responsive.

04

A recognizable visual language

Dry-brush masks, sharp silhouettes, oversized typography, and a restrained cyan, red, and yellow palette give the product an identity of its own.

Current scope

A small product with an honest data boundary.

Player lookup and match-history flows are built around Riot data. Champion-analysis surfaces can be presented as curated product views while broader aggregation access is being finalized. The interface makes that boundary explicit instead of presenting sample analytics as live facts.

Next projectExplore Relay →