I haven’t been a frontend developer for nearly fifteen years. The last time I seriously worked on frontend development was at my first startup, where we built a native mobile app for iOS and Android using Xamarin. Those Xamarin skills were really an extension of my earlier years working heavily with WPF and Silverlight between 2007 and 2010. After that, my career shifted almost entirely into backend engineering.

For a long time, modern frontend frameworks felt like something happening somewhere else. I even started looking into taking React courses just to catch up. I bought a React course on Udemy with every intention of learning it properly, but I still haven’t logged more than an hour in it.

And yet, in the age of AI, I somehow find myself vibe coding React like a boss.

Building a Visual Timeline for Multiplayer Games

One of the newest screens I added to my social deduction game, The Last Republic, is a Game History Panel that visualizes game activity over a rolling twenty-four hour window.

The screen functions like a Gantt chart for multiplayer sessions. Every row represents a game, and the timeline shows exactly when that game existed throughout the day. Instead of looking through raw database records or backend logs, I can now visually understand how players are interacting with the system.

Looking at the chart immediately tells a story.

Games displayed as open circles are lobbies that were created but never started. They exist in a waiting state where players may have joined, but gameplay never actually began. Purple timelines represent games that started but never properly completed. In practice, these are usually abandoned or stalled sessions where players stopped participating and the game never officially closed out.

The completed games are much more satisfying to look at. These are color coded red or blue depending on the winning side, and because they reached a definitive conclusion, the panel can render both a precise start time and end time. Some games lasted only a few minutes while others stretched much longer across the timeline.

What I like most about this visualization is how quickly it surfaces behavioral patterns. You can immediately spot successful sessions, abandoned lobbies, stalled games, and periods of high activity without reading a single log entry.

The panel also ended up looking far better than I expected considering how rusty my frontend skills are. The dark theme, timeline markers, and color coding give it the feel of an operational dashboard rather than a simple admin screen.

Filtering by Players and Human Participation

Once the timeline itself was working, I added filtering capabilities to make the data more useful.

The first filter allows the history panel to show games involving specific players. Right now the player list is still relatively small, but hopefully that becomes a very long list over time as more people discover the game.

I also added filtering based on the number of human players in a session. Since The Last Republic supports AI participants, this becomes surprisingly useful. It allows me to separate games that were mostly AI-filled from games where multiple real players actively participated.

That distinction matters because player behavior changes dramatically depending on how human-heavy the lobby is. Fully human games tend to be more active and unpredictable, while AI-assisted games often move much faster and complete more reliably.

I also added a filter based on how many human players a game had.

Discovering Failure Modes Through Visualization

One unexpected benefit of building this panel is that it exposed user experience problems almost immediately.

The best example is the game titled Frogger shown near the bottom of the chart. Two human players joined the lobby, but the game owner never triggered the “fill with AI players” action required to complete the roster and start the match. As a result, the game remained permanently stuck in the waiting state.

Most likely, the game owner simply abandoned the session. The second player probably sat idle waiting for either more humans to join or for the owner to fill the remaining seats with AI players before eventually giving up as well.

Another example is this game that is still “In Progress” where four human players joined and started the game.

However, the game stalled because some of the players were running into issues using the game on their mobile phones — an issue I fixed later — but caused the players to abandon the game. It’s still technically in progress but it would require a significant miracle for all four of those human players to come back to restart the game.

Without this visualization, that would have just looked like another incomplete database row. On the timeline, though, the problem becomes instantly obvious.

That is something I increasingly appreciate about building operational tooling and internal dashboards. Visualization often exposes product flaws faster than metrics or logs ever could. Human behavior becomes much easier to reason about when you can literally see the lifecycle of every session laid out across time.

Conclusion

What makes this especially funny to me is that I never expected to come back to frontend development at all.

For years, modern frontend ecosystems looked intimidating simply because I had been away from them for so long. React, hooks, component libraries, state management, build systems — it all felt like an entirely different world from the WPF and Silverlight era I came from.

But AI dramatically changes the barrier to entry.

Instead of spending weeks learning framework conventions before becoming productive, I can iterate rapidly by collaborating with AI while still relying on my engineering instincts for architecture, debugging, and product design. I may not know every modern React pattern by memory, but I know what good software should do and how users are supposed to experience it.

AI fills in the syntax gaps surprisingly well.

Ironically, I still barely touched that React course.