Pro Manager: player comparison and squad management

Pro Manager is a web application for sports management. It manages a player squad, compares their attributes and builds a tactical formation. This note documents its main sections and the technical decisions behind them.

Comparator

The comparison section takes two players and overlays their attributes on a radar chart; side bars break down each metric separately. The goal is to read differences visually rather than from a table.

Squad and formation

Squad management handles the players and places the formation on the pitch. Each player is a card with their position and rating; the formation updates as they are repositioned.

AI assistant

I added an integrated conversational assistant: a chat to query the squad in natural language, like talking to a sports analyst. Users can ask anything about the players without browsing tables or filters — e.g. “who is the fastest player by their attributes” or “which midfielders have good vision”.

The integration follows a secure server-side proxy architecture. The frontend sends the chat history to its own API route (Next.js); that route adds the 25 players' data as a system prompt and calls OpenRouter. The API key lives only on the server (environment variable) and is never exposed to the client.

To guarantee availability I implemented an automatic fallback over a prioritized list of free models: if the first one fails due to load, it retries with the next. Responses are rendered as Markdown.

Technical decisions

Built with Next.js and TypeScript, with typing over the player data. Radar and bar charts use Recharts. The interface is dark and high-contrast to keep attention on the data.

Status

The application is deployed and available to try in the demo linked above.