# Volleyball Team Manager - React Web App

Eine moderne React-Webapp zur Verwaltung von Volleyball-Teams in zwei vordefinierten Gruppen (Bundesliga & Champions League). Mit hoher Usability, responsivem Design und lokaler Datenspeicherung.

## Features

- 🏐 Zwei vordefinierte Gruppen: Volleyball Bundesliga & Champions League
- 🎽 Teams mit Namen und Schlachtruf anlegen
- 💾 Lokale Speicherung im Browser (localStorage)
- 📱 Vollständig responsive (Mobil, Tablet, Desktop)
- ✨ Moderne UI mit Tailwind CSS
- 🎬 Smooth Animations & Übergänge
- 🚀 Schnell (Vite Build)
- 🐳 Docker Multi-stage Build

## Tech Stack

- **Frontend**: React 18 + Vite
- **Styling**: Tailwind CSS 3
- **Storage**: Browser localStorage
- **Server**: nginx (Alpine)
- **Container**: Docker & Docker Compose

## Schnellstart

### Mit Docker (Production)
```bash
docker-compose up --build
```
App läuft unter `http://localhost:3000`

### Lokal entwickeln
```bash
# Dependencies installieren
npm install

# Dev-Server starten (Hot Reload)
npm run dev
```
App läuft unter `http://localhost:5173`

### Production Build
```bash
npm run build
npm run preview
```

## Ordnerstruktur

```
.
├── src/
│   ├── components/        # React Components
│   │   ├── Header.jsx
│   │   ├── GroupSection.jsx
│   │   ├── TeamForm.jsx
│   │   ├── TeamCard.jsx
│   │   └── Toast.jsx
│   ├── hooks/            # Custom Hooks
│   │   └── useTeams.js   # localStorage Management
│   ├── App.jsx           # Main App Component
│   ├── main.jsx          # Entry Point
│   └── index.css         # Global Styles & Tailwind
├── nginx/
│   └── nginx.conf        # Web-Server Konfiguration
├── public/               # Static Assets
├── package.json          # Dependencies
├── vite.config.js        # Vite Config
├── tailwind.config.js    # Tailwind Config
├── postcss.config.js     # PostCSS Config
├── Dockerfile            # Multi-stage Docker Build
└── docker-compose.yml    # Docker Compose Config
```

## Verwendung

1. **Team hinzufügen**: Klick auf "Team hinzufügen" → Name & Schlachtruf eingeben → Bestätigen
2. **Team löschen**: 🗑️ Button in der Team-Card
3. **Alle löschen**: "Alle Teams löschen" Button

Teams werden lokal im Browser gespeichert (localStorage) und bleiben erhalten bis der Cache geleert wird.

## Development

### Neue Component hinzufügen
```jsx
// src/components/MyComponent.jsx
export default function MyComponent() {
  return <div>Hallo</div>
}
```

### Custom Hook für State-Logik
```jsx
// src/hooks/useMyLogic.js
import { useState } from 'react'

export function useMyLogic() {
  const [state, setState] = useState()
  return { state, setState }
}
```

### Tailwind Classes
```jsx
<button className="btn-primary">Primary</button>
<button className="btn-danger">Danger</button>
<input className="input-field" />
```

## Performance

- Vite: ~1.5s dev server startup
- React Fast Refresh: Code ändern → sofort im Browser sichtbar
- Docker: Optimierter Multi-stage Build (nur ~50MB production image)

## Browser-Unterstützung

Alle modernen Browser (Chrome, Firefox, Safari, Edge) mit ES6+ Support.

## Troubleshooting

### Docker Build schlägt fehl
```bash
# Cache löschen und neu bauen
docker-compose build --no-cache

# Oder komplett aufräumen
docker-compose down -v
docker system prune -a
```

### localhost:3000 nicht erreichbar
```bash
# Logs ansehen
docker-compose logs -f

# Container status
docker-compose ps
```

### npm install Fehler lokal
```bash
rm -rf node_modules package-lock.json
npm install
```