Baue eine komplette Web-App + Backend (Google AI Studio + Firebase)

Initiale Konfiguration

Firebase-Projekt erstellen Web-App registrieren Authentifizierung per E-Mail/Passwort aktivieren Google-Anmeldung aktivieren Absendernamen in den Authentifizierungs-E-Mail-Vorlagen aktualisieren Firebase-Web-SDK-Konfiguration kopieren

Voraussetzung für die Google-Anmeldung

Die Google-Anmeldung funktioniert möglicherweise erst, wenn die App deployt und die Live-Domain zu Firebase Authorized Domains hinzugefügt wurde.

Deployment-Anleitung

Sieh dir die Deployment-Anleitung an

https://youtu.be/HGs-4QjyjHQ?si=9fXzfJtkd3UNsqhQ

Firebase Authentication verbinden

Verbinde das Google-AI-Studio-Projekt mit Firebase und aktiviere Registrierung, Login und Logout.

Firebase Authentication verbinden

Verbinde meine bestehende Web-App über dieses SDK mit Firebase...

Connect my existing web app to Firebase using this SDK: {{FIREBASE_CONFIG}} Requirements: - Use Firebase Authentication only - Do NOT use Firestore or Storage yet - Do NOT redesign the UI Authentication behavior: - Users can sign in using email and password - If credentials are incorrect, show: "Email or password is incorrect" - Users can sign up using email and password - If the email already exists, show: "User already exists. Please sign in" For now: - Authenticate users only - Do NOT save user profile data Flow: - On successful sign-in or sign-up, redirect to the dashboard - Add a logout button that signs the user out and returns to the auth screen

Firebase-Konfiguration (firebaseConfig)

Füge hier dein firebaseConfig-Objekt ein

E-Mail-Verifizierung implementieren

Sende eine Bestätigungs-E-Mail, verhindere die automatische Anmeldung und sperre den Zugriff, bis die E-Mail bestätigt ist.

E-Mail-Verifizierung implementieren

Implementiere die E-Mail-Verifizierung ausschließlich mit Firebase Authentication...

Implement email verification using Firebase Authentication only. - When a user registers with email/password, do not sign them in automatically. - Send a verification email and show a verification screen with this message: “We have sent you a verification email to [user email]. Please verify it and log in.” - Include a Login button on the verification screen. - If a user logs in and their email is not verified, block access and show the same verification screen. - Do not use Firestore or any database — Firebase Authentication only.

Firestore-Konfiguration

Firestore-Datenbank erstellen Standard-Edition wählen Datenbank-Region auswählen Production-Modus auswählen Firestore-Sicherheitsregeln hinzufügen und veröffentlichen

Firestore-Sicherheitsregeln (Datenisolation pro Nutzer)

rules_version = '2'; service cloud.firestore { match /databases/{database}/documents { // Root user document match /users/{userId} { allow read, write: if request.auth != null && request.auth.uid == userId; // Anything nested inside this user: // subcollections, documents, folders, files, unlimited levels match /{allPaths=**} { allow read, write: if request.auth != null && request.auth.uid == userId; } } } }

Firestore-Dashboard-Bereiche hinzufügen

Erstelle die Dashboard-Bereiche für Dateien, Notizen und Teammitglieder und verbinde sie mit Firestore.

Firestore-Dashboard-Bereiche hinzufügen

Füge dynamische Dashboard-Bereiche hinzu, die Nutzerdaten in Firestore speichern und daraus laden.

Enhance the current dashboard by adding 3 fully functional sections: 1) My Files 2) My Notes 3) Team Members IMPORTANT RULES: - Use Firebase Authentication + Firestore only. - Do NOT use browser prompts (window.prompt / alert). - Use clean in-app modals for all actions. - Each user sees ONLY their own data. - Keep the existing VaultFlow UI style (cards, spacing, buttons). ==================== DATA STRUCTURE ==================== Use Firestore under the authenticated user: users/{uid} - displayName - email - plan - createdAt users/{uid}/folders/{folderId} - name - createdAt users/{uid}/files/{fileId} - name - folderId (optional) - size - createdAt (Note: metadata only, no real uploads yet) users/{uid}/notes/{noteId} - title - content (optional) - createdAt users/{uid}/teamMembers/{memberId} - name - role (optional) - createdAt ==================== UI BEHAVIOR ==================== My Files - Buttons: "New Folder" and "Add File" - Show folders and files - Empty state + loading state My Notes - Button: "New Note" - Show notes as cards - Empty state + loading state Team Members - Button: "Add Member" - Show list of members - Empty state + loading state ==================== MODALS (NO BROWSER PROMPTS) ==================== - New Folder: input name → save to Firestore - Add File: name + optional folder + size → save - New Note: title + content → save - Add Member: name + role → save All modals: - Cancel / Create - Validation - Loading state - Update UI instantly after save ==================== SECURITY ==================== Add Firestore rules so: - Only the logged-in user can read/write their own data - request.auth.uid must match {uid} ==================== RESULT ==================== After refresh: - Data persists - Buttons work - Counts update - No browser dialogs - Dashboard feels like a real SaaS app

