Eksiksiz Web Uygulaması + Backend Oluşturun (Google AI Studio + Firebase)

İlk Yapılandırma

Firebase projesi oluşturun Web uygulamasını kaydedin E-posta/Parola kimlik doğrulamasını etkinleştirin Google ile oturum açmayı etkinleştirin Kimlik doğrulama e-posta şablonlarındaki gönderen adını güncelleyin Firebase Web SDK yapılandırmasını kopyalayın

Google ile Oturum Açma Gereksinimi

Uygulama yayınlanana ve canlı alan adı Firebase Authorized Domains listesine eklenene kadar Google ile oturum açma çalışmayabilir.

Yayına Alma Rehberi

Yayına Alma Rehberini İzleyin

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

Firebase Authentication'ı Bağlayın

Google AI Studio projesini Firebase'e bağlayın ve kayıt olma, giriş ve çıkış işlemlerini etkinleştirin.

Firebase Authentication'ı Bağlayın

Mevcut web uygulamamı bu SDK'yı kullanarak Firebase'e bağlayın...

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 yapılandırması (firebaseConfig)

firebaseConfig nesnenizi buraya yapıştırın

E-posta Doğrulamasını Uygulayın

Bir doğrulama e-postası gönderin, otomatik girişi engelleyin ve e-posta doğrulanana kadar erişimi kapatın.

E-posta Doğrulamasını Uygulayın

E-posta doğrulamasını yalnızca Firebase Authentication kullanarak uygulayın...

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 Yapılandırması

Firestore veritabanını oluşturun Standard sürümünü seçin Veritabanı bölgesini seçin Production modunu seçin Firestore güvenlik kurallarını ekleyip yayınlayın

Firestore Güvenlik Kuralları (Kullanıcı Bazında Veri İzolasyonu)

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

Panele Firestore Bölümleri Ekleyin

Dosyalar, notlar ve ekip üyeleri için kontrol paneli bölümleri oluşturun ve bunları Firestore'a bağlayın.

Panele Firestore Bölümleri Ekleyin

Kullanıcı verilerini Firestore'a kaydedip oradan yükleyen dinamik kontrol paneli bölümleri ekleyin.

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 Yapılandırması

Firebase Storage'ı etkinleştirin Bir faturalandırma hesabı bağlayın ve Blaze planına yükseltin Depolama konumunu seçin Production modunu seçin Firebase Storage güvenlik kurallarını ekleyip yayınlayın

Storage'ı etkinleştirmek için faturalandırma gereklidir. Ücret yalnızca kullanım, dahil edilen ücretsiz sınırları aşarsa uygulanır.

Firebase Storage Güvenlik Kuralları (Kullanıcı Bazında Dosya İzolasyonu)

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

My Files'ı Firebase Storage'a Bağlayın

My Files'ı Firebase Storage'a Bağlayın

Uygulamanın dosya yükleme sistemini, kullanıcı başına güvenli klasörlerle Firebase Storage'a bağlayın.

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.

Dinamik Kullanıcı Arayüzünü Doğrulayın

Doğrulanmış bir hesapla oturum açın Arayüzün oturum açan kullanıcıyı tanıdığını doğrulayın Kontrol panelinin kullanıcının Firestore verilerini yüklediğini doğrulayın Yüklenen dosyaların doğru şekilde göründüğünü doğrulayın

Ücretsiz Plan Dosya Sınırını Ekleyin

Ücretsiz Plan Dosya Limiti Ekleyin

Ücretsiz kullanıcıların yükleyebileceği dosya sayısını sınırlayın ve sınıra ulaşıldığında yükseltme mesajı gösterin.

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.

Ücretsiz Plan Sınırını Test Edin

Ücretsiz sınıra ulaşana kadar dosya yükleyin Ek yüklemelerin engellendiğini doğrulayın Yükseltme mesajının doğru göründüğünü doğrulayın

Videoda kullanılan Google AI Studio projesinin aynısını kopyalayın ve hesabınıza ekleyin.

VaultFlow Projesi

Eğitimde kullanılan Google AI Studio projesi

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

Nasıl Kullanılır

Yukarıdaki proje bağlantısını açın. Gerekirse Google hesabınızda oturum açın. Google AI Studio içinde “Copy” düğmesine tıklayın. Proje hesabınıza eklenecek ve tamamen düzenlenebilir hale gelecektir.

Önemli Not

Projeyi kopyaladıktan sonra, dahil edilen Firebase yapılandırmasını kendi Firebase Web SDK yapılandırmanızla değiştirin.