League of Legends Opponent Level Tracker

Are you scared of Pantheon’s ult as a bottom? Our level tracker helps you see it coming. It’s a real-time overlay that tracks champion’s power spikes. Stay one step ahead and make smarter plays.

Comment

Inspiration

Are you scared of Pantheon’s ult? Always caught off-guard by Kayle’s divine intervention? League is full of power spikes that catch you by surprise — level 6, level 11, level 16. That's why we built this app. Our League of Legends opponent level tracker tracks every champion’s level in real-time and instantly pops an alert when they reach those critical spikes. No more surprise engages, no more unexpected saves — just smart, informed decisions.

What it does

SpikeWatch continuously monitors the Riot Live Client Data API while a match is running. Every 500 milliseconds, it detects if any enemy champion crosses critical level thresholds — level 6 (ultimate unlock), level 11 (second rank upgrade), and level 16 (final power spike).

When that happens, a sleek, transparent toast notification fades onto your screen:

⚡ “Kayle (Top) reached Level 6 — ultimate ready!”

It quietly runs in the background, requires no interaction, and helps players stay proactive rather than reactive.

How we built it

Frontend / Overlay: Built with Electron.js using HTML, CSS, and vanilla JavaScript to render a transparent, always-on-top UI that can sit above the League client or in-game window.

Backend Logic: A lightweight Node.js process fetches live data from Riot’s /liveclientdata/allgamedata endpoint every 500 ms using HTTPS, bypassing self-signed certificate checks.

Event Detection: We track each player’s previous level, detect when they cross a key threshold, and trigger a corresponding notification via the renderer process.

Design: Clean, minimal, non-intrusive — inspired by Riot’s in-game popups but with subtle motion and translucency for immersion.

Challenges we ran into

Electron security & HTTPS: The Riot Live Client uses a self-signed local certificate, so fetching over HTTPS required explicitly bypassing verification.

Performance tuning: Polling every 500 ms while keeping the overlay lightweight meant careful throttling and asynchronous handling.

Click-through + drag mechanics (macOS): Balancing “transparent overlay” and “draggable window” behaviors on macOS took CSS tricks with -webkit-app-region and Electron’s setIgnoreMouseEvents.

Accomplishments that we're proud of

  • Built a fully functional real-time overlay that integrates directly with a running League match.
  • Designed a beautiful, animated toast system that feels native and professional.
  • Created logic that scales for multiple power tiers (6 / 11 / 16) and tracks all enemy champions simultaneously.
  • Achieved sub-second responsiveness with negligible CPU usage.

What we learned

  • How to interface with Riot’s local Live Client Data API safely and efficiently.
  • The nuances of Electron’s rendering pipeline, especially context isolation and secure IPC.
  • How much UX design matters — subtle animations and minimal clutter make the difference between “useful” and “annoying.”
  • Realized that good game data tools don’t need to automate play — they just need to make information visible.

What's next for League of Legends Opponent Level Tracker

  • Add voice notifications (“Pantheon just hit six!”) for players focused in-game.
  • Support both teams and customizable thresholds (e.g., notify on level 2 all-in spikes).
  • Integrate with FastAPI or a mobile companion app to show team data remotely.
  • Expand to item and objective tracking (first Mythic, Dragon timers).
  • Package a cross-platform desktop release with auto-updates for Windows and macOS.

Built With

Share this project:

Updates