Storage-Konfiguration

Firebase Storage aktivieren Abrechnungskonto verknüpfen und auf den Blaze-Plan upgraden Speicherort auswählen Production-Modus auswählen Sicherheitsregeln für Firebase Storage hinzufügen und veröffentlichen

Für die Aktivierung von Storage ist eine Abrechnung erforderlich. Kosten entstehen nur, wenn die enthaltenen kostenlosen Limits überschritten werden.

Firebase Storage-Sicherheitsregeln (Datei-Isolation pro Nutzer)

rules_version = '2'; service firebase.storage { match /b/{bucket}/o { match /user_uploads/{uid}/{allPaths=**} { allow read, write: if request.auth != null && request.auth.uid == uid; } } }

Meine Dateien mit Firebase Storage verbinden

Meine Dateien mit Firebase Storage verbinden

Verbinde das Datei-Upload-System der App mit Firebase Storage und nutze sichere Ordner pro Nutzer.

Connect the existing “My Files” section to Firebase Storage + Firestore. CONTEXT - Firebase Auth + Firestore already work in this project. - Firebase Storage is enabled. - Storage rules allow only: /user_uploads/{uid}/{allPaths=**} for the logged-in user. GOAL Make these buttons fully functional: 1) Add File (upload) 2) Download 3) Delete And keep the current UI style (table, buttons, spacing). No redesign. IMPORTANT RULES - Use Firebase Authentication + Firestore + Firebase Storage only. - Do NOT use browser prompts (window.prompt/alert). - Use clean in-app modal for “Add File”. - Each user sees ONLY their own files. - Upload path MUST be: user_uploads/{uid}/{fileName} - Save metadata in Firestore under: users/{uid}/files/{fileId} UI BEHAVIOR A) Add File button - Open an in-app modal: “Upload File” - Inside modal: - File picker (click to choose file) using a hidden <input type="file"> - Optional: select folder (if folders exist) - Upload button - Show upload progress (percentage) + loading state - When upload finishes: - Save metadata doc to Firestore: users/{uid}/files/{fileId} with: - name (original file name) - storagePath (e.g. user_uploads/{uid}/{fileId}-{name}) - downloadURL - size - type (mimeType) - folderId (optional) - createdAt (serverTimestamp) - Update the UI immediately (add row in the table) B) Display files - In “My Files” table, show: - name - type - size - actions: Download + Delete - Use the Firestore list under users/{uid}/files ordered by createdAt desc. C) Download button - Use the stored downloadURL from Firestore - Open it safely in a new tab OR trigger download (but no alert). D) Delete button - Delete from Storage using storagePath - Then delete the Firestore document - Update UI instantly EDGE CASES - If user is not logged in, block access. - Handle errors with inline UI message in the modal (no alerts). - Prevent double uploads (disable button during upload). - If upload fails, show error message. DELIVERABLE - Implement the missing handlers, modal, and Storage/Firestore logic. - Keep current design. Do not refactor unrelated code.

Dynamische Benutzeroberfläche überprüfen

Mit einem verifizierten Konto anmelden Bestätigen, dass die Oberfläche den angemeldeten Nutzer erkennt Prüfen, ob das Dashboard die Firestore-Daten des Nutzers lädt Bestätigen, dass hochgeladene Dateien korrekt erscheinen

Dateilimit des kostenlosen Plans hinzufügen

Datei-Limit für den kostenlosen Plan hinzufügen

Begrenze, wie viele Dateien kostenlose Nutzer hochladen können, und zeige beim Erreichen des Limits eine Upgrade-Meldung.

Add a free-plan limit to this app: • Max files allowed: 5 • Count files under: users/{uid}/files • If file count >= 5: – Disable Add File – Show message: “You’ve reached the free plan limit.” – Add an Upgrade button that opens a simple modal (title: “Upgrade your plan”, text + Close button) No real payments. UI only. Keep current design. Apply logic only to the logged-in user.

Limit des kostenlosen Plans testen

Dateien hochladen, bis das kostenlose Limit erreicht ist Bestätigen, dass weitere Uploads blockiert werden Prüfen, ob die Upgrade-Meldung korrekt erscheint

Kopiere dasselbe Google-AI-Studio-Projekt aus dem Video und füge es deinem Konto hinzu.

VaultFlow-Projekt

Im Tutorial verwendetes Google-AI-Studio-Projekt

https://aistudio.google.com/app/prompts?state=%7B%22ids%22:%5B%221P-lytf__6kOkQnOcczVdgIbnOWuRwNF0%22%5D,%22action%22:%22open%22,%22userId%22:%22112386544465239683494%22,%22resourceKeys%22:%7B%7D%7D&usp=sharing

Anleitung zur Verwendung

Öffne den Projektlink oben. Melde dich bei Bedarf in deinem Google-Konto an. Klicke in Google AI Studio auf „Copy“. Das Projekt wird deinem Konto hinzugefügt und ist vollständig bearbeitbar.

Wichtiger Hinweis

Ersetze nach dem Kopieren des Projekts die mitgelieferte Firebase-Konfiguration durch deine eigene Firebase-Web-SDK-Konfiguration.