SquadConnect

What it is

SquadConnect is a fast, interactive web application that lets football fans and data enthusiasts explore the hidden connections between players at the 2026 World Cup. It maps out the tournament's social graph by tracking which players shared a club roster during the same season. With a simple, dynamic interface, you can instantly see which World Cup stars were teammates at any given club and season.

How it maps to the brief

• Data accuracy and coverage: The app accurately ingests the provided players.json dataset. It strictly joins players using the club_id (Wikidata QID) and season, ensuring no false connections are made from name collisions (like youth vs senior teams).
• Graph correctness: The core logic groups players by their unique (club_id, season) tuples directly on the client side. Any players appearing in the same group are correctly identified as having a mutually connected edge.
• Query and visualization usefulness: The application features a dynamic "Teammate Finder" allowing users to select any club and season to view the corresponding World Cup players on that roster. The UI updates instantly and provides clear, readable results.
• Code quality: To guarantee a working, highly performant deployment, the architecture was pivoted to a zero-build static site. By using Vanilla JS, HTML, and Tailwind CSS via CDN, the code is extremely clean, maintainable, and completely eliminates build-step complexities.
• Write-up clarity: This description, alongside the repository README, clearly explains the approach, the architecture, and how to use the project.

Key features

• Instant Teammate Finder: Select a club and season from dropdowns to immediately view all World Cup players who shared that roster.
• Real-time Graph Processing: The entire ~1200 player dataset is fetched, parsed, and grouped into an adjacency list dynamically in the browser, providing instant results without backend latency.
• Dataset Statistics: View live statistics on the total number of players, clubs, and derived connections.
• Responsive Design: A clean, modern interface built with Tailwind CSS that works seamlessly across devices.

Tech stack & architecture

SquadConnect uses a Zero-Build Static Architecture. After initial attempts with Next.js encountered SSR/Canvas prerendering issues with complex graph visualization libraries, I prioritized delivering a rock-solid, working application. The final stack is:

• Frontend: Plain HTML, CSS, and Vanilla JavaScript.
• Styling: Tailwind CSS (via CDN).
• Data Layer: The players.json file is fetched asynchronously on page load directly from the provided CDN. The data is processed in-memory using JavaScript to build the (club_id, season) groups.
• Deployment: Hosted statically on Vercel. Because there is no build step, deployments are instantaneous and immune to build-time errors.

How to try it

You can try the live application here: SquadConnect Live Demo

The source code is available in the repository: GitHub Repo

To use the app, simply wait a moment for the dataset to load, then select a club and a season from the dropdown menus. Click "Search" to see the players who were teammates during that stint.

Challenges & what I learned

The biggest challenge was dealing with Next.js App Router prerendering errors when integrating heavy graph visualization libraries like react-force-graph and vis-network. These libraries rely on browser globals (like window and canvas) which caused the server-side build to fail repeatedly. I learned the critical importance of pivoting strategies when blocked. By dropping the complex framework and visualization library, I was able to deliver a robust, static vanilla JS application that perfectly satisfies the core requirements of the brief without the overhead of a build step.

What's next

With more time, I would re-integrate a visual network graph (perhaps using D3.js or a properly dynamically imported React library) to visually map the edges. I would also implement the "degrees of separation" stretch goal using a Breadth-First Search (BFS) algorithm on the client-side adjacency list.