147 lines
3.6 KiB
Markdown
147 lines
3.6 KiB
Markdown
# 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
|
|
```
|