kts-rift-rewind

Your Season, Your Story — League API + AWS AI Services

Comment

Inspiration

Every year, millions of League of Legends players invest countless hours perfecting their gameplay, but most never get to see the bigger picture of their journey. Inspired by Spotify Wrapped's ability to turn data into memorable stories, we wanted to create something similar for the League community — a way to celebrate achievements, understand playstyles, and share gaming moments with friends.

We saw an opportunity to combine AWS's powerful AI capabilities with Riot's rich API to create personalized year-in-review experiences that go beyond simple statistics. The goal was to make every player feel like their gaming journey matters, whether they're climbing ranked or playing casually with friends.

What it does

Rift Rewind is an AI-powered analytics platform that transforms your League of Legends match history into a personalized year-in-review experience. Here's what it offers:

🎯 Performance Analytics

  • Comprehensive stats dashboard with win rates, KDA, champion mastery, and gameplay patterns
  • Visual charts showing performance trends across different champions and roles
  • Ranked progression tracking with tier and division history

🤖 AI-Powered Insights

  • Personalized analysis using AWS Bedrock (Claude 3 Haiku) that understands your playstyle
  • Contextual recommendations for improvement based on your actual gameplay patterns
  • Fun facts and achievements highlighting your unique gaming moments
  • Year-in-review narrative that tells your League story in an engaging way

👥 Social Comparison

  • Compare your stats with friends across any region
  • Compatibility scoring to find your perfect duo partner
  • Side-by-side performance metrics with visual comparisons
  • Cross-region support for global player comparisons

📱 Seamless Experience

  • Mobile-responsive design that works on any device
  • Real-time data from Riot Games API
  • Fast global delivery via CloudFront CDN
  • No login required — just enter your Riot ID and go

How we built it

Architecture:

  • We built Rift Rewind using a serverless-first approach on AWS to ensure scalability and cost-efficiency:

Frontend (React + TypeScript):

  • Built with React 18 and TypeScript for type-safe, modern UI development
  • Used Ant Design component library for professional, enterprise-grade UI
  • Implemented Recharts for interactive data visualizations
  • Deployed on S3 with CloudFront for global CDN delivery
  • Vite for lightning-fast development and optimized production builds

Backend (AWS Lambda):

  • Python 3.11 serverless functions with Lambda Function URLs
  • Integrated AWS Bedrock (Claude 3 Haiku) for AI-powered insights
  • Riot Games API integration for real-time player data
  • Implemented caching strategy to optimize API calls and reduce latency
  • Error handling with circuit breaker pattern for resilience

Data Flow:

  • User enters Riot ID → Frontend validates and sends request
  • Lambda fetches match history from Riot API (last 20-50 matches)
  • Backend calculates 12+ performance metrics (KDA, win rate, champion mastery, etc.)
  • AWS Bedrock analyzes patterns and generates personalized insights
  • Results cached for 1 hour to improve performance
  • Frontend renders interactive dashboard with charts and AI insights

Key Technical Decisions:

  • Bedrock Haiku over Opus: Faster response times (2-3s vs 10-15s) with 60x cost savings
  • Serverless architecture: Zero infrastructure management, pay-per-use pricing
  • Client-side rendering: Better SEO, faster initial load, reduced backend complexity
  • Regional API endpoints: Optimized latency by routing to nearest Riot servers

Challenges we ran into

1. Riot API Rate Limiting

  • Challenge: Riot API has strict rate limits (20 requests/second, 100 requests/2 minutes)
  • Solution: Implemented intelligent request batching, exponential backoff retry logic, and in-memory caching with TTL. We also optimized to fetch only essential match data (last 20 matches instead of full history).

2. AWS Bedrock Cold Starts

  • Challenge: Initial Lambda invocations took 8-10 seconds due to Bedrock model loading
  • Solution: Switched from Claude Opus to Haiku (5x faster), implemented connection pooling, and added request timeouts. Also added loading states in UI to improve perceived performance.

3. Cross-Region Player Data

  • Challenge: Players can have accounts in multiple regions, and data doesn't sync across regions
  • Solution: Built region selector with clear guidance, added error messages explaining region mismatches, and implemented region-aware API routing.

4. Champion Asset Loading

  • Challenge: Initial approach using GitHub CDN for champion images resulted in 404 errors
  • Solution: Migrated to Community Dragon CDN (official community-maintained assets), implemented image preloading, and added fallback handling for missing assets.

5. Mobile Responsiveness

  • Challenge: Complex data visualizations and charts didn't render well on mobile devices
  • Solution: Implemented responsive grid system with breakpoints, adaptive chart sizing, and touch-friendly UI components. Tested across iPhone, Android, and tablet devices.

6. AI Insight Quality

  • Challenge: Generic AI responses that didn't feel personalized
  • Solution: Crafted detailed prompts with context about player metrics, playstyle patterns, and specific achievements. Iterated on prompt engineering to get more engaging, actionable insights.

Accomplishments that we're proud of

🚀 Production Deployment in 7 Days

  • Went from concept to live production deployment in just 1 week
  • Fully functional app with AI integration, social features, and mobile support

