Organize pickup soccer games, manage player rosters, and auto-balance teams with a fairness algorithm.
- Browse & join games — see open matches, slot availability, and join with one click
- Player management — register players with defense, striker, and ball holding skill ratings (1–10)
- Auto-balance teams — serpentine draft + swap refinement algorithm balances teams across all three skill dimensions
- Admin panel — create games, manage players, reset demo data
- Dark themed UI — glassmorphism, gradients, animations, fully responsive
# Clone the repo
git clone <repo-url>
cd pickup-soccer
# Install dependencies
npm install
# Start the dev server
npm run devOpen http://localhost:5173 in your browser. Demo data (12 players, 2 games) loads automatically on first run.
| Page | What you can do |
|---|---|
| Home | Dashboard with stats and upcoming games |
| Games | Browse all games, filter by status, click to view details |
| Game Detail | Add/remove players, click Balance Teams to auto-split |
| Players | Add new players, edit skill ratings, delete players |
| Admin | Create new games, manage roster, reset demo data |
Teams are balanced using a two-phase approach:
- Serpentine draft — players sorted by composite score, then assigned in snake order (A, B, B, A, A, B, ...)
- Swap refinement — iteratively swap players between teams to minimize the cost function:
cost = |defenseGap| + |strikerGap| + |ballHoldingGap| + |overallGap|
This produces near-optimal splits for groups of 4–22 players.
node tests/balancer.test.jsRuns 32 unit tests covering even/odd splits, identical players, extreme skill gaps, and ball holding balance.
src/
├── main.js # Entry point, toast & confirm dialogs, routing
├── router.js # Hash-based SPA router
├── store.js # localStorage CRUD + demo data seeding
├── balancer.js # Team balancing algorithm
├── utils.js # Helpers (UUID, dates, avatars)
├── styles/
│ ├── index.css # Design system & layout
│ └── components.css# Cards, buttons, forms, tables, modals
└── views/
├── home.js # Dashboard
├── games.js # Game browser
├── game-detail.js# Roster & team display
├── players.js # Player management
└── admin.js # Admin panel
MIT