code cleanup , env eg file added,

Author: TechTronixx

.env.example

@@ -0,0 +1,7 @@
+# Hugging Face API Key
+VITE_HUGGINGFACE_API_KEY=
+
+# Google OAuth Credentials
+GOOGLE_CLIENT_ID=
+GOOGLE_REDIRECT_URI=
+GOOGLE_REFRESH_TOKEN=

README.md

@@ -2,18 +2,18 @@
 
 A modern web application that leverages AI to generate dynamic forms instantly with google form and xml export.
 
-## Overview
+## 🌟 Overview
 
 AI Form Builder simplifies form creation by using artificial intelligence to generate complete form structures from natural language descriptions. Perfect for developers, product managers, and anyone who needs to quickly create professional forms.
 
-## Key Features
+## ✨ Key Features
 
 - **AI-Powered Generation**: Create complex forms using simple text descriptions
-- **Real-time Preview**: Instantly view your generated forms {TODO}
+- **Real-time Preview**: Instantly view your generated forms
 - **Theme Support**: Built-in dark/light mode
 - **Google Forms Export**: Export your forms directly to Google Forms
 - **Responsive Design**: Fully responsive across all devices
-- **Type Safety**: Full TypeScript support for reliable development {TODO}
+- **Type Safety**: Full TypeScript support for reliable development
 
 ## 🛠️ Technical Stack
 
@@ -37,7 +37,7 @@ AI Form Builder simplifies form creation by using artificial intelligence to gen
 1. Clone the repository:
 
 ```bash
-git clone ..
+git clone https://github.com/yourusername/ai-form-builder.git
 cd ai-form-builder
 ```
 
@@ -59,6 +59,8 @@ bun install
 cp .env.example .env
 ```
 
+Fill in your `.env` file with your credentials.
+
 5. Start development servers:
 
 ```bash
@@ -70,22 +72,22 @@ bun run dev      # Frontend only
 bun run server   # Backend only
 ```
 
-## Environment Setup
+## 🔑 Environment Setup
 
-Create a `.env` file with the following variables:
+Create a `.env` file with the following variables (DO NOT COMMIT THIS FILE):
 
 ```env
 # Frontend
-VITE_HUGGINGFACE_API_KEY=your_huggingface_key
+VITE_HUGGINGFACE_API_KEY=
 
 # Backend
