todo-helden/CONTRIBUTING.md

# 🤝 Beitragen zu ToDo Kids

Vielen Dank für dein Interesse, zu ToDo Kids beizutragen! Wir freuen uns über jede Art von Beitrag.

## 🎯 Arten von Beiträgen

### 🐛 Bug Reports
- Verwende die GitHub Issues
- Beschreibe das Problem detailliert
- Füge Screenshots hinzu, wenn möglich
- Gib deine Browser-/System-Informationen an

### 💡 Feature Requests
- Öffne ein Issue mit dem Label "enhancement"
- Erkläre den Nutzen für Kinder und Familien
- Beschreibe die gewünschte Funktionalität

### 🎨 Theme-Beiträge
- Neue Themes sind sehr willkommen!
- Achte auf kindgerechte Farben und Designs
- Teste die Accessibility
- Füge SVG-Animationen hinzu (optional)

### 📝 Dokumentation
- Verbesserungen der README
- Code-Kommentare
- Tutorials und Guides

## 🚀 Entwicklungs-Workflow

### 1. Repository forken
```bash
# Fork das Repository auf GitHub
# Dann klone dein Fork
git clone https://github.com/DEIN-USERNAME/todo-kids.git
cd todo-kids
```

### 2. Development Environment einrichten
```bash
# Dependencies installieren
npm install
cd client && npm install && cd ..

# Environment Variables kopieren
cp .env.example .env
cp client/.env.example client/.env

# Firebase konfigurieren (siehe FIREBASE_SETUP.md)
```

### 3. Feature Branch erstellen
```bash
git checkout -b feature/amazing-new-feature
# oder
git checkout -b bugfix/fix-important-bug
# oder
git checkout -b theme/new-awesome-theme
```

### 4. Entwickeln und Testen
```bash
# Backend starten
npm run dev

# Frontend starten (neues Terminal)
cd client
npm start

# Tests ausführen
npm test
cd client && npm test
```

### 5. Code Style beachten

#### JavaScript/React
- Verwende ESLint-Konfiguration
- Funktionale Komponenten mit Hooks
- Aussagekräftige Variablennamen
- Kommentare für komplexe Logik

#### CSS/Styling
- Material-UI Theming verwenden
- Responsive Design beachten
- Accessibility-Standards einhalten

#### Git Commits
```bash
# Gute Commit-Messages
git commit -m "feat: add forest theme with animated trees"
git commit -m "fix: resolve login issue for child accounts"
git commit -m "docs: update installation instructions"
```

### 6. Pull Request erstellen

#### Vor dem PR
- [ ] Code funktioniert lokal
- [ ] Tests laufen durch
- [ ] Keine Console-Errors
- [ ] Responsive Design getestet
- [ ] Accessibility überprüft

#### PR-Beschreibung
```markdown
## 📝 Beschreibung
Kurze Beschreibung der Änderungen

## 🎯 Art der Änderung
- [ ] Bug Fix
- [ ] Neues Feature
- [ ] Breaking Change
- [ ] Dokumentation

## 🧪 Tests
- [ ] Bestehende Tests laufen durch
- [ ] Neue Tests hinzugefügt (falls nötig)

## 📱 Screenshots
(Falls UI-Änderungen)

## ✅ Checklist
- [ ] Code folgt den Style-Guidelines
- [ ] Self-Review durchgeführt
- [ ] Kommentare hinzugefügt
- [ ] Dokumentation aktualisiert
```

## 🎨 Theme-Entwicklung

### Neue Themes erstellen

1. **Theme-Datei erweitern**
   ```javascript
   // In client/src/themes/childThemes.js
   const myAwesomeTheme = createTheme({
     ...baseTheme,
     palette: {
       // Deine Farben
     },
     themeIcon: '🎭',
     components: {
       // Deine Styling-Overrides
     }
   });
   ```

2. **SVG-Animationen hinzufügen**
   ```javascript
   backgroundImage: 'url("data:image/svg+xml,...")',
   animation: 'my-animation 10s ease-in-out infinite',
   ```

3. **Theme registrieren**
   ```javascript
   export const childThemes = {
     // ... bestehende themes
     myAwesome: myAwesomeTheme,
   };
   ```

### Theme-Guidelines
- **Kindgerecht**: Helle, freundliche Farben
- **Accessibility**: Ausreichender Kontrast
- **Performance**: Optimierte SVGs
- **Konsistenz**: Einheitliches Design

## 🐛 Bug Fixes

### Debugging-Tipps
```bash
# Browser DevTools verwenden
# React DevTools installieren
# Console-Logs überprüfen

# Backend-Logs
npm run dev # Zeigt Server-Logs

# Frontend-Logs
# Browser Console öffnen
```

### Häufige Probleme
- **Firebase-Konfiguration**: Überprüfe .env-Dateien
- **CORS-Errors**: Backend/Frontend URLs prüfen
- **Theme-Probleme**: Browser-Cache leeren

## 📋 Code Review Process

### Was wir überprüfen
- **Funktionalität**: Arbeitet der Code wie erwartet?
- **Code Quality**: Ist der Code sauber und verständlich?
- **Performance**: Gibt es Performance-Probleme?
- **Security**: Sind Sicherheitsaspekte beachtet?
- **UX**: Ist die Benutzererfahrung gut?

### Review-Feedback
- Konstruktives Feedback geben
- Verbesserungsvorschläge machen
- Positive Aspekte hervorheben
- Bei Fragen nachfragen

## 🎯 Prioritäten

### Hoch
- Sicherheitslücken
- Kritische Bugs
- Accessibility-Verbesserungen

### Mittel
- Neue Features
- Performance-Optimierungen
- UI/UX-Verbesserungen

### Niedrig
- Code-Refactoring
- Dokumentation
- Nice-to-have Features

## 🏆 Anerkennung

Alle Beitragenden werden in der README erwähnt. Besonders wertvolle Beiträge werden speziell hervorgehoben.

## 📞 Hilfe bekommen

- **GitHub Issues**: Für Fragen und Diskussionen
- **Discussions**: Für allgemeine Gespräche
- **Email**: Für private Anfragen

## 📜 Code of Conduct

- Respektvoller Umgang miteinander
- Konstruktive Kritik
- Hilfsbereitschaft
- Fokus auf das Projekt

---

**Vielen Dank für deinen Beitrag zu ToDo Kids! 🎉**