2025-12-31 01:17:12 +01:00

3.6 KiB

Raw Blame History

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)

docker-compose up --build

App läuft unter http://localhost:3000

Lokal entwickeln

# Dependencies installieren
npm install

# Dev-Server starten (Hot Reload)
npm run dev

App läuft unter http://localhost:5173

Production Build

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

Team hinzufügen: Klick auf "Team hinzufügen" → Name & Schlachtruf eingeben → Bestätigen
Team löschen: 🗑️ Button in der Team-Card
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

// src/components/MyComponent.jsx
export default function MyComponent() {
  return <div>Hallo</div>
}

Custom Hook für State-Logik

// src/hooks/useMyLogic.js
import { useState } from 'react'

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

Tailwind Classes

<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

# 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

# Logs ansehen
docker-compose logs -f

# Container status
docker-compose ps

npm install Fehler lokal

rm -rf node_modules package-lock.json
npm install

3.6 KiB Raw Blame History