A personalized League of Legends year-end recap experience - Like Spotify Wrapped, but for your League of Legends matches!

Generate your personalized "Rift Rewind" by analyzing your match history, playstyle, and performance. Get AI-powered insights about your archetype, improvement tips, highlight stories, and shareable recaps.

• Player Archetype Analysis: Discover your unique playstyle with AI-generated archetypes like "The Aggressive Early-Game Ductor" or "The Strategic Vision Controller"
• Personalized Descriptions: Get 2-sentence descriptions of how you play based on your actual match data

• Comprehensive Stats: View your total games, win rate, average KDA, and overall performance metrics
• Champion Analytics: See your most played champion and best performing champion
• Best Game Highlight: View your single best performance with KDA, damage, and champion played
• Role Statistics: Analyze your performance across different roles (Top, Jungle, Mid, ADC, Support)

• AI-Powered Coaching Tips: Get one actionable, statistically-backed tip to improve your biggest weakness
• Data-Driven Insights: Tips are generated based on your actual gameplay patterns (vision score, control wards, damage, etc.)

• Best Game Narrative: Read an exciting 3-sentence narrative about your most impressive game
• Performance Recognition: Celebrate your standout performances with AI-generated stories

• Season Headline: Get a catchy, 10-word headline summarizing your 2025 season
• Shareable Content: Share your rewind on Twitter/X or via native share functionality
• Visual Story Slides: Beautiful, animated slide-based presentation of your rewind

• Smooth Animations: Powered by Framer Motion for engaging transitions
• Responsive Design: Works on desktop and mobile devices
• Slide Navigation: Navigate through your rewind with Previous/Next buttons and dot indicators
• Gradient Backgrounds: Modern, visually appealing design with gradient color schemes

• Framework: React.js 19.2.0
• Animations: Framer Motion
• Hosting: AWS Amplify
• Deployment: Automatic CI/CD via Amplify Console

• Runtime: AWS Lambda (Node.js 22.x)
• API: Amazon API Gateway (REST API)
• AI: Amazon Bedrock (Claude 3 Haiku)
• Storage: Amazon S3 (raw match data, features, results)
• Data Source: Riot Games API

