Svelte Soccer Team Gen

kevinlobos42

Soccer Draft Manager

A SvelteKit web application for managing recreational soccer groups, collecting player ratings through surveys, and automatically generating balanced teams using a snake draft algorithm.

Features

For Regular Users

Rate Players: Submit skill ratings (1-10 scale) for players in upcoming events
Update Ratings: Modify your previous ratings anytime before teams are drafted
View Teams: See generated team rosters with player ratings
Session Tracking: System remembers your previous submissions and pre-fills forms

For Administrators

Group Management: Create and manage soccer groups with password protection
Event Creation: Schedule events with custom dates and player lists
Player Management: Add/remove players for specific events
Manual Ratings: Override ratings for players as needed
Team Generation: Automatically create balanced teams based on survey ratings
Team Regeneration: Re-run the draft algorithm with different team counts

Tech Stack

Frontend: SvelteKit 2.49.1 + Svelte 5.45.6
Backend: Supabase (PostgreSQL + Authentication)
Styling: Tailwind CSS (utility-first CSS framework)
Deployment: Static adapter ready (Vercel, Netlify, etc.)

Getting Started

Prerequisites

Node.js 18+ and npm
Supabase account (free tier works)

Installation

Clone the repository:

git clone <your-repo-url>
cd sveltekit-soccer-draft

Install dependencies:
```
npm install
```
Set up Supabase:
- Create a new project at supabase.com
- Copy your project URL and anon key
- Create a .env file:
```
PUBLIC_SUPABASE_URL=your_supabase_project_url
PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
```
Set up the database schema (see Database Schema section below)
Run the development server:
```
npm run dev
```
Open http://localhost:5173

Database Schema

Run these SQL commands in your Supabase SQL Editor:

-- Groups table
CREATE TABLE groups (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  name TEXT NOT NULL,
  password_hash TEXT NOT NULL,
  admin_email TEXT,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Events table
CREATE TABLE events (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  group_id UUID REFERENCES groups(id) ON DELETE CASCADE,
  name TEXT NOT NULL,
  date DATE NOT NULL,
  player_names TEXT[] DEFAULT '{}',
  status TEXT DEFAULT 'survey' CHECK (status IN ('survey', 'drafted', 'completed')),
  teams JSONB,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- Survey responses table
CREATE TABLE survey_responses (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  event_id UUID REFERENCES events(id) ON DELETE CASCADE,
  respondent_name TEXT NOT NULL,
  player_name TEXT NOT NULL,
  rating DECIMAL(4,1) CHECK (rating >= 1 AND rating <= 10),
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  UNIQUE(event_id, respondent_name, player_name)
);

-- Enable Row Level Security
ALTER TABLE groups ENABLE ROW LEVEL SECURITY;
ALTER TABLE events ENABLE ROW LEVEL SECURITY;
ALTER TABLE survey_responses ENABLE ROW LEVEL SECURITY;

-- Public read access policies
CREATE POLICY "Public can read groups" ON groups FOR SELECT USING (true);
CREATE POLICY "Public can read events" ON events FOR SELECT USING (true);
CREATE POLICY "Public can read survey responses" ON survey_responses FOR SELECT USING (true);

-- Public write access (you can restrict this later)
CREATE POLICY "Public can insert groups" ON groups FOR INSERT WITH CHECK (true);
CREATE POLICY "Public can update groups" ON groups FOR UPDATE USING (true);
CREATE POLICY "Public can insert events" ON events FOR INSERT WITH CHECK (true);
CREATE POLICY "Public can update events" ON events FOR UPDATE USING (true);
CREATE POLICY "Public can insert survey responses" ON survey_responses FOR INSERT WITH CHECK (true);
CREATE POLICY "Public can delete survey responses" ON survey_responses FOR DELETE USING (true);

User Guide

Creating a Group

Navigate to the home page
Click "Create New Group"
Enter group name and set a password
Save the group ID (shown in URL) and password

Accessing a Group

As Regular User:

Enter group ID on home page
Enter the group password
Click "Join Group"

As Admin:

Enter group ID on home page
Click "Admin Login"
Enter the admin password

Creating an Event (Admin)

Log in to admin panel
Click "Create New Event"
Fill in event details:
- Event name
- Date and time
- Initial player list (comma-separated)
Click "Create Event"

Rating Players (User)

Join a group
Find the event with "Survey Open" status
Click "Rate Players"
Enter your name
Rate each player (1-10, can skip yourself)
Click "Submit Ratings"

Your ratings are saved and you can update them anytime before teams are drafted.

Generating Teams (Admin)

In admin panel, select an event
Click "Set Player Ratings" to review/adjust ratings
Optionally add manual ratings as admin
Click "Generate Teams"
Choose number of teams
Review the generated teams
Teams are automatically saved and visible to all users

Regenerating Teams (Admin)

If you're not happy with the team balance:

Find the event with "Teams Ready" status
Click "Regenerate Teams"
Choose a different number of teams if desired
New teams replace the old ones

How Team Generation Works

The app uses a snake draft algorithm to create balanced teams:

Players are ranked by their average survey rating (highest to lowest)
Admin manual ratings are included if provided (tagged as "ADMIN")
Players without ratings default to 5.0
Teams are filled in snake order:
- Round 1: Team 1 → Team 2 → Team 3 → Team 4
- Round 2: Team 4 → Team 3 → Team 2 → Team 1
- Round 3: Team 1 → Team 2 → Team 3 → Team 4
- (pattern repeats)
Total team ratings are calculated and rounded to 1 decimal place

This ensures each team gets a mix of high and low-rated players.

Project Structure

sveltekit-soccer-draft/
├── src/
│   ├── lib/
│   │   └── supabase.js          # Supabase client configuration
│   └── routes/
│       ├── +page.svelte          # Home page (group join/create)
│       ├── admin/
│       │   └── +page.svelte      # Admin panel
│       └── group/
│           └── [id]/
│               └── +page.svelte  # Group dashboard (user view)
├── static/                       # Static assets
├── .env                          # Environment variables (not in git)
├── package.json
├── svelte.config.js
├── tailwind.config.js
└── vite.config.js

Configuration

Environment Variables

PUBLIC_SUPABASE_URL: Your Supabase project URL
PUBLIC_SUPABASE_ANON_KEY: Your Supabase anonymous key

Both are marked with PUBLIC_ prefix as they're used client-side.

Adapters

Currently using @sveltejs/adapter-auto. For specific deployment targets:

# Vercel
npm install @sveltejs/adapter-vercel

# Netlify
npm install @sveltejs/adapter-netlify

# Node.js
npm install @sveltejs/adapter-node

Update svelte.config.js to use the desired adapter.

Development

# Development server with hot reload
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Check for errors
npm run check

Security Considerations

⚠️ Current Implementation:

Passwords are hashed with bcrypt before storage
No user authentication system (anonymous access)
Public read/write access to database (protected by RLS policies)
SessionStorage is used for tracking (client-side only)

For Production:

Implement proper authentication (Supabase Auth)
Restrict database policies to authenticated users
Add CSRF protection
Validate all inputs server-side
Rate limit API calls

Future Enhancements

User authentication and authorization
Email notifications for new events
Event attendance tracking
Team performance history
Player statistics over time
Mobile app version
Export teams to PDF/CSV

Contributing

Fork the repository
Create a feature branch
Make your changes
Test thoroughly
Submit a pull request

License

MIT License - feel free to use this for your own soccer groups!

Support

For issues or questions:

Check the CONTEXT.md file for technical details
Review Supabase logs for database errors
Check browser console for client-side errors

Acknowledgments

Built with:

Top categories