A live League of Legends stats dashboard powered by the Riot Games API.
Built a responsive, full-stack analytics dashboard that transforms Riot API data into a clean player profile experience with ranked stats, match history, mastery data, caching, and bilingual support.
Rift Insight is a responsive League of Legends profile and match analytics dashboard built with Next.js, TypeScript, and the Riot Games API. The app lets users search by Riot ID and region to view live ranked data, champion mastery, recent matches, champion performance, and account insights. It includes server-side API protection, request caching to reduce Riot API usage, custom UI components, and English / Latin American Spanish language support.
The main challenge was turning several Riot API endpoints into a fast, readable dashboard while keeping the API key secure and avoiding rate limits. The app needed to combine account lookup, summoner data, ranked entries, mastery data, match history, and Data Dragon assets into one cohesive experience across desktop and mobile.
I built a Next.js and TypeScript application with server-side API routes that proxy Riot requests securely and keep the Riot API key out of the browser. I added layered caching for account, summoner, ranked, mastery, match, and asset data to reduce unnecessary API calls. On the frontend, I created a responsive dashboard with custom dropdowns, rank visuals, profile cards, match rows, champion stats, recent form indicators, and bilingual UI labels.
Select an image to view it in detail.
