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

# 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

# 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

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

# 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

# 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

## 📝 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

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

2. SVG-Animationen hinzufügen

   backgroundImage: 'url("data:image/svg+xml,...")',
   animation: 'my-animation 10s ease-in-out infinite',
   

3. Theme registrieren

   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

# 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! 🎉