Kevin Hallett

moon indicating dark mode
sun indicating light mode

Tempest

VIEW ON GITHUB

Tempest: A League of Legends Companion App

Tempest is a feature-rich companion app for League of Legends players, designed to provide insights into match history and player stats. Built as a solo project, Tempest leverages TypeScript and GraphQL for efficient data management and performance, with a unique visual style that includes a WebGL-driven thunderstorm animation as its background.

Project Overview

Tempest offers League of Legends players an immersive way to explore their performance and analyze match data. With a powerful search feature, users can look up any summoner by name to retrieve a comprehensive breakdown of recent matches, performance metrics, and gameplay statistics. The app’s design includes a WebGL-animated thunderstorm background, adding a dynamic and engaging visual layer that complements its name.

Technical Highlights

Built with a focus on performance and reliability, Tempest combines several technologies to deliver an optimized user experience. GraphQL enables rapid data queries, ensuring that users receive accurate, real-time information on demand. TypeScript powers the backend and frontend, providing type safety and maintainability. The WebGL animation layer enhances the aesthetic, using subtle, reactive animations to create a stormy atmosphere.

Key Features:

  • Summoner Search: Users can search any summoner to view their League of Legends profile, including match history, win/loss record, and key stats.
  • Detailed Match Breakdown: Each match features an in-depth analysis, highlighting kills, deaths, assists, CS (creep score), and more.
  • WebGL Thunderstorm Animation: The app’s background is a fully interactive storm scene that adds a unique visual experience.
  • Data Retrieval with GraphQL: Real-time match data is fetched with GraphQL, ensuring that stats are accurate and loading is fast.

Behind the Scenes: Building the WebGL Thunderstorm

Creating the WebGL thunderstorm animation was a unique technical challenge. Inspired by the fast-paced nature of the game, the animation mirrors the intensity of League of Legends, adding subtle visual cues like lightning flashes and rolling clouds. This background layer is optimized to avoid performance bottlenecks, delivering a smooth experience on both desktop and mobile platforms.

Using Tempest

Tempest is designed for both competitive players and casual enthusiasts who want to track their progress, improve performance, and learn from past games. By providing detailed stats and match data, the app empowers players to dive deeper into their gameplay metrics, gaining insights that can help them refine strategies and enhance skills.