riftrewind.lol – main page
riftrewind.lol – your battle record
riftrewind.lol – your top 5 champions
riftrewind.lol – summary of rewind
riftrewind.lol/chat – main page for AI coach
riftrewind.lol/chat – discussing how to improve in game
riftrewind.lol – mobile main page
riftrewind.lol – mobile top champions
riftrewind.lol – mobile summary

riftrewind.lol ⏪

Your League of Legends journey, reimagined with AI-powered insights.

Rift Rewind transforms your League of Legends match history into an immersive, personalized experience. Watch your stats come to life through cinematic animations, then dive deep with AI-powered analysis that helps you understand your playstyle and improve your game.

Inspiration

Every year, platforms like Spotify Wrapped and GitHub Wrapped show us the power of data storytelling. We wanted to bring that same magic to League of Legends players. But we didn't just want to show stats—we wanted to create an experience that feels like stepping into the game itself, complete with Ekko's chronobreak animation and AI insights powered by AWS Bedrock.

The idea came from a simple question: "What if you could rewind your League journey and see it through fresh eyes?"

What it does

Rift Rewind is a full-stack web application that:

Fetches your match data from the Riot Games API across all regions (NA, EUW, KR, etc.)
Processes and aggregates your statistics using a scalable AWS Lambda architecture
Presents your journey through cinematic, animated scenes inspired by League's visual style
Generates AI insights using Amazon Bedrock to analyze your performance and provide personalized recommendations
Enables interactive chat where you can ask questions about your gameplay and get intelligent responses

Key Features

🎬 Cinematic Experience: Ekko's chronobreak animation transitions you into your personalized rewind
📊 Comprehensive Stats: Win/loss records, champion mastery, KDA ratios, CS/min, vision scores
🤖 AI-Powered Insights: Amazon Bedrock analyzes your data to identify strengths, weaknesses, and improvement areas
💬 Interactive Chat: Ask questions like "What's my best champion?" or "How can I improve my CS?"
🌍 Global Support: Works with all Riot regions (NA, EUW, KR, JP, BR, LAN, LAS, OCE, etc.)
⚡ Real-time Processing: Asynchronous architecture handles data fetching and aggregation efficiently
📱 Responsive Design: Beautiful UI built with Next.js and Tailwind CSS

How we built it

Architecture Overview

Rift Rewind is built on a modern, serverless AWS architecture:

┌─────────────┐
│  Next.js UI │ (Hosted on AWS Amplify)
└──────┬──────┘
       │
       ▼
┌─────────────────────────────────────────────────────────┐
│                    AWS Lambda Functions                  │
├─────────────────────────────────────────────────────────┤
│  Check User Status → Process User Matches → Process     │
│  Individual Matches → Aggregate Data → Generate AI      │
│  Insights → Chat Handler                                │
└──────┬──────────────────────────────────────────────────┘
       │
       ▼
┌─────────────────────────────────────────────────────────┐
│              AWS Services Integration                    │
├─────────────────────────────────────────────────────────┤
│  • S3: Match data storage                               │
│  • DynamoDB: User insights & match index                │
│  • SQS: Asynchronous job queues                         │
│  • Secrets Manager: Riot API key                        │
│  • Bedrock: AI insights (Claude 3 Haiku)                │
└─────────────────────────────────────────────────────────┘

Tech Stack

Frontend:

Next.js 15 with React 19
TypeScript for type safety
Tailwind CSS for styling
Radix UI components
Lucide React icons

Backend:

Python 3.12 Lambda functions
AWS CDK for infrastructure as code
Boto3 for AWS SDK
Riot Games API integration

Infrastructure:

AWS Lambda (serverless compute)
AWS Amplify (frontend hosting)
Amazon S3 (data storage)
Amazon DynamoDB (NoSQL database)
Amazon SQS (message queuing)
AWS Secrets Manager (API key management)
Amazon Bedrock (AI/ML)

Data Flow

