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
```bash
git clone <repository-url>
cd "ToDo Kids"
```

### 2. Dependencies installieren
```bash
# Backend Dependencies
npm install

# Frontend Dependencies
cd client
npm install
cd ..
```

### 3. Environment Variables einrichten

#### Backend (.env)
```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)
```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](FIREBASE_SETUP.md)

## 🏃‍♂️ Entwicklung starten

### Backend starten
```bash
npm run dev
```

### Frontend starten
```bash
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

```bash
# Frontend Tests
cd client
npm test

# Backend Tests (falls implementiert)
npm test
```

## 📦 Deployment

### Frontend (Netlify/Vercel)
```bash
cd client
npm run build
```

### Backend (Heroku/Railway)
```bash
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](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**