The Rift Oracle

Your Season, Your Story. An AI-powered agent that transforms your League of Legends match history into a mystical, 3D tarot card reading.

Comment

Inspiration

Like many League of Legends players, I've spent hours looking at my match history on stat-tracking websites. While they’re full of data, they always felt a bit… lifeless. My season’s journey—the epic wins, the crushing defeats, the time I tried to play jungle Singed and definitely didn't feed—was reduced to a spreadsheet. It looked more like a grocery list than an epic saga.

I was inspired by experiences like Spotify Wrapped that turn personal data into a fun, celebratory, and shareable story. I thought, "What if I could do that for League of Legends? What if I could consult a digital fortune teller to read the fate of our season?" My vision was to create an AI-powered agent that wouldn't just show you your KDA, but would find the legend hidden within your data.

What it does

The Rift Oracle is a fully deployed, AI-powered web application that transforms a player's year-long match history into a mystical, interactive 3D tarot reading.

A user enters their Player PUUID to summon the Oracle. In response, the application:

  1. Fetches and analyzes the player's entire season of aggregated performance data from a high-speed DynamoDB database.

  2. Generates a unique narrative using Amazon Bedrock's Claude 3 Haiku model, crafting a three-card tarot spread for the player's "Past," "Present," and "Future."

  3. Creates custom, one-of-a-kind art for each of the three tarot cards using the Amazon Bedrock Titan Image Generator model, based on the player's top champions and the Oracle's reading.

  4. Presents the reading in a stunning, interactive 3D scene built with React Three Fiber, where the player can click and rotate their cards to reveal their story.

Visualizes long-term trends with a performance chart, showing how the player's KDA and Win Rate evolved month-by-month, helping them identify periods of growth.

How I built it

The Rift Oracle is built on a modern, production-ready, full-stack architecture designed for scalability and resilience.

  • Backend "Brain" (API): The core of the application is a containerized FastAPI server. It's managed by Gunicorn for production-grade performance and packaged with Docker to ensure consistency. This container is deployed on an Amazon EC2 instance, sitting securely behind an Nginx reverse proxy that handles HTTPS traffic.

  • Data "Engine Room" (Data Pipeline): To handle the massive dataset, I wrote a custom Python script to act as a one-time ETL (Extract, Transform, Load) job. This backfill script processed thousands of raw match JSON files, aggregated key performance indicators, and loaded the data into Amazon DynamoDB. I designed the DynamoDB schema with a PlayerPUUID Partition Key and a RecordType Sort Key, allowing for highly efficient queries to fetch a player's entire profile, champion stats, and monthly time-series data in a single call.

  • AI "Magic" (Generative AI): The soul of the Oracle lies in Amazon Bedrock. I leveraged two different models:

    • Claude 3 Haiku: For its incredible speed and creative writing ability. I used detailed prompt engineering to instruct it to act as a mystical oracle and return its narrative in a structured JSON format, making it reliable for our application.
    • Titan Image Generator G1: To create the stunning, unique art for each tarot card, I send prompts that combine the AI-generated card titles with the player's champion, resulting in a truly personalized visual experience.

  • Frontend "Summoning Circle" (UI): The user interface is a modern React application built with Create React App. To achieve the fresh, fun, and engaging 3D experience, I used React Three Fiber and Drei, which allow for creating and managing 3D scenes directly within React. The entire frontend is deployed on AWS Amplify, which provides a global CDN and a seamless CI/CD pipeline connected to our GitHub repository.

Challenges I ran into

The journey to bring the Oracle to life was filled with trials worthy of a season on the Rift!

  • The Data Dragon: The biggest initial challenge was data acquisition. Realizing the "dataset" was actually an API, I had to build a robust Python collector script from scratch, carefully managing Riot's API rate limits to gather thousands of matches without getting timed out.

  • Deployment Demons: Deploying a full-stack, containerized application is a complex dance. I wrestled with a series of classic cloud development challenges:

    • The gunicorn not found error, teaching me the importance of including every dependency in requirements.txt.
    • The dreaded NoRegionError, which was a great lesson in making configuration explicit by using environment variables inside a container.
    • The final boss: a stubborn CORS issue. Debugging the interaction between the Amplify frontend, the Nginx proxy, and the FastAPI backend was a huge challenge, but solving it was incredibly rewarding.

  • Teaching an AI to Speak JSON: Getting the Claude 3 model to consistently return a perfectly formatted JSON object required several iterations of prompt engineering. I also ran into AWS's safety filters with the Titan Image Generator, which taught us to use negative prompts to guide the AI away from creating accidentally flagged content.

Accomplishments that I'm proud of

  • The Full-Stack Journey: In just a few days, this project went from an empty folder to a fully deployed, full-stack, cloud-native application.

  • True Generative AI Integration: I didn't just call a single AI model. I orchestrated two different Bedrock models for text and images to create a cohesive, multi-modal experience that is unique for every single user.

  • The 3D Interactive UI: Moving beyond standard web pages to create an immersive 3D scene with React Three Fiber was a huge and rewarding accomplishment that truly brings the "Oracle" theme to life.

  • Production-Ready Deployment: I didn't just get it working locally. The final application is containerized with Docker, deployed securely on EC2 behind a reverse proxy, and served globally via AWS Amplify—a professional-grade architecture.

What I learned

This hackathon was an incredible learning experience. My key takeaways are:

  1. Architecture is Everything: A well-designed, decoupled architecture isn't just an abstract concept. It makes debugging easier, development faster, and the final product more reliable.

  2. Generative AI is a Dance, Not a Command: You can't just order an AI to give you a perfect result every time. It requires thoughtful prompt engineering, clear instructions, and building resilient code (like our JSON parsing retry-loop) to handle the occasional unexpected output.

  3. The Cloud is a Fortress: Permissions are everything. Learning to navigate IAM roles, security groups, and CORS policies the hard way was a fantastic lesson in cloud security and operations.

What's next for The Rift Oracle

The Oracle's vision for the future is vast! The next steps would be to build on this powerful foundation:

  • The Constellation Map: Implement the social comparison feature, allowing two players to see their cosmic synergy (or lack thereof!).

  • The Shareable Scroll: Create a one-click button that uses a library like html-to-image to generate a beautiful, shareable PNG of a player's key stats and tarot reading, perfect for Twitter and Discord.

  • Deeper Insights: Leverage the raw S3 data to provide even more granular insights, such as warding habits, objective control tendencies, and champion-specific performance under different conditions.

Built With

Share this project:

Updates