Firebase Studio

This is a NextJS starter in Firebase Studio.

To get started, take a look at src/app/page.tsx.

FormFlow

Powerful forms. Zero paywalls.

FormFlow is a modern, open-source, no-code form builder that lets you create beautiful, powerful forms for free. It's built with a focus on simplicity, speed, and a great user experience, offering all advanced features without any hidden costs.

✨ Features

FormFlow provides a comprehensive suite of features, all available for free.

• Unlimited Everything: Create unlimited forms and collect unlimited responses. No caps, no throttling.
• Intuitive Form Builder: A clean, two-panel UI lets you add, edit, and reorder form fields with a live preview.
• Advanced Fields: Supports a wide range of fields including text, multiple choice, file uploads, ratings, and more.
• Conditional Logic: Create dynamic forms that show or hide questions based on user answers.
• Custom Branding: Customize your form's colors, fonts, and thank-you messages to match your brand.
• Embeddable Forms: Easily embed forms directly into your website with a simple script or iframe.
• Shareable Links: Every form gets a clean, shareable URL.
• AI-Powered Suggestions: Get a head start by letting AI generate relevant questions based on your form's topic.
• Response Analytics: View and analyze your submissions with an integrated dashboard and export your data to CSV.

🚀 Getting Started

This project is a Next.js application built with Firebase Studio.

Prerequisites

• Node.js
• A Firebase project

Installation & Setup

1. Clone the repository:

   git clone https://github.com/your-username/formflow.git
   cd formflow

2. Install dependencies:

   npm install

3. Set up Firebase:

   • Create a .env.local file in the root of your project.
   • Add your Firebase project configuration and your Gemini API key to this file. You can get a Gemini key from Google AI Studio.

   # Firebase Environment Variables
   NEXT_PUBLIC_FIREBASE_PROJECT_ID="..."
   NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN="..."
   NEXT_PUBLIC_FIREBASE_API_KEY="..."
   
   # Genkit/Gemini API Key
   GEMINI_API_KEY="..."
   

4. Run the development server:

   npm run dev

The application will be available at http://localhost:3000.

💻 Tech Stack

• Frontend: Next.js (with App Router) & React
• Backend: Firebase (Authentication, Firestore, Storage)
• UI: Tailwind CSS with shadcn/ui components
• Generative AI: Google's Gemini model via Genkit
• Deployment: Firebase App Hosting

🎨 Design & Branding

The design philosophy is minimal, clean, and user-friendly.

• Color Palette:
  • Primary: Deep Blue (#3F51B5)
  • Background: Light Blue (#E8EAF6)
  • Accent: Violet (#9575CD)
• Typography: The 'Inter' font is used for its clean and modern look.
• Iconography: lucide-react provides simple, clear icons.

🔐 Security Rules

The application includes a comprehensive set of Firestore and Firebase Storage security rules to ensure data is protected:

• Users can only access and modify their own data.
• Forms are private by default but can be made public for submissions.
• Form responses can only be viewed by the form owner.
• File uploads are secured to prevent unauthorized access.

License

This project is open-source and available under the MIT License.