Crie um app web completo + backend (Google AI Studio + Firebase)

Configuração inicial

Crie um projeto Firebase Registe a aplicação web Ative a autenticação por e-mail e palavra-passe Ative o início de sessão com Google Atualize o nome do remetente nos modelos de e-mail de autenticação Copie a configuração do SDK web do Firebase

Requisito do início de sessão com Google

O início de sessão com Google pode não funcionar até a app ser publicada e o domínio em direto ser adicionado a Firebase Authorized Domains.

Guia de deploy

Assistir ao guia de deploy

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

Conectar o Firebase Authentication

Ligue o projeto do Google AI Studio ao Firebase e ative o registo, o início e o fim de sessão.

Conectar o Firebase Authentication

Ligue a minha aplicação web existente ao 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

Configuração do Firebase (firebaseConfig)

Cole aqui seu objeto firebaseConfig

Implementar verificação por e-mail

Envie um e-mail de verificação, impeça o início de sessão automático e bloqueie o acesso até o e-mail ser verificado.

Implementar verificação por e-mail

Implemente a verificação de e-mail usando apenas o 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.

Configuração do Firestore

Crie a base de dados Firestore Escolha a edição Standard Selecione a região da base de dados Selecione o modo Production Adicione e publique as regras de segurança do Firestore

Regras de segurança do Firestore (isolamento de dados por usuário)

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

Adicionar seções do Firestore no dashboard

Crie as secções do painel para ficheiros, notas e membros da equipa e ligue-as ao Firestore.

Adicionar seções do Firestore no dashboard

Adicione secções dinâmicas ao painel que guardem e carreguem os dados do utilizador a partir do 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

Configuração do Storage

Ative o Firebase Storage Associe uma conta de faturação e mude para o plano Blaze Escolha a localização do armazenamento Selecione o modo Production Adicione e publique as regras de segurança do Firebase Storage

É necessário ativar a faturação para usar o Storage. Só há cobranças se a utilização exceder os limites gratuitos incluídos.

Regras de segurança do Firebase Storage (isolamento de arquivos por usuário)

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 meus arquivos ao Firebase Storage

Conectar meus arquivos ao Firebase Storage

Ligue o sistema de carregamento de ficheiros da app ao Firebase Storage usando pastas seguras por utilizador.

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.

Verifique a interface de utilizador dinâmica

Inicie sessão com uma conta verificada Confirme que a interface reconhece o utilizador com sessão iniciada Verifique que o painel carrega os dados do utilizador no Firestore Confirme que os ficheiros carregados aparecem corretamente

Adicione o limite de ficheiros do plano gratuito

Adicionar limite de arquivos no plano gratuito

Limite quantos ficheiros os utilizadores gratuitos podem carregar e mostre uma mensagem de upgrade ao atingir o 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.

Teste o limite do plano gratuito

Carregue ficheiros até atingir o limite gratuito Confirme que os carregamentos adicionais são bloqueados Verifique que a mensagem de upgrade aparece corretamente

Copie o mesmo projeto do Google AI Studio usado no vídeo e adicione-o à sua conta.

Projeto VaultFlow

Projeto do Google AI Studio usado no 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

Como usar

Abra o link do projeto acima. Inicie sessão na sua conta Google se for necessário. Clique em “Copy” dentro do Google AI Studio. O projeto será adicionado à sua conta e ficará totalmente editável.

Observação importante

Depois de copiar o projeto, substitua a configuração do Firebase incluída pela sua própria configuração do SDK web do Firebase.