Refactor server structure and enhance form generation features

- Removed the old server.ts file and integrated its functionality into server/index.ts.
- Added express-rate-limit middleware to prevent abuse of the API.
- Implemented request validation for form configuration in the export-to-google-forms endpoint.
- Updated package.json to include new dependencies: express, cors, and express-rate-limit.
- Enhanced the AIFormBuilder component with improved user instructions.
- Added ErrorBoundary for better error handling in the app.
- Updated form validation logic to enforce stricter rules and improve error messages.
- Refined theme toggle functionality for better user experience.
- Cleaned up unused components and styles.

Author: TechTronixx

package.json

@@ -20,7 +20,10 @@
     "@radix-ui/react-tabs": "^1.1.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "cors": "^2.8.5",
     "dotenv": "^16.4.5",
+    "express": "^4.21.1",
+    "express-rate-limit": "^7.4.1",
     "googleapis": "^144.0.0",
     "lucide-react": "^0.454.0",
     "react": "^18.3.1",

server.ts

@@ -2,6 +2,8 @@ import express, { Request, Response } from "express";
 import { google } from "googleapis";
 import dotenv from "dotenv";
 import cors from "cors";
+import rateLimit from "express-rate-limit";
+import { validateFormConfig } from "../src/utils/form-validation";
 
 dotenv.config();
 
@@ -48,81 +50,101 @@ interface FormConfig {
   fields: FormField[];
 }
 
