Michi
0ebe7fa13d
Some checks failed
🚀 Continuous Integration / 🔧 Backend Tests (18.x) (push) Has been cancelled
🚀 Continuous Integration / 🔧 Backend Tests (20.x) (push) Has been cancelled
🚀 Continuous Integration / 🎨 Frontend Tests (18.x) (push) Has been cancelled
🚀 Continuous Integration / 🎨 Frontend Tests (20.x) (push) Has been cancelled
🚀 Continuous Integration / 🔍 Code Quality (push) Has been cancelled
🚀 Continuous Integration / 🔒 Security Checks (push) Has been cancelled
🚀 Continuous Integration / 🎨 Theme Tests (push) Has been cancelled
🚀 Continuous Integration / ♿ Accessibility Tests (push) Has been cancelled
🚀 Continuous Integration / 📱 Cross-Browser Tests (push) Has been cancelled
🚀 Continuous Integration / 🏗️ Build Tests (push) Has been cancelled
🚀 Continuous Integration / 📊 Performance Tests (push) Has been cancelled
🚀 Continuous Integration / 🎯 Integration Tests (push) Has been cancelled
🚀 Continuous Integration / ✅ All Tests Passed (push) Has been cancelled
107 lines
2.8 KiB
Markdown
107 lines
2.8 KiB
Markdown
# 🔥 Firebase Setup - Schnellstart
|
|
|
|
## 1. Firebase Projekt erstellen (5 Minuten)
|
|
|
|
### Schritt 1: Firebase Console
|
|
1. Gehe zu [Firebase Console](https://console.firebase.google.com/)
|
|
2. Klicke "Projekt hinzufügen"
|
|
3. Projektname: `todo-kids-app` (oder dein Wunschname)
|
|
4. Google Analytics: **Deaktivieren** (für einfacheren Start)
|
|
5. "Projekt erstellen" klicken
|
|
|
|
### Schritt 2: Authentication aktivieren
|
|
1. Im Firebase-Projekt: **Authentication** → "Loslegen"
|
|
2. **Sign-in method** Tab
|
|
3. **E-Mail/Passwort** aktivieren
|
|
4. **Speichern**
|
|
|
|
### Schritt 3: Firestore Database erstellen
|
|
1. **Firestore Database** → "Datenbank erstellen"
|
|
2. **Im Testmodus starten** wählen
|
|
3. Standort: **europe-west3** (Deutschland)
|
|
4. **Fertig**
|
|
|
|
### Schritt 4: Web-App registrieren
|
|
1. Projektübersicht → **Web-App hinzufügen** `</>`
|
|
2. App-Name: `ToDo Kids Web`
|
|
3. **App registrieren**
|
|
4. **Konfiguration kopieren** (wichtig!)
|
|
|
|
## 2. Lokale Konfiguration (2 Minuten)
|
|
|
|
### Firebase-Konfiguration einfügen
|
|
Öffne `client/.env` und ersetze die Platzhalter:
|
|
|
|
```env
|
|
REACT_APP_FIREBASE_API_KEY=AIzaSyC...
|
|
REACT_APP_FIREBASE_AUTH_DOMAIN=todo-kids-app.firebaseapp.com
|
|
REACT_APP_FIREBASE_PROJECT_ID=todo-kids-app
|
|
REACT_APP_FIREBASE_STORAGE_BUCKET=todo-kids-app.appspot.com
|
|
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=123456789
|
|
REACT_APP_FIREBASE_APP_ID=1:123456789:web:abc123
|
|
```
|
|
|
|
**Wichtig:** Verwende deine echten Werte aus der Firebase Console!
|
|
|
|
## 3. App starten
|
|
|
|
```bash
|
|
cd client
|
|
npm start
|
|
```
|
|
|
|
## 4. Testen
|
|
|
|
1. **Registrierung testen:**
|
|
- Gehe zu `/register`
|
|
- Erstelle einen Account
|
|
- Sollte funktionieren! ✅
|
|
|
|
2. **Login testen:**
|
|
- Gehe zu `/login`
|
|
- Melde dich an
|
|
- Dashboard sollte laden ✅
|
|
|
|
## 🚨 Häufige Probleme
|
|
|
|
### Problem: "Firebase: Error (auth/configuration-not-found)"
|
|
**Lösung:** Überprüfe deine `.env` Datei - alle Werte müssen korrekt sein
|
|
|
|
### Problem: "Firebase: Error (auth/api-key-not-valid)"
|
|
**Lösung:** API Key in `.env` ist falsch - kopiere ihn nochmal aus Firebase Console
|
|
|
|
### Problem: "Firestore: Missing or insufficient permissions"
|
|
**Lösung:**
|
|
1. Firebase Console → Firestore Database → Rules
|
|
2. Ändere zu:
|
|
```javascript
|
|
rules_version = '2';
|
|
service cloud.firestore {
|
|
match /databases/{database}/documents {
|
|
match /{document=**} {
|
|
allow read, write: if request.auth != null;
|
|
}
|
|
}
|
|
}
|
|
```
|
|
3. **Veröffentlichen** klicken
|
|
|
|
## 🎉 Fertig!
|
|
|
|
Deine App läuft jetzt mit Firebase!
|
|
|
|
**Vorteile:**
|
|
- ✅ Kein lokaler Server nötig
|
|
- ✅ Automatische Backups
|
|
- ✅ Skaliert automatisch
|
|
- ✅ Professionelle Authentication
|
|
- ✅ Kostenlos für kleine Apps
|
|
|
|
## 📱 Nächste Schritte
|
|
|
|
1. **Sicherheitsregeln verfeinern** (später)
|
|
2. **Offline-Support aktivieren** (automatisch)
|
|
3. **Push-Benachrichtigungen** (optional)
|
|
4. **Analytics hinzufügen** (optional)
|
|
|
|
**Viel Spaß mit deiner Firebase-App! 🚀** |