todo-helden/README.md

📝 ToDo Kids - Aufgaben-App für Kinder

Eine kindgerechte To-Do-Listen-App mit verschiedenen Themes, Belohnungssystem und Firebase-Integration.

🌟 Features

🎨 Verschiedene Themes

• 🌈 Bunt & Fröhlich: Farbenfrohes Standard-Theme
• 🌲 Wald: Authentische Waldatmosphäre mit Bäumen und Tieren
• 🚀 Weltraum: Futuristische Weltraum-Optik mit Sternen und Planeten
• 🌊 Ozean: Unterwasser-Theme mit Fischen und Wellen
• 🌿 Natur: Grünes Natur-Theme mit Pflanzen

👨‍👩‍👧‍👦 Familien-Management

• Mehrere Kinder pro Familie
• Individuelle Profile und Einstellungen
• Altersgerechte Benutzeroberflächen

✅ Aufgaben-System

• Erstellen und Verwalten von Aufgaben
• Prioritäten und Kategorien
• Fortschrittsverfolgung
• Belohnungspunkte

🏆 Belohnungs-System

• Punkte sammeln für erledigte Aufgaben
• Achievements und Erfolge
• Motivierende Belohnungen

🛠️ Technologie-Stack

Frontend

• React 18.x
• Material-UI (MUI) 5.x
• React Router für Navigation
• Context API für State Management

Backend

• Node.js mit Express
• Firebase Authentication & Firestore
• JWT für Session-Management

Styling

• Material-UI Theming
• CSS-in-JS
• Responsive Design
• SVG-Animationen

🚀 Installation

Voraussetzungen

• Node.js (Version 16 oder höher)
• npm oder yarn
• Firebase-Projekt

1. Repository klonen

git clone <repository-url>
cd "ToDo Kids"

2. Dependencies installieren

# Backend Dependencies
npm install

# Frontend Dependencies
cd client
npm install
cd ..

3. Environment Variables einrichten

Backend (.env)

PORT=5000
JWT_SECRET=your_jwt_secret_here
FIREBASE_PROJECT_ID=your_firebase_project_id
FIREBASE_PRIVATE_KEY=your_firebase_private_key
FIREBASE_CLIENT_EMAIL=your_firebase_client_email

Frontend (client/.env)

REACT_APP_FIREBASE_API_KEY=your_api_key
REACT_APP_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
REACT_APP_FIREBASE_PROJECT_ID=your_project_id
REACT_APP_FIREBASE_STORAGE_BUCKET=your_project.appspot.com
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
REACT_APP_FIREBASE_APP_ID=your_app_id
REACT_APP_API_URL=http://localhost:5000/api

4. Firebase einrichten

1. Firebase-Projekt erstellen
2. Authentication aktivieren (Email/Password)
3. Firestore Database erstellen
4. Service Account Key generieren
5. Environment Variables konfigurieren

Detaillierte Anweisungen: FIREBASE_SETUP.md

🏃‍♂️ Entwicklung starten

Backend starten

npm run dev

Frontend starten

cd client
npm start

Die App ist dann verfügbar unter:

• Frontend: http://localhost:3000
• Backend: http://localhost:5000

📁 Projektstruktur

ToDo Kids/
├── client/                 # React Frontend
│   ├── public/
│   ├── src/
│   │   ├── components/     # Wiederverwendbare Komponenten
│   │   ├── contexts/       # React Context Provider
│   │   ├── firebase/       # Firebase Konfiguration
│   │   ├── pages/          # Seiten-Komponenten
│   │   └── themes/         # Theme-Definitionen
│   └── package.json
├── middleware/             # Express Middleware
├── models/                 # Datenmodelle
├── routes/                 # API Routes
├── .env                    # Backend Environment Variables
├── .gitignore
├── package.json
└── server.js              # Express Server

🎨 Theme-System

Das Theme-System ermöglicht es Kindern, ihre bevorzugte Optik zu wählen:

• Dynamische Themes: Jedes Kind kann sein eigenes Theme wählen
• SVG-Animationen: Lebendige, aber nicht ablenkende Animationen
• Responsive Design: Funktioniert auf allen Geräten
• Accessibility: Kindgerechte Farben und Kontraste

🔐 Sicherheit

• Firebase Authentication: Sichere Benutzeranmeldung
• JWT Tokens: Session-Management
• Input Validation: Schutz vor schädlichen Eingaben
• Environment Variables: Sensible Daten sind geschützt

🧪 Testing

# Frontend Tests
cd client
npm test

# Backend Tests (falls implementiert)
npm test

📦 Deployment

Frontend (Netlify/Vercel)

cd client
npm run build

Backend (Heroku/Railway)

npm start

🤝 Beitragen

1. Fork das Repository
2. Erstelle einen Feature Branch (git checkout -b feature/AmazingFeature)
3. Committe deine Änderungen (git commit -m 'Add some AmazingFeature')
4. Push zum Branch (git push origin feature/AmazingFeature)
5. Öffne einen Pull Request

📄 Lizenz

Dieses Projekt steht unter der MIT-Lizenz. Siehe LICENSE für Details.

📞 Support

Bei Fragen oder Problemen:

• Erstelle ein Issue im Repository
• Kontaktiere das Entwicklungsteam

🔄 Changelog

Version 1.0.0

• ✅ Grundlegende Aufgaben-Funktionalität
• ✅ Firebase-Integration
• ✅ 5 verschiedene Themes
• ✅ Familien-Management
• ✅ Belohnungssystem

---

Entwickelt mit ❤️ für Kinder und Familien