🤖 Seamless AWS Bedrock Integration

  • Successfully integrated Claude 3 Haiku for personalized AI insights
  • Achieved 2-3 second response times for AI-generated content
  • Created engaging, contextual narratives that feel genuinely personalized

📊 Comprehensive Analytics

  • Built 12+ performance metrics from raw match data
  • Created beautiful, interactive charts with Recharts
  • Implemented social comparison feature with compatibility scoring

🌍 Global Scale

  • CloudFront CDN delivers content worldwide with <100ms latency
  • Supports all major Riot regions (NA, EUW, KR, BR, JP, etc.)
  • Handles cross-region player comparisons seamlessly

💡 User Experience

  • Zero login required — just enter Riot ID and go
  • Mobile-responsive design that works on any device
  • Interactive tooltips and helpful guidance for judges/users
  • Clean error handling with actionable feedback

🏗️ Clean Architecture

  • Serverless-first design with zero infrastructure management
  • Type-safe TypeScript frontend
  • Well-documented, production-ready code
  • Professional git history ready for open source

What we learned

1. AWS Bedrock is Powerful but Requires Optimization

  • Learned the importance of model selection (Haiku vs Opus) for latency-sensitive applications
  • Discovered that prompt engineering is crucial for quality AI outputs
  • Understood the trade-offs between cost, speed, and quality in AI services

2. Serverless Architecture Scales Beautifully

  • Lambda's pay-per-use model is perfect for hackathon projects and MVPs
  • Function URLs eliminate the need for API Gateway for simple use cases
  • Cold starts are manageable with proper optimization and user feedback

3. Riot API is Rich but Complex

  • Match history data is incredibly detailed (100+ fields per match)
  • Regional routing is critical for performance and data accuracy
  • Rate limiting requires careful planning and caching strategies

4. Frontend Performance Matters

  • Image optimization and CDN usage dramatically improve load times
  • Responsive design isn't optional — mobile traffic is significant
  • Loading states and error messages greatly improve user experience

Product Learnings:

1. Personalization Drives Engagement

  • Users love seeing their unique stats and achievements highlighted
  • AI-generated narratives feel more engaging than raw statistics
  • Social comparison features encourage sharing and virality

2. Simplicity Wins

  • No login requirement removes friction and increases adoption
  • Clear examples and tooltips help users understand what to do
  • Clean UI with focused features beats feature bloat

3. Data Storytelling is an Art

  • Presenting data as a narrative (like Spotify Wrapped) is more memorable
  • Visual charts are easier to understand than tables of numbers
  • Fun facts and achievements create shareable moments

Development Process Learnings:

1. Start with MVP, Iterate Fast

  • Shipped basic version on Day 1, added features incrementally
  • User feedback (even from ourselves) drove feature priorities
  • Perfect is the enemy of done — ship and improve

2. Documentation is Investment

  • Good README and guides save time answering questions
  • Code comments help future you (and judges) understand decisions
  • Test examples make demos smoother

3. AWS Services Integrate Well

  • S3 + CloudFront + Lambda work seamlessly together
  • Bedrock integration was surprisingly straightforward
  • AWS documentation is comprehensive and helpful

What's next for Rift Rewind

Short-term (Next 3 months):

🌍 Expand Regional Support

  • Add remaining regions: OCE, LAN, LAS, TR, RU, PH, SG, TW, VN
  • Implement automatic region detection based on Riot ID
  • Support for multiple accounts across regions

📊 Enhanced Analytics

  • Historical data tracking (compare this season vs last season)
  • Champion-specific deep dives with matchup analysis
  • Role performance breakdown (Top, Jungle, Mid, ADC, Support)
  • Game-by-game timeline showing improvement trends

🤝 Social Features

  • Team analysis for 5-player premades
  • Leaderboards for friend groups
  • Share cards optimized for Twitter, Discord, Instagram
  • Duo finder based on compatibility scores

Long-term (6-12 months):

🎮 Advanced AI Coaching

  • Personalized improvement plans using Bedrock
  • Champion recommendations based on playstyle and meta
  • Matchup-specific tips and strategies
  • VOD review integration with AI analysis

📱 Mobile App

  • Native iOS and Android apps
  • Push notifications for weekly/monthly summaries
  • Offline mode with cached data
  • Widget support for quick stats

🏆 Tournament Mode

  • Clash team analysis and preparation
  • Scrim tracking and performance review
  • Draft phase recommendations
  • Post-tournament reports

💾 Data Persistence

  • User accounts with historical data storage
  • Track progress over multiple seasons
  • Export data to CSV/JSON
  • API for third-party integrations

🎨 Customization

  • Themes and color schemes
  • Custom metrics and KPIs
  • Personalized achievement badges
  • Shareable profile pages

🌐 Community Features

  • Public profiles with privacy controls
  • Community-driven insights and tips
  • Integration with Discord, Twitch
  • Content creator tools for highlights

🔬 Advanced Analytics

  • Machine learning for win prediction
  • Meta analysis and tier lists
  • Patch impact on your champions
  • Optimal build recommendations

Built With

Share this project:

Updates