Summoner Spy

SummonerSpy is a project where you can check your rank, statistics and detailed match history page for League of Legends. Built with Angular, Tailwind, DaisyUI, Express and Firebase.

Source Code
Summoner Spy

Technologies

AngularTailwindDaisy UIExpressFirebase

Summoner Spy – League of Legends Statistics, Rankings & Match History Platform

Summoner Spy is a full-stack League of Legends statistics and match analysis platform built as my final bachelor’s degree project. The application allows players to check their rank, view detailed statistics, and explore in-depth match history using data retrieved from Riot Games’ official API.

The project is split into two independent repositories — a frontend and a backend — reflecting a real-world production architecture with a clear separation of concerns and scalable system design.

Why I Built Summoner Spy

As a League of Legends player, I was interested in going beyond basic in-game statistics and understanding performance trends across matches, queues, and servers. Many existing tools felt cluttered, slow, or difficult to navigate, especially when analyzing match history in detail.

For my bachelor’s thesis project, I wanted to:

  • Build a real-world application using the Riot Games API
  • Work with large-scale, rate-limited third-party APIs
  • Design a clean frontend–backend architecture
  • Demonstrate full-stack development skills in an academic context
  • Deliver a complete, documented, production-style system

Summoner Spy allowed me to combine personal interest in gaming with academic requirements and practical software engineering challenges.

What the Project Does

Summoner Spy enables users to search for League of Legends summoners by server and summoner name and retrieve structured gameplay data through Riot’s API.

The platform provides:

  • Summoner search by region and username
  • Ranked information by queue type
  • Player statistics and performance metrics
  • Detailed match history with per-match breakdowns
  • Free champion rotation data
  • Server-based leaderboards for different queue types

The backend processes and normalizes raw API data so the frontend can present complex information in a clear, user-friendly way.

Frontend Application – Angular League of Legends Stats UI

The frontend is a standalone Angular application designed to visualize League of Legends data efficiently and intuitively.

Frontend Tech Stack

  • Angular
  • Tailwind CSS
  • DaisyUI

The interface is fully responsive and component-driven, focusing on readability, fast navigation, and clear data hierarchy. Users can seamlessly switch between rank overviews, statistics pages, and match history views.

Frontend responsibilities include:

  • Communicating with backend REST endpoints
  • Displaying ranked data, statistics, and match history
  • Handling server and summoner selection
  • Presenting complex datasets in a clean UI

Backend Application – Riot Games API Integration & Data Processing

The backend acts as a middleware layer between the Riot Games API and the frontend application. Its main responsibility is to fetch, process, and persist League of Legends data.

Backend Responsibilities

  • Making authenticated requests to Riot Games’ API
  • Handling rate limits and API response normalization
  • Aggregating and transforming raw game data
  • Storing and retrieving data from Firebase
  • Exposing clean, frontend-ready API endpoints

Key API Endpoints

The backend includes endpoints for:

  • Free champion rotation
  • Summoner information by server and summoner name
  • Ranked data by queue type
  • Server-based leaderboards
  • Match history and match detail data

Firebase is used to persist selected data, improving performance and reducing unnecessary external API calls.

Project Status & Ongoing Development

Since the completion of this project, Riot Games has significantly changed and deprecated multiple API endpoints, which means parts of Summoner Spy are now outdated and no longer function as originally implemented.

This reflects a real-world challenge of working with evolving third-party APIs. Based on the experience gained from this project, I am currently developing a new, similar League of Legends analytics platform that targets Riot’s updated API endpoints and incorporates improved architectural decisions.

What I Learned From This Project

Building Summoner Spy as my bachelor’s final project gave me hands-on experience with:

  • Full-stack web application architecture
  • Third-party API integration and rate limiting
  • Angular frontend development
  • Backend data aggregation and normalization
  • Firebase as a persistence layer
  • Designing user-friendly data-heavy interfaces
  • Planning and delivering a large solo project

It also strengthened my ability to adapt to external system changes and think critically about long-term maintainability.

Final Thoughts

Summoner Spy is an important milestone in my development journey. It combines academic requirements, real-world API integration, and practical frontend and backend development into a single cohesive project.

Although the application is no longer fully up to date due to changes in Riot Games’ API, it clearly demonstrates my ability to design and build complete full-stack systems, work with complex external services, and evolve ideas into more robust future projects.