1. User enters Riot ID (GameName#TagLine) on the frontend
2. Frontend sends POST request to API Gateway
3. Lambda function:
   • Fetches account information from Riot API
   • Retrieves last 20 match IDs
   • Fetches detailed match data
   • Analyzes and summarizes features (KDA, vision, damage, champions, roles)
   • Stores raw data and features in S3
   • Generates AI insights via Bedrock (or uses mock mode if Bedrock unavailable)
   • Returns personalized rewind data
4. Frontend displays the rewind in an animated slide presentation

• Node.js 18+ installed
• AWS Account with appropriate permissions
• Riot Games API Key (Get one here)
• AWS CLI configured (aws configure)
• AWS Amplify CLI installed (npm install -g @aws-amplify/cli)

1. Clone the repository

   git clone https://github.com/yourusername/rift-rewind.git
   cd rift-rewind

2. Navigate to frontend directory

   cd rift-rewind-frontend

3. Install dependencies

   npm install

4. Set up AWS Amplify

   amplify init

   Follow the prompts to configure your Amplify project.

5. Add API (Lambda function)

   amplify add api

   Select REST API and choose the existing Lambda function or create a new one.

6. Configure Lambda Environment Variables

   Update the Lambda function environment variables with:

   • RIOT_API_KEY: Your Riot Games API key
   • RIOT_REGION: Region (e.g., na1, euw1)
   • RIOT_PLATFORM: Platform (e.g., americas, europe)
   • S3_BUCKET: Your S3 bucket name for data storage
   • BEDROCK_MODEL_ID: anthropic.claude-3-haiku-20240307-v1:0
   • BEDROCK_ENABLED: true (if Bedrock is enabled) or false
   • MOCK_MODE: false (if using Bedrock) or true (for testing)

   You can use the provided PowerShell script:

   .\configure-lambda.ps1

7. Set up S3 Bucket (if not already created)

   .\aws-setup-simple.ps1

8. Push to AWS

   amplify push

9. Deploy frontend

   amplify publish

1. Start the development server

   cd rift-rewind-frontend
   npm start

2. Update API URL (if needed)

   In rift-rewind-frontend/src/App.js, update the apiUrl variable with your API Gateway endpoint:

   const apiUrl = 'https://your-api-gateway-url.amazonaws.com/dev';

• RIOT_API_KEY: Your Riot Games API key (required)
• RIOT_REGION: Riot API region (default: na1)
• RIOT_PLATFORM: Riot API platform (default: americas)
• S3_BUCKET: S3 bucket name for data storage (optional)
• BEDROCK_MODEL_ID: Bedrock model ID (default: anthropic.claude-3-haiku-20240307-v1:0)
• BEDROCK_ENABLED: Enable Bedrock AI (default: false)
• MOCK_MODE: Use mock data instead of AI (default: true)

1. Go to Riot Games Developer Portal
2. Sign in with your Riot account
3. Create a new API key
4. Copy the key and add it to your Lambda environment variables

Note: Personal API keys expire after 24 hours. For production, consider using a server-side proxy or Riot's production API key process.

1. Enable Bedrock in AWS Console

   • Navigate to Amazon Bedrock in AWS Console
   • Request access to Claude 3 Haiku model
   • Submit Anthropic use case details form (required for Anthropic models)

2. Configure IAM Permissions

   • Ensure Lambda execution role has bedrock:InvokeModel permission
   • See lambda-policy.json for example policy

3. Update Lambda Environment

   • Set BEDROCK_ENABLED=true
   • Set MOCK_MODE=false

rift-rewind/
├── rift-rewind-frontend/          # React frontend application
│   ├── src/
│   │   ├── App.js                 # Main React component
│   │   ├── App.css                # Styles
│   │   └── index.js               # Entry point
│   ├── amplify/                   # AWS Amplify configuration
│   │   └── backend/
│   │       ├── api/               # API Gateway configuration
│   │       └── function/          # Lambda function
│   │           └── riftRewindApi/
│   │               └── src/
│   │                   ├── index.js    # Lambda handler
│   │                   └── package.json
│   ├── public/                    # Static assets
│   └── package.json
├── aws-setup-simple.ps1           # S3 bucket setup script
├── configure-lambda.ps1           # Lambda configuration script
├── lambda-policy.json             # IAM policy example
├── lifecycle-config.json          # S3 lifecycle configuration
└── README.md                      # This file

1. Open the application in your browser (deployed URL or localhost)
2. Enter your Riot ID in the format GameName#TagLine (e.g., SatoruYuta#OffOn)
3. Click "Generate Rewind" and wait for the analysis
4. Navigate through slides using Previous/Next buttons or dots
5. Share your rewind using the share button or Twitter/X button

• API Keys: Never commit API keys to the repository. Use environment variables.
• Riot API: All API calls are server-side to protect your Riot API key
• Data Storage: Match data is stored in S3 with lifecycle rules (auto-delete after 3 days)
• CORS: API Gateway is configured with CORS headers for frontend access

• Verify the Riot ID format: GameName#TagLine
• Ensure the player has played matches in the specified region
• Check that your Riot API key is valid and not expired

• Submit the Anthropic use case details form in AWS Bedrock console
• Wait for approval (may take a few hours)
• Alternatively, use MOCK_MODE=true for testing

• Riot API has rate limits. Wait a few minutes and try again
• Consider implementing rate limiting or caching

• Player may have no recent matches (last 20 games)
• Stats slide is automatically hidden for players with 0 games
• Try a different Riot ID with recent match history

amplify publish

cd rift-rewind-frontend/amplify/backend/function/riftRewindApi/src
zip -r ../index.zip .
aws lambda update-function-code --function-name riftRewindApi-dev --zip-file fileb://../index.zip

The application analyzes the following metrics:

• Win Rate: Percentage of games won
• KDA: Average Kills/Deaths/Assists ratio
• Vision Score: Average vision score per game
• Control Wards: Average control wards placed per game
• Damage: Average damage dealt to champions
• Champion Stats: Most played and best performing champions
• Role Stats: Performance by role (Top, Jungle, Mid, ADC, Support)
• Best Game: Highest KDA performance

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

This project is licensed under the MIT License - see the LICENSE file for details.

• Riot Games API for match data
• Amazon Bedrock for AI insights
• AWS Amplify for hosting and deployment
• Framer Motion for animations

For issues, questions, or contributions, please open an issue on GitHub.

Check out the live application: https://dev.d2ou6wom2j852.amplifyapp.com

Made with ❤️ for the League of Legends community