TrollGG

Project Description

An OP.GG clone project built to learn Spring Boot MVC architecture and external REST API integration. The server side calls Riot Games API (summoner-v4) via HttpURLConnection, parses JSON responses with Gson into DTOs, and passes data to JSP views through ModelAndView. The client side uses jQuery AJAX to directly call 5 Riot API endpoints (match-v5, league-v4, spectator-v4, champion-mastery-v4, Data Dragon), dynamically rendering recent 20 match histories, solo/flex rank info, live game spectator data, and top 40 Challenger rankings. Implemented a persistence layer with MyBatis Mapper XML for summoner data storage and retrieval in MariaDB, and a VersionCheck utility class that auto-detects Data Dragon CDN patch versions to dynamically manage champion, item, and spell image paths.

Highlights

• Integrated 6 Riot Games API endpoints for match, live game, and ranking
• Hybrid server-client API call architecture with dynamic rendering
• MyBatis dynamic SQL persistence with summoner data caching
• Chart.js match statistics dashboard with win rate and KDA visualization
• Data Dragon CDN patch version auto-sync utility

Features

• Summoner match search — server-side summoner-v4 API call via HttpURLConnection with Gson parsing, client-side jQuery AJAX fetching recent 20 matches from match-v5 API with dynamic rendering
• Match detail view — per-participant champion, spell, rune, item, KDA, CS, and damage display for all 10 players, team objective comparison (Baron, Dragon, Tower) with total kill and gold stats, kill combo indicators (Double to Penta)
• Live game info — spectator-v4 API querying current game data including 10 participants' champions, spells, runes, tiers, top 3 mastery champions, and ban information
• Challenger ranking page — league-v4 API fetching all Challenger league summoners sorted by LP, displaying top 40 profiles with tier, LP, win rate, level, and mastery champions
• Win rate statistics visualization — Chart.js doughnut chart for win/loss ratio, top 3 most-played champions and top 2 preferred positions with win rate and KDA statistics
• Data Dragon CDN version auto-detection — VersionCheck utility calling Riot Data Dragon realms API to dynamically manage patch versions for champion, item, spell, and profile icon image paths

Lessons Learned

• 💡 Internalized the fundamentals of HTTP communication (URL creation → connection → stream reading → parsing) and exception handling importance through direct REST API calls with HttpURLConnection and Gson JSON parsing — establishing foundation for understanding higher-level HTTP clients like RestTemplate and WebClient
• 💡 Learned MVC layer separation (request routing, business logic, data access) by implementing Spring Boot's Controller-Service-Mapper 3-tier architecture firsthand, understanding server-side rendering flow through ModelAndView
• 💡 Experienced SQL-controlled data access patterns without ORM by implementing whitespace-stripped LIKE queries for summoner search using MyBatis Mapper XML dynamic SQL (<if> tags) with parameterType/resultType mapping
• 💡 Learned practical considerations for external API integration — API key management, Rate Limit handling, and region-specific endpoint separation (kr.api vs asia.api) — by combining multiple Riot Games API endpoints (summoner-v4, match-v5, league-v4, spectator-v4, champion-mastery-v4) into a complete service

Tech Stack

Project Images