Rift Rewind

About this project
RIFT CORE AI
Match details
GAME INSIGHTS

🎮 Rift Rewind Project Story

💡 Inspiration

As a dedicated League of Legends player and a huge fan of T1 (especially Faker!), I've always felt that just looking at raw match data was unsatisfying. Existing community sites offer plenty of stats, but they often lack personalized guidance and meaningful summaries. They tell you what happened, but rarely why it happened or how you can improve.

When AWS and Riot Games announced the "Rift Rewind" hackathon, I was immediately drawn to the theme: "help players reflect, learn, and celebrate." This was the exact tool I had always wanted! My inspiration was to combine my interest in AI technology with my love for cyberpunk aesthetic design to create a platform that wasn't just powerful, but also visually stunning.

The core goal of this project is: To go beyond raw data, using AWS Generative AI to transform complex match histories into personalized, shareable stories and insights that players can actually use.

🛠️ How We Built It

Rift Rewind is a full-stack, serverless application built entirely on the AWS ecosystem.

The Frontend

Framework: We used Next.js 16 (App Router) and TypeScript to build a type-safe, high-performance React frontend.

UI/UX: Visual design was a core part of this project. I first designed the complete cyberpunk-style UI in Figma, featuring neon colors (cyan, magenta) and dynamic grid backgrounds.

Styling & Animation: Tailwind CSS 4.0 was used for rapid design implementation, while Framer Motion and Radix UI brought smooth animations and accessible components (like modals and tabs) to the app.

Data Visualization: Recharts was used to translate complex performance metrics (like KDA, CS/min) into easy-to-understand charts.

The Backend & AI

The backend is 100% serverless to achieve scalability and cost-effectiveness.

Data Storage: We extracted data from the match dataset for 500 EUW players and stored it in Amazon DynamoDB. Its NoSQL structure was perfect for storing the JSON data of League of Legends matches.

API Layer: AWS Lambda and Amazon API Gateway form our REST API. This allows us to quickly query player data, match details, and champion statistics.

The AI Core: The real magic comes from Amazon Bedrock.

AI Reports: When a user views a player profile, we asynchronously invoke a Lambda function. This function pulls summarized data for the player's last 20 matches from DynamoDB, constructs a detailed prompt, and sends it to Amazon Bedrock. Bedrock returns a detailed written analysis of the player's strengths, weaknesses, and areas for improvement.

AI Chat Assistant: The chat feature uses another API Gateway and Lambda. It takes the user's chat history and current player data as context to send to Bedrock. This allows players to ask specific questions like, "Why did I lose that match?" or "What's my biggest problem when I play Ahri?"

Deployment

The entire Next.js application is hosted and deployed via AWS Amplify. Amplify's CI/CD pipeline is linked to our GitHub repository, making the entire process from push-to-deploy incredibly simple and automated.

🧠 What I Learned

This hackathon was a steep but incredibly rewarding learning curve.

First Look at Bedrock: This was my first time diving deep into Amazon Bedrock. Learning how to craft effective prompts (Prompt Engineering) to extract meaningful, human-coach-like insights from complex League of Legends data is an art. I learned how to "guide" the model to understand game-specific terms like KDA, Vision Score, and "gank."

Serverless Architecture: I gained a much deeper understanding of designing a complete serverless architecture, from request routing in API Gateway and cold-start optimizations in Lambda, to data modeling strategies in DynamoDB.

Full-Stack TypeScript: Sharing TypeScript types between the frontend (Next.js) and the backend (AWS Lambda) dramatically reduced bugs and accelerated API integration.

Design to Code: Faithfully translating a complex Figma design (with animations and custom styles) into responsive Tailwind CSS code was a great exercise in frontend implementation.

🚧 Challenges Faced

Data Processing: The League of Legends API data is massive and complex. One of the biggest challenges was writing the data processing scripts to "flatten" these raw JSON files and distill them into meaningful, quickly queryable entries in DynamoDB.

AI Latency & Cost: Responses from Bedrock aren't instantaneous. To solve this, I implemented a loading state (Loading Screen) and had the AI analysis reports generate asynchronously in the background. As mentioned in the hackathon requirements, I also had to carefully design prompts and data summarization logic to balance getting deep insights with keeping Bedrock calls cost-effective.

Authentication & Security: Securely connecting all the AWS services (Amplify, API Gateway, Lambda, DynamoDB) was a challenge. I spent a lot of time configuring the correct IAM roles and policies to ensure the frontend could only access the backend resources securely through the API Gateway.

Icons and Assets: League of Legends has thousands of icons (items, summoner spells). I wrote custom scripts (like download-item-icons.js) to batch download and process these assets from Riot's static data API (Data Dragon) so they could be loaded quickly on the frontend.

💜 Conclusion

Rift Rewind is a product of my passion for both League of Legends and emerging AI technology. I'm proud of the result—it's not just a data dashboard, but an AI companion that can help players understand and enjoy their gaming journey in a completely new way.