Game Patch Notes AIO
Full-stack AI-powered dashboard that consolidates game patch notes & updates into a streamlined experience
TEAM
Sole Designer and Developer
TOOLS
Next.js, TypeScript, TailwindCSS, Gemini API
DURATION
2 days
OVERVIEW_
What's the problem?
Keeping up with multiple live-service games means constantly switching between tabs, like official patch note pages, developer blogs, Reddit threads, YouTube channels, etc. For players tracking even three or four titles, it's a pretty fragmented and time-consuming process that slowly builds up to be an annoyance.
Every time a new update dropped, I'd find myself scattered across tabs, losing time piecing together information that should have been in one place.
CHALLENGE_
My solution
At first glance, the solution seemed pretty straightforward: develop a single-page dashboard that centralizes patch notes and game updates for every title I follow, replacing the multi-tab workflow without sacrificing speed or usability.
PROCESS_
Design and engineering approach
My initial instinct was to use iframes to embed each game's update page directly. It was the fastest path to a working prototype, but it introduced a real UX problem: browser plugin conflicts and cross-origin restrictions meant content would silently fail to load for some users. An experience that works for me but breaks for others isn't a real solution.
So I changed course.
Instead of embedding external pages, I built a lightweight data pipeline. I created a games.json file cataloguing each game title I follow, along with the URL for that game's blog or news feed. On load, the app fetches the most recent article from each game's list - the source of truth, pulled directly rather than framed.
From there, I decided to integrate Gemini AI to read each article and generate a concise, high-level summary.
On the design aspect, I kept the layout to a single page so everything stays visible without navigating away, and structured each game's content consistently so users can scan across titles at a glance.
Architecture decisions
games.jsonas a config layer: decouples the data source from the UI, making it easy to add or remove games without touching component logicGemini AI summarization: transforms raw patch note articles into scannable overviews, reducing the reading load that was the original pain point
Loading skeleton states: AI summary generation takes a moment; skeleton screens give immediate visual feedback, making the perceived wait feel shorter, and the interface seem more responsive
Next.js: for server-side rendering and fast initial page loads
Tailwind CSS: for rapid, consistent styling without context-switching
Vercel: for zero-config deployment and a tight code-to-live feedback loop
What I built
A live, deployed web app that aggregates and AI-summarizes the latest patch notes and update articles for multiple game titles into a unified dashboard. I can now check in on all my followed games from one URL, no clutter, no walls of text to parse, and no tab-switching required.
OUTCOME_
Reflections on outcomes so far
I believe that pivoting away from iframes was the right move; it forced me to think of a more robust solution and directly address the compatibility issues that would have undermined the experience for users. The result is an architecture that's easier to maintain, easier to extend, and more reliable across environments.
What's next?
One direction I'm exploring is a structured agent card format that surfaces ability breakdowns alongside balance changes, making updates scannable at a glance rather than buried in text. The mockup below shows what this could look like in practice.
Further iterations can go deeper: pulling community reaction from Reddit or X alongside official notes would show not just what changed, but how players are responding to it. User customization, like pinning or reordering the game list, would make the tool feel personal rather than fixed.
This project was an intentional exercise in constraint-driven design: identify the real problem, challenge my first iteration when it falls short, and ship something that actually works. The result is a personal tool I can use daily and a foundation I'm excited to continue building on.