-app.post("/api/export-to-google-forms", async (req: Request, res: Response) => {
-  try {
-    const formConfig: FormConfig = req.body;
+const limiter = rateLimit({
+  windowMs: 15 * 60 * 1000, // 15 minutes
+  max: 100, // limit each IP to 100 requests per windowMs
+});
 
-    if (!formConfig.title || !Array.isArray(formConfig.fields)) {
-      return res.status(400).json({ error: "Invalid form configuration" });
-    }
+app.use(limiter);
 
-    // First, create the form with just the title
-    const form = await forms.forms.create({
-      requestBody: {
-        info: {
-          title: formConfig.title,
+// Add request validation middleware
+const validateRequest = (req: Request, res: Response, next: Function) => {
+  const errors = validateFormConfig(req.body);
+  if (errors.length) {
+    return res.status(400).json({ errors });
+  }
+  next();
+};
+
+app.post(
+  "/api/export-to-google-forms",
+  validateRequest,
+  async (req: Request, res: Response) => {
+    try {
+      const formConfig: FormConfig = req.body;
+
+      if (!formConfig.title || !Array.isArray(formConfig.fields)) {
+        return res.status(400).json({ error: "Invalid form configuration" });
+      }
+
+      // First, create the form with just the title
+      const form = await forms.forms.create({
+        requestBody: {
+          info: {
+            title: formConfig.title,
+          },
         },
-      },
-    });
-
-    if (!form.data.formId) {
-      throw new Error("No form ID received from Google Forms API");
-    }
-
-    const formId = form.data.formId;
-
-    // Then, update the form with description and other info
-    await forms.forms.batchUpdate({
-      formId,
-      requestBody: {
-        requests: [
-          // Add description if it exists
-          ...(formConfig.description
-            ? [
-                {
-                  updateFormInfo: {
-                    info: {
-                      description: formConfig.description,
+      });
+
+      if (!form.data.formId) {
+        throw new Error("No form ID received from Google Forms API");
+      }
+
+      const formId = form.data.formId;
+
+      // Then, update the form with description and other info
+      await forms.forms.batchUpdate({
+        formId,
+        requestBody: {
+          requests: [
+            // Add description if it exists
+            ...(formConfig.description
+              ? [
+                  {
+                    updateFormInfo: {
+                      info: {
+                        description: formConfig.description,
+                      },
+                      updateMask: "description",
                     },
-                    updateMask: "description",
                   },
-                },
-              ]
-            : []),
-          // Add all form fields
-          ...formConfig.fields.map((field, index) => ({
-            createItem: {
-              item: {
-                title: field.label,
-                description: field.helpText,
-                questionItem: {
-                  question: {
-                    required: field.required,
-                    textQuestion: {
-                      paragraph: field.type === "textarea",
+                ]
+              : []),
+            // Add all form fields
+            ...formConfig.fields.map((field, index) => ({
+              createItem: {
+                item: {
+                  title: field.label,
+                  description: field.helpText,
+                  questionItem: {
+                    question: {
+                      required: field.required,
+                      textQuestion: {
+                        paragraph: field.type === "textarea",
+                      },
                     },
                   },
                 },
+                location: { index },
               },
-              location: { index },
-            },
-          })),
-        ],
-      },
-    });
-
-    const formUrl = `https://docs.google.com/forms/d/${formId}/viewform`;
-    console.log("Form created successfully:", formUrl);
-
-    res.json({ formUrl });
-  } catch (error) {
-    console.error("Google Forms API error:", error);
-    res.status(500).json({
-      error: "Failed to create Google Form",
-      details: error instanceof Error ? error.message : "Unknown error",
-    });
+            })),
+          ],
+        },
+      });
+
+      const formUrl = `https://docs.google.com/forms/d/${formId}/viewform`;
+      console.log("Form created successfully:", formUrl);
+
+      res.json({ formUrl });
+    } catch (error) {
+      console.error("Google Forms API error:", error);
+      res.status(500).json({
+        error: "Failed to create Google Form",
+        details: error instanceof Error ? error.message : "Unknown error",
+      });
+    }
   }
-});
+);
 
 // Health check endpoint
 app.get("/health", (req, res) => {

server/index.ts

@@ -3,16 +3,20 @@ import { AIFormBuilder } from "./components/form-builder/AIFormBuilder";
 import { FormPreview } from "./pages/FormPreview";
 import { Toaster } from "sonner";
 import { ThemeProvider } from "./components/providers/ThemeProvider";
+import { ErrorBoundary } from "./components/ErrorBoundary";
+
 function App() {
   return (
     <Router>
-      <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
-        <Toaster position="top-center" richColors closeButton />
-        <Routes>
-          <Route path="/" element={<AIFormBuilder />} />
-          <Route path="/preview" element={<FormPreview />} />
-        </Routes>
-      </ThemeProvider>
+      <ErrorBoundary>
+        <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
+          <Toaster position="top-center" richColors closeButton />
+          <Routes>
+            <Route path="/" element={<AIFormBuilder />} />
+            <Route path="/preview" element={<FormPreview />} />
+          </Routes>
+        </ThemeProvider>
+      </ErrorBoundary>
     </Router>
   );
 }

src/App.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { Card } from "./ui/card";
+
+interface Props {
+  children: React.ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error?: Error;
+}
+
+export class ErrorBoundary extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    console.error("Error caught by boundary:", error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <Card className="p-6 m-4 border-destructive">
+          <h2 className="text-lg font-semibold text-destructive">
+            Something went wrong
+          </h2>
+          <p className="mt-2 text-sm text-muted-foreground">
+            Please try refreshing the page or contact support if the problem
+            persists.
+          </p>
+        </Card>
+      );
+    }
+
+    return this.props.children;
+  }
+}

src/components/ErrorBoundary.tsx

@@ -25,13 +25,12 @@ export function AIFormBuilder() {
               </h1>
             </div>
             <p className="max-w-2xl mx-auto text-muted-foreground">
-              Create professional forms instantly using AI. Describe your form
-              requirements, and watch as AI generates a complete form structure
-              for you.
+              Just describe what you need, and watch AI create your perfect form
+              in seconds. It's that simple - from idea to reality in a snap.
             </p>
           </div>
 
-          <Card className="overflow-hidden border-2">
+          <Card className="overflow-hidden border-2 dark:bg-slate-800/55">
             <Tabs defaultValue="build" className="space-y-6">
               <div className="px-6 pt-6 pb-2 border-b bg-card">
                 <TabsList>

src/components/form-builder/AIFormBuilder.tsx

@@ -122,16 +122,19 @@ export function SettingsTab({ config, setConfig }: SettingsTabProps) {
 
               <Button
                 onClick={handleGoogleFormsExport}
-                className="justify-start px-4 h-9 bg-muted/50 hover:bg-muted"
+                className="relative justify-start px-4 h-9 text-muted-foreground hover:bg-muted group"
                 variant="ghost"
                 disabled={isExporting}
               >
                 {isExporting ? (
-                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                  <Loader2 className="w-4 h-4 mr-2 animate-spin " />
                 ) : (
-                  <FileSpreadsheet className="w-4 h-4 mr-2" />
+                  <FileSpreadsheet className="w-4 h-4 mr-2 " />
                 )}
                 Export to Google Forms
+                <span className="absolute -top-1 -right-2 px-1.5 py-0.5 text-[10px] font-semibold tracking-wide rounded-full bg-primary/10 text-primary border border-primary/20">
+                  BETA
+                </span>
               </Button>
 
               <Button

src/components/form-builder/FormBuilderHeader.tsx

@@ -1,19 +1,35 @@
 import { Moon, Sun } from "lucide-react";
 import { useTheme } from "../providers/ThemeProvider";
-import { Switch } from "../ui/switch";
+import { Button } from "../ui/button";
+import { cn } from "@/lib/utils";
 
 export function ThemeToggle() {
   const { theme, setTheme } = useTheme();
+  const isDark = theme === "dark";
 
   return (
-    <div className="flex items-center space-x-2">
-      <Sun className="w-4 h-4" />
-      <Switch
-        checked={theme === "dark"}
-        onCheckedChange={(checked) => setTheme(checked ? "dark" : "light")}
-        aria-label="Toggle theme"
+    <Button
+      variant="outline"
+      size="icon"
+      onClick={() => setTheme(isDark ? "light" : "dark")}
+      className={cn(
+        "relative h-9 w-9 rounded-md border border-input bg-background transition-colors hover:bg-accent",
+        isDark && "hover:bg-accent/50"
+      )}
+    >
+      <Sun
+        className={cn(
+          "h-4 w-4 rotate-0 scale-100 transition-all",
+          isDark ? "rotate-90 scale-0" : "rotate-0 scale-100"
+        )}
       />
-      <Moon className="w-4 h-4" />
-    </div>
+      <Moon
+        className={cn(
+          "absolute h-4 w-4 rotate-90 scale-0 transition-all",
+          isDark ? "rotate-0 scale-100" : "rotate-90 scale-0"
+        )}
+      />
+      <span className="sr-only">Toggle theme</span>
+    </Button>
   );
 }