BlungaminCoach — AI-Powered TFT Match Analyzer

Technologies Used: React, TypeScript, Riot Games TFT API, Node.js, TailwindCSS, REST API Integration, CommunityDragon CDN, Dynamic Image Rendering, Service-Oriented Architecture, Responsive Design, Custom Trait Mapping System

Description:
BlungaminCoach is a web-based application designed to provide Teamfight Tactics (TFT) players with detailed post-match analysis. Built with React and TypeScript, the application integrates directly with Riot Games’ official TFT API to retrieve match history, player profiles, unit compositions, item usage, and performance statistics. It dynamically displays a player’s recent matches in a structured, easy-to-read format that highlights placements, traits, unit builds, and key performance metrics.

BlungaminCoach features a custom trait-mapping system that cleans up Riot’s internal trait identifiers, transforming them into user-friendly labels. Additionally, the project includes a smart fallback image loader to ensure all unit and item icons render properly, even when assets are distributed across multiple directories. Designed for extensibility and modularity, the application demonstrates expertise in real-time API data integration, dynamic asset management, and responsive front-end development.

The application is named after "Blungamin," an adorable stuffed animal belonging to my girlfriend, who serves as the project's mascot. Blungamin symbolizes warmth, encouragement, and growth, making it a fitting emblem for a tool designed to help players improve through thoughtful analysis.

Key Features:

  • Riot API Integration:
    Connects to Riot’s official TFT API to retrieve player data, rank, and recent match histories based on Riot ID and tagline inputs.

  • Dynamic Match Display:
    Visualizes recent matches, showing placement, level, gold left, total damage to players, trait synergies, and full unit compositions in a responsive, user-friendly layout.

  • Custom Trait Mapping System:
    Implements a robust mapping system to convert internal trait IDs such as "TFT14_Armorclad" into readable names like "Bastion," ensuring clarity in trait displays. Designed to be extensible for future TFT set releases.

  • Smart Fallback Image Loader:
    Develops a custom image component that intelligently checks multiple asset folders to ensure unit and item images are correctly displayed, even when Riot moves or renames asset locations.

  • Real-Time Unit and Item Visualization:
    Fetches champion portraits and item icons from the CommunityDragon and OP.GG CDNs. Ensures consistent rendering of units, Radiant items, artifact items, and standard components.

  • Service-Oriented Architecture:
    Uses modular React components and utility-based architecture to separate concerns, improving scalability, maintainability, and code clarity.

  • Error Handling and Debugging Support:
    Built-in error messaging and console logging to assist with catching API errors, invalid user input, and missing data cases.

  • Responsive User Interface:
    Designed using TailwindCSS, the interface adjusts seamlessly for both desktop and mobile users to ensure a smooth experience across platforms.

Why It’s Special:
BlungaminCoach goes beyond simple match history visualization by transforming raw API data into a polished, educational interface that highlights key strategic insights. By implementing custom trait mapping, dynamic asset fallback handling, and clean data visualization, this project demonstrates advanced proficiency in frontend development, API integration, user experience design, and system scalability. The project shows not only technical strength in React and TypeScript but also an ability to engineer clean, modular, and production-quality applications geared towards real-world use. It reflects a deep understanding of service-based architecture, real-time dynamic rendering, and user-centered application design.