Search Bar
The LeagueLab Profile Viewer is an interactive web application designed to give League of Legends players a clear, dynamic, and shareable way to view and analyze their game data. At its core is a search bar, where users can enter a summoner name and tagline to instantly retrieve their League of Legends statistics. This intuitive search input is paired with “Search” and “Update” buttons, ensuring players can either load saved data from the local database or trigger a fresh fetch from the Riot API, making the app responsive and up-to-date.
Summoner Profile
Once a summoner profile is loaded, users see a clean profile page displaying their summoner name, level, total wins and losses, winrate percentage, and current rank, including league points. A profile icon is shown prominently to strengthen the player’s identity. All these elements are carefully arranged in a modern, responsive layout with high-contrast colors for clarity and engagement.
Tab-based Navigation
The application also features a tab-based navigation system that lets users easily switch between their main profile and their “Most Played Champions.” These tabs follow a consistent style and highlight the currently active view, creating a smooth user experience.
Match-History
Another core element is the match history. It is displayed as a series of interactive match cards, each presenting detailed stats for both teams in a match. Each player entry includes the champion played, the game mode (ARAM, for example), the level reached, and the final KDA. The entire match history is rendered in a visually distinct, easy-to-read style with color coding for blue and red teams, enhancing the viewer’s ability to compare team performance. Hover effects and subtle animations keep the experience engaging without being distracting.
Shareable URL
A unique feature is the shareable URL, which includes the summoner name and region directly in the path, making it easy to bookmark or share with friends — for example:
https://users.ct.fh-salzburg.ac.at/~fhs52298/mmp1/profile/Detailsdodl/EUW
This approach enables social sharing and faster revisits, as players can jump straight to their own or a friend’s profile with a single click or bookmark.
Most Played Champions
The “Most Played Champions” section in LeagueLab gives players a powerful overview of their champion preferences and performance trends. This feature lists the champions a summoner has played most frequently, showing the total number of games, average KDA ratios, and winrate for each. By presenting these statistics clearly, LeagueLab helps players identify their strongest champions and understand where they perform best. This section is especially useful for players who want to focus on their main picks, analyze consistency, or make strategic improvements to their champion pool. The design is clean and responsive, with intuitive layouts that keep the data easy to read on any device. Overall, the “Most Played Champions” view gives players the tools to reflect on their habits, measure progress, and plan their next games with greater confidence.
Conclusion
In combination, the search bar, profile overview, match history, most played champions, and tab navigation deliver a seamless, visually appealing, and highly functional League of Legends statistics dashboard. This project demonstrates a perfect mix of user-focused interactivity and practical features for any player who wants to dive deeper into their game performance and share it with others.