diff --git a/.firebaserc b/.firebaserc index eba6da5..547e4a6 100644 --- a/.firebaserc +++ b/.firebaserc @@ -1,5 +1,9 @@ { "projects": { - "default": "flutterflow-docs-82026" - } + "default": "dreamflow-docs-2c50c", + "prod": "dreamflow-docs-2c50c", + "dreamflow-docs": "dreamflow-docs-2c50c" + }, + "targets": {}, + "etags": {} } diff --git a/docs/get-started/quickstart.md b/docs/get-started/quickstart.md index 2906dc9..466ee73 100644 --- a/docs/get-started/quickstart.md +++ b/docs/get-started/quickstart.md @@ -1,9 +1,89 @@ +--- +slug: /quickstart +title: Quickstart +description: Get started with Dreamflow by building your first app in just 4 minutes using AI-powered prompts and natural language descriptions. +tags: [quickstart, getting started, tutorial, ai, flutter, mobile app development] +sidebar_position: 1 +keywords: [quickstart, getting started, dreamflow tutorial, ai app generation, flutter development, mobile app creation, natural language prompts] +--- # Quickstart -## Start With a Prompt (4 mins) + +## Start from Scratch + +Starting a new Flutter project in Dreamflow is simple and flexible. When you create a project from scratch, you'll begin with Flutter's classic counter app template. From there, you have multiple ways to build out your application: + +- Use the **[AI Agent](../workspace/agent-panel.md)** to add features through natural language conversations. +- Visually construct your UI with the **[Properties Editor](../workspace/properties-panel.md)** and drag-and-drop tools. +- Write and edit code directly in the integrated **[Code Editor](../workspace/content-panel.md#code-editor)**. +- Combine these approaches seamlessly as your project grows. + +This flexibility allows you to work in whatever way best suits your development style and project needs. + +
+ +
+ +## Start from a Template + +Dreamflow also provides a collection of professionally designed, production-ready templates to jumpstart your app development. Our templates are fully customizable to match your brand and requirements while being designed to work seamlessly across mobile, tablet, and web platforms. + +Simply choose a template that matches your needs and customize it to create your unique application. + +
+ +
+ + + +## Start With a Prompt Dreamflow's AI-powered app generation allows you to create fully functional, production-ready applications from simple text or image descriptions. Simply describe what you want to build, and Dreamflow Agent will generate the entire app structure, UI components, and functionality for you. diff --git a/docs/get-started/welcome.md b/docs/get-started/welcome.md deleted file mode 100644 index 9d800a3..0000000 --- a/docs/get-started/welcome.md +++ /dev/null @@ -1,40 +0,0 @@ - - -# Welcome - -Dreamflow is ... - - -## Create Account - - -create an account... - - -## Build First Project - -
- -
diff --git a/docs/index.md b/docs/index.md index eb79294..8d257bb 100644 --- a/docs/index.md +++ b/docs/index.md @@ -1,159 +1,121 @@ --- -title: Getting Started -custom_edit_url: null -showLastUpdateTime: false -hide_title: true slug: / -hide_table_of_contents: false +title: Welcome to Dreamflow +description: Discover Dreamflow, the AI-first platform for building mobile apps with Flutter. Learn about key features, how it works, and get started with your first app. +tags: [welcome, introduction, overview, dreamflow, flutter, mobile app development, ai] +sidebar_position: 0 +keywords: [dreamflow welcome, flutter development platform, ai mobile app development, visual development environment, flutter builder, mobile app creation] --- -import InfoCard from '@site/src/components/InfoCard'; -import InfoCards from '@site/src/components/InfoCards'; -import FlutterFlowDocsLogo from '@site/src/components/FlutterFlowDocsLogo'; -import FlutterFlowLogo from '@site/src/components/FlutterFlowLogo'; -import GearIcon from '@site/static/icons/_icon_Setting.png'; -import DocsIcon from '@site/static/icons/document.png'; -import DeviceIcon from '@site/static/icons/deviceMobile.png'; -import CheckIcon from '@site/static/icons/check_errors.png'; -import UsersIcon from '@site/static/icons/users.png'; -import BranchIcon from '@site/static/icons/branch_New.png'; +# Welcome to Dreamflow +**The Fastest Way to Build Mobile Apps** +Dreamflow is an AI-first platform that combines code, visual, and agentic app development for Flutterβ€”no install, no lock-in, production-ready workflows. Transform your ideas into production-ready mobile apps in minutes using natural language prompts and our integrated development environment. -# Getting Started with Dreamflow -Dreamflow is a visual development environment that lets you build mobile, web, and desktop apps incredibly fast, without sacrificing on app quality or features. +### Product Tour +
+ +
- - - - - - -

