Merge remote-tracking branch 'refs/remotes/origin/main' into pooja/welcome

Author: PoojaB26

docs/integrations/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Integrations",
+  "position": 1
+}

docs/integrations/firebase.md

@@ -0,0 +1,178 @@
+---
+slug: /integrations/firebase
+title: Firebase
+description: Learn how to connect your Dreamflow app with Firebase to enable powerful backend features such as authentication, real-time databases, analytics, and more.
+tags: [Firebase, Integration, Dreamflow, Backend]
+sidebar_position: 1
+toc_max_heading_level: 4
+keywords: [Firebase, Integration, Dreamflow, Backend]
+---
+
+# Firebase
+
+Dreamflow makes it easy to integrate [Firebase](https://firebase.google.com/) into your app with a guided, step-by-step setup. This process connects your project to Firebase, generates all necessary configuration, and even creates ready-to-use client code and database rules with AI.
+
+By integrating Firebase, you gain access to services such as Authentication, Firestore Database, Cloud Storage, Hosting and more, giving your app a secure backend for managing users, data, and serverless logic.
+
+## 1. Connection
+
+The first step is to connect Dreamflow with your Google account so it can create new Firebase projects or link to existing ones.
+
+To connect Dreamflow with Firebase, open the **Firebase** tab in Dreamflow, then click **Connect to Firebase**. When the OAuth window appears, sign in with your Google account, review, and approve the requested permissions. These permissions allow Dreamflow to create Firebase projects, manage configurations, and deploy security rules.
+
+Once complete, Dreamflow will confirm the connection with a **Connected** status.
+
+<div style={{
+    position: 'relative',
+    paddingBottom: 'calc(52.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
+    height: 0,
+    width: '100%'}}>
+    <iframe 
+        src="https://demo.arcade.software/Iu2hoVYZN1EV5IscOzNy?embed&show_copy_link=true"
+        title=""
+        style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            colorScheme: 'light'
+        }}
+        frameborder="0"
+        loading="lazy"
+        webkitAllowFullScreen
+        mozAllowFullScreen
+        allowFullScreen
+        allow="clipboard-write">
+    </iframe>
+</div>
+<p></p>
+
+
+## 2. Project Setup
+
+After connecting your Google account, the next step is to set up a Firebase project, which will serve as the backend for your app. You can do this in two ways:
+
+- **Select an existing Firebase project:** Choose from the list of your existing Firebase projects.
+
+    ![select-from-existing-project](imgs/select-from-existing-project.avif)
+- **Create a new Firebase project:** Let Dreamflow automatically create and configure a new Firebase project for you.
+
+    ![create-new-project](imgs/create-new-project.avif)
+
+Once the project is linked, you need to specify the following:
+
+- **Target Platforms:** Choose the platforms you want to support (Web, iOS, Android, macOS, Linux, Windows). Web is always enabled by default, so your app can be previewed inside Dreamflow. Selecting the right platforms ensures Firebase generates configs for each build target.
+- **Bundle ID:** Enter a unique **Bundle ID** (e.g., `com.yourcompany.appname`). This must match the app identifier in your platform-specific builds (iOS bundle ID, Android package name). If you skip this, Firebase cannot configure services for mobile apps.
+
+When these details are set, click **Configure Firebase** to complete the setup.
+
+<div style={{
+    position: 'relative',
+    paddingBottom: 'calc(52.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
+    height: 0,
+    width: '100%'}}>
+    <iframe 
+        src="https://demo.arcade.software/Ux3hDEIPtZ1qaVHtIKnf?embed&show_copy_link=true"
+        title=""
+        style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            colorScheme: 'light'
+        }}
+        frameborder="0"
+        loading="lazy"
+        webkitAllowFullScreen
+        mozAllowFullScreen
+        allowFullScreen
+        allow="clipboard-write">
+    </iframe>
+</div>
+<p></p>
+
+
+:::info
+
+Behind the scenes, Dreamflow uses the **FlutterFire CLI** to handle the configuration. This process generates a `firebase_options.dart` file containing project-specific credentials such as API keys, app ID, and messaging sender ID. These credentials ensure your app is properly connected to Firebase services.
+
+:::
+
+:::warning
+
+Once configured, changing the **Bundle ID** later will require reconfiguring Firebase and may break existing builds. Choose carefully before proceeding.
+
+:::
+
+## 3. Generate Client Code
+
+Once your Firebase project is linked and configured, click **Generate with Agent** to automatically add the code needed to access Firebase services. This step automates a complete Firebase integration tailored to your app, wiring up authentication, Firestore, state management, and updating the existing app logic with little to no manual effort.
+
+:::info
+
+- This step is optional, but we strongly recommend doing it. It saves significant development time by scaffolding schemas, services, and security rules automatically to ensure your Firebase integration is both secure and production-ready from the start.
+- The generated code is fully editable and serves as a starting point for customization.
+
+:::
+
+![generate-client-code.avif](imgs/generate-client-code.avif)
+
+### Code Generation Breakdown
+
+When you click **Generate with Agent**, Dreamflow performs several background steps, including (but not limited to):
+
+- **Firebase Configuration Files**
+    - Creates and updates core Firebase files such as `firebase.json`, `firestore.rules`, `firestore.indexes.json`, and `firebase_options.dart`.
+    - These files define how your app connects to Firebase, which services are enabled, and enforce security rules and query indexes.
+- **Firestore Schema & Services**
+    - Generates a `firestore_data_schema.dart` file to define collections and documents.
+    - Implements a `firebase_service.dart` repository class to handle Firestore operations (CRUD, queries, synchronization).
+    - Adds indexes and security rules to enforce per-user access control.
+- **Authentication System**
+    - Creates an `auth_service.dart` for sign-in/sign-out logic.
+    - Adds an `auth_wrapper.dart` to manage authentication state across the app.
+    - Updates `main.dart` to initialize Firebase and route users based on authentication state.
+- **App Screens**
+    - Updates app pages to fetch and display live data from Firestore instead of hardcoded values.
+    - Adds authentication screens to handle user sign-in and sign-up flows.
+- **Dependencies & Compilation**
+    - Updates `pubspec.yaml` with required Firebase dependencies.
+    - Resolves version conflicts and ensures successful compilation.
+    
+
+:::info[Enable Services in Firebase Console]
+
+After Dreamflow generates code for Firebase services, you must enable those services in the Firebase Console for them to function correctly. For example:
+
+- **Authentication:** Enable required sign-in methods such as Email/Password or Social Sign-in.
+- **Firestore Database:** Activate Firestore in the console to store and retrieve data.
+- **Firebase Storage:** Enable Storage to handle file uploads and downloads.
+
+:::
+
+## 4. Deploy to Firebase
+
+The final step is to deploy the generated schemas, indexes, and rules to Firebase so they become active in your project. For example, in a habit tracker app, Dreamflow deploys rules that allow only the authenticated user to modify their habits collection.
+
+To deploy to Firebase:
+
+1. In the **Actions** panel, go to **Deploy to Firebase**. Under **Deployment Target**, select the Firebase service you want to deploy to (default is *Firestore*).
+2. Click **Deploy Changes**.
+
+:::info
+
+- Until you deploy, rules and schemas only exist in Dreamflow and are not sent to Firebase.
+- Dreamflow uses the Firebase CLI to push security rules, indexes, and any additional configurations (e.g., Auth, Storage) to Firebase.
+
+:::
+
+:::warning
+
+This step is critical for security, as without rules, your Firestore may be open to anyone.
+
+::::
+
+![deploy-to-firebase.avif](imgs/deploy-to-firebase.avif)
+