User Input: Player enters their Riot ID (e.g., "Hide on bush#KR1")
Status Check: Lambda checks if data exists and is recent
Queue Processing: If needed, user is queued for match fetching
Match Fetching: Lambda fetches match IDs from Riot API
Parallel Processing: Individual matches are processed concurrently via SQS
Aggregation: Once all matches are processed, data is aggregated
AI Analysis: Bedrock analyzes the aggregated data
Presentation: User sees their cinematic rewind with AI insights

Key Design Decisions

Why Serverless?

Scales automatically with demand
Pay only for what you use
No server management overhead

Why SQS for Processing?

Handles Riot API rate limits gracefully (20 req/sec, 100 req/2 min)
Enables parallel processing of matches
Provides retry logic and dead-letter queues

Why Bedrock Instead of Knowledge Base?

70x cheaper (~$1-5/month vs ~$350/month)
Simpler architecture with fewer moving parts
Direct control over context and prompts
Faster deployment and iteration

Challenges we ran into

1. Regional Routing Complexity

The Riot API uses different routing values for different regions. Initially, we hardcoded americas.api.riotgames.com, which broke for Korean and European accounts. We had to implement dynamic regional routing that maps platform IDs (kr, euw1, na1) to routing values (asia, europe, americas).

2. Rate Limiting

Riot's API has strict rate limits (20 requests/second, 100 requests/2 minutes). Processing a user with 100+ matches could easily hit these limits. We solved this with:

SQS queues with controlled concurrency
Exponential backoff retry logic
Dead-letter queues for failed requests

3. Asynchronous Processing UX

Users expect instant results, but fetching and processing 100+ matches takes time. We implemented a status-checking system that:

Shows real-time progress updates
Allows users to leave and come back

4. AI Context Size

Aggregated match data can be large. We had to carefully format the data to fit within Bedrock's context window while preserving important details. We structured the data hierarchically and used concise formatting.

5. Cost Optimization

Initially, we planned to use AWS Knowledge Base with OpenSearch Serverless, but the cost was prohibitive (~$350/month). We pivoted to a direct Bedrock Converse API approach, reducing costs by 70x while maintaining quality.

6. TypeScript Type Safety

Ensuring type safety between the backend (Python) and frontend (TypeScript) required careful interface definitions and validation. We created comprehensive TypeScript interfaces that mirror the Python data structures.

Accomplishments that we're proud of

✨ Built a complete, production-ready application with frontend, backend, and infrastructure in a short timeframe

🎨 Created an immersive user experience that rivals commercial products like Spotify Wrapped

🤖 Successfully integrated AI in a meaningful way that provides real value to users

⚡ Achieved 70x cost reduction by choosing the right architecture (Bedrock direct vs Knowledge Base)

🌍 Global support for all Riot regions with proper routing and error handling

📊 Comprehensive data aggregation including per-champion stats, performance metrics, and match highlights

🔒 Production-grade security with Secrets Manager, IAM roles, and CORS configuration

📈 Scalable architecture that can handle thousands of concurrent users

What we learned

Technical Learnings

AWS CDK is powerful: Infrastructure as code made deployment and iteration incredibly fast
Serverless scales differently: Traditional scaling concerns (load balancers, auto-scaling groups) are replaced by rate limits and concurrency controls
AI context matters: The quality of AI insights depends heavily on how you structure and present the data
Regional APIs are tricky: Global applications need careful consideration of regional routing and data residency

Product Learnings

Users love personalization: The cinematic presentation makes stats feel special
AI needs guardrails: We had to carefully craft prompts to ensure insights are helpful and accurate
Performance perception matters: Even if processing takes time, showing progress keeps users engaged
Fallbacks are essential: Mock data and error handling ensure users always have a good experience

Process Learnings

Start simple, iterate: We initially over-engineered the AI solution, then simplified for better results
Test with real data: Edge cases (empty match lists, regional differences) only appeared with real user data
Documentation is crucial: Clear READMEs and summaries helped us move fast without losing context

What's next for Rift Rewind

Short-term Enhancements

[ ] Historical tracking: Store snapshots over time to show progression
[ ] Social sharing: Generate shareable images/videos of your rewind
[ ] More visualizations: Champion mastery curves, performance trends, role analysis
[ ] Ranked-specific insights: Separate analysis for ranked vs normal games
[ ] Comparison mode: Compare your stats with friends or global averages