- -

+## Key Features -### Dreamflow Tour +- **[AI Agent](workspace/agent-panel.md)**: Prompt small edits or large refactors with natural language commands. The AI agent can scaffold entire screens, implement complex flows, and generate comprehensive tests, making development faster and more intuitive than traditional coding approaches. - +- **[Realtime Preview](workspace/content-panel.md#app-preview)**: See your changes instantly with a live run session that compiles and previews your app in real-time. Inspect logs, monitor state changes, and debug issues as they happen, providing immediate feedback for faster iteration and development. - - +- **[Visual Widget Tree](workspace/modules-panel/widget-panel.md)**: Add, remove, move, wrap, collapse, and expand UI components with intuitive visual controls. Restructure your entire widget hierarchy instantly through drag-and-drop interactions, making UI development more visual and accessible. +- **[Properties Editor](workspace/properties-panel.md)**: Type-safe controls for every widget property with intelligent suggestions and validation. Use expressions, formulas, or simply ask the AI for assistance when configuring complex widget behaviors and styling. - +- **Deploy**: Push your applications to the web or app stores with streamlined one-click deployment. Support for multiple platforms including Web, iOS, Android, macOS, Windows, and Linux ensures your app reaches users everywhere. -

+- **Hot Reload**: See changes instantly as you develop with Flutter's hot reload technology, enabling rapid iteration and real-time feedback during the development process. -
+- **Debug Console**: Monitor app logs and performance in real-time with integrated debugging tools that help you identify and resolve issues quickly. +- **Multi-Platform Support**: Build applications that run seamlessly across mobile (iOS and Android), web (responsive), and desktop (macOS, Windows, Linux) platforms from a single codebase. +## How It Works +Dreamflow follows a simple 3-step workflow: **Start β†’ Build β†’ Run & Ship** +### 1. Start +Kick off from a natural-language prompt, a blank Flutter project, or import an existing repo (coming soon). -### Best Practices +### 2. Build +Jump between multiple development modes to build your app efficiently: -Essential guidelines and recommendations for building robust Dreamflow applications. Discover security best practices and performance optimization techniques to ensure your apps are production-ready, scalable, and maintainable. +- Use the **Code** editor for direct Flutter development. +- Navigate the **Visual widget tree** for drag-and-drop UI building. +- Configure components in the **Properties editor** with type-safe controls. +- Leverage the **AI agent** to scaffold features and refactor code through natural language. - - - - - +Built-in Firebase and Supabase integrations provide authentication, database, and storage capabilities without complex setup. The integrated **Language Server Protocol (LSP)** delivers intelligent code completions, quick fixes, and real-time diagnostics as you type. + +
+ +
+ +### 3. Run & Ship +A managed run session compiles and previews your app in real time. Connect Firebase/Supabase, test flows, and deploy to web or the app stores when ready. + + + +## Ready to Start Building? + +Whether you're a seasoned developer looking to accelerate your workflow or a newcomer wanting to bring your app ideas to life, Dreamflow provides the tools and AI assistance you need to succeed. + +**Next Steps:** +1. **[Quickstart Guide](get-started/quickstart.md)**: Build your first app from scratch, from a template or describe your app idea and let AI generate an app for you. +2. **[Workspace Tour](workspace/workspace.md)**: Learn about the development environment. +3. **[Deployment Guide](test-and-publish/publish/web-deployment.md)**: Publish your app to the world. -### Scaling Dreamflow Apps - -Learn advanced techniques and strategies to scale your Dreamflow applications from simple prototypes to enterprise-grade solutions with native integrations and modular architecture. - - - - - - -### Additional Tools - -Discover additional tools and references to enhance your Dreamflow development experience: - - - - - - -## Still Have Problems? - - \ No newline at end of file diff --git a/docusaurus.config.ts b/docusaurus.config.ts index 610ca79..e9fca27 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -14,6 +14,7 @@ const config: Config = { clientModules: [ require.resolve('./src/js/table-helpers.js'), + require.resolve('./src/js/firebase-analytics.js'), ], i18n: { defaultLocale: 'en', diff --git a/firebase.json b/firebase.json index 303504b..340ed5b 100644 --- a/firebase.json +++ b/firebase.json @@ -11,14 +11,6 @@ "source": "**", "destination": "/index.html" } - ], - "redirects": [ - { - "source": "/blog/**", - "destination": "/", - "type": 301 - } - ] } -} \ No newline at end of file +} diff --git a/sidebars.ts b/sidebars.ts index 83b2d0d..37c9f34 100644 --- a/sidebars.ts +++ b/sidebars.ts @@ -6,7 +6,7 @@ const sidebars: SidebarsConfig = { { type: 'doc', id: 'index', - label: 'Index', + label: 'Welcome', }, { type: 'category', diff --git a/src/js/firebase-analytics.js b/src/js/firebase-analytics.js new file mode 100644 index 0000000..8660980 --- /dev/null +++ b/src/js/firebase-analytics.js @@ -0,0 +1,63 @@ +// Firebase Analytics configuration +// Replace these values with your actual Firebase project configuration +const firebaseConfig = { + apiKey: "AIzaSyA3bYqcrFsRh44h6b5Vy2ggaNJH-LxTwu4", + authDomain: "dreamflow-docs-2c50c.firebaseapp.com", + projectId: "dreamflow-docs-2c50c", + storageBucket: "dreamflow-docs-2c50c.firebasestorage.app", + messagingSenderId: "426377507105", + appId: "1:426377507105:web:7e6356038b1ca17b73ce60", + measurementId: "G-XJVXWZ37RP" +}; + +// Initialize Firebase Analytics +if (typeof window !== 'undefined') { + // Load Firebase SDKs dynamically using script tags (compatible with Docusaurus) + const loadFirebaseScript = (src) => { + return new Promise((resolve, reject) => { + const script = document.createElement('script'); + script.src = src; + script.onload = resolve; + script.onerror = reject; + document.head.appendChild(script); + }); + }; + + // Load Firebase scripts and initialize + const initializeFirebase = async () => { + try { + // Load Firebase SDKs + await loadFirebaseScript('https://www.gstatic.com/firebasejs/10.7.1/firebase-app.js'); + await loadFirebaseScript('https://www.gstatic.com/firebasejs/10.7.1/firebase-analytics.js'); + + // Wait a bit for the scripts to be available + await new Promise(resolve => setTimeout(resolve, 100)); + + // Initialize Firebase using the global firebase object + const app = firebase.initializeApp(firebaseConfig); + const analytics = firebase.analytics(); + + // Log page views + analytics.logEvent('page_view', { + page_title: document.title, + page_location: window.location.href + }); + + console.log('Firebase Analytics initialized successfully'); + + // Make analytics available globally for custom events + window.firebaseAnalytics = analytics; + window.firebaseLogEvent = analytics.logEvent.bind(analytics); + + } catch (error) { + console.error('Error initializing Firebase Analytics:', error); + } + }; + + // Initialize when DOM is ready + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', initializeFirebase); + } else { + initializeFirebase(); + } +}