Crea un'app web completa + backend (Google AI Studio + Firebase)

Configurazione iniziale

Crea un progetto Firebase Registra l'app web Abilita l'autenticazione con e-mail e password Abilita l'accesso con Google Aggiorna il nome del mittente nei modelli e-mail di autenticazione Copia la configurazione dell'SDK web di Firebase

Requisito per l'accesso con Google

L'accesso con Google potrebbe non funzionare finché l'app non viene pubblicata e il dominio live non viene aggiunto a Firebase Authorized Domains.

Guida al deploy

Guarda la guida al deploy

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

Collegare Firebase Authentication

Collega il progetto Google AI Studio a Firebase e abilita registrazione, accesso e disconnessione.

Collegare Firebase Authentication

Collega la mia app web esistente a Firebase usando questo 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

Configurazione di Firebase (firebaseConfig)

Incolla qui il tuo oggetto firebaseConfig

Implementare la verifica via e-mail

Invia un'e-mail di verifica, impedisci l'accesso automatico e blocca l'accesso finché l'e-mail non è verificata.

Implementare la verifica via e-mail

Implementa la verifica e-mail usando solo 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.

Configurazione di Firestore

Crea il database Firestore Scegli l'edizione Standard Seleziona la regione del database Seleziona la modalità Production Aggiungi e pubblica le regole di sicurezza di Firestore

Regole di sicurezza di Firestore (isolamento dei dati per utente)

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

Aggiungere sezioni Firestore alla dashboard

Crea le sezioni della dashboard per file, note e membri del team, poi collegale a Firestore.

Aggiungere sezioni Firestore alla dashboard

Aggiungi sezioni dinamiche alla dashboard che salvino e carichino i dati utente da 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

Configurazione di Storage

Abilita Firebase Storage Collega un account di fatturazione e passa al piano Blaze Scegli la posizione dello storage Seleziona la modalità Production Aggiungi e pubblica le regole di sicurezza di Firebase Storage

Per abilitare Storage è necessaria la fatturazione. I costi si applicano solo se l'utilizzo supera i limiti gratuiti inclusi.

Regole di sicurezza di Firebase Storage (isolamento dei file per utente)

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

Collegare i miei file a Firebase Storage

Collegare i miei file a Firebase Storage

Collega il sistema di caricamento file dell'app a Firebase Storage usando cartelle sicure per utente.

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 l'interfaccia utente dinamica

Accedi con un account verificato Conferma che l'interfaccia riconosca l'utente connesso Verifica che la dashboard carichi i dati Firestore dell'utente Conferma che i file caricati vengano visualizzati correttamente

Aggiungi il limite di file del piano gratuito

Aggiungere il limite di file del piano gratuito

Limita quanti file possono caricare gli utenti gratuiti e mostra un messaggio di upgrade al raggiungimento del limite.

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.

Testa il limite del piano gratuito

Carica file fino a raggiungere il limite gratuito Conferma che i caricamenti aggiuntivi vengano bloccati Verifica che il messaggio di upgrade compaia correttamente

Copia lo stesso progetto Google AI Studio usato nel video e aggiungilo al tuo account.

Progetto VaultFlow

Progetto Google AI Studio usato nel 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

Come usare

Apri il link al progetto qui sopra. Accedi al tuo account Google se necessario. Clicca su “Copy” all'interno di Google AI Studio. Il progetto verrà aggiunto al tuo account e sarà completamente modificabile.

Nota importante

Dopo aver copiato il progetto, sostituisci la configurazione Firebase inclusa con la tua configurazione dell'SDK web di Firebase.