docs/integrations/imgs/create-new-project.avif

@@ -0,0 +1,110 @@
+---
+slug: /integrations/supabase
+title: Supabase
+description: Learn how to connect your Dreamflow app with Supabase to enable powerful backend features such as authentication, databases, storage, and more.
+tags: [Supabase, Integration, Dreamflow, Backend]
+sidebar_position: 2
+toc_max_heading_level: 4
+keywords: [Supabase, Integration, Dreamflow, Backend]
+---
+
+# Supabase
+
+Dreamflow makes it easy to integrate [Supabase](https://supabase.com/) into your app with a guided, step-by-step setup. This process connects your project to Supabase, sets up a database, generates client code, and deploys schemas, all without manual setup.
+
+## 1. Connection and Project Setup
+
+The first step is to connect Dreamflow with your Supabase account and set up a project.
+
+To begin, open the **Supabase** tab in Dreamflow and click **Connect to Supabase**. A Supabase authentication window will appear where you can sign in and review the requested permissions. Next, select an organization and click **Authorize Dreamflow**. These permissions allow Dreamflow to create and manage projects, configure database schemas, and generate API keys on your behalf. 
+
+After connecting, Dreamflow automatically creates a new Supabase project and links it to your app. This sets up the backend infrastructure and database for your project. Specifically:
+
+- A new project is provisioned in Supabase with a **Project Name**, **Project ID**, **API URL**, and **Anon Key**.
+- Dreamflow initializes the database, ensuring you have a ready-to-use backend.
+- These details are securely linked back to your Dreamflow project so you can start building right away.
+
+This setup may take a few minutes while Dreamflow provisions the resources and configures your database.
+
+:::info
+
+You can quickly jump into your Supabase dashboard using the **Open in Supabase** button.
+
+:::
+
+
+<div style={{
+    position: 'relative',
+    paddingBottom: 'calc(52.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
+    height: 0,
+    width: '100%'}}>
+    <iframe 
+        src="https://demo.arcade.software/QvHPsdxLUubTQDPXrxfL?embed&show_copy_link=true"
+        title=""
+        style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            colorScheme: 'light'
+        }}
+        frameborder="0"
+        loading="lazy"
+        webkitAllowFullScreen
+        mozAllowFullScreen
+        allowFullScreen
+        allow="clipboard-write">
+    </iframe>
+</div>
+<p></p>
+
+
+## 2. Generate Client Code
+
+Once the project setup is complete, click **Generate Client Code** to let Dreamflow automatically create ready-to-use Supabase integration code tailored to your app. This step eliminates most of the manual setup by wiring your app directly to Supabase with authentication, data models, and database operations.
+
+![generate-client-code-supabase.avif](imgs/generate-client-code-supabase.avif)
+
+### Code Generation Breakdown
+
+When you trigger code generation, Dreamflow performs several background steps, including (but not limited to):
+
+- **Supabase Configuration**:
+    - Add the `supabase_flutter` dependency and update `main.dart` for initialization.
+    - Generate a `supabase_config.dart` file with project credentials (API URL, Anon Key) and helper functions for database access.
+- **Database Schema (`supabase_tables.sql`)**:
+    - Define the necessary tables for your app (e.g., users, core data entities, relationships).
+    - Add indexes and constraints for efficient queries.
+- **Security Policies (`supabase_policies.sql`)**:
+    - Enable **Row Level Security (RLS)** across all tables.
+    - Generate policies so users can only access their own data, and operations are protected by authentication checks.
+- **Service Layer**:
+    - Create service classes (e.g., `_service.dart`) with CRUD operations, query helpers, and error handling.
+    - Include support for real-time updates, history tracking, or analytics if applicable.
+- **Models & Data**:
+    - Update models to support Supabase JSON serialization (`fromJson`, `toJson`).
+    - Refresh sample data to match the generated schema.
+    - Adjust widgets or UI components to bind live data instead of placeholders.
+- **App Integration**:
+    - Replace hardcoded logic with Supabase-powered queries.
+    - Wire authentication, database syncing, and state management into the app flow.
+
+By the end of this step, your app will be fully integrated with Supabase, ready to authenticate users, persist data securely, and sync changes in real time with proper RLS policies in place.
+
+## 3. Schema Deployment
+
+The final step is to deploy your database schema changes to Supabase. To do so, just click **Deploy Schema Changes**. During this process:
+
+- Dreamflow applies your generated schema, including tables, relationships, constraints, and security policies, directly to your Supabase project.
+- As part of deployment, Dreamflow can run migrations and update your live database structure. You can review `pending_migrations.sql` beforehand to see exactly what changes will be applied.
+
+Once deployed, your Supabase backend is live. Users can sign up, authenticate, and their data will automatically sync to the cloud with Row Level Security (RLS) and policies enforced to protect privacy.
+
+:::warning
+
+Schema deployment is an ongoing process. Any time you modify tables, relationships, or security rules in Dreamflow, you’ll need to redeploy to keep your Supabase project up to date.
+
+:::
+
+![deploy-schema-changes.avif](imgs/deploy-schema-changes.avif)

docs/integrations/imgs/deploy-schema-changes.avif

@@ -41,6 +41,17 @@ const sidebars: SidebarsConfig = {
                 }
             ],
         },
+        {
+            type: 'category',
+            label: 'Integrations',
+            collapsed: false,
+            items: [
+                {
+                    type: 'autogenerated',
+                    dirName: 'integrations',
+                }
+            ],
+        },
     ]
 
 };