-OPENAI_API_KEY=your_openai_key
-GOOGLE_CLIENT_ID=your_google_client_id
-GOOGLE_CLIENT_SECRET=your_google_client_secret
+OPENAI_API_KEY=
+GOOGLE_CLIENT_ID=
+GOOGLE_CLIENT_SECRET=
 GOOGLE_REDIRECT_URI=http://localhost:3001/oauth2callback
 ```
 
-## Available Scripts
+## 📝 Available Scripts
 
 - `bun run dev` - Start frontend development server
 - `bun run server` - Start backend server
@@ -94,20 +96,44 @@ GOOGLE_REDIRECT_URI=http://localhost:3001/oauth2callback
 - `bun run preview` - Preview production build
 - `bun run token` - Generate Google OAuth refresh token
 
-## Contributing
+## 🔒 Security Notes
+
+1. Never commit `.env` files or any files containing secrets
+2. Use environment variables for all sensitive data
+3. Keep OAuth credentials secure and never expose them in client-side code
+4. Regularly rotate API keys and secrets
+5. Use `.gitignore` to prevent accidental commits of sensitive files
+
+## 🤝 Contributing
 
 1. Fork the repository
 2. Create your feature branch (`git checkout -b feature/amazing-feature`)
 3. Commit your changes (`git commit -m 'Add some amazing feature'`)
 4. Push to the branch (`git push origin feature/amazing-feature`)
 5. Open a Pull Request
 
-## License
+## 📄 License
 
 This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
 
-## Acknowledgments
+## 🙏 Acknowledgments
 
 - [Shadcn UI](https://ui.shadcn.com/) for the beautiful components
 - [OpenAI](https://openai.com/) for AI capabilities
 - [Google Forms API](https://developers.google.com/forms/api) for form export functionality
+
+## 🔑 Getting Google Forms Refresh Token
+
+To use the Google Forms export feature, you'll need to:
+
+1. Set up your Google Cloud Project and enable the Google Forms API
+2. Create OAuth 2.0 credentials (Client ID and Secret)
+3. Add them to your `.env` file
+4. Run the token script:
+   ```bash
+   bun run token
+   ```
+5. Follow the prompts to authorize the application
+6. Add the resulting refresh token to your `.env` file as `GOOGLE_REFRESH_TOKEN`
+
+Never commit the refresh token or any other credentials to version control!

package.json

@@ -9,36 +9,26 @@
     "preview": "vite preview",
     "server": "bun run server/index.ts",
     "dev:all": "bun run dev & bun run server",
-    "token": "bun run scripts/get-refresh-token.ts"
+    "token": "bun scripts/get-refresh-token.ts"
   },
   "dependencies": {
     "@hookform/resolvers": "^3.9.1",
-    "@radix-ui/react-alert-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.1.1",
     "@radix-ui/react-tabs": "^1.1.1",
-    "@radix-ui/react-toast": "^1.2.2",
-    "@types/cors": "^2.8.17",
-    "@types/express": "^5.0.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
-    "cors": "^2.8.5",
     "dotenv": "^16.4.5",
-    "express": "^4.21.1",
     "googleapis": "^144.0.0",
     "lucide-react": "^0.454.0",
-    "next-themes": "^0.3.0",
-    "openai": "^4.70.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-hook-form": "^7.53.2",
     "react-router-dom": "^6.28.0",
     "sonner": "^1.6.1",
     "tailwind-merge": "^2.5.4",
-    "tailwindcss-animate": "^1.0.7",
-    "zod": "^3.23.8"
+    "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",

scripts/get-refresh-token.ts

@@ -0,0 +1,80 @@
+import { google } from "googleapis";
+import dotenv from "dotenv";
+import path from "path";
+import { OAuth2Client } from "google-auth-library";
+
+// Load environment variables
+dotenv.config({ path: path.join(__dirname, "../.env") });
+
+const REQUIRED_ENV_VARS = [
+  "GOOGLE_CLIENT_ID",
+  "GOOGLE_CLIENT_SECRET",
+  "GOOGLE_REDIRECT_URI",
+] as const;
+
+// Validate required environment variables
+const missingVars = REQUIRED_ENV_VARS.filter((envVar) => !process.env[envVar]);
+if (missingVars.length > 0) {
+  console.error(
+    `Missing required environment variables: ${missingVars.join(", ")}`
+  );
+  process.exit(1);
+}
+
+const oauth2Client = new google.auth.OAuth2(
+  process.env.GOOGLE_CLIENT_ID,
+  process.env.GOOGLE_CLIENT_SECRET,
+  process.env.GOOGLE_REDIRECT_URI
+) as OAuth2Client;
+
+// Generate auth URL with required scope
+const authUrl = oauth2Client.generateAuthUrl({
+  access_type: "offline",
+  scope: ["https://www.googleapis.com/auth/forms"],
+  prompt: "consent", // Force consent screen to ensure refresh token
+});
+
+console.log("\n=== Google OAuth2 Token Generator ===");
+console.log("\nPlease visit this URL to authorize the application:");
+console.log(authUrl);
+
+async function handleAuthCode(code: string): Promise<void> {
+  try {
+    const { tokens } = await oauth2Client.getToken(code);
+
+    if (!tokens.refresh_token) {
+      throw new Error(
+        "No refresh token received. Please ensure you've revoked previous access and try again."
+      );
+    }
+
+    console.log("\nSuccess! Your refresh token:", tokens.refresh_token);
+    console.log("\nAdd this to your .env file as:");
+    console.log("GOOGLE_REFRESH_TOKEN=", tokens.refresh_token);
+    process.exit(0);
+  } catch (error) {
+    console.error(
+      "\nError getting tokens:",
+      error instanceof Error ? error.message : "Unknown error"
+    );
+    process.exit(1);
+  }
+}
+
+// Handle user input
+process.stdin.resume();
+console.log("\nEnter the code from the redirect URL: ");
+process.stdin.on("data", (data) => {
+  const code = data.toString().trim();
+  if (!code) {
+    console.error("Please provide a valid authorization code");
+    return;
+  }
+  handleAuthCode(code);
+});
+
+// Handle process termination
+process.on("SIGINT", () => {
+  console.log("\nProcess terminated by user");
+  process.exit(0);
+});

src/App.css

@@ -1,48 +1,15 @@
-import { useState, useCallback } from "react";
+import { useFormBuilder } from "@/hooks/useFormBuilder";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "../ui/tabs";
 import { BuildTab } from "./BuildTab";
 import { SettingsTab } from "./SettingsTab";
-import { FormConfig } from "../../types/form";
-import { toast } from "sonner";
 import { Card } from "../ui/card";
-import { generateFormStructure } from "../../lib/ai";
 import { Navbar } from "../navigation/Navbar";
 import { Sparkles } from "lucide-react";
-
-// Initial form configuration
-const initialConfig: FormConfig = {
-  title: "",
-  description: "",
-  fields: [],
-  validation: true,
-  helpText: true,
-  placeholders: true,
-};
+import { initialFormConfig } from "@/constants/form";
 
 export function AIFormBuilder() {
-  const [config, setConfig] = useState<FormConfig>(initialConfig);
-  const [isGenerating, setIsGenerating] = useState(false);
-
-  const handleConfigChange = useCallback((newConfig: Partial<FormConfig>) => {
-    setConfig((prev) => ({ ...prev, ...newConfig }));
-  }, []);
-
-  const handleGenerate = useCallback(
-    async (prompt: string) => {
-      setIsGenerating(true);
-      try {
-        const generatedConfig = await generateFormStructure(prompt);
-        handleConfigChange(generatedConfig);
-        toast.success("Form generated successfully!");
-      } catch (error) {
-        toast.error("Failed to generate form");
-        console.error(error);
-      } finally {
-        setIsGenerating(false);
-      }
-    },
-    [handleConfigChange]
-  );
+  const { config, isGenerating, handleConfigChange, handleAIGenerate } =
+    useFormBuilder(initialFormConfig);
 
   return (
     <div className="min-h-screen bg-background">
@@ -67,19 +34,9 @@ export function AIFormBuilder() {
           <Card className="overflow-hidden border-2">
             <Tabs defaultValue="build" className="space-y-6">
               <div className="px-6 pt-6 pb-2 border-b bg-card">
-                <TabsList className="inline-flex items-center justify-center p-1 rounded-lg h-9 bg-muted">
-                  <TabsTrigger
-                    value="build"
-                    className="inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm"
-                  >
-                    Build
-                  </TabsTrigger>
-                  <TabsTrigger
-                    value="settings"
-                    className="inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm"
-                  >
-                    Settings
-                  </TabsTrigger>
+                <TabsList>
+                  <TabsTrigger value="build">Build</TabsTrigger>
+                  <TabsTrigger value="settings">Settings</TabsTrigger>
                 </TabsList>
               </div>
 
@@ -88,7 +45,7 @@ export function AIFormBuilder() {
                   <BuildTab
                     config={config}
                     isGenerating={isGenerating}
-                    onGenerate={handleGenerate}
+                    onGenerate={handleAIGenerate}
                   />
                 </TabsContent>