Crée une app web complète + backend (Google AI Studio + Firebase)

Configuration initiale

Créez un projet Firebase Enregistrez l'application web Activez l'authentification par e-mail et mot de passe Activez la connexion avec Google Mettez à jour le nom de l'expéditeur dans les modèles d'e-mail d'authentification Copiez la configuration du SDK web Firebase

Prérequis pour la connexion avec Google

La connexion avec Google peut ne pas fonctionner tant que l'application n'est pas déployée et que le domaine en ligne n'est pas ajouté à Firebase Authorized Domains.

Guide de déploiement

Regarder le guide de déploiement

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

Connecter Firebase Authentication

Connecte le projet Google AI Studio à Firebase et active l'inscription, la connexion et la déconnexion.

Connecter Firebase Authentication

Connecte mon application web existante à Firebase avec ce 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

Configuration Firebase (firebaseConfig)

Colle ici ton objet firebaseConfig

Implémenter la vérification par e-mail

Envoie un e-mail de vérification, empêche la connexion automatique et bloque l'accès tant que l'e-mail n'est pas vérifié.

Implémenter la vérification par e-mail

Mets en place la vérification d'e-mail en utilisant uniquement 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.

Configuration de Firestore

Créez la base de données Firestore Choisissez l'édition Standard Sélectionnez la région de la base de données Sélectionnez le mode Production Ajoutez et publiez les règles de sécurité Firestore

Règles de sécurité Firestore (isolation des données par utilisateur)

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

Ajouter les sections Firestore du tableau de bord

Crée les sections du tableau de bord pour les fichiers, les notes et les membres de l'équipe, puis connecte-les à Firestore.

Ajouter les sections Firestore du tableau de bord

Ajoute des sections de tableau de bord dynamiques qui enregistrent et chargent les données utilisateur depuis 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

Configuration de Storage

Activez Firebase Storage Associez un compte de facturation et passez au plan Blaze Choisissez l'emplacement du stockage Sélectionnez le mode Production Ajoutez et publiez les règles de sécurité Firebase Storage

La facturation est nécessaire pour activer Storage. Des frais ne s'appliquent que si l'utilisation dépasse les limites gratuites incluses.

Règles de sécurité Firebase Storage (isolation des fichiers par utilisateur)

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

Connecter mes fichiers à Firebase Storage

Connecter mes fichiers à Firebase Storage

Connecte le système d'envoi de fichiers de l'application à Firebase Storage avec des dossiers sécurisés par utilisateur.

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.

Vérifie l'interface utilisateur dynamique

Connectez-vous avec un compte vérifié Confirmez que l'interface reconnaît l'utilisateur connecté Vérifiez que le tableau de bord charge les données Firestore de l'utilisateur Confirmez que les fichiers envoyés s'affichent correctement

Ajoute la limite de fichiers du plan gratuit

Ajouter la limite de fichiers du plan gratuit

Limite le nombre de fichiers que les utilisateurs gratuits peuvent envoyer et affiche un message de mise à niveau une fois la limite atteinte.

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 la limite du plan gratuit

Envoyez des fichiers jusqu'à atteindre la limite gratuite Confirmez que les envois supplémentaires sont bloqués Vérifiez que le message de mise à niveau s'affiche correctement

Copie le même projet Google AI Studio que celui utilisé dans la vidéo et ajoute-le à ton compte.

Projet VaultFlow

Projet Google AI Studio utilisé dans le tutoriel

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

Comment utiliser

Ouvre le lien du projet ci-dessus. Connecte-toi à ton compte Google si nécessaire. Clique sur « Copy » dans Google AI Studio. Le projet sera ajouté à ton compte et entièrement modifiable.

Note importante

Après avoir copié le projet, remplace la configuration Firebase incluse par ta propre configuration du SDK web Firebase.