Full-stack product · 2026

Sports Team Manager

A football team workspace for organizing a roster, tracking player availability, building formation-aware lineups, and making faster matchday decisions.

View live product View source

Team overview

Matchday plan

Ready for kickoff

4-3-3

Roster

Available

Starting

Starting XI11 / 11

Bench priority

5 substitutes selected

READY

Role: Product design & full-stack development
Focus: Roster and matchday workflow management
Stack: Next.js, TypeScript, Supabase, Tailwind

The challenge

Matchday planning involves connected decisions.

Managing a football team means more than listing players. A coach needs to understand who is available, build a lineup that fits a formation, plan substitutes, and adjust quickly when plans change.

Sports Team Manager brings those decisions into one account-based workspace. The product connects roster data, player availability, starting-XI validation, and bench priority so the workflow stays clear from setup to matchday.

The solution

A focused workspace for roster-to-lineup decisions.

Create one secure team workspace per account

Add players with positions, shirt numbers, and availability

Build a formation-aware starting XI

Set bench priority and make direct same-position swaps

Product walkthrough

From roster setup to a ready lineup.

The product is designed to keep matchday information connected while supporting focused tasks at every step.

Sports Team Manager dashboard showing roster and lineup overview — Dashboard overview — roster availability, lineup readiness, and bench priority at a glance.

Sports Team Manager player roster with position and availability controls — Roster management — organize players by position and update their availability.

Sports Team Manager lineup builder with formation-aware player selection — Lineup builder — select a valid Starting XI and set bench priority.

Sports Team Manager settings page showing team and formation controls — Team settings — update team details, choose a formation, and safely reset a saved lineup.

Interaction detail

Direct starter-to-bench swaps.

Same-position swaps make quick lineup changes possible without breaking formation rules or rebuilding the team from scratch.

Explore the lineup builder

Technical approach

Designed around secure, persistent team data.

Next.js

App Router structure for the public landing page, authenticated workspace, and server-rendered data access.

TypeScript

Typed player, team, formation, availability, and lineup-selection models for safer workflow logic.

Supabase

Authentication, Postgres persistence, and Row Level Security for account-specific team data.

Tailwind CSS

A responsive dark dashboard system with desktop sidebar and mobile bottom navigation.

Engineering challenges

Protecting constraints without slowing the workflow.

Keeping formation selection valid

A starting XI is not just any collection of 11 players. The builder checks positional limits for the chosen formation and prevents users from saving an invalid lineup.

Supporting faster matchday changes

Removing a starter and re-adding a bench player is slow during lineup planning. I added direct same-position swaps so a user can preserve formation validity while changing personnel quickly.

Protecting user-owned data

The product stores teams, players, and lineup selections in Supabase. Row Level Security policies ensure that each authenticated user can only access data linked to their own team.

What’s next

A foundation for broader team operations.

Drag-and-drop lineup and bench ordering
Player editing beyond availability status
Match schedule, opponent context, and matchday notes
Support for multiple teams and staff roles

Explore more

See how I turn connected workflows into useful products.

View all work Start a conversation