Build a Full Web App + Backend (Google AI Studio + Firebase)

Initial Configuration

Create a Firebase Project Register the Web App Enable Email/Password Authentication Enable Google Sign-In Update the Sender Name in Authentication Email Templates Copy the Firebase Web SDK Configuration

Google Sign-In Requirement

Google Sign-In may not work until the app is deployed and the live domain is added to Firebase Authorized Domains.

Deployment Guide

Watch the Deployment Guide

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

Connect Firebase Authentication

Connect the Google AI Studio project to Firebase and enable sign-up, login, and logout.

Connect Firebase Authentication

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 config (firebaseConfig)

Paste your firebaseConfig object here

Implement Email Verification

Send a verification email, prevent automatic login, and block access until the email is verified.

Implement Email Verification

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 Configuration

Create the Firestore Database Choose the Standard Edition Select the Database Region Select Production Mode Add and Publish the Firestore Security Rules

Firestore Security Rules (Per-User Data Isolation)

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

Add Firestore Dashboard Sections

Create dashboard sections for files, notes, and team members, then connect them to Firestore.

Add Firestore Dashboard Sections

Add dynamic dashboard sections that store and load user data from 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

Storage Configuration

Enable Firebase Storage Link a Billing Account and Upgrade to the Blaze Plan Choose the Storage Location Select Production Mode Add and Publish the Firebase Storage Security Rules

Billing is required to enable Storage. Charges apply only if usage exceeds the included free limits.

Firebase Storage Security Rules (Per-User File Isolation)

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

Connect My Files to Firebase Storage

Connect My Files to Firebase Storage

Connect the app’s file upload system to Firebase Storage using secure per-user folders.

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.

Verify the Dynamic User Interface

Sign In With a Verified Account Confirm the Interface Recognizes the Signed-In User Verify the Dashboard Loads the User’s Firestore Data Confirm Uploaded Files Appear Correctly

Add the Free Plan File Limit

Add Free Plan File Limit

Limit how many files free users can upload and show an upgrade message when the limit is reached.

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.

Test the Free Plan Limit

Upload Files Until the Free Limit Is Reached Confirm Additional Uploads Are Blocked Verify the Upgrade Message Appears Correctly

Copy the same Google AI Studio project used in the video and add it to your account.

VaultFlow Project

Google AI Studio project used in the 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

How to Use

Open the project link above. Sign in to your Google account if needed. Click “Copy” inside Google AI Studio. The project will be added to your account and become fully editable.

Important Note

Replace the included Firebase configuration with your own Firebase Web SDK configuration after copying the project.