Construye una app web completa + backend (Google AI Studio + Firebase)

Configuración inicial

Crea un proyecto de Firebase Registra la aplicación web Habilita la autenticación por correo y contraseña Habilita el inicio de sesión con Google Actualiza el nombre del remitente en las plantillas de correo de autenticación Copia la configuración del SDK web de Firebase

Requisito para el inicio de sesión con Google

El inicio de sesión con Google puede no funcionar hasta que la app esté desplegada y el dominio en vivo se añada a Firebase Authorized Domains.

Guía de despliegue

Ver la guía de despliegue

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

Conectar Firebase Authentication

Conecta el proyecto de Google AI Studio con Firebase y habilita el registro, el inicio y el cierre de sesión.

Conectar Firebase Authentication

Conecta mi aplicación web existente a Firebase usando este SDK...

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

Configuración de Firebase (firebaseConfig)

Pega aquí tu objeto firebaseConfig

Implementar la verificación por email

Envía un correo de verificación, impide el inicio de sesión automático y bloquea el acceso hasta que el correo esté verificado.

Implementar la verificación por email

Implementa la verificación de correo usando únicamente 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.

Configuración de Firestore

Crea la base de datos de Firestore Elige la edición Standard Selecciona la región de la base de datos Selecciona el modo Production Añade y publica las reglas de seguridad de Firestore

Reglas de seguridad de Firestore (aislamiento de datos por usuario)

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; } } } }

Añadir secciones del panel de Firestore

Crea las secciones del panel para archivos, notas y miembros del equipo, y conéctalas a Firestore.

Añadir secciones del panel de Firestore

Añade secciones dinámicas al panel que guarden y carguen los datos del usuario desde Firestore.

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

Configuración de Storage

Habilita Firebase Storage Vincula una cuenta de facturación y cambia al plan Blaze Elige la ubicación del almacenamiento Selecciona el modo Production Añade y publica las reglas de seguridad de Firebase Storage

Se requiere facturación para habilitar Storage. Solo se aplican cargos si el uso supera los límites gratuitos incluidos.

Reglas de seguridad de Firebase Storage (aislamiento de archivos por usuario)

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; } } }

Conectar mis archivos a Firebase Storage

Conectar mis archivos a Firebase Storage

Conecta el sistema de subida de archivos de la app a Firebase Storage usando carpetas seguras por usuario.

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.

Verifica la interfaz de usuario dinámica

Inicia sesión con una cuenta verificada Confirma que la interfaz reconoce al usuario conectado Verifica que el panel carga los datos del usuario desde Firestore Confirma que los archivos subidos aparecen correctamente

Añade el límite de archivos del plan gratuito

Añadir límite de archivos del plan gratuito

Limita cuántos archivos pueden subir los usuarios gratuitos y muestra un mensaje de mejora al alcanzar el límite.

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.

Prueba el límite del plan gratuito

Sube archivos hasta alcanzar el límite gratuito Confirma que se bloquean las subidas adicionales Verifica que el mensaje de mejora aparece correctamente

Copia el mismo proyecto de Google AI Studio usado en el vídeo y añádelo a tu cuenta.

Proyecto VaultFlow

Proyecto de Google AI Studio usado en el tutorial

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

Cómo usarlo

Abre el enlace del proyecto de arriba. Inicia sesión en tu cuenta de Google si es necesario. Haz clic en “Copy” dentro de Google AI Studio. El proyecto se añadirá a tu cuenta y podrás editarlo por completo.

Nota importante

Después de copiar el proyecto, sustituye la configuración de Firebase incluida por tu propia configuración del SDK web de Firebase.