From 47b41eaeb419719c04d7029ff2479e89507ec05e Mon Sep 17 00:00:00 2001
From: Faisal Ahmed Sifat <Faisalahmed531@gmail.com>
Date: Sat, 22 Feb 2025 17:39:25 +0600
Subject: [PATCH 01/10] feat: adding functionality to change template manually

---
 package-lock.json                             |   5 +-
 .../[id]/resources/new/NewResourceForm.tsx    | 450 ++++++++++++++++--
 src/server/actions/projects.ts                |   2 +-
 3 files changed, 423 insertions(+), 34 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ff2a8d0..914fb6e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,13 @@
 {
-  "name": "mockapi.io",
+  "name": "mock-api",
   "version": "0.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "mockapi.io",
+      "name": "mock-api",
       "version": "0.1.0",
+      "hasInstallScript": true,
       "dependencies": {
         "@faker-js/faker": "^9.5.0",
         "@paralleldrive/cuid2": "^2.2.2",
diff --git a/src/app/projects/[id]/resources/new/NewResourceForm.tsx b/src/app/projects/[id]/resources/new/NewResourceForm.tsx
index 44daf07..926f0bb 100644
--- a/src/app/projects/[id]/resources/new/NewResourceForm.tsx
+++ b/src/app/projects/[id]/resources/new/NewResourceForm.tsx
@@ -1,19 +1,222 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
 import { createResource } from "@/server/actions/resources";
 
+// Enhanced template field structure to support nesting
+interface TemplateField {
+  key: string;
+  type: "simple" | "object" | "array";
+  arrayType?: "simple" | "object"; // New field to specify array type
+  module?: string;
+  method?: string;
+  params?: string[];
+  fields?: TemplateField[]; // For nested objects
+  items?: TemplateField;    // For array items
+  count?: number; // Number of items to generate
+}
+
+// Define available faker modules and their methods
+const FAKER_MODULES = {
+  internet: {
+    label: "Internet",
+    methods: {
+      userName: "Username",
+      email: "Email Address",
+      password: "Password",
+      url: "URL",
+      ip: "IP Address",
+      avatar: "Avatar URL",
+    },
+  },
+  name: {
+    label: "Person",
+    methods: {
+      firstName: "First Name",
+      lastName: "Last Name",
+      fullName: "Full Name",
+      jobTitle: "Job Title",
+    },
+  },
+  number: {
+    label: "Numbers",
+    methods: {
+      int: "Integer",
+      float: "Decimal Number",
+    },
+  },
+  date: {
+    label: "Dates",
+    methods: {
+      past: "Past Date",
+      future: "Future Date",
+      recent: "Recent Date",
+    },
+  },
+  lorem: {
+    label: "Text",
+    methods: {
+      word: "Single Word",
+      words: "Multiple Words",
+      sentence: "Sentence",
+      paragraph: "Paragraph",
+    },
+  },
+  // Add more modules as needed
+};
+
+const FIELD_TYPES = [
+  { value: "simple", label: "Simple Value" },
+  { value: "object", label: "Object" },
+  { value: "array", label: "Array" },
+];
+
 interface NewResourceFormProps {
   projectId: string;
 }
 
+interface FieldBuilderProps {
+  field: TemplateField;
+  onUpdate: (updates: Partial<TemplateField>) => void;
+  onRemove: () => void;
+  depth?: number;
+}
+
+function FieldBuilder({ field, onUpdate, onRemove, depth = 0 }: FieldBuilderProps) {
+  const handleTypeChange = (type: "simple" | "object" | "array") => {
+    const updates: Partial<TemplateField> = { type };
+    if (type === "object") {
+      updates.fields = [];
+      updates.module = undefined;
+      updates.method = undefined;
+    } else if (type === "array") {
+      updates.arrayType = "simple";
+      updates.count = 3;
+      updates.items = { key: "", type: "simple" };
+      updates.module = undefined;
+      updates.method = undefined;
+    }
+    onUpdate(updates);
+  };
+
+  return (
+    <div className={`flex gap-4 items-start bg-gray-800 p-4 rounded-md ${depth > 0 ? 'ml-8' : ''}`}>
+      <div className="flex-1">
+        <input
+          type="text"
+          value={field.key}
+          onChange={(e) => onUpdate({ key: e.target.value })}
+          placeholder="Field name"
+          className="w-full rounded-md border border-gray-600 bg-gray-700 text-gray-100 p-2"
+        />
+      </div>
+
+      <div className="flex-1">
+        <select
+          value={field.type}
+          onChange={(e) => handleTypeChange(e.target.value as "simple" | "object" | "array")}
+          className="w-full rounded-md border border-gray-600 bg-gray-700 text-gray-100 p-2"
+        >
+          {FIELD_TYPES.map(({ value, label }) => (
+            <option key={value} value={value}>{label}</option>
+          ))}
+        </select>
+      </div>
+
+      {field.type === "simple" && (
+        <>
+          <div className="flex-1">
+            <select
+              value={field.module || ""}
+              onChange={(e) => onUpdate({ module: e.target.value, method: "" })}
+              className="w-full rounded-md border border-gray-600 bg-gray-700 text-gray-100 p-2"
+            >
+              <option value="">Select Category</option>
+              {Object.entries(FAKER_MODULES).map(([key, { label }]) => (
+                <option key={key} value={key}>{label}</option>
+              ))}
+            </select>
+          </div>
+
+          <div className="flex-1">
+            <select
+              value={field.method || ""}
+              onChange={(e) => onUpdate({ method: e.target.value })}
+              className="w-full rounded-md border border-gray-600 bg-gray-700 text-gray-100 p-2"
+              disabled={!field.module}
+            >
+              <option value="">Select Type</option>
+              {field.module && Object.entries(FAKER_MODULES[field.module as keyof typeof FAKER_MODULES].methods).map(([key, label]) => (
+                <option key={key} value={key}>{label}</option>
+              ))}
+            </select>
+          </div>
+        </>
+      )}
+
+      {field.type === "array" && (
+        <>
+          <div className="flex-1">
+            <select
+              value={field.arrayType || "simple"}
+              onChange={(e) => onUpdate({ 
+                arrayType: e.target.value as "simple" | "object",
+                items: { 
+                  key: "", 
+                  type: e.target.value as "simple" | "object",
+                  fields: e.target.value === "object" ? [] : undefined
+                }
+              })}
+              className="w-full rounded-md border border-gray-600 bg-gray-700 text-gray-100 p-2"
+            >
+              <option value="simple">Simple Values</option>
+              <option value="object">Objects</option>
+            </select>
+          </div>
+          <div className="flex-1">
+            <input
+              type="number"
+              value={field.count || 3}
+              onChange={(e) => onUpdate({ count: parseInt(e.target.value) })}
+              min={1}
+              max={10}
+              className="w-full rounded-md border border-gray-600 bg-gray-700 text-gray-100 p-2"
+            />
+          </div>
+        </>
+      )}
+
+      <button
+        type="button"
+        onClick={onRemove}
+        className="px-3 py-2 text-red-400 hover:text-red-300"
+      >
+        Remove
+      </button>
+    </div>
+  );
+}
+
+interface TemplateValue {
+  [key: string]: string | TemplateValue | TemplateValue[];
+}
+
+interface EditorMode {
+  mode: "visual" | "manual";
+  template: string;
+}
+
 export default function NewResourceForm({ projectId }: NewResourceFormProps) {
   const router = useRouter();
   const [name, setName] = useState("");
   const [version, setVersion] = useState("v1");
-  const [templateText, setTemplateText] = useState("");
+  const [fields, setFields] = useState<TemplateField[]>([]);
   const [error, setError] = useState<string | null>(null);
+  const [editorState, setEditorState] = useState<EditorMode>({
+    mode: "visual",
+    template: "{}",
+  });
 
   // Function to convert string to slug
   const toSlug = (str: string) => {
@@ -30,10 +233,132 @@ export default function NewResourceForm({ projectId }: NewResourceFormProps) {
     setName(sluggedName);
   };
 
+  const addField = (parentFields?: TemplateField[]) => {
+    const newField: TemplateField = { key: "", type: "simple" };
+    if (parentFields) {
+      parentFields.push(newField);
+      setFields([...fields]);
+    } else {
+      setFields([...fields, newField]);
+    }
+  };
+
+  const updateField = (field: TemplateField, updates: Partial<TemplateField>) => {
+    Object.assign(field, updates);
+    setFields([...fields]);
+  };
+
+  const removeField = (fieldToRemove: TemplateField, parentFields?: TemplateField[]) => {
+    if (parentFields) {
+      const index = parentFields.indexOf(fieldToRemove);
+      if (index !== -1) {
+        parentFields.splice(index, 1);
+        setFields([...fields]);
+      }
+    } else {
+      setFields(fields.filter(f => f !== fieldToRemove));
+    }
+  };
+
+  const generateTemplate = (templateFields: TemplateField[] = fields): TemplateValue => {
+    return templateFields.reduce((acc: TemplateValue, field) => {
+      if (!field.key) return acc;
+
+      if (field.type === "simple" && field.module && field.method) {
+        acc[field.key] = `$${field.module}.${field.method}`;
+      } else if (field.type === "object" && field.fields) {
+        acc[field.key] = generateTemplate(field.fields);
+      } else if (field.type === "array" && field.items) {
+        const count = field.count || 3;
+        
+        if (field.arrayType === "simple" && field.items.module && field.items.method) {
+          // For simple arrays, create an array of faker methods
+          acc[field.key] = Array(count).fill(`$${field.items.module}.${field.items.method}`);
+        } else if (field.arrayType === "object" && field.items.fields) {
+          // For object arrays, create an array of object templates
+          const itemTemplate = generateTemplate(field.items.fields);
+          acc[field.key] = Array(count).fill(itemTemplate);
+        }
+      }
+      return acc;
+    }, {});
+  };
+
+  const renderFields = (templateFields: TemplateField[] = fields, depth = 0) => {
+    return (
+      <div className="space-y-4">
+        {templateFields.map((field, index) => (
+          <div key={index}>
+            <FieldBuilder
+              field={field}
+              onUpdate={(updates) => updateField(field, updates)}
+              onRemove={() => removeField(field, depth > 0 ? templateFields : undefined)}
+              depth={depth}
+            />
+            
+            {field.type === "object" && field.fields && (
+              <div className="mt-2">
+                {renderFields(field.fields, depth + 1)}
+                <button
+                  type="button"
+                  onClick={() => addField(field.fields)}
+                  className="ml-8 mt-2 py-2 px-4 border border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-300 bg-gray-800 hover:bg-gray-700"
+                >
+                  Add Nested Field
+                </button>
+              </div>
+            )}
+            
+            {field.type === "array" && field.items && (
+              <div className="ml-8 mt-2">
+                <div className="text-sm text-gray-400 mb-2">
+                  Array Item Template ({field.arrayType === "simple" ? "Simple Values" : "Objects"}):
+                </div>
+                {field.arrayType === "simple" ? (
+                  <FieldBuilder
+                    field={field.items}
+                    onUpdate={(updates) => updateField(field.items!, updates)}
+                    onRemove={() => {}}
+                    depth={depth + 1}
+                  />
+                ) : (
+                  <>
+                    {renderFields(field.items.fields || [], depth + 1)}
+                    <button
+                      type="button"
+                      onClick={() => addField(field.items.fields)}
+                      className="ml-8 mt-2 py-2 px-4 border border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-300 bg-gray-800 hover:bg-gray-700"
+                    >
+                      Add Object Field
+                    </button>
+                  </>
+                )}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  const handleTemplateChange = (value: string) => {
+    try {
+      // Validate JSON
+      JSON.parse(value);
+      setEditorState({ ...editorState, template: value });
+      setError(null);
+    } catch (e) {
+      setError("Invalid JSON format");
+    }
+  };
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     try {
-      const template = JSON.parse(templateText);
+      const template = editorState.mode === "visual" 
+        ? generateTemplate()
+        : JSON.parse(editorState.template);
+      
       const endpoint = `${version}/${name}`;
       await createResource(projectId, {
         name,
@@ -43,10 +368,17 @@ export default function NewResourceForm({ projectId }: NewResourceFormProps) {
       router.push(`/projects/${projectId}`);
     } catch (error) {
       console.error(error);
-      setError("Invalid JSON format. Please check your template.");
+      setError("Failed to create resource. Please try again.");
     }
   };
 
+  useEffect(() => {
+    if (editorState.mode === "visual") {
+      const template = generateTemplate();
+      setEditorState(prev => ({ ...prev, template: JSON.stringify(template, null, 2) }));
+    }
+  }, [fields]);
+
   return (
     <div className="max-w-4xl mx-auto py-8 px-4">
       <h1 className="text-2xl font-bold mb-6 text-gray-100">
@@ -95,47 +427,103 @@ export default function NewResourceForm({ projectId }: NewResourceFormProps) {
           </p>
         </div>
 
-        <div>
-          <label className="block text-sm font-medium text-gray-300">
-            Data Template
-          </label>
-          <textarea
-            rows={10}
-            value={templateText}
-            onChange={(e) => {
-              setTemplateText(e.target.value);
-              setError(null);
-            }}
-            className="mt-1 block w-full rounded-md border border-gray-600 bg-gray-700 text-gray-100 shadow-sm focus:border-blue-500 focus:ring-blue-500 font-mono text-sm p-2"
-            placeholder={`{
+        <div className="space-y-4">
+          <div className="flex justify-between items-center">
+            <label className="block text-sm font-medium text-gray-300">
+              Data Template Builder
+            </label>
+            <div className="flex gap-2">
+              <button
+                type="button"
+                onClick={() => setEditorState({ ...editorState, mode: "visual" })}
+                className={`px-3 py-1 text-sm rounded-md transition-colors ${
+                  editorState.mode === "visual"
+                    ? "bg-blue-600 text-white"
+                    : "bg-gray-700 text-gray-300 hover:bg-gray-600"
+                }`}
+              >
+                Visual Builder
+              </button>
+              <button
+                type="button"
+                onClick={() => setEditorState({ 
+                  mode: "manual", 
+                  template: JSON.stringify(generateTemplate(), null, 2)
+                })}
+                className={`px-3 py-1 text-sm rounded-md transition-colors ${
+                  editorState.mode === "manual"
+                    ? "bg-blue-600 text-white"
+                    : "bg-gray-700 text-gray-300 hover:bg-gray-600"
+                }`}
+              >
+                Manual JSON
+              </button>
+            </div>
+          </div>
+
+          {editorState.mode === "visual" ? (
+            <>
+              {renderFields()}
+              <button
+                type="button"
+                onClick={() => addField()}
+                className="w-full py-2 px-4 border border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-300 bg-gray-800 hover:bg-gray-700"
+              >
+                Add Field
+              </button>
+            </>
+          ) : (
+            <div className="space-y-2">
+              <textarea
+                value={editorState.template}
+                onChange={(e) => handleTemplateChange(e.target.value)}
+                className="w-full h-96 rounded-md border border-gray-600 bg-gray-700 text-gray-100 font-mono text-sm p-4"
+                placeholder={`{
   "username": "$internet.userName",
-  "email": "$internet.email",
-  "status": "$helpers.arrayElement([\"active\", \"inactive\", \"pending\"])",
-  "profile": {
+  "details": {
     "firstName": "$name.firstName",
-    "lastName": "$name.lastName",
-    "age": "$number.int(18, 80)"
-  }
+    "lastName": "$name.lastName"
+  },
+  "numbers": [
+    "$phone.number",
+    "$phone.number",
+    "$phone.number"
+  ]
 }`}
-            required
-          />
-          {error && <p className="mt-2 text-sm text-red-500">{error}</p>}
-          <p className="mt-2 text-sm text-gray-400">
-            Use $faker.method for dynamic values
-          </p>
+              />
+              <p className="text-sm text-gray-400">
+                Use $module.method syntax for dynamic values (e.g., $internet.userName, $name.firstName)
+              </p>
+            </div>
+          )}
+
+          {fields.length > 0 && (
+            <div className="mt-4">
+              <label className="block text-sm font-medium text-gray-300 mb-2">
+                Template Preview
+              </label>
+              <pre className="bg-gray-800 p-4 rounded-md overflow-x-auto">
+                <code className="text-sm text-gray-100">
+                  {JSON.stringify(generateTemplate(), null, 2)}
+                </code>
+              </pre>
+            </div>
+          )}
         </div>
 
+        {error && <p className="text-sm text-red-500">{error}</p>}
+
         <div className="flex gap-4">
           <button
             type="button"
             onClick={() => router.push(`/projects/${projectId}`)}
-            className="flex-1 py-2 px-4 border border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-300 bg-gray-800 hover:bg-gray-700 transition-colors duration-200"
+            className="flex-1 py-2 px-4 border border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-300 bg-gray-800 hover:bg-gray-700"
           >
             Cancel
           </button>
           <button
             type="submit"
-            className="flex-1 py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 transition-colors duration-200"
+            className="flex-1 py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700"
           >
             Create Resource
           </button>
diff --git a/src/server/actions/projects.ts b/src/server/actions/projects.ts
index 94bb943..cfbe583 100644
--- a/src/server/actions/projects.ts
+++ b/src/server/actions/projects.ts
@@ -34,7 +34,7 @@ export async function getProjectsWithoutResources() {
 }
 
 export async function getProject(id: string) {
-  return prisma.project.findUnique({
+  return await prisma.project.findUnique({
     where: { id },
     include: {
       resources: true,

From 7cf130aa04e77da63a051ed7343dfa36693ebae7 Mon Sep 17 00:00:00 2001
From: Faisal Ahmed Sifat <Faisalahmed531@gmail.com>
Date: Sat, 22 Feb 2025 18:10:41 +0600
Subject: [PATCH 02/10] fix: fixes array error being shown as objects

---
 .../[id]/resources/new/NewResourceForm.tsx    | 26 ++++++-----
 src/lib/faker.ts                              | 43 ++++++++++++++++---
 src/utils/templateUtils.ts                    | 43 +++++++++++++++++++
 3 files changed, 95 insertions(+), 17 deletions(-)
 create mode 100644 src/utils/templateUtils.ts

diff --git a/src/app/projects/[id]/resources/new/NewResourceForm.tsx b/src/app/projects/[id]/resources/new/NewResourceForm.tsx
index 926f0bb..fa06119 100644
--- a/src/app/projects/[id]/resources/new/NewResourceForm.tsx
+++ b/src/app/projects/[id]/resources/new/NewResourceForm.tsx
@@ -260,8 +260,8 @@ export default function NewResourceForm({ projectId }: NewResourceFormProps) {
     }
   };
 
-  const generateTemplate = (templateFields: TemplateField[] = fields): TemplateValue => {
-    return templateFields.reduce((acc: TemplateValue, field) => {
+  const generateTemplate = (templateFields: TemplateField[] = fields): Record<string, any> => {
+    return templateFields.reduce((acc: Record<string, any>, field) => {
       if (!field.key) return acc;
 
       if (field.type === "simple" && field.module && field.method) {
@@ -272,12 +272,17 @@ export default function NewResourceForm({ projectId }: NewResourceFormProps) {
         const count = field.count || 3;
         
         if (field.arrayType === "simple" && field.items.module && field.items.method) {
-          // For simple arrays, create an array of faker methods
-          acc[field.key] = Array(count).fill(`$${field.items.module}.${field.items.method}`);
+          // Create a proper array using Array constructor and map
+          acc[field.key] = Array.from(
+            { length: count }, 
+            () => `$${field.items!.module}.${field.items!.method}`
+          );
         } else if (field.arrayType === "object" && field.items.fields) {
-          // For object arrays, create an array of object templates
-          const itemTemplate = generateTemplate(field.items.fields);
-          acc[field.key] = Array(count).fill(itemTemplate);
+          // Create array of objects
+          acc[field.key] = Array.from(
+            { length: count }, 
+            () => generateTemplate(field.items!.fields || [])
+          );
         }
       }
       return acc;
@@ -301,7 +306,7 @@ export default function NewResourceForm({ projectId }: NewResourceFormProps) {
                 {renderFields(field.fields, depth + 1)}
                 <button
                   type="button"
-                  onClick={() => addField(field.fields)}
+                  onClick={() => field.fields && addField(field.fields)}
                   className="ml-8 mt-2 py-2 px-4 border border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-300 bg-gray-800 hover:bg-gray-700"
                 >
                   Add Nested Field
@@ -326,7 +331,7 @@ export default function NewResourceForm({ projectId }: NewResourceFormProps) {
                     {renderFields(field.items.fields || [], depth + 1)}
                     <button
                       type="button"
-                      onClick={() => addField(field.items.fields)}
+                      onClick={() => field.items?.fields && addField(field.items.fields)}
                       className="ml-8 mt-2 py-2 px-4 border border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-300 bg-gray-800 hover:bg-gray-700"
                     >
                       Add Object Field
@@ -343,11 +348,10 @@ export default function NewResourceForm({ projectId }: NewResourceFormProps) {
 
   const handleTemplateChange = (value: string) => {
     try {
-      // Validate JSON
       JSON.parse(value);
       setEditorState({ ...editorState, template: value });
       setError(null);
-    } catch (e) {
+    } catch (_) { // Use underscore to indicate intentionally unused variable
       setError("Invalid JSON format");
     }
   };
diff --git a/src/lib/faker.ts b/src/lib/faker.ts
index 35a3d3f..c641b34 100644
--- a/src/lib/faker.ts
+++ b/src/lib/faker.ts
@@ -109,19 +109,51 @@ export function processFakerTemplate(template: FakerTemplate): FakerTemplate {
       continue;
     }
 
-    if (typeof value === "string" && value.startsWith("$")) {
+    // Add array handling
+    if (Array.isArray(value)) {
+      // Process array values
+      result[key] = value.map(item => {
+        if (typeof item === "string" && item.startsWith("$")) {
+          try {
+            const methodString = item.substring(1);
+            const { path, args } = parseMethodCall(methodString);
+            
+            let fakerModule: any = faker;
+            for (let i = 0; i < path.length - 1; i++) {
+              fakerModule = fakerModule[path[i]];
+              if (!fakerModule) {
+                throw new Error(`Invalid faker path: ${path.slice(0, i + 1).join(".")}`);
+              }
+            }
+
+            const methodName = path[path.length - 1];
+            const method = fakerModule[methodName];
+
+            if (typeof method !== "function") {
+              throw new Error(`Invalid faker method: ${path.join(".")}`);
+            }
+
+            return args.length ? method(...args) : method();
+          } catch (error) {
+            console.warn(`Failed to process faker path: ${item}`, error);
+            return item;
+          }
+        } else if (typeof item === "object" && item !== null) {
+          return processFakerTemplate(item as FakerTemplate);
+        }
+        return item;
+      });
+    } else if (typeof value === "string" && value.startsWith("$")) {
+      // Existing string processing logic
       try {
         const methodString = value.substring(1);
         const { path, args } = parseMethodCall(methodString);
 
-        // Traverse the faker object to get the desired method
         let fakerModule: any = faker;
         for (let i = 0; i < path.length - 1; i++) {
           fakerModule = fakerModule[path[i]];
           if (!fakerModule) {
-            throw new Error(
-              `Invalid faker path: ${path.slice(0, i + 1).join(".")}`
-            );
+            throw new Error(`Invalid faker path: ${path.slice(0, i + 1).join(".")}`);
           }
         }
 
@@ -132,7 +164,6 @@ export function processFakerTemplate(template: FakerTemplate): FakerTemplate {
           throw new Error(`Invalid faker method: ${path.join(".")}`);
         }
 
-        // Call the method with arguments
         result[key] = args.length ? method(...args) : method();
       } catch (error) {
         console.warn(`Failed to process faker path: ${value}`, error);
diff --git a/src/utils/templateUtils.ts b/src/utils/templateUtils.ts
new file mode 100644
index 0000000..27ac0eb
--- /dev/null
+++ b/src/utils/templateUtils.ts
@@ -0,0 +1,43 @@
+import { TemplateField } from "@/types/template";
+
+type TemplateValue = string | TemplateValue[] | { [key: string]: TemplateValue };
+
+export const generateTemplate = (fields: TemplateField[]): Record<string, TemplateValue> => {
+  return fields.reduce((acc: Record<string, TemplateValue>, field) => {
+    if (!field.key) return acc;
+
+    if (field.type === "simple" && field.module && field.method) {
+      acc[field.key] = `$${field.module}.${field.method}`;
+    } else if (field.type === "object" && field.fields) {
+      acc[field.key] = generateTemplate(field.fields);
+    } else if (field.type === "array" && field.items) {
+      const count = field.count || 3;
+      
+      if (field.arrayType === "simple" && field.items.module && field.items.method) {
+        // Generate a proper array of values
+        const values = [];
+        for (let i = 0; i < count; i++) {
+          values.push(`$${field.items.module}.${field.items.method}`);
+        }
+        acc[field.key] = values;
+      } else if (field.arrayType === "object" && field.items.fields) {
+        // Generate a proper array of objects
+        const objects = [];
+        for (let i = 0; i < count; i++) {
+          objects.push(generateTemplate(field.items.fields || []));
+        }
+        acc[field.key] = objects;
+      }
+    }
+    return acc;
+  }, {});
+};
+
+export const toSlug = (str: string): string => {
+  return str
+    .toLowerCase()
+    .trim()
+    .replace(/[^\w\s-]/g, "")
+    .replace(/[\s_-]+/g, "-")
+    .replace(/^-+|-+$/g, "");
+}; 
\ No newline at end of file

From ffdaf775e122a21b6d32f291535a92c014b1a342 Mon Sep 17 00:00:00 2001
From: Faisal Ahmed Sifat <Faisalahmed531@gmail.com>
Date: Sat, 22 Feb 2025 21:17:56 +0600
Subject: [PATCH 03/10] chore: optimizing code architecture and basic bug fixes
 for production

---
 package-lock.json                             |  12 +-
 package.json                                  |   3 +-
 .../[id]/resources/new/NewResourceForm.tsx    | 550 +++---------------
 src/components/resource/ResourceNameInput.tsx |  27 +
 src/components/resource/VersionInput.tsx      |  27 +
 src/components/template/FieldBuilder.tsx      | 190 ++++++
 src/components/template/TemplateEditor.tsx    | 110 ++++
 src/constants/fakerModules.ts                 |  77 +++
 src/schemas/template.ts                       |  34 ++
 src/server/actions/projects.ts                |   6 +-
 src/types/template.ts                         |  11 +
 src/utils/templateUtils.ts                    |   4 +-
 12 files changed, 589 insertions(+), 462 deletions(-)
 create mode 100644 src/components/resource/ResourceNameInput.tsx
 create mode 100644 src/components/resource/VersionInput.tsx
 create mode 100644 src/components/template/FieldBuilder.tsx
 create mode 100644 src/components/template/TemplateEditor.tsx
 create mode 100644 src/constants/fakerModules.ts
 create mode 100644 src/schemas/template.ts
 create mode 100644 src/types/template.ts

diff --git a/package-lock.json b/package-lock.json
index 914fb6e..7a6da63 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,8 @@
         "@prisma/client": "^6.3.1",
         "next": "15.1.7",
         "react": "^19.0.0",
-        "react-dom": "^19.0.0"
+        "react-dom": "^19.0.0",
+        "zod": "^3.24.2"
       },
       "devDependencies": {
         "@eslint/eslintrc": "^3",
@@ -6076,6 +6077,15 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zod": {
+      "version": "3.24.2",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.24.2.tgz",
+      "integrity": "sha512-lY7CDW43ECgW9u1TcT3IoXHflywfVqDYze4waEz812jR/bZ8FHDsl7pFQoSZTz5N+2NqRXs8GBwnAwo3ZNxqhQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 7fb03cf..5d4f732 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,8 @@
     "@prisma/client": "^6.3.1",
     "next": "15.1.7",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "zod": "^3.24.2"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
diff --git a/src/app/projects/[id]/resources/new/NewResourceForm.tsx b/src/app/projects/[id]/resources/new/NewResourceForm.tsx
index fa06119..07ed998 100644
--- a/src/app/projects/[id]/resources/new/NewResourceForm.tsx
+++ b/src/app/projects/[id]/resources/new/NewResourceForm.tsx
@@ -2,356 +2,116 @@
 
 import { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
+import { ResourceNameInput } from "@/components/resource/ResourceNameInput";
+import { VersionInput } from "@/components/resource/VersionInput";
+import { TemplateEditor } from "@/components/template/TemplateEditor";
+import { generateTemplate } from "@/utils/templateUtils";
 import { createResource } from "@/server/actions/resources";
-
-// Enhanced template field structure to support nesting
-interface TemplateField {
-  key: string;
-  type: "simple" | "object" | "array";
-  arrayType?: "simple" | "object"; // New field to specify array type
-  module?: string;
-  method?: string;
-  params?: string[];
-  fields?: TemplateField[]; // For nested objects
-  items?: TemplateField;    // For array items
-  count?: number; // Number of items to generate
-}
-
-// Define available faker modules and their methods
-const FAKER_MODULES = {
-  internet: {
-    label: "Internet",
-    methods: {
-      userName: "Username",
-      email: "Email Address",
-      password: "Password",
-      url: "URL",
-      ip: "IP Address",
-      avatar: "Avatar URL",
-    },
-  },
-  name: {
-    label: "Person",
-    methods: {
-      firstName: "First Name",
-      lastName: "Last Name",
-      fullName: "Full Name",
-      jobTitle: "Job Title",
-    },
-  },
-  number: {
-    label: "Numbers",
-    methods: {
-      int: "Integer",
-      float: "Decimal Number",
-    },
-  },
-  date: {
-    label: "Dates",
-    methods: {
-      past: "Past Date",
-      future: "Future Date",
-      recent: "Recent Date",
-    },
-  },
-  lorem: {
-    label: "Text",
-    methods: {
-      word: "Single Word",
-      words: "Multiple Words",
-      sentence: "Sentence",
-      paragraph: "Paragraph",
-    },
-  },
-  // Add more modules as needed
-};
-
-const FIELD_TYPES = [
-  { value: "simple", label: "Simple Value" },
-  { value: "object", label: "Object" },
-  { value: "array", label: "Array" },
-];
+import type { TemplateField } from "@/types/template";
+import { EditorStateSchema, type EditorState } from "@/schemas/template";
 
 interface NewResourceFormProps {
   projectId: string;
 }
 
-interface FieldBuilderProps {
-  field: TemplateField;
-  onUpdate: (updates: Partial<TemplateField>) => void;
-  onRemove: () => void;
-  depth?: number;
-}
-
-function FieldBuilder({ field, onUpdate, onRemove, depth = 0 }: FieldBuilderProps) {
-  const handleTypeChange = (type: "simple" | "object" | "array") => {
-    const updates: Partial<TemplateField> = { type };
-    if (type === "object") {
-      updates.fields = [];
-      updates.module = undefined;
-      updates.method = undefined;
-    } else if (type === "array") {
-      updates.arrayType = "simple";
-      updates.count = 3;
-      updates.items = { key: "", type: "simple" };
-      updates.module = undefined;
-      updates.method = undefined;
-    }
-    onUpdate(updates);
-  };
-
-  return (
-    <div className={`flex gap-4 items-start bg-gray-800 p-4 rounded-md ${depth > 0 ? 'ml-8' : ''}`}>
-      <div className="flex-1">
-        <input
-          type="text"
-          value={field.key}
-          onChange={(e) => onUpdate({ key: e.target.value })}
-          placeholder="Field name"
-          className="w-full rounded-md border border-gray-600 bg-gray-700 text-gray-100 p-2"
-        />
-      </div>
-
-      <div className="flex-1">
-        <select
-          value={field.type}
-          onChange={(e) => handleTypeChange(e.target.value as "simple" | "object" | "array")}
-          className="w-full rounded-md border border-gray-600 bg-gray-700 text-gray-100 p-2"
-        >
-          {FIELD_TYPES.map(({ value, label }) => (
-            <option key={value} value={value}>{label}</option>
-          ))}
-        </select>
-      </div>
-
-      {field.type === "simple" && (
-        <>
-          <div className="flex-1">
-            <select
-              value={field.module || ""}
-              onChange={(e) => onUpdate({ module: e.target.value, method: "" })}
-              className="w-full rounded-md border border-gray-600 bg-gray-700 text-gray-100 p-2"
-            >
-              <option value="">Select Category</option>
-              {Object.entries(FAKER_MODULES).map(([key, { label }]) => (
-                <option key={key} value={key}>{label}</option>
-              ))}
-            </select>
-          </div>
-
-          <div className="flex-1">
-            <select
-              value={field.method || ""}
-              onChange={(e) => onUpdate({ method: e.target.value })}
-              className="w-full rounded-md border border-gray-600 bg-gray-700 text-gray-100 p-2"
-              disabled={!field.module}
-            >
-              <option value="">Select Type</option>
-              {field.module && Object.entries(FAKER_MODULES[field.module as keyof typeof FAKER_MODULES].methods).map(([key, label]) => (
-                <option key={key} value={key}>{label}</option>
-              ))}
-            </select>
-          </div>
-        </>
-      )}
-
-      {field.type === "array" && (
-        <>
-          <div className="flex-1">
-            <select
-              value={field.arrayType || "simple"}
-              onChange={(e) => onUpdate({ 
-                arrayType: e.target.value as "simple" | "object",
-                items: { 
-                  key: "", 
-                  type: e.target.value as "simple" | "object",
-                  fields: e.target.value === "object" ? [] : undefined
-                }
-              })}
-              className="w-full rounded-md border border-gray-600 bg-gray-700 text-gray-100 p-2"
-            >
-              <option value="simple">Simple Values</option>
-              <option value="object">Objects</option>
-            </select>
-          </div>
-          <div className="flex-1">
-            <input
-              type="number"
-              value={field.count || 3}
-              onChange={(e) => onUpdate({ count: parseInt(e.target.value) })}
-              min={1}
-              max={10}
-              className="w-full rounded-md border border-gray-600 bg-gray-700 text-gray-100 p-2"
-            />
-          </div>
-        </>
-      )}
-
-      <button
-        type="button"
-        onClick={onRemove}
-        className="px-3 py-2 text-red-400 hover:text-red-300"
-      >
-        Remove
-      </button>
-    </div>
-  );
-}
-
-interface TemplateValue {
-  [key: string]: string | TemplateValue | TemplateValue[];
-}
-
-interface EditorMode {
-  mode: "visual" | "manual";
-  template: string;
-}
-
 export default function NewResourceForm({ projectId }: NewResourceFormProps) {
   const router = useRouter();
   const [name, setName] = useState("");
   const [version, setVersion] = useState("v1");
   const [fields, setFields] = useState<TemplateField[]>([]);
   const [error, setError] = useState<string | null>(null);
-  const [editorState, setEditorState] = useState<EditorMode>({
+  const [editorState, setEditorState] = useState<EditorState>({
     mode: "visual",
     template: "{}",
   });
 
-  // Function to convert string to slug
-  const toSlug = (str: string) => {
-    return str
-      .toLowerCase()
-      .trim()
-      .replace(/[^\w\s-]/g, "") // Remove non-word chars
-      .replace(/[\s_-]+/g, "-") // Replace spaces and _ with -
-      .replace(/^-+|-+$/g, ""); // Remove leading/trailing -
-  };
+  // Sync fields with manual template when switching modes
+  useEffect(() => {
+    if (editorState.mode === "manual" && fields.length > 0) {
+      const template = JSON.stringify(generateTemplate(fields), null, 2);
+      setEditorState(prev => ({ ...prev, template }));
+    }
+  }, [editorState.mode, fields]);
 
-  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const sluggedName = toSlug(e.target.value);
-    setName(sluggedName);
-  };
+  const handleUpdateField = (field: TemplateField, updates: Partial<TemplateField>) => {
+    const updateFieldInArray = (fieldsArray: TemplateField[]): TemplateField[] => {
+      return fieldsArray.map(f => {
+        if (f === field) {
+          return { ...f, ...updates };
+        }
+        if (f.type === "object" && f.fields) {
+          return { ...f, fields: updateFieldInArray(f.fields) };
+        }
+        if (f.type === "array" && f.items) {
+          if (f.items === field) {
+            return { ...f, items: { ...f.items, ...updates } };
+          }
+          if (f.items.fields) {
+            return { ...f, items: { ...f.items, fields: updateFieldInArray(f.items.fields) } };
+          }
+        }
+        return f;
+      });
+    };
 
-  const addField = (parentFields?: TemplateField[]) => {
-    const newField: TemplateField = { key: "", type: "simple" };
-    if (parentFields) {
-      parentFields.push(newField);
-      setFields([...fields]);
-    } else {
-      setFields([...fields, newField]);
-    }
+    setFields(updateFieldInArray(fields));
   };
 
-  const updateField = (field: TemplateField, updates: Partial<TemplateField>) => {
-    Object.assign(field, updates);
-    setFields([...fields]);
-  };
+  const handleRemoveField = (fieldToRemove: TemplateField) => {
+    const removeFieldFromArray = (fieldsArray: TemplateField[]): TemplateField[] => {
+      return fieldsArray.filter(f => {
+        if (f === fieldToRemove) return false;
+        if (f.type === "object" && f.fields) {
+          f.fields = removeFieldFromArray(f.fields);
+        }
+        if (f.type === "array" && f.items && f.items.fields) {
+          f.items.fields = removeFieldFromArray(f.items.fields);
+        }
+        return true;
+      });
+    };
 
-  const removeField = (fieldToRemove: TemplateField, parentFields?: TemplateField[]) => {
-    if (parentFields) {
-      const index = parentFields.indexOf(fieldToRemove);
-      if (index !== -1) {
-        parentFields.splice(index, 1);
-        setFields([...fields]);
-      }
-    } else {
-      setFields(fields.filter(f => f !== fieldToRemove));
-    }
+    setFields(removeFieldFromArray(fields));
   };
 
-  const generateTemplate = (templateFields: TemplateField[] = fields): Record<string, any> => {
-    return templateFields.reduce((acc: Record<string, any>, field) => {
-      if (!field.key) return acc;
-
-      if (field.type === "simple" && field.module && field.method) {
-        acc[field.key] = `$${field.module}.${field.method}`;
-      } else if (field.type === "object" && field.fields) {
-        acc[field.key] = generateTemplate(field.fields);
-      } else if (field.type === "array" && field.items) {
-        const count = field.count || 3;
-        
-        if (field.arrayType === "simple" && field.items.module && field.items.method) {
-          // Create a proper array using Array constructor and map
-          acc[field.key] = Array.from(
-            { length: count }, 
-            () => `$${field.items!.module}.${field.items!.method}`
-          );
-        } else if (field.arrayType === "object" && field.items.fields) {
-          // Create array of objects
-          acc[field.key] = Array.from(
-            { length: count }, 
-            () => generateTemplate(field.items!.fields || [])
-          );
+  const handleAddNestedField = (parentField: TemplateField) => {
+    const updateFieldInArray = (fieldsArray: TemplateField[]): TemplateField[] => {
+      return fieldsArray.map(f => {
+        if (f === parentField) {
+          return {
+            ...f,
+            fields: [...(f.fields || []), { key: "", type: "simple" }]
+          };
+        }
+        if (f.type === "object" && f.fields) {
+          return { ...f, fields: updateFieldInArray(f.fields) };
         }
-      }
-      return acc;
-    }, {});
+        return f;
+      });
+    };
+
+    setFields(updateFieldInArray(fields));
   };
 
-  const renderFields = (templateFields: TemplateField[] = fields, depth = 0) => {
-    return (
-      <div className="space-y-4">
-        {templateFields.map((field, index) => (
-          <div key={index}>
-            <FieldBuilder
-              field={field}
-              onUpdate={(updates) => updateField(field, updates)}
-              onRemove={() => removeField(field, depth > 0 ? templateFields : undefined)}
-              depth={depth}
-            />
-            
-            {field.type === "object" && field.fields && (
-              <div className="mt-2">
-                {renderFields(field.fields, depth + 1)}
-                <button
-                  type="button"
-                  onClick={() => field.fields && addField(field.fields)}
-                  className="ml-8 mt-2 py-2 px-4 border border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-300 bg-gray-800 hover:bg-gray-700"
-                >
-                  Add Nested Field
-                </button>
-              </div>
-            )}
-            
-            {field.type === "array" && field.items && (
-              <div className="ml-8 mt-2">
-                <div className="text-sm text-gray-400 mb-2">
-                  Array Item Template ({field.arrayType === "simple" ? "Simple Values" : "Objects"}):
-                </div>
-                {field.arrayType === "simple" ? (
-                  <FieldBuilder
-                    field={field.items}
-                    onUpdate={(updates) => updateField(field.items!, updates)}
-                    onRemove={() => {}}
-                    depth={depth + 1}
-                  />
-                ) : (
-                  <>
-                    {renderFields(field.items.fields || [], depth + 1)}
-                    <button
-                      type="button"
-                      onClick={() => field.items?.fields && addField(field.items.fields)}
-                      className="ml-8 mt-2 py-2 px-4 border border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-300 bg-gray-800 hover:bg-gray-700"
-                    >
-                      Add Object Field
-                    </button>
-                  </>
-                )}
-              </div>
-            )}
-          </div>
-        ))}
-      </div>
-    );
+  const handleModeChange = (mode: "visual" | "manual") => {
+    try {
+      const newState = { mode, template: editorState.template };
+      EditorStateSchema.parse(newState);
+      setEditorState(newState);
+    } catch (error) {
+      console.error(error);
+      setError("Invalid editor state");
+    }
   };
 
   const handleTemplateChange = (value: string) => {
     try {
-      JSON.parse(value);
-      setEditorState({ ...editorState, template: value });
+      JSON.parse(value); // Validate JSON
+      const newState = { ...editorState, template: value };
+      EditorStateSchema.parse(newState);
+      setEditorState(newState);
       setError(null);
-    } catch (_) { // Use underscore to indicate intentionally unused variable
+    } catch {
       setError("Invalid JSON format");
     }
   };
@@ -360,13 +120,12 @@ export default function NewResourceForm({ projectId }: NewResourceFormProps) {
     e.preventDefault();
     try {
       const template = editorState.mode === "visual" 
-        ? generateTemplate()
+        ? generateTemplate(fields)
         : JSON.parse(editorState.template);
       
-      const endpoint = `${version}/${name}`;
       await createResource(projectId, {
         name,
-        endpoint,
+        endpoint: `${version}/${name}`,
         template,
       });
       router.push(`/projects/${projectId}`);
@@ -376,147 +135,26 @@ export default function NewResourceForm({ projectId }: NewResourceFormProps) {
     }
   };
 
-  useEffect(() => {
-    if (editorState.mode === "visual") {
-      const template = generateTemplate();
-      setEditorState(prev => ({ ...prev, template: JSON.stringify(template, null, 2) }));
-    }
-  }, [fields]);
-
   return (
     <div className="max-w-4xl mx-auto py-8 px-4">
       <h1 className="text-2xl font-bold mb-6 text-gray-100">
         Create New Resource
       </h1>
       <form onSubmit={handleSubmit} className="space-y-6">
-        <div>
-          <label className="block text-sm font-medium text-gray-300">
-            Resource Name
-          </label>
-          <input
-            type="text"
-            value={name}
-            onChange={handleNameChange}
-            className="mt-1 block w-full rounded-md border border-gray-600 bg-gray-700 text-gray-100 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm p-2"
-            placeholder="users-posts"
-            required
-            pattern="^[a-z0-9]+(?:-[a-z0-9]+)*$"
-            title="Lowercase letters, numbers, and hyphens only. Must start and end with a letter or number."
-          />
-          <p className="mt-1 text-sm text-gray-400">
-            Use lowercase letters, numbers, and hyphens only (e.g.,
-            &quot;blog-posts&quot;, &quot;users&quot;, &quot;api-keys&quot;)
-          </p>
-        </div>
-
-        <div>
-          <label className="block text-sm font-medium text-gray-300">
-            API Version
-          </label>
-          <div className="mt-1 flex rounded-md shadow-sm">
-            <span className="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-600 bg-gray-800 text-gray-400 sm:text-sm">
-              api/
-            </span>
-            <input
-              type="text"
-              value={version}
-              onChange={(e) => setVersion(e.target.value)}
-              className="flex-1 block w-full rounded-none rounded-r-md border border-gray-600 bg-gray-700 text-gray-100 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm p-2"
-              placeholder="v1"
-              required
-            />
-          </div>
-          <p className="mt-1 text-sm text-gray-400">
-            Example: v1, v2, beta, etc.
-          </p>
-        </div>
-
-        <div className="space-y-4">
-          <div className="flex justify-between items-center">
-            <label className="block text-sm font-medium text-gray-300">
-              Data Template Builder
-            </label>
-            <div className="flex gap-2">
-              <button
-                type="button"
-                onClick={() => setEditorState({ ...editorState, mode: "visual" })}
-                className={`px-3 py-1 text-sm rounded-md transition-colors ${
-                  editorState.mode === "visual"
-                    ? "bg-blue-600 text-white"
-                    : "bg-gray-700 text-gray-300 hover:bg-gray-600"
-                }`}
-              >
-                Visual Builder
-              </button>
-              <button
-                type="button"
-                onClick={() => setEditorState({ 
-                  mode: "manual", 
-                  template: JSON.stringify(generateTemplate(), null, 2)
-                })}
-                className={`px-3 py-1 text-sm rounded-md transition-colors ${
-                  editorState.mode === "manual"
-                    ? "bg-blue-600 text-white"
-                    : "bg-gray-700 text-gray-300 hover:bg-gray-600"
-                }`}
-              >
-                Manual JSON
-              </button>
-            </div>
-          </div>
-
-          {editorState.mode === "visual" ? (
-            <>
-              {renderFields()}
-              <button
-                type="button"
-                onClick={() => addField()}
-                className="w-full py-2 px-4 border border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-300 bg-gray-800 hover:bg-gray-700"
-              >
-                Add Field
-              </button>
-            </>
-          ) : (
-            <div className="space-y-2">
-              <textarea
-                value={editorState.template}
-                onChange={(e) => handleTemplateChange(e.target.value)}
-                className="w-full h-96 rounded-md border border-gray-600 bg-gray-700 text-gray-100 font-mono text-sm p-4"
-                placeholder={`{
-  "username": "$internet.userName",
-  "details": {
-    "firstName": "$name.firstName",
-    "lastName": "$name.lastName"
-  },
-  "numbers": [
-    "$phone.number",
-    "$phone.number",
-    "$phone.number"
-  ]
-}`}
-              />
-              <p className="text-sm text-gray-400">
-                Use $module.method syntax for dynamic values (e.g., $internet.userName, $name.firstName)
-              </p>
-            </div>
-          )}
-
-          {fields.length > 0 && (
-            <div className="mt-4">
-              <label className="block text-sm font-medium text-gray-300 mb-2">
-                Template Preview
-              </label>
-              <pre className="bg-gray-800 p-4 rounded-md overflow-x-auto">
-                <code className="text-sm text-gray-100">
-                  {JSON.stringify(generateTemplate(), null, 2)}
-                </code>
-              </pre>
-            </div>
-          )}
-        </div>
-
+        <ResourceNameInput name={name} onChange={setName} />
+        <VersionInput version={version} onChange={setVersion} />
+        <TemplateEditor
+          mode={editorState.mode}
+          template={editorState.template}
+          fields={fields}
+          onAddField={() => setFields([...fields, { key: "", type: "simple" }])}
+          onUpdateField={handleUpdateField}
+          onRemoveField={handleRemoveField}
+          onAddNestedField={handleAddNestedField}
+          onTemplateChange={handleTemplateChange}
+          onModeChange={handleModeChange}
+        />
         {error && <p className="text-sm text-red-500">{error}</p>}
-
         <div className="flex gap-4">
           <button
             type="button"
diff --git a/src/components/resource/ResourceNameInput.tsx b/src/components/resource/ResourceNameInput.tsx
new file mode 100644
index 0000000..3487d36
--- /dev/null
+++ b/src/components/resource/ResourceNameInput.tsx
@@ -0,0 +1,27 @@
+interface ResourceNameInputProps {
+  name: string;
+  onChange: (value: string) => void;
+}
+
+export function ResourceNameInput({ name, onChange }: ResourceNameInputProps) {
+  return (
+    <div>
+      <label className="block text-sm font-medium text-gray-300">
+        Resource Name
+      </label>
+      <input
+        type="text"
+        value={name}
+        onChange={(e) => onChange(e.target.value)}
+        className="mt-1 block w-full rounded-md border border-gray-600 bg-gray-700 text-gray-100 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm p-2"
+        placeholder="users-posts"
+        required
+        pattern="^[a-z0-9]+(?:-[a-z0-9]+)*$"
+        title="Lowercase letters, numbers, and hyphens only. Must start and end with a letter or number."
+      />
+      <p className="mt-1 text-sm text-gray-400">
+        Use lowercase letters, numbers, and hyphens only
+      </p>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/src/components/resource/VersionInput.tsx b/src/components/resource/VersionInput.tsx
new file mode 100644
index 0000000..027fb4d
--- /dev/null
+++ b/src/components/resource/VersionInput.tsx
@@ -0,0 +1,27 @@
+interface VersionInputProps {
+  version: string;
+  onChange: (value: string) => void;
+}
+
+export function VersionInput({ version, onChange }: VersionInputProps) {
+  return (
+    <div>
+      <label className="block text-sm font-medium text-gray-300">
+        API Version
+      </label>
+      <div className="mt-1 flex rounded-md shadow-sm">
+        <span className="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-600 bg-gray-800 text-gray-400 sm:text-sm">
+          api/
+        </span>
+        <input
+          type="text"
+          value={version}
+          onChange={(e) => onChange(e.target.value)}
+          className="flex-1 block w-full rounded-none rounded-r-md border border-gray-600 bg-gray-700 text-gray-100 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm p-2"
+          placeholder="v1"
+          required
+        />
+      </div>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/src/components/template/FieldBuilder.tsx b/src/components/template/FieldBuilder.tsx
new file mode 100644
index 0000000..9b8190b
--- /dev/null
+++ b/src/components/template/FieldBuilder.tsx
@@ -0,0 +1,190 @@
+import { FAKER_MODULES, FIELD_TYPES } from "@/constants/fakerModules";
+import type { TemplateField } from "@/types/template";
+
+interface FieldBuilderProps {
+  fields: TemplateField[];
+  onUpdate: (field: TemplateField, updates: Partial<TemplateField>) => void;
+  onRemove: (field: TemplateField) => void;
+  onAddNestedField: (parentField: TemplateField) => void;
+  depth?: number;
+}
+
+export function FieldBuilder({ 
+  fields,
+  onUpdate,
+  onRemove,
+  onAddNestedField,
+  depth = 0 
+}: FieldBuilderProps) {
+  const handleTypeChange = (field: TemplateField, type: "simple" | "object" | "array") => {
+    const updates: Partial<TemplateField> = { type };
+    if (type === "object") {
+      updates.fields = [];
+      updates.module = undefined;
+      updates.method = undefined;
+    } else if (type === "array") {
+      updates.arrayType = "simple";
+      updates.count = 3;
+      updates.items = { key: "", type: "simple" };
+      updates.module = undefined;
+      updates.method = undefined;
+    }
+    onUpdate(field, updates);
+  };
+
+  return (
+    <div className="space-y-4">
+      {fields.map((field, index) => (
+        <div key={index} className={`space-y-4 ${depth > 0 ? 'ml-8' : ''}`}>
+          <div className="flex gap-4 items-start bg-gray-800 p-4 rounded-md">
+            <div className="flex-1">
+              <input
+                type="text"
+                value={field.key}
+                onChange={(e) => onUpdate(field, { key: e.target.value })}
+                placeholder="Field name"
+                className="w-full rounded-md border border-gray-600 bg-gray-700 text-gray-100 p-2"
+              />
+            </div>
+
+            <div className="flex-1">
+              <select
+                value={field.type}
+                onChange={(e) => handleTypeChange(field, e.target.value as "simple" | "object" | "array")}
+                className="w-full rounded-md border border-gray-600 bg-gray-700 text-gray-100 p-2"
+              >
+                {FIELD_TYPES.map(({ value, label }) => (
+                  <option key={value} value={value}>{label}</option>
+                ))}
+              </select>
+            </div>
+
+            {field.type === "simple" && (
+              <>
+                <div className="flex-1">
+                  <select
+                    value={field.module || ""}
+                    onChange={(e) => onUpdate(field, { module: e.target.value, method: "" })}
+                    className="w-full rounded-md border border-gray-600 bg-gray-700 text-gray-100 p-2"
+                  >
+                    <option value="">Select Category</option>
+                    {Object.entries(FAKER_MODULES).map(([key, { label }]) => (
+                      <option key={key} value={key}>{label}</option>
+                    ))}
+                  </select>
+                </div>
+
+                <div className="flex-1">
+                  <select
+                    value={field.method || ""}
+                    onChange={(e) => onUpdate(field, { method: e.target.value })}
+                    className="w-full rounded-md border border-gray-600 bg-gray-700 text-gray-100 p-2"
+                    disabled={!field.module}
+                  >
+                    <option value="">Select Type</option>
+                    {field.module && Object.entries(FAKER_MODULES[field.module as keyof typeof FAKER_MODULES].methods).map(([key, label]) => (
+                      <option key={key} value={key}>{label}</option>
+                    ))}
+                  </select>
+                </div>
+              </>
+            )}
+
+            {field.type === "array" && (
+              <>
+                <div className="flex-1">
+                  <select
+                    value={field.arrayType || "simple"}
+                    onChange={(e) => onUpdate(field, { 
+                      arrayType: e.target.value as "simple" | "object",
+                      items: { 
+                        key: "", 
+                        type: e.target.value as "simple" | "object",
+                        fields: e.target.value === "object" ? [] : undefined
+                      }
+                    })}
+                    className="w-full rounded-md border border-gray-600 bg-gray-700 text-gray-100 p-2"
+                  >
+                    <option value="simple">Simple Values</option>
+                    <option value="object">Objects</option>
+                  </select>
+                </div>
+                <div className="flex-1">
+                  <input
+                    type="number"
+                    value={field.count || 3}
+                    onChange={(e) => onUpdate(field, { count: parseInt(e.target.value) })}
+                    min={1}
+                    max={10}
+                    className="w-full rounded-md border border-gray-600 bg-gray-700 text-gray-100 p-2"
+                  />
+                </div>
+              </>
+            )}
+
+            <button
+              type="button"
+              onClick={() => onRemove(field)}
+              className="px-3 py-2 text-red-400 hover:text-red-300"
+            >
+              Remove
+            </button>
+          </div>
+
+          {field.type === "object" && field.fields && (
+            <div className="space-y-4">
+              <FieldBuilder
+                fields={field.fields}
+                onUpdate={onUpdate}
+                onRemove={onRemove}
+                onAddNestedField={onAddNestedField}
+                depth={depth + 1}
+              />
+              <button
+                type="button"
+                onClick={() => onAddNestedField(field)}
+                className="ml-8 py-2 px-4 border border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-300 bg-gray-800 hover:bg-gray-700"
+              >
+                Add Nested Field
+              </button>
+            </div>
+          )}
+
+          {field.type === "array" && field.items && (
+            <div className="ml-8 mt-2">
+              <div className="text-sm text-gray-400 mb-2">
+                Array Item Template ({field.arrayType === "simple" ? "Simple Values" : "Objects"}):
+              </div>
+              {field.arrayType === "simple" ? (
+                <FieldBuilder
+                  fields={[field.items]}
+                  onUpdate={onUpdate}
+                  onRemove={onRemove}
+                  onAddNestedField={onAddNestedField}
+                  depth={depth + 1}
+                />
+              ) : (
+                <>
+                  <FieldBuilder
+                    fields={field.items.fields || []}
+                    onUpdate={onUpdate}
+                    onRemove={onRemove}
+                    onAddNestedField={onAddNestedField}
+                    depth={depth + 1}
+                  />
+                  <button
+                    type="button"
+                    onClick={() => field.items?.fields && onAddNestedField(field)}
+                    className="ml-8 mt-2 py-2 px-4 border border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-300 bg-gray-800 hover:bg-gray-700"
+                  >
+                    Add Object Field
+                  </button>
+                </>
+              )}
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/src/components/template/TemplateEditor.tsx b/src/components/template/TemplateEditor.tsx
new file mode 100644
index 0000000..4dc9157
--- /dev/null
+++ b/src/components/template/TemplateEditor.tsx
@@ -0,0 +1,110 @@
+import { FieldBuilder } from "./FieldBuilder";
+import type { TemplateField } from "@/types/template";
+import { generateTemplate } from "@/utils/templateUtils";
+
+interface TemplateEditorProps {
+  mode: "visual" | "manual";
+  template: string;
+  fields: TemplateField[];
+  onAddField: () => void;
+  onAddNestedField: (parentField: TemplateField) => void;
+  onTemplateChange: (value: string) => void;
+  onUpdateField: (field: TemplateField, updates: Partial<TemplateField>) => void;
+  onRemoveField: (field: TemplateField) => void;
+  onModeChange: (mode: "visual" | "manual") => void;
+}
+
+export function TemplateEditor({
+  mode,
+  template,
+  fields,
+  onAddField,
+  onAddNestedField,
+  onTemplateChange,
+  onUpdateField,
+  onRemoveField,
+  onModeChange,
+}: TemplateEditorProps) {
+  const previewTemplate = mode === "visual" 
+    ? JSON.stringify(generateTemplate(fields), null, 2)
+    : JSON.stringify(JSON.parse(template || "{}"), null, 2);
+
+  return (
+    <div className="space-y-4">
+      <div className="flex justify-between items-center">
+        <label className="block text-sm font-medium text-gray-300">
+          Data Template Builder
+        </label>
+        <div className="flex gap-2">
+          <button
+            type="button"
+            onClick={() => onModeChange("visual")}
+            className={`px-3 py-1 text-sm rounded-md transition-colors ${
+              mode === "visual"
+                ? "bg-blue-600 text-white"
+                : "bg-gray-700 text-gray-300 hover:bg-gray-600"
+            }`}
+          >
+            Visual Builder
+          </button>
+          <button
+            type="button"
+            onClick={() => onModeChange("manual")}
+            className={`px-3 py-1 text-sm rounded-md transition-colors ${
+              mode === "manual"
+                ? "bg-blue-600 text-white"
+                : "bg-gray-700 text-gray-300 hover:bg-gray-600"
+            }`}
+          >
+            Manual JSON
+          </button>
+        </div>
+      </div>
+
+      {mode === "visual" ? (
+        <>
+          <FieldBuilder
+            fields={fields}
+            onUpdate={onUpdateField}
+            onRemove={onRemoveField}
+            onAddNestedField={onAddNestedField}
+          />
+          <button
+            type="button"
+            onClick={onAddField}
+            className="w-full py-2 px-4 border border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-300 bg-gray-800 hover:bg-gray-700"
+          >
+            Add Field
+          </button>
+        </>
+      ) : (
+        <div className="space-y-2">
+          <textarea
+            value={template}
+            onChange={(e) => onTemplateChange(e.target.value)}
+            className="w-full h-96 rounded-md border border-gray-600 bg-gray-700 text-gray-100 font-mono text-sm p-4"
+            placeholder={`{
+  "username": "$internet.userName",
+  "details": {
+    "firstName": "$name.firstName",
+    "lastName": "$name.lastName"
+  }
+}`}
+          />
+        </div>
+      )}
+
+      {/* Template Preview */}
+      <div className="mt-4">
+        <label className="block text-sm font-medium text-gray-300 mb-2">
+          Template Preview
+        </label>
+        <pre className="bg-gray-800 p-4 rounded-md overflow-x-auto">
+          <code className="text-sm text-gray-100">
+            {previewTemplate}
+          </code>
+        </pre>
+      </div>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/src/constants/fakerModules.ts b/src/constants/fakerModules.ts
new file mode 100644
index 0000000..3e8341d
--- /dev/null
+++ b/src/constants/fakerModules.ts
@@ -0,0 +1,77 @@
+export const FAKER_MODULES = {
+  internet: {
+    label: "Internet",
+    methods: {
+      userName: "Username",
+      email: "Email Address",
+      password: "Password",
+      url: "URL",
+      ip: "IP Address",
+      avatar: "Avatar URL",
+    },
+  },
+  name: {
+    label: "Person",
+    methods: {
+      firstName: "First Name",
+      lastName: "Last Name",
+      fullName: "Full Name",
+      jobTitle: "Job Title",
+    },
+  },
+  phone: {
+    label: "Phone",
+    methods: {
+      number: "Phone Number",
+      imei: "IMEI",
+    },
+  },
+  address: {
+    label: "Address",
+    methods: {
+      streetAddress: "Street Address",
+      city: "City",
+      state: "State",
+      country: "Country",
+      zipCode: "Zip Code",
+    },
+  },
+  company: {
+    label: "Company",
+    methods: {
+      name: "Company Name",
+      catchPhrase: "Catch Phrase",
+      bs: "Business Statement",
+    },
+  },
+  lorem: {
+    label: "Text",
+    methods: {
+      word: "Single Word",
+      words: "Multiple Words",
+      sentence: "Sentence",
+      paragraph: "Paragraph",
+    },
+  },
+  date: {
+    label: "Date",
+    methods: {
+      past: "Past Date",
+      future: "Future Date",
+      recent: "Recent Date",
+    },
+  },
+  number: {
+    label: "Number",
+    methods: {
+      int: "Integer",
+      float: "Float",
+    },
+  },
+};
+
+export const FIELD_TYPES = [
+  { value: "simple", label: "Simple Value" },
+  { value: "object", label: "Object" },
+  { value: "array", label: "Array" },
+] as const; 
\ No newline at end of file
diff --git a/src/schemas/template.ts b/src/schemas/template.ts
new file mode 100644
index 0000000..34f5925
--- /dev/null
+++ b/src/schemas/template.ts
@@ -0,0 +1,34 @@
+import { z } from "zod";
+
+type TemplateFieldSchemaType = z.ZodType<{
+  key: string;
+  type: "simple" | "object" | "array";
+  arrayType?: "simple" | "object";
+  module?: string;
+  method?: string;
+  params?: string[];
+  fields?: Array<z.infer<typeof TemplateFieldSchema>>;
+  items?: z.infer<typeof TemplateFieldSchema>;
+  count?: number;
+}>;
+
+export const TemplateFieldSchema: TemplateFieldSchemaType = z.lazy(() => 
+  z.object({
+    key: z.string(),
+    type: z.enum(["simple", "object", "array"]),
+    arrayType: z.enum(["simple", "object"]).optional(),
+    module: z.string().optional(),
+    method: z.string().optional(),
+    params: z.array(z.string()).optional(),
+    fields: z.array(TemplateFieldSchema).optional(),
+    items: TemplateFieldSchema.optional(),
+    count: z.number().min(1).max(10).optional(),
+  })
+);
+
+export const EditorStateSchema = z.object({
+  mode: z.enum(["visual", "manual"]),
+  template: z.string(),
+});
+
+export type EditorState = z.infer<typeof EditorStateSchema>; 
\ No newline at end of file
diff --git a/src/server/actions/projects.ts b/src/server/actions/projects.ts
index cfbe583..27a8982 100644
--- a/src/server/actions/projects.ts
+++ b/src/server/actions/projects.ts
@@ -16,14 +16,16 @@ export async function createProject(data: { name: string }) {
 
 export async function getProjects() {
   try {
-    return prisma.project.findMany({
+    const projects = await prisma.project.findMany({
       include: {
         resources: true,
       },
       orderBy: { createdAt: "desc" },
     });
+    return projects;
   } catch (error) {
-    console.error(error);
+    console.error("Database connection error:", error);
+    return []; // Return empty array as fallback
   }
 }
 
diff --git a/src/types/template.ts b/src/types/template.ts
new file mode 100644
index 0000000..0844dc4
--- /dev/null
+++ b/src/types/template.ts
@@ -0,0 +1,11 @@
+export interface TemplateField {
+  key: string;
+  type: "simple" | "object" | "array";
+  arrayType?: "simple" | "object";
+  module?: string;
+  method?: string;
+  params?: string[];
+  fields?: TemplateField[];
+  items?: TemplateField;
+  count?: number;
+} 
\ No newline at end of file
diff --git a/src/utils/templateUtils.ts b/src/utils/templateUtils.ts
index 27ac0eb..f8f01ef 100644
--- a/src/utils/templateUtils.ts
+++ b/src/utils/templateUtils.ts
@@ -1,4 +1,4 @@
-import { TemplateField } from "@/types/template";
+import type { TemplateField } from "../types/template";
 
 type TemplateValue = string | TemplateValue[] | { [key: string]: TemplateValue };
 
@@ -21,7 +21,7 @@ export const generateTemplate = (fields: TemplateField[]): Record<string, Templa
         }
         acc[field.key] = values;
       } else if (field.arrayType === "object" && field.items.fields) {
-        // Generate a proper array of objects
+        // Generate array of objects
         const objects = [];
         for (let i = 0; i < count; i++) {
           objects.push(generateTemplate(field.items.fields || []));

From 3a29217f91085feacbfd93f48f8ddb82124fac4b Mon Sep 17 00:00:00 2001
From: Faisal Ahmed Sifat <Faisalahmed531@gmail.com>
Date: Sun, 23 Feb 2025 01:31:40 +0600
Subject: [PATCH 04/10] auth!: added clerk for authentication

---
 package-lock.json                     | 269 +++++++++++++++++++++++++-
 package.json                          |   1 +
 src/app/layout.tsx                    |  28 ++-
 src/app/sign-in/page.tsx              |  26 +++
 src/app/sign-in/sso-callback/page.tsx |  11 ++
 src/middleware.ts                     |  29 ++-
 6 files changed, 347 insertions(+), 17 deletions(-)
 create mode 100644 src/app/sign-in/page.tsx
 create mode 100644 src/app/sign-in/sso-callback/page.tsx

diff --git a/package-lock.json b/package-lock.json
index 7a6da63..e5bec0b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "hasInstallScript": true,
       "dependencies": {
+        "@clerk/nextjs": "^6.12.0",
         "@faker-js/faker": "^9.5.0",
         "@paralleldrive/cuid2": "^2.2.2",
         "@prisma/client": "^6.3.1",
@@ -43,6 +44,123 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@clerk/backend": {
+      "version": "1.24.2",
+      "resolved": "https://registry.npmjs.org/@clerk/backend/-/backend-1.24.2.tgz",
+      "integrity": "sha512-O5W3AlZ/g5dcdadXbBJfq+JqXoTimR2vm8bMTEJ2MEaCDXOyFoGvlv+93XxS3TgcuWFrVPgzdBPfaE/95G5Xxw==",
+      "license": "MIT",
+      "dependencies": {
+        "@clerk/shared": "^2.22.0",
+        "@clerk/types": "^4.46.1",
+        "cookie": "1.0.2",
+        "snakecase-keys": "8.0.1",
+        "tslib": "2.4.1"
+      },
+      "engines": {
+        "node": ">=18.17.0"
+      }
+    },
+    "node_modules/@clerk/backend/node_modules/tslib": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
+      "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==",
+      "license": "0BSD"
+    },
+    "node_modules/@clerk/clerk-react": {
+      "version": "5.23.0",
+      "resolved": "https://registry.npmjs.org/@clerk/clerk-react/-/clerk-react-5.23.0.tgz",
+      "integrity": "sha512-2BMT3+KOWRJsAPDuhFoVdee2solukUcHw8BuKFfiOw6XXbU01H7WBezQCgF8gGFwrygEzZ0P5MBIz3L6MC/LYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@clerk/shared": "^2.22.0",
+        "@clerk/types": "^4.46.1",
+        "tslib": "2.4.1"
+      },
+      "engines": {
+        "node": ">=18.17.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0 || ^19.0.0-0",
+        "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-0"
+      }
+    },
+    "node_modules/@clerk/clerk-react/node_modules/tslib": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
+      "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==",
+      "license": "0BSD"
+    },
+    "node_modules/@clerk/nextjs": {
+      "version": "6.12.0",
+      "resolved": "https://registry.npmjs.org/@clerk/nextjs/-/nextjs-6.12.0.tgz",
+      "integrity": "sha512-fA+M09d9KdZd0L0yDpQZJ0LscKwrZkJVa+4Zkk9LVdeanhbrLokQljS9ZbZvAS+jGKTzjX0SPhTeJdoq3NTFHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@clerk/backend": "^1.24.2",
+        "@clerk/clerk-react": "^5.23.0",
+        "@clerk/shared": "^2.22.0",
+        "@clerk/types": "^4.46.1",
+        "crypto-js": "4.2.0",
+        "server-only": "0.0.1",
+        "tslib": "2.4.1"
+      },
+      "engines": {
+        "node": ">=18.17.0"
+      },
+      "peerDependencies": {
+        "next": "^13.5.4 || ^14.0.3 || ^15.0.0",
+        "react": "^18.0.0 || ^19.0.0 || ^19.0.0-0",
+        "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-0"
+      }
+    },
+    "node_modules/@clerk/nextjs/node_modules/tslib": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
+      "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==",
+      "license": "0BSD"
+    },
+    "node_modules/@clerk/shared": {
+      "version": "2.22.0",
+      "resolved": "https://registry.npmjs.org/@clerk/shared/-/shared-2.22.0.tgz",
+      "integrity": "sha512-VWBeddOJVa3sqUPdvquaaQYw4h5hACSG3EUDOW7eSu2F6W3BXUozyLJQPBJ9C0MuoeHhOe/DeV8x2KqOgxVZaQ==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "@clerk/types": "^4.46.1",
+        "dequal": "2.0.3",
+        "glob-to-regexp": "0.4.1",
+        "js-cookie": "3.0.5",
+        "std-env": "^3.7.0",
+        "swr": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=18.17.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0 || ^19.0.0-0",
+        "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@clerk/types": {
+      "version": "4.46.1",
+      "resolved": "https://registry.npmjs.org/@clerk/types/-/types-4.46.1.tgz",
+      "integrity": "sha512-QwomMjG1v2GqOITU2/rQUC11LFFsqNFUA92VKDo8dS1nN9iQadT6cNk7MZWqEYTxAfAM/IgX/gB00aGsLKaV8g==",
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "3.1.3"
+      },
+      "engines": {
+        "node": ">=18.17.0"
+      }
+    },
     "node_modules/@emnapi/runtime": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.3.1.tgz",
@@ -1912,6 +2030,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/cookie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -1927,6 +2054,12 @@
         "node": ">= 8"
       }
     },
+    "node_modules/crypto-js": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz",
+      "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==",
+      "license": "MIT"
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -1944,7 +2077,6 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/damerau-levenshtein": {
@@ -2069,6 +2201,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/detect-libc": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz",
@@ -2106,6 +2247,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/dot-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
+      "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
+      "license": "MIT",
+      "dependencies": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -3079,6 +3230,12 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/glob-to-regexp": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
+      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
+      "license": "BSD-2-Clause"
+    },
     "node_modules/glob/node_modules/brace-expansion": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
@@ -3784,6 +3941,15 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/js-cookie": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
+      "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -3954,6 +4120,15 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/lower-case": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
+      "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "10.4.3",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
@@ -3961,6 +4136,18 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/map-obj": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-4.3.0.tgz",
+      "integrity": "sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -4154,6 +4341,16 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/no-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
+      "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
+      "license": "MIT",
+      "dependencies": {
+        "lower-case": "^2.0.2",
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -4953,6 +5150,12 @@
         "node": ">=10"
       }
     },
+    "node_modules/server-only": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/server-only/-/server-only-0.0.1.tgz",
+      "integrity": "sha512-qepMx2JxAa5jjfzxG79yPPq+8BuFToHd1hm7kI+Z4zAq1ftQiP7HcxMhDDItrbtwVeLg/cY2JnKnrcFkmiswNA==",
+      "license": "MIT"
+    },
     "node_modules/set-function-length": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
@@ -5164,6 +5367,30 @@
         "is-arrayish": "^0.3.1"
       }
     },
+    "node_modules/snake-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz",
+      "integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==",
+      "license": "MIT",
+      "dependencies": {
+        "dot-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/snakecase-keys": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/snakecase-keys/-/snakecase-keys-8.0.1.tgz",
+      "integrity": "sha512-Sj51kE1zC7zh6TDlNNz0/Jn1n5HiHdoQErxO8jLtnyrkJW/M5PrI7x05uDgY3BO7OUQYKCvmeMurW6BPUdwEOw==",
+      "license": "MIT",
+      "dependencies": {
+        "map-obj": "^4.1.0",
+        "snake-case": "^3.0.4",
+        "type-fest": "^4.15.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -5180,6 +5407,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/std-env": {
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.8.0.tgz",
+      "integrity": "sha512-Bc3YwwCB+OzldMxOXJIIvC6cPRWr/LxOp48CdQTOkPyk/t4JWWJbrilwBd7RJzKV8QW7tJkcgAmeuLLJugl5/w==",
+      "license": "MIT"
+    },
     "node_modules/streamsearch": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
@@ -5500,6 +5733,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/swr": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-2.3.2.tgz",
+      "integrity": "sha512-RosxFpiabojs75IwQ316DGoDRmOqtiAj0tg8wCcbEu4CiLZBs/a9QNtHV7TUfDXmmlgqij/NqzKq/eLelyv9xA==",
+      "license": "MIT",
+      "dependencies": {
+        "dequal": "^2.0.3",
+        "use-sync-external-store": "^1.4.0"
+      },
+      "peerDependencies": {
+        "react": "^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.17",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
@@ -5708,6 +5954,18 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/type-fest": {
+      "version": "4.35.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.35.0.tgz",
+      "integrity": "sha512-2/AwEFQDFEy30iOLjrvHDIH7e4HEWH+f1Yl1bI5XMqzuoCUqwYCdxachgsgv0og/JdVZUhbfjcJAoHj5L1753A==",
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/typed-array-buffer": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz",
@@ -5836,6 +6094,15 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.4.0.tgz",
+      "integrity": "sha512-9WXSPC5fMv61vaupRkCKCxsPxBocVnwakBEkMIHHpkTTg6icbJtg6jzgtLDm4bl3cSHAca52rYWih0k4K3PfHw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
diff --git a/package.json b/package.json
index 5d4f732..5adf9f2 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "postinstall": "prisma generate"
   },
   "dependencies": {
+    "@clerk/nextjs": "^6.12.0",
     "@faker-js/faker": "^9.5.0",
     "@paralleldrive/cuid2": "^2.2.2",
     "@prisma/client": "^6.3.1",
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 8ff1092..6ca5a54 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -2,6 +2,8 @@ import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
 
+import { ClerkProvider, SignedOut, SignInButton, SignedIn, UserButton } from '@clerk/nextjs';
+
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
@@ -11,16 +13,24 @@ export const metadata: Metadata = {
 
 export default function RootLayout({
   children,
-}: Readonly<{
+}: {
   children: React.ReactNode;
-}>) {
+}) {
   return (
-    <html lang="en" className="dark">
-      <body
-        className={`${inter.className} bg-gray-900 text-gray-100 min-h-screen`}
-      >
-        {children}
-      </body>
-    </html>
+    <ClerkProvider>
+      <html lang="en" className="dark">
+        <body className={`${inter.className} bg-gray-900 text-gray-100 min-h-screen`}>
+          <div className="absolute top-4 right-4">
+            <SignedOut>
+              <SignInButton />
+            </SignedOut>
+            <SignedIn>
+              <UserButton afterSignOutUrl="/"/>
+            </SignedIn>
+          </div>
+          {children}
+        </body>
+      </html>
+    </ClerkProvider>
   );
 }
diff --git a/src/app/sign-in/page.tsx b/src/app/sign-in/page.tsx
new file mode 100644
index 0000000..6a91a84
--- /dev/null
+++ b/src/app/sign-in/page.tsx
@@ -0,0 +1,26 @@
+import { SignIn } from '@clerk/nextjs'
+
+export default function SignInPage() {
+    return (
+        <div className="min-h-screen flex items-center justify-center">
+            <div className="bg-gray-800 p-8 rounded-lg shadow-xl">
+                <SignIn 
+                    appearance={{
+                        elements: {
+                            rootBox: "mx-auto",
+                            card: "bg-gray-800",
+                            headerTitle: "text-gray-100",
+                            headerSubtitle: "text-gray-400",
+                            socialButtonsBlockButton: "bg-gray-700 hover:bg-gray-600",
+                            socialButtonsBlockButtonText: "text-gray-100",
+                            formFieldLabel: "text-gray-300",
+                            formFieldInput: "bg-gray-700 text-gray-100 border-gray-600",
+                            footerActionText: "text-gray-400",
+                            footerActionLink: "text-blue-400 hover:text-blue-300",
+                        },
+                    }}
+                />
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/app/sign-in/sso-callback/page.tsx b/src/app/sign-in/sso-callback/page.tsx
new file mode 100644
index 0000000..0cfa1c0
--- /dev/null
+++ b/src/app/sign-in/sso-callback/page.tsx
@@ -0,0 +1,11 @@
+import { AuthenticateWithRedirectCallback } from "@clerk/nextjs";
+
+export default function SSOCallback() {
+  return (
+    <div className="min-h-screen flex items-center justify-center">
+      <div className="bg-gray-800 p-8 rounded-lg shadow-xl">
+        <AuthenticateWithRedirectCallback redirectUrl="/" />
+      </div>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/src/middleware.ts b/src/middleware.ts
index 6979a3a..21a6771 100644
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -1,27 +1,42 @@
 import { NextResponse } from 'next/server';
 import type { NextRequest } from 'next/server';
+import { clerkMiddleware } from "@clerk/nextjs/server";
 
-export function middleware(request: NextRequest) {
+// Define public routes that don't require authentication
+const publicRoutes = ["/", "/sign-in", "/sign-up"];
+
+// Helper function to check if a route is public
+function isPublicRoute(request: NextRequest): boolean {
+  const { pathname } = request.nextUrl;
+  return publicRoutes.some(route => pathname.startsWith(route));
+}
+
+// Combine Clerk auth with custom API routing
+export default clerkMiddleware(async (auth, request) => {
   const { pathname } = request.nextUrl;
 
-  // Match URLs like /{projectId}/api/{version}/{resourceName}
+  // Handle API routes first
   const apiPathRegex = /^\/([^\/]+)\/api\/([^\/]+)\/([^\/]+)(\/.*)?$/;
   const match = pathname.match(apiPathRegex);
 
   if (match) {
     const [, projectId, version, resourceName, rest = ''] = match;
-    // Rewrite to our actual API route
     const newUrl = request.nextUrl.clone();
     newUrl.pathname = `/api/${projectId}/api/${version}/${resourceName}${rest}`;
     return NextResponse.rewrite(newUrl);
   }
 
+  // Then handle authentication
+  if (!isPublicRoute(request)) {
+    await auth.protect();
+  }
+
   return NextResponse.next();
-}
+});
 
 export const config = {
   matcher: [
-    // Match all paths except /api, _next, static files, etc.
-    '/((?!api|_next/static|_next/image|favicon.ico).*)',
+    // Match all paths except static files
+    '/((?!_next/static|_next/image|favicon.ico).*)',
   ],
-}; 
\ No newline at end of file
+}; 

From 904c35032fd8b4d175d06638cd66b4c459a8a633 Mon Sep 17 00:00:00 2001
From: Faisal Ahmed Sifat <Faisalahmed531@gmail.com>
Date: Sun, 23 Feb 2025 01:44:34 +0600
Subject: [PATCH 05/10] auth-prod: fixing auth for production

---
 src/app/sign-in/page.tsx              | 33 +++++++++------------------
 src/app/sign-in/sso-callback/page.tsx |  3 ++-
 src/app/sign-up/page.tsx              | 15 ++++++++++++
 3 files changed, 28 insertions(+), 23 deletions(-)
 create mode 100644 src/app/sign-up/page.tsx

diff --git a/src/app/sign-in/page.tsx b/src/app/sign-in/page.tsx
index 6a91a84..b40b6bf 100644
--- a/src/app/sign-in/page.tsx
+++ b/src/app/sign-in/page.tsx
@@ -1,26 +1,15 @@
-import { SignIn } from '@clerk/nextjs'
+import { SignIn } from "@clerk/nextjs";
+import { Metadata } from "next";
 
-export default function SignInPage() {
+export const metadata: Metadata = {
+    title: "Sign In - Tensorify Mock",
+    description: "Access your account by signing in",
+};
+
+export default function Page() {
     return (
-        <div className="min-h-screen flex items-center justify-center">
-            <div className="bg-gray-800 p-8 rounded-lg shadow-xl">
-                <SignIn 
-                    appearance={{
-                        elements: {
-                            rootBox: "mx-auto",
-                            card: "bg-gray-800",
-                            headerTitle: "text-gray-100",
-                            headerSubtitle: "text-gray-400",
-                            socialButtonsBlockButton: "bg-gray-700 hover:bg-gray-600",
-                            socialButtonsBlockButtonText: "text-gray-100",
-                            formFieldLabel: "text-gray-300",
-                            formFieldInput: "bg-gray-700 text-gray-100 border-gray-600",
-                            footerActionText: "text-gray-400",
-                            footerActionLink: "text-blue-400 hover:text-blue-300",
-                        },
-                    }}
-                />
-            </div>
+        <div className="min-h-screen flex flex-row items-center justify-center">
+            <SignIn />
         </div>
-    )
+    );
 }
\ No newline at end of file
diff --git a/src/app/sign-in/sso-callback/page.tsx b/src/app/sign-in/sso-callback/page.tsx
index 0cfa1c0..bf61b4e 100644
--- a/src/app/sign-in/sso-callback/page.tsx
+++ b/src/app/sign-in/sso-callback/page.tsx
@@ -8,4 +8,5 @@ export default function SSOCallback() {
       </div>
     </div>
   );
-} 
\ No newline at end of file
+}
+
diff --git a/src/app/sign-up/page.tsx b/src/app/sign-up/page.tsx
new file mode 100644
index 0000000..f09bc5a
--- /dev/null
+++ b/src/app/sign-up/page.tsx
@@ -0,0 +1,15 @@
+import { SignUp } from "@clerk/nextjs";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+    title: "Sign Up - Tensorify Mock",
+    description: "Create a new account",
+};
+
+export default function Page() {
+    return (
+        <div className="min-h-screen flex flex-row items-center justify-center">
+            <SignUp />
+        </div>
+    );
+}
\ No newline at end of file

From 5f2f768edbcefa61274715bce73e5bd5dd721eff Mon Sep 17 00:00:00 2001
From: Faisal Ahmed Sifat <Faisalahmed531@gmail.com>
Date: Sun, 23 Feb 2025 02:26:33 +0600
Subject: [PATCH 06/10] feat!: generating code boilerplates

---
 .../[id]/resources/[resourceId]/page.tsx      |  14 ++
 src/components/resource/CodeGenerator.tsx     |  82 ++++++++++
 src/components/resource/FastAPIGenerator.tsx  |  63 ++++++++
 src/lib/generators/express.ts                 |  74 +++++++++
 src/lib/generators/fastapi.ts                 | 141 ++++++++++++++++++
 src/lib/generators/index.ts                   |  18 +++
 src/lib/generators/react.ts                   |  79 ++++++++++
 src/lib/validators/fastapi.ts                 |  34 +++++
 src/utils/string.ts                           |  13 ++
 9 files changed, 518 insertions(+)
 create mode 100644 src/components/resource/CodeGenerator.tsx
 create mode 100644 src/components/resource/FastAPIGenerator.tsx
 create mode 100644 src/lib/generators/express.ts
 create mode 100644 src/lib/generators/fastapi.ts
 create mode 100644 src/lib/generators/index.ts
 create mode 100644 src/lib/generators/react.ts
 create mode 100644 src/lib/validators/fastapi.ts
 create mode 100644 src/utils/string.ts

diff --git a/src/app/projects/[id]/resources/[resourceId]/page.tsx b/src/app/projects/[id]/resources/[resourceId]/page.tsx
index b60b71b..8156a53 100644
--- a/src/app/projects/[id]/resources/[resourceId]/page.tsx
+++ b/src/app/projects/[id]/resources/[resourceId]/page.tsx
@@ -8,6 +8,7 @@ import { EditableTemplate } from "@/app/components/EditableTemplate";
 import { IdTypeToggle } from "@/app/components/IdTypeToggle";
 import { ApiEndpointsSection } from "@/app/components/ApiEndpointsSection";
 import { EndpointTemplateEditor } from "@/app/components/EndpointTemplateEditor";
+import { CodeGenerator } from "@/components/resource/CodeGenerator";
 
 const ROOT_URL = process.env.ROOT_SITE;
 
@@ -101,6 +102,19 @@ export default async function ResourcePage({ params }: PageProps) {
             }
           />
         </div>
+
+        {/* API Code Generator */}
+        <div className="bg-gray-800 rounded-lg p-6 mt-6">
+          <h2 className="text-xl font-semibold mb-4 text-gray-100">
+            API Code Generator
+          </h2>
+          <CodeGenerator
+            projectName={project.name}
+            resourceName={resource.name}
+            version={resource.endpoint.split('/')[0]}
+            template={resource.template as Record<string, unknown>}
+          />
+        </div>
       </div>
     </div>
   );
diff --git a/src/components/resource/CodeGenerator.tsx b/src/components/resource/CodeGenerator.tsx
new file mode 100644
index 0000000..efa36f2
--- /dev/null
+++ b/src/components/resource/CodeGenerator.tsx
@@ -0,0 +1,82 @@
+"use client";
+
+import { useState } from 'react';
+import { generateFastAPICode } from '@/lib/generators/fastapi';
+import { generateExpressCode } from '@/lib/generators/express';
+import { generateReactCode } from '@/lib/generators/react';
+import { CodeGeneratorType } from '@/lib/generators';
+interface CodeGeneratorProps {
+  projectName: string;
+  resourceName: string;
+  version: string;
+  template: Record<string, unknown>;
+}
+
+export function CodeGenerator({
+  projectName,
+  resourceName,
+  version,
+  template
+}: CodeGeneratorProps) {
+  const [code, setCode] = useState('');
+  const [copied, setCopied] = useState(false);
+  const [selectedGenerator, setSelectedGenerator] = useState<CodeGeneratorType>(CodeGeneratorType.FASTAPI);
+
+  const handleGenerate = () => {
+    let generatedCode = '';
+    switch (selectedGenerator) {
+      case CodeGeneratorType.FASTAPI:
+        generatedCode = generateFastAPICode(projectName, resourceName, version, template);
+        break;
+      case CodeGeneratorType.EXPRESS:
+        generatedCode = generateExpressCode(projectName, resourceName, version, template);
+        break;
+      case CodeGeneratorType.REACT:
+        generatedCode = generateReactCode(projectName, resourceName, version, template);
+        break;
+    }
+    setCode(generatedCode);
+  };
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(code);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="flex gap-4">
+        <select
+          value={selectedGenerator}
+          onChange={(e) => setSelectedGenerator(e.target.value as CodeGeneratorType)}
+          className="bg-gray-700 text-gray-100 rounded px-3 py-2"
+        >
+          <option value={CodeGeneratorType.FASTAPI}>FastAPI</option>
+          <option value={CodeGeneratorType.EXPRESS}>Express.js</option>
+          <option value={CodeGeneratorType.REACT}>React Client</option>
+        </select>
+        <button
+          onClick={handleGenerate}
+          className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
+        >
+          Generate Code
+        </button>
+      </div>
+
+      {code && (
+        <div className="relative">
+          <button
+            onClick={handleCopy}
+            className="absolute top-2 right-2 px-3 py-1 bg-gray-700 text-sm rounded"
+          >
+            {copied ? 'Copied!' : 'Copy'}
+          </button>
+          <pre className="bg-gray-800 p-4 rounded-lg overflow-x-auto">
+            <code className="text-gray-100">{code}</code>
+          </pre>
+        </div>
+      )}
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/src/components/resource/FastAPIGenerator.tsx b/src/components/resource/FastAPIGenerator.tsx
new file mode 100644
index 0000000..91e56bc
--- /dev/null
+++ b/src/components/resource/FastAPIGenerator.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+import { useState } from 'react';
+import { generateFastAPICode } from '@/lib/generators/fastapi';
+import type { TemplateField } from '@/types/template';
+
+interface FastAPIGeneratorProps {
+  projectName: string;
+  resourceName: string;
+  version: string;
+  template: TemplateField[];
+}
+
+export function FastAPIGenerator({
+  projectName,
+  resourceName,
+  version,
+  template
+}: FastAPIGeneratorProps) {
+  const [code, setCode] = useState('');
+  const [copied, setCopied] = useState(false);
+
+  const handleGenerate = () => {
+    const generatedCode = generateFastAPICode(
+      projectName,
+      resourceName,
+      version,
+      template
+    );
+    setCode(generatedCode);
+  };
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(code);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <div className="space-y-4">
+      <button
+        onClick={handleGenerate}
+        className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
+      >
+        Generate FastAPI Code
+      </button>
+
+      {code && (
+        <div className="relative">
+          <button
+            onClick={handleCopy}
+            className="absolute top-2 right-2 px-3 py-1 bg-gray-700 text-sm rounded"
+          >
+            {copied ? 'Copied!' : 'Copy'}
+          </button>
+          <pre className="bg-gray-800 p-4 rounded-lg overflow-x-auto">
+            <code className="text-gray-100">{code}</code>
+          </pre>
+        </div>
+      )}
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/src/lib/generators/express.ts b/src/lib/generators/express.ts
new file mode 100644
index 0000000..5e8266d
--- /dev/null
+++ b/src/lib/generators/express.ts
@@ -0,0 +1,74 @@
+import { toPascalCase } from "@/utils/string";
+
+export function generateExpressCode(
+  projectName: string,
+  resourceName: string,
+  version: string,
+  template: Record<string, unknown>
+): string {
+  return `
+const express = require('express');
+const router = express.Router();
+const { v4: uuidv4 } = require('uuid');
+
+// In-memory storage
+const ${resourceName}DB = new Map();
+
+// Validation middleware
+const validate${toPascalCase(resourceName)} = (req, res, next) => {
+  const data = req.body;
+  ${generateValidation(template)}
+  next();
+};
+
+// CRUD Routes
+router.post('/${version}/${resourceName}', validate${toPascalCase(resourceName)}, (req, res) => {
+  const id = uuidv4();
+  const new${toPascalCase(resourceName)} = { id, ...req.body };
+  ${resourceName}DB.set(id, new${toPascalCase(resourceName)});
+  res.status(201).json(new${toPascalCase(resourceName)});
+});
+
+router.get('/${version}/${resourceName}', (req, res) => {
+  res.json(Array.from(${resourceName}DB.values()));
+});
+
+router.get('/${version}/${resourceName}/:id', (req, res) => {
+  const item = ${resourceName}DB.get(req.params.id);
+  if (!item) {
+    return res.status(404).json({ message: '${resourceName} not found' });
+  }
+  res.json(item);
+});
+
+router.put('/${version}/${resourceName}/:id', validate${toPascalCase(resourceName)}, (req, res) => {
+  if (!${resourceName}DB.has(req.params.id)) {
+    return res.status(404).json({ message: '${resourceName} not found' });
+  }
+  const updated${toPascalCase(resourceName)} = { id: req.params.id, ...req.body };
+  ${resourceName}DB.set(req.params.id, updated${toPascalCase(resourceName)});
+  res.json(updated${toPascalCase(resourceName)});
+});
+
+router.delete('/${version}/${resourceName}/:id', (req, res) => {
+  if (!${resourceName}DB.has(req.params.id)) {
+    return res.status(404).json({ message: '${resourceName} not found' });
+  }
+  ${resourceName}DB.delete(req.params.id);
+  res.status(204).send();
+});
+
+module.exports = router;
+`;
+}
+
+function generateValidation(template: Record<string, unknown>): string {
+  const checks = Object.entries(template).map(([key, value]) => {
+    if (typeof value === 'string' && value.startsWith('$')) {
+      return `  if (!data.${key}) return res.status(400).json({ message: '${key} is required' });`;
+    }
+    return '';
+  }).filter(Boolean);
+
+  return checks.join('\n');
+} 
\ No newline at end of file
diff --git a/src/lib/generators/fastapi.ts b/src/lib/generators/fastapi.ts
new file mode 100644
index 0000000..bbeead3
--- /dev/null
+++ b/src/lib/generators/fastapi.ts
@@ -0,0 +1,141 @@
+import type { TemplateField } from "@/types/template";
+import { toPascalCase } from "@/utils/string";
+
+
+export function generateFastAPICode(
+  projectName: string,
+  resourceName: string,
+  version: string,
+  template: Record<string, unknown>
+): string {
+  const schemaName = toPascalCase(resourceName);
+  const schemas = generatePydanticSchemas(template, schemaName);
+  const endpoints = generateEndpoints(resourceName, version, schemaName);
+
+  return `
+from fastapi import FastAPI, HTTPException
+from pydantic import BaseModel
+from typing import List, Optional
+import uuid
+
+app = FastAPI(title="${projectName} API")
+
+${schemas}
+
+# In-memory storage
+${resourceName}_db = {}
+
+${endpoints}
+`;
+}
+
+function generatePydanticSchemas(template: Record<string, unknown>, schemaName: string): string {
+  // Convert object template to array format if needed
+  const templateArray = Array.isArray(template) 
+    ? template 
+    : Object.entries(template).map(([key, value]) => ({
+        key,
+        type: typeof value === 'object' ? 'object' : 'simple',
+        ...(typeof value === 'string' && value.startsWith('$') 
+          ? parseTemplateString(value) 
+          : {}),
+      }));
+
+  const fields = templateArray.map(field => {
+    if (field.type === 'simple') {
+      return `    ${field.key}: ${getPydanticType(field)}`;
+    } else if (field.type === 'object') {
+      return `    ${field.key}: ${generateNestedSchema(field)}`;
+    } else if (field.type === 'array') {
+      return `    ${field.key}: List[${getPydanticArrayType(field)}]`;
+    }
+    return '';
+  }).filter(Boolean).join('\n');
+
+  return `
+class ${schemaName}Base(BaseModel):
+${fields}
+
+class ${schemaName}Create(${schemaName}Base):
+    pass
+
+class ${schemaName}(${schemaName}Base):
+    id: str
+`;
+}
+
+function parseTemplateString(value: string) {
+  const [module, method] = value.slice(1).split('.');
+  return { module, method };
+}
+
+function generateEndpoints(resourceName: string, version: string, schemaName: string): string {
+  return `
+@app.post("/${version}/${resourceName}", response_model=${schemaName})
+async def create_${resourceName}(item: ${schemaName}Create):
+    item_dict = item.dict()
+    item_id = str(uuid.uuid4())
+    new_item = ${schemaName}(id=item_id, **item_dict)
+    ${resourceName}_db[item_id] = new_item
+    return new_item
+
+@app.get("/${version}/${resourceName}", response_model=List[${schemaName}])
+async def list_${resourceName}():
+    return list(${resourceName}_db.values())
+
+@app.get("/${version}/${resourceName}/{item_id}", response_model=${schemaName})
+async def get_${resourceName}(item_id: str):
+    if item_id not in ${resourceName}_db:
+        raise HTTPException(status_code=404, detail="${resourceName} not found")
+    return ${resourceName}_db[item_id]
+
+@app.put("/${version}/${resourceName}/{item_id}", response_model=${schemaName})
+async def update_${resourceName}(item_id: str, item: ${schemaName}Create):
+    if item_id not in ${resourceName}_db:
+        raise HTTPException(status_code=404, detail="${resourceName} not found")
+    update_item = ${schemaName}(id=item_id, **item.dict())
+    ${resourceName}_db[item_id] = update_item
+    return update_item
+
+@app.delete("/${version}/${resourceName}/{item_id}")
+async def delete_${resourceName}(item_id: str):
+    if item_id not in ${resourceName}_db:
+        raise HTTPException(status_code=404, detail="${resourceName} not found")
+    del ${resourceName}_db[item_id]
+    return {"message": "${resourceName} deleted"}
+`;
+}
+
+function getPydanticType(field: TemplateField): string {
+  // Map faker types to Pydantic types
+  const typeMap: Record<string, string> = {
+    'userName': 'str',
+    'email': 'str',
+    'firstName': 'str',
+    'lastName': 'str',
+    'int': 'int',
+    'float': 'float',
+    'boolean': 'bool',
+    'date': 'datetime',
+    // Add more mappings as needed
+  };
+
+  return field.method ? typeMap[field.method] || 'str' : 'str';
+}
+
+function getPydanticArrayType(field: TemplateField): string {
+  if (field.arrayType === 'simple') {
+    return getPydanticType(field.items!);
+  }
+  return generateNestedSchema(field.items!);
+}
+
+function generateNestedSchema(field: TemplateField): string {
+  if (!field.fields) return 'dict';
+  
+  const fields = field.fields.map(f => 
+    `        ${f.key}: ${getPydanticType(f)}`
+  ).join('\n');
+
+  return `dict #{\n${fields}\n    }`;
+} 
\ No newline at end of file
diff --git a/src/lib/generators/index.ts b/src/lib/generators/index.ts
new file mode 100644
index 0000000..0faaf1d
--- /dev/null
+++ b/src/lib/generators/index.ts
@@ -0,0 +1,18 @@
+export enum CodeGeneratorType {
+  FASTAPI = 'fastapi',
+  EXPRESS = 'express',
+  REACT = 'react'
+}
+
+export interface CodeGenerator {
+  type: CodeGeneratorType;
+  label: string;
+  generate: (params: GeneratorParams) => string;
+}
+
+export interface GeneratorParams {
+  projectName: string;
+  resourceName: string;
+  version: string;
+  template: Record<string, any>;
+} 
\ No newline at end of file
diff --git a/src/lib/generators/react.ts b/src/lib/generators/react.ts
new file mode 100644
index 0000000..4977ba4
--- /dev/null
+++ b/src/lib/generators/react.ts
@@ -0,0 +1,79 @@
+import { toPascalCase } from "@/utils/string";
+export function generateReactCode(
+  projectName: string,
+  resourceName: string,
+  version: string,
+  template: Record<string, unknown>
+): string {
+  const resourceType = toPascalCase(resourceName);
+  
+  return `
+import axios from 'axios';
+
+const api = axios.create({
+  baseURL: process.env.NEXT_PUBLIC_API_URL
+});
+
+export interface ${resourceType} {
+${generateTypeDefinition(template)}
+  id: string;
+}
+
+export interface Create${resourceType}Dto {
+${generateTypeDefinition(template)}
+}
+
+export const ${resourceName}Api = {
+  create: async (data: Create${resourceType}Dto): Promise<${resourceType}> => {
+    const response = await api.post<${resourceType}>('/${version}/${resourceName}', data);
+    return response.data;
+  },
+
+  getAll: async (): Promise<${resourceType}[]> => {
+    const response = await api.get<${resourceType}[]>('/${version}/${resourceName}');
+    return response.data;
+  },
+
+  getById: async (id: string): Promise<${resourceType}> => {
+    const response = await api.get<${resourceType}>('/${version}/${resourceName}/' + id);
+    return response.data;
+  },
+
+  update: async (id: string, data: Create${resourceType}Dto): Promise<${resourceType}> => {
+    const response = await api.put<${resourceType}>('/${version}/${resourceName}/' + id, data);
+    return response.data;
+  },
+
+  delete: async (id: string): Promise<void> => {
+    await api.delete('/${version}/${resourceName}/' + id);
+  }
+};
+
+// Example React Hook
+export function use${resourceType}s() {
+  const [data, setData] = useState<${resourceType}[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    ${resourceName}Api.getAll()
+      .then(setData)
+      .catch(setError)
+      .finally(() => setLoading(false));
+  }, []);
+
+  return { data, loading, error };
+}
+`;
+}
+
+function generateTypeDefinition(template: Record<string, unknown>): string {
+  return Object.entries(template)
+    .map(([key, value]) => {
+      if (typeof value === 'string' && value.startsWith('$')) {
+        return `  ${key}: string;`;
+      }
+      return `  ${key}: ${typeof value};`;
+    })
+    .join('\n');
+} 
\ No newline at end of file
diff --git a/src/lib/validators/fastapi.ts b/src/lib/validators/fastapi.ts
new file mode 100644
index 0000000..65c524e
--- /dev/null
+++ b/src/lib/validators/fastapi.ts
@@ -0,0 +1,34 @@
+export function validateFastAPICode(code: string): { isValid: boolean; errors: string[] } {
+  const errors: string[] = [];
+
+  // Check for required imports
+  if (!code.includes('from fastapi import FastAPI')) {
+    errors.push('Missing FastAPI import');
+  }
+  if (!code.includes('from pydantic import BaseModel')) {
+    errors.push('Missing Pydantic import');
+  }
+
+  // Check for basic structure
+  if (!code.includes('app = FastAPI')) {
+    errors.push('Missing FastAPI app initialization');
+  }
+
+  // Check for CRUD endpoints
+  const requiredEndpoints = ['@app.get', '@app.post', '@app.put', '@app.delete'];
+  requiredEndpoints.forEach(endpoint => {
+    if (!code.includes(endpoint)) {
+      errors.push(`Missing ${endpoint} endpoint`);
+    }
+  });
+
+  // Check for Pydantic models
+  if (!code.includes('class') || !code.includes('BaseModel')) {
+    errors.push('Missing Pydantic model definition');
+  }
+
+  return {
+    isValid: errors.length === 0,
+    errors
+  };
+} 
\ No newline at end of file
diff --git a/src/utils/string.ts b/src/utils/string.ts
new file mode 100644
index 0000000..89a1241
--- /dev/null
+++ b/src/utils/string.ts
@@ -0,0 +1,13 @@
+export function toPascalCase(str: string): string {
+  return str
+    .split(/[-_\s]+/)
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+    .join('');
+}
+
+export function toKebabCase(str: string): string {
+  return str
+    .replace(/([a-z])([A-Z])/g, '$1-$2')
+    .replace(/[\s_]+/g, '-')
+    .toLowerCase();
+} 
\ No newline at end of file

From 201f003c1e19530a22068855ea3e57871abe092d Mon Sep 17 00:00:00 2001
From: Faisal Ahmed Sifat <Faisalahmed531@gmail.com>
Date: Mon, 24 Feb 2025 00:13:35 +0600
Subject: [PATCH 07/10] ui: added fields and manual editing feature in
 resources/:id page

---
 .../[id]/resources/[resourceId]/page.tsx      |   8 +-
 .../resource/ResourceTemplateEditor.tsx       | 166 ++++++++++++++++++
 .../resource/ResourceTemplateWrapper.tsx      |  26 +++
 3 files changed, 196 insertions(+), 4 deletions(-)
 create mode 100644 src/components/resource/ResourceTemplateEditor.tsx
 create mode 100644 src/components/resource/ResourceTemplateWrapper.tsx

diff --git a/src/app/projects/[id]/resources/[resourceId]/page.tsx b/src/app/projects/[id]/resources/[resourceId]/page.tsx
index 8156a53..30886b6 100644
--- a/src/app/projects/[id]/resources/[resourceId]/page.tsx
+++ b/src/app/projects/[id]/resources/[resourceId]/page.tsx
@@ -9,6 +9,8 @@ import { IdTypeToggle } from "@/app/components/IdTypeToggle";
 import { ApiEndpointsSection } from "@/app/components/ApiEndpointsSection";
 import { EndpointTemplateEditor } from "@/app/components/EndpointTemplateEditor";
 import { CodeGenerator } from "@/components/resource/CodeGenerator";
+import { ResourceTemplateEditor } from "@/components/resource/ResourceTemplateEditor";
+import { ResourceTemplateWrapper } from "@/components/resource/ResourceTemplateWrapper";
 
 const ROOT_URL = process.env.ROOT_SITE;
 
@@ -87,11 +89,9 @@ export default async function ResourcePage({ params }: PageProps) {
           />
           <div className="mt-6 bg-gray-800 shadow-xl sm:rounded-lg border border-gray-700">
             <div className="px-4 py-5 sm:p-6">
-              <EditableTemplate
-                template={resource.template as TemplateObject}
+              <ResourceTemplateWrapper
                 resourceId={resource.id}
-                currentCount={currentCount}
-                _projectId={project.id}
+                template={resource.template as Record<string, unknown>}
               />
             </div>
           </div>
diff --git a/src/components/resource/ResourceTemplateEditor.tsx b/src/components/resource/ResourceTemplateEditor.tsx
new file mode 100644
index 0000000..215dcc3
--- /dev/null
+++ b/src/components/resource/ResourceTemplateEditor.tsx
@@ -0,0 +1,166 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import { TemplateEditor } from "@/components/template/TemplateEditor";
+import type { TemplateField } from "@/types/template";
+import { generateTemplate } from "@/utils/templateUtils";
+
+interface ResourceTemplateEditorProps {
+  template: Record<string, unknown>;
+  onUpdate: (template: Record<string, unknown>) => Promise<void>;
+}
+
+function parseTemplateToFields(template: Record<string, unknown>): TemplateField[] {
+  return Object.entries(template).map(([key, value]) => {
+    if (typeof value === "string" && value.startsWith("$")) {
+      const [module, method] = value.slice(1).split(".");
+      return { key, type: "simple", module, method };
+    }
+    if (Array.isArray(value)) {
+      // Handle array type
+      const firstItem = value[0];
+      if (typeof firstItem === "string" && firstItem.startsWith("$")) {
+        const [module, method] = firstItem.slice(1).split(".");
+        return {
+          key,
+          type: "array",
+          arrayType: "simple",
+          count: value.length,
+          items: { key: "", type: "simple", module, method }
+        };
+      }
+      if (typeof firstItem === "object" && firstItem !== null) {
+        return {
+          key,
+          type: "array",
+          arrayType: "object",
+          count: value.length,
+          items: { key: "", type: "object", fields: parseTemplateToFields(firstItem as Record<string, unknown>) }
+        };
+      }
+    }
+    if (typeof value === "object" && value !== null) {
+      // Handle object type
+      return {
+        key,
+        type: "object",
+        fields: parseTemplateToFields(value as Record<string, unknown>)
+      };
+    }
+    return { key, type: "simple" };
+  });
+}
+
+export function ResourceTemplateEditor({ template, onUpdate }: ResourceTemplateEditorProps) {
+  const [fields, setFields] = useState<TemplateField[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const [editorState, setEditorState] = useState({
+    mode: "visual" as const,
+    template: JSON.stringify(template, null, 2),
+  });
+  
+  // Use ref to track initial load
+  const isInitialized = useRef(false);
+
+  // Initialize fields only once on mount
+  useEffect(() => {
+    if (!isInitialized.current) {
+      try {
+        const templateFields = parseTemplateToFields(template);
+        setFields(templateFields);
+        isInitialized.current = true;
+      } catch (error) {
+        console.error("Error parsing template:", error);
+      }
+    }
+  }, [template]);
+
+  // Sync fields with manual template when switching modes
+  useEffect(() => {
+    if (editorState.mode === "manual") {
+      const template = JSON.stringify(generateTemplate(fields), null, 2);
+      setEditorState(prev => ({ ...prev, template }));
+    }
+  }, [editorState.mode, fields]);
+
+  const handleUpdateField = (field: TemplateField, updates: Partial<TemplateField>) => {
+    const updateFieldInArray = (fieldsArray: TemplateField[]): TemplateField[] => {
+      return fieldsArray.map(f => {
+        if (f === field) {
+          return { ...f, ...updates };
+        }
+        if (f.type === "object" && f.fields) {
+          return { ...f, fields: updateFieldInArray(f.fields) };
+        }
+        if (f.type === "array" && f.items) {
+          if (f.items === field) {
+            return { ...f, items: { ...f.items, ...updates } };
+          }
+          if (f.items.fields) {
+            return { ...f, items: { ...f.items, fields: updateFieldInArray(f.items.fields) } };
+          }
+        }
+        return f;
+      });
+    };
+
+    const updatedFields = updateFieldInArray(fields);
+    setFields(updatedFields);
+    handleSave(generateTemplate(updatedFields));
+  };
+
+  const handleTemplateChange = async (value: string) => {
+    try {
+      const parsed = JSON.parse(value);
+      setEditorState({ ...editorState, template: value });
+      handleSave(parsed);
+      setError(null);
+    } catch {
+      setError("Invalid JSON format");
+    }
+  };
+
+  const handleSave = async (newTemplate: Record<string, unknown>) => {
+    try {
+      await onUpdate(newTemplate);
+      setError(null);
+    } catch (error) {
+      setError("Failed to update template");
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      <TemplateEditor
+        mode={editorState.mode}
+        template={editorState.template}
+        fields={fields}
+        onAddField={() => setFields([...fields, { key: "", type: "simple" }])}
+        onUpdateField={handleUpdateField}
+        onRemoveField={(fieldToRemove) => {
+          setFields(fields.filter(f => f !== fieldToRemove));
+        }}
+        onAddNestedField={(parentField) => {
+          const updateFieldInArray = (fieldsArray: TemplateField[]): TemplateField[] => {
+            return fieldsArray.map(f => {
+              if (f === parentField) {
+                return {
+                  ...f,
+                  fields: [...(f.fields || []), { key: "", type: "simple" }]
+                };
+              }
+              if (f.type === "object" && f.fields) {
+                return { ...f, fields: updateFieldInArray(f.fields) };
+              }
+              return f;
+            });
+          };
+          setFields(updateFieldInArray(fields));
+        }}
+        onTemplateChange={handleTemplateChange}
+        onModeChange={(mode) => setEditorState({ ...editorState, mode })}
+      />
+      {error && <p className="text-sm text-red-500">{error}</p>}
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/src/components/resource/ResourceTemplateWrapper.tsx b/src/components/resource/ResourceTemplateWrapper.tsx
new file mode 100644
index 0000000..818fdf7
--- /dev/null
+++ b/src/components/resource/ResourceTemplateWrapper.tsx
@@ -0,0 +1,26 @@
+"use client";
+
+import { ResourceTemplateEditor } from "./ResourceTemplateEditor";
+import { updateResourceTemplate } from "@/server/actions/resources";
+
+interface ResourceTemplateWrapperProps {
+  resourceId: string;
+  template: Record<string, unknown>;
+}
+
+export function ResourceTemplateWrapper({ resourceId, template }: ResourceTemplateWrapperProps) {
+  const handleUpdate = async (newTemplate: Record<string, unknown>) => {
+    try {
+      await updateResourceTemplate(resourceId, newTemplate);
+    } catch (error) {
+      console.error("Failed to update template:", error);
+    }
+  };
+
+  return (
+    <ResourceTemplateEditor
+      template={template}
+      onUpdate={handleUpdate}
+    />
+  );
+} 
\ No newline at end of file

From ec69f9ba379b55565ca8f8b5a15e3e9a55032cc6 Mon Sep 17 00:00:00 2001
From: Faisal Ahmed Sifat <Faisalahmed531@gmail.com>
Date: Mon, 24 Feb 2025 00:30:19 +0600
Subject: [PATCH 08/10] fix: added save button in resource data template and
 optimized for production

---
 .../[id]/resources/[resourceId]/page.tsx      |  4 +---
 src/components/resource/FastAPIGenerator.tsx  |  3 +--
 .../resource/ResourceTemplateEditor.tsx       | 24 +++++++++++++++++--
 .../resource/ResourceTemplateWrapper.tsx      |  3 ++-
 src/lib/generators/index.ts                   |  1 +
 src/server/actions/resources.ts               | 16 +++++++++----
 6 files changed, 39 insertions(+), 12 deletions(-)

diff --git a/src/app/projects/[id]/resources/[resourceId]/page.tsx b/src/app/projects/[id]/resources/[resourceId]/page.tsx
index 30886b6..b4d21c9 100644
--- a/src/app/projects/[id]/resources/[resourceId]/page.tsx
+++ b/src/app/projects/[id]/resources/[resourceId]/page.tsx
@@ -1,15 +1,13 @@
 import { notFound } from "next/navigation";
 import Link from "next/link";
 import { getProject } from "@/server/actions/projects";
-import { getResource, TemplateObject } from "@/server/actions/resources";
+import { getResource} from "@/server/actions/resources";
 import { DeleteResourceButton } from "@/app/resources/DeleteResourceButton";
 import { GenerateDataSection } from "./GenerateDataSection";
-import { EditableTemplate } from "@/app/components/EditableTemplate";
 import { IdTypeToggle } from "@/app/components/IdTypeToggle";
 import { ApiEndpointsSection } from "@/app/components/ApiEndpointsSection";
 import { EndpointTemplateEditor } from "@/app/components/EndpointTemplateEditor";
 import { CodeGenerator } from "@/components/resource/CodeGenerator";
-import { ResourceTemplateEditor } from "@/components/resource/ResourceTemplateEditor";
 import { ResourceTemplateWrapper } from "@/components/resource/ResourceTemplateWrapper";
 
 const ROOT_URL = process.env.ROOT_SITE;
diff --git a/src/components/resource/FastAPIGenerator.tsx b/src/components/resource/FastAPIGenerator.tsx
index 91e56bc..cd7477a 100644
--- a/src/components/resource/FastAPIGenerator.tsx
+++ b/src/components/resource/FastAPIGenerator.tsx
@@ -2,13 +2,12 @@
 
 import { useState } from 'react';
 import { generateFastAPICode } from '@/lib/generators/fastapi';
-import type { TemplateField } from '@/types/template';
 
 interface FastAPIGeneratorProps {
   projectName: string;
   resourceName: string;
   version: string;
-  template: TemplateField[];
+  template: Record<string, unknown>;
 }
 
 export function FastAPIGenerator({
diff --git a/src/components/resource/ResourceTemplateEditor.tsx b/src/components/resource/ResourceTemplateEditor.tsx
index 215dcc3..a695369 100644
--- a/src/components/resource/ResourceTemplateEditor.tsx
+++ b/src/components/resource/ResourceTemplateEditor.tsx
@@ -55,9 +55,10 @@ export function ResourceTemplateEditor({ template, onUpdate }: ResourceTemplateE
   const [fields, setFields] = useState<TemplateField[]>([]);
   const [error, setError] = useState<string | null>(null);
   const [editorState, setEditorState] = useState({
-    mode: "visual" as const,
+    mode: "visual",
     template: JSON.stringify(template, null, 2),
   });
+  const [isSaving, setIsSaving] = useState(false);
   
   // Use ref to track initial load
   const isInitialized = useRef(false);
@@ -122,17 +123,36 @@ export function ResourceTemplateEditor({ template, onUpdate }: ResourceTemplateE
 
   const handleSave = async (newTemplate: Record<string, unknown>) => {
     try {
+      setIsSaving(true);
       await onUpdate(newTemplate);
       setError(null);
     } catch (error) {
+      console.error("Error saving template:", error);
       setError("Failed to update template");
+    } finally {
+      setIsSaving(false);
     }
   };
 
   return (
     <div className="space-y-4">
+      <div className="flex justify-between items-center">
+        <h2 className="text-xl font-semibold text-gray-100">Data Template Builder</h2>
+        <button
+          onClick={() => handleSave(generateTemplate(fields))}
+          disabled={isSaving}
+          className={`px-4 py-2 rounded-md text-white ${
+            isSaving 
+              ? "bg-blue-500 cursor-not-allowed" 
+              : "bg-blue-600 hover:bg-blue-700"
+          }`}
+        >
+          {isSaving ? "Saving..." : "Save Changes"}
+        </button>
+      </div>
+      
       <TemplateEditor
-        mode={editorState.mode}
+        mode={editorState.mode as "visual" | "manual"}
         template={editorState.template}
         fields={fields}
         onAddField={() => setFields([...fields, { key: "", type: "simple" }])}
diff --git a/src/components/resource/ResourceTemplateWrapper.tsx b/src/components/resource/ResourceTemplateWrapper.tsx
index 818fdf7..f390835 100644
--- a/src/components/resource/ResourceTemplateWrapper.tsx
+++ b/src/components/resource/ResourceTemplateWrapper.tsx
@@ -2,6 +2,7 @@
 
 import { ResourceTemplateEditor } from "./ResourceTemplateEditor";
 import { updateResourceTemplate } from "@/server/actions/resources";
+import type { TemplateObject } from "@/server/actions/resources";
 
 interface ResourceTemplateWrapperProps {
   resourceId: string;
@@ -11,7 +12,7 @@ interface ResourceTemplateWrapperProps {
 export function ResourceTemplateWrapper({ resourceId, template }: ResourceTemplateWrapperProps) {
   const handleUpdate = async (newTemplate: Record<string, unknown>) => {
     try {
-      await updateResourceTemplate(resourceId, newTemplate);
+      await updateResourceTemplate(resourceId, newTemplate as TemplateObject);
     } catch (error) {
       console.error("Failed to update template:", error);
     }
diff --git a/src/lib/generators/index.ts b/src/lib/generators/index.ts
index 0faaf1d..3fa1775 100644
--- a/src/lib/generators/index.ts
+++ b/src/lib/generators/index.ts
@@ -14,5 +14,6 @@ export interface GeneratorParams {
   projectName: string;
   resourceName: string;
   version: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   template: Record<string, any>;
 } 
\ No newline at end of file
diff --git a/src/server/actions/resources.ts b/src/server/actions/resources.ts
index 656aeb2..3131a20 100644
--- a/src/server/actions/resources.ts
+++ b/src/server/actions/resources.ts
@@ -145,18 +145,26 @@ export async function generateData(
 
 export async function updateResourceTemplate(
   resourceId: string,
-  template: TemplateObject,
-  count: number
+  template: TemplateObject
 ) {
   try {
+    const resource = await prisma.resource.findUnique({
+      where: { id: resourceId }
+    });
+
+    if (!resource) {
+      throw new Error("Resource not found");
+    }
+
     const updatedResource = await prisma.resource.update({
       where: { id: resourceId },
       data: { template },
     });
 
-    // Regenerate data with new template
-    await generateData(updatedResource.projectId, resourceId, count);
+    // Always regenerate data when template changes
+    await generateData(updatedResource.projectId, resourceId, 10); // or whatever default count you want
 
+    revalidatePath(`/projects/${updatedResource.projectId}/resources/${resourceId}`);
     return { success: true, resource: updatedResource };
   } catch (error) {
     throw new Error(

From 1f3f953b177cf60fb22313d0e4e39d5b408a7cdc Mon Sep 17 00:00:00 2001
From: Faisal Ahmed Sifat <Faisalahmed531@gmail.com>
Date: Tue, 25 Feb 2025 05:00:33 +0600
Subject: [PATCH 09/10] feat: code generation based on selected endpoints and
 ui update

---
 package-lock.json                             |  10 +
 package.json                                  |   1 +
 src/app/page.tsx                              | 122 +++--
 .../[id]/resources/[resourceId]/page.tsx      |   7 +
 src/components/resource/CodeGenerator.tsx     | 431 ++++++++++++++++--
 .../resource/CodeGeneratorWrapper.tsx         |  12 +
 .../resource/ResourceTemplateEditor.tsx       | 119 +++--
 src/components/template/TemplateEditor.tsx    |  18 +-
 src/lib/generators/express.ts                 | 207 +++++++--
 src/lib/generators/fastapi.ts                 | 173 +++----
 src/lib/generators/index.ts                   |  23 +-
 src/lib/generators/nextjs.ts                  | 247 ++++++++++
 src/lib/generators/react.ts                   | 109 +++--
 src/lib/schemas/endpoints.ts                  |  11 +
 src/lib/types/steps.ts                        |   9 +
 15 files changed, 1154 insertions(+), 345 deletions(-)
 create mode 100644 src/components/resource/CodeGeneratorWrapper.tsx
 create mode 100644 src/lib/generators/nextjs.ts
 create mode 100644 src/lib/schemas/endpoints.ts
 create mode 100644 src/lib/types/steps.ts

diff --git a/package-lock.json b/package-lock.json
index e5bec0b..d3de4ac 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "@faker-js/faker": "^9.5.0",
         "@paralleldrive/cuid2": "^2.2.2",
         "@prisma/client": "^6.3.1",
+        "clsx": "^2.1.1",
         "next": "15.1.7",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
@@ -1968,6 +1969,15 @@
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
       "license": "MIT"
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
diff --git a/package.json b/package.json
index 5adf9f2..d7eecbd 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "@faker-js/faker": "^9.5.0",
     "@paralleldrive/cuid2": "^2.2.2",
     "@prisma/client": "^6.3.1",
+    "clsx": "^2.1.1",
     "next": "15.1.7",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 755c13b..7e70fb8 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -7,67 +7,103 @@ const ROOT_URL = process.env.ROOT_SITE;
 
 export default async function Home() {
   const projects = (await getProjects()) ?? [];
-  console.log(projects);
-  const baseUrl = ROOT_URL;
 
   return (
-    <div className="min-h-screen bg-gray-900">
-      <div className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
-        <div className="text-center mb-12">
-          <h1 className="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-400 sm:text-5xl md:text-6xl">
+    <div className="min-h-screen bg-gradient-to-b from-gray-900 to-gray-800">
+      <div className="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:px-8">
+        {/* Hero Section */}
+        <div className="text-center mb-16">
+          <h1 className="text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-400 mb-6">
             Create Your Mock API
           </h1>
-          <p className="mt-3 max-w-md mx-auto text-base text-gray-400 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">
-            Design, create and manage your mock APIs with ease. Generate
-            realistic data for your frontend development.
+          <p className="mt-4 max-w-2xl mx-auto text-xl text-gray-400">
+            Design, create and manage your mock APIs with ease. Generate realistic data for your frontend development.
           </p>
-          <div className="mt-5 max-w-md mx-auto sm:flex sm:justify-center md:mt-8">
-            <div className="rounded-md shadow">
-              <Link
-                href="/projects/new"
-                className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 transition-colors duration-200 md:py-4 md:text-lg md:px-10"
-              >
-                Create New Project
-              </Link>
+          <div className="mt-8">
+            <Link
+              href="/projects/new"
+              className="inline-flex items-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 transition-all duration-200 shadow-lg hover:shadow-blue-500/20"
+            >
+              Create New Project
+              <svg className="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clipRule="evenodd" />
+              </svg>
+            </Link>
+          </div>
+        </div>
+
+        {/* Features Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
+          {/* Feature 1 */}
+          <div className="bg-gray-800/50 p-6 rounded-xl border border-gray-700 hover:border-blue-500/50 transition-all duration-200">
+            <div className="text-blue-400 mb-4">
+              <svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+              </svg>
+            </div>
+            <h3 className="text-xl font-semibold text-white mb-2">Instant API Generation</h3>
+            <p className="text-gray-400">Create RESTful APIs with mock data in seconds using our intuitive interface.</p>
+          </div>
+
+          {/* Feature 2 */}
+          <div className="bg-gray-800/50 p-6 rounded-xl border border-gray-700 hover:border-purple-500/50 transition-all duration-200">
+            <div className="text-purple-400 mb-4">
+              <svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
+              </svg>
+            </div>
+            <h3 className="text-xl font-semibold text-white mb-2">Realistic Data</h3>
+            <p className="text-gray-400">Generate realistic mock data using our extensive library of data types.</p>
+          </div>
+
+          {/* Feature 3 */}
+          <div className="bg-gray-800/50 p-6 rounded-xl border border-gray-700 hover:border-green-500/50 transition-all duration-200">
+            <div className="text-green-400 mb-4">
+              <svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+              </svg>
             </div>
+            <h3 className="text-xl font-semibold text-white mb-2">Code Generation</h3>
+            <p className="text-gray-400">Get ready-to-use code for popular frameworks like Next.js, Express, and FastAPI.</p>
           </div>
         </div>
 
-        <div className="bg-gray-800 shadow-xl overflow-hidden sm:rounded-lg mt-8 border border-gray-700">
-          <ul className="divide-y divide-gray-700">
+        {/* Projects List */}
+        <div className="bg-gray-800/30 rounded-xl border border-gray-700 overflow-hidden">
+          <div className="px-6 py-4 border-b border-gray-700">
+            <h2 className="text-xl font-semibold text-white">Your Projects</h2>
+          </div>
+          <div className="divide-y divide-gray-700">
             {projects.map((project) => (
-              <li key={project.id}>
-                <Link href={`/projects/${project.id}`}>
-                  <div className="px-4 py-4 flex items-center hover:bg-gray-700/50 transition-colors duration-200">
-                    <div className="min-w-0 flex-1">
-                      <h3 className="text-lg font-medium text-gray-100">
-                        {project.name}
-                      </h3>
+              <Link 
+                key={project.id}
+                href={`/projects/${project.id}`}
+                className="block hover:bg-gray-700/50 transition-colors duration-200"
+              >
+                <div className="px-6 py-4">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <h3 className="text-lg font-medium text-white">{project.name}</h3>
                       <p className="mt-1 text-sm text-gray-400">
                         {project.resources.length} resources
                       </p>
                       <p className="mt-1 text-xs text-gray-500">
-                        Base URL: {baseUrl}/{project.id}
+                        {ROOT_URL}/{project.id}
                       </p>
                     </div>
-                    <div>
-                      <svg
-                        className="h-5 w-5 text-gray-500"
-                        fill="currentColor"
-                        viewBox="0 0 20 20"
-                      >
-                        <path
-                          fillRule="evenodd"
-                          d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
-                          clipRule="evenodd"
-                        />
-                      </svg>
-                    </div>
+                    <svg className="w-5 h-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                    </svg>
                   </div>
-                </Link>
-              </li>
+                </div>
+              </Link>
             ))}
-          </ul>
+            {projects.length === 0 && (
+              <div className="px-6 py-8 text-center text-gray-400">
+                No projects yet. Create your first project to get started.
+              </div>
+            )}
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/app/projects/[id]/resources/[resourceId]/page.tsx b/src/app/projects/[id]/resources/[resourceId]/page.tsx
index b4d21c9..611e609 100644
--- a/src/app/projects/[id]/resources/[resourceId]/page.tsx
+++ b/src/app/projects/[id]/resources/[resourceId]/page.tsx
@@ -111,6 +111,13 @@ export default async function ResourcePage({ params }: PageProps) {
             resourceName={resource.name}
             version={resource.endpoint.split('/')[0]}
             template={resource.template as Record<string, unknown>}
+            initialEndpoints={{
+              get: resource.allowGet,
+              getById: resource.allowGetById,
+              post: resource.allowPost,
+              put: resource.allowPut,
+              delete: resource.allowDelete
+            }}
           />
         </div>
       </div>
diff --git a/src/components/resource/CodeGenerator.tsx b/src/components/resource/CodeGenerator.tsx
index efa36f2..3da58e3 100644
--- a/src/components/resource/CodeGenerator.tsx
+++ b/src/components/resource/CodeGenerator.tsx
@@ -1,41 +1,313 @@
 "use client";
 
-import { useState } from 'react';
-import { generateFastAPICode } from '@/lib/generators/fastapi';
-import { generateExpressCode } from '@/lib/generators/express';
-import { generateReactCode } from '@/lib/generators/react';
+import { useState, useEffect, useMemo, useCallback } from 'react';
 import { CodeGeneratorType } from '@/lib/generators';
+import cn from 'clsx';
+import { 
+  generateFastAPIModels,
+  generateFastAPIRouter,
+  generateFastAPIGetAll,
+  generateFastAPIGetOne,
+  generateFastAPICreate,
+  generateFastAPIUpdate,
+  generateFastAPIDelete
+} from '@/lib/generators/fastapi';
+import {
+  generateExpressTypes,
+  generateExpressRouter,
+  generateExpressGetAll,
+  generateExpressGetOne,
+  generateExpressCreate,
+  generateExpressUpdate,
+  generateExpressDelete
+} from '@/lib/generators/express';
+import { generateNextTypes, generateNextSetup, generateNextGetAll, generateNextGetById, generateNextCreate, generateNextUpdate, generateNextDelete } from '@/lib/generators/nextjs';
+import type { GeneratorParams } from "@/lib/generators/index";
+import { EndpointSchema, type EndpointState } from '@/lib/schemas/endpoints';
+import { StepType } from '@/lib/types/steps';
+
 interface CodeGeneratorProps {
   projectName: string;
   resourceName: string;
   version: string;
   template: Record<string, unknown>;
+  initialEndpoints?: Partial<EndpointState>;
+}
+
+interface Step {
+  id: string;
+  title: string;
+  description: string;
+  generator: (params: GeneratorParams) => string;
+  path: string;
+  requires?: string[];
 }
 
+const FRAMEWORK_STEPS: Record<CodeGeneratorType, Step[]> = {
+  [CodeGeneratorType.NEXTJS]: [
+    {
+      id: StepType.TYPES,
+      title: 'Define Types',
+      description: 'Set up TypeScript interfaces',
+      generator: generateNextTypes,
+      path: 'types/user.ts'
+    },
+    {
+      id: StepType.SETUP,
+      title: 'Initial Setup',
+      description: 'Set up imports and configuration',
+      generator: generateNextSetup,
+      path: 'app/api/user/route.ts',
+      requires: ['types']
+    },
+    {
+      id: StepType.GET_ALL,
+      title: 'GET All Endpoint',
+      description: 'List all resources',
+      generator: generateNextGetAll,
+      path: 'app/api/user/route.ts',
+      requires: ['setup']
+    },
+    {
+      id: StepType.GET_ONE,
+      title: 'GET By ID Endpoint',
+      description: 'Add endpoint to fetch a single resource.',
+      generator: generateNextGetById,
+      path: 'user/[id]/route.ts',
+      requires: ['setup']
+    },
+    {
+      id: StepType.CREATE,
+      title: 'POST Endpoint',
+      description: 'Add endpoint to create a new resource.',
+      generator: generateNextCreate,
+      path: 'user/route.ts',
+      requires: ['setup']
+    },
+    {
+      id: StepType.UPDATE,
+      title: 'PUT Endpoint',
+      description: 'Add endpoint to update a resource.',
+      generator: generateNextUpdate,
+      path: 'user/[id]/route.ts',
+      requires: ['setup']
+    },
+    {
+      id: StepType.DELETE,
+      title: 'DELETE Endpoint',
+      description: 'Add endpoint to delete a resource.',
+      generator: generateNextDelete,
+      path: 'user/[id]/route.ts',
+      requires: ['setup']
+    }
+  ],
+  [CodeGeneratorType.FASTAPI]: [
+    {
+      id: StepType.TYPES,
+      title: 'Define Models',
+      description: 'Set up Pydantic models',
+      generator: generateFastAPIModels,
+      path: 'models.py'
+    },
+    {
+      id: StepType.SETUP,
+      title: 'Create Router',
+      description: 'Initialize FastAPI router',
+      generator: generateFastAPIRouter,
+      path: 'routers/user.py',
+      requires: ['types']
+    },
+    {
+      id: StepType.GET_ALL,
+      title: 'GET All Endpoint',
+      description: 'List all resources',
+      generator: generateFastAPIGetAll,
+      path: 'routers/user.py',
+      requires: ['setup']
+    },
+    {
+      id: StepType.GET_ONE,
+      title: 'GET By ID Endpoint',
+      description: 'Get single resource',
+      generator: generateFastAPIGetOne,
+      path: 'routers/user.py',
+      requires: ['setup']
+    },
+    {
+      id: StepType.CREATE,
+      title: 'POST Endpoint',
+      description: 'Create new resource',
+      generator: generateFastAPICreate,
+      path: 'routers/user.py',
+      requires: ['setup']
+    },
+    {
+      id: StepType.UPDATE,
+      title: 'PUT Endpoint',
+      description: 'Update resource',
+      generator: generateFastAPIUpdate,
+      path: 'routers/user.py',
+      requires: ['setup']
+    },
+    {
+      id: StepType.DELETE,
+      title: 'DELETE Endpoint',
+      description: 'Delete resource',
+      generator: generateFastAPIDelete,
+      path: 'routers/user.py',
+      requires: ['setup']
+    }
+  ],
+  [CodeGeneratorType.EXPRESS]: [
+    {
+      id: StepType.TYPES,
+      title: 'Define Types',
+      description: 'Set up TypeScript interfaces',
+      generator: generateExpressTypes,
+      path: 'types/user.ts'
+    },
+    {
+      id: StepType.SETUP,
+      title: 'Create Router',
+      description: 'Initialize Express router',
+      generator: generateExpressRouter,
+      path: 'routes/user.ts',
+      requires: ['types']
+    },
+    {
+      id: StepType.GET_ALL,
+      title: 'GET All Endpoint',
+      description: 'List all resources',
+      generator: generateExpressGetAll,
+      path: 'routes/user.ts',
+      requires: ['setup']
+    },
+    {
+      id: StepType.GET_ONE,
+      title: 'GET By ID Endpoint',
+      description: 'Get single resource',
+      generator: generateExpressGetOne,
+      path: 'routes/user.ts',
+      requires: ['setup']
+    },
+    {
+      id: StepType.CREATE,
+      title: 'POST Endpoint',
+      description: 'Create new resource',
+      generator: generateExpressCreate,
+      path: 'routes/user.ts',
+      requires: ['setup']
+    },
+    {
+      id: StepType.UPDATE,
+      title: 'PUT Endpoint',
+      description: 'Update resource',
+      generator: generateExpressUpdate,
+      path: 'routes/user.ts',
+      requires: ['setup']
+    },
+    {
+      id: StepType.DELETE,
+      title: 'DELETE Endpoint',
+      description: 'Delete resource',
+      generator: generateExpressDelete,
+      path: 'routes/user.ts',
+      requires: ['setup']
+    }
+  ]
+};
+
 export function CodeGenerator({
   projectName,
   resourceName,
   version,
-  template
+  template,
+  initialEndpoints = {}
 }: CodeGeneratorProps) {
+  const [selectedFramework, setSelectedFramework] = useState<CodeGeneratorType>(CodeGeneratorType.NEXTJS);
+  const [selectedStep, setSelectedStep] = useState<string>('');
+  const [completedSteps, setCompletedSteps] = useState<Set<string>>(new Set());
   const [code, setCode] = useState('');
   const [copied, setCopied] = useState(false);
-  const [selectedGenerator, setSelectedGenerator] = useState<CodeGeneratorType>(CodeGeneratorType.FASTAPI);
+  
+  // Parse and validate endpoints with Zod
+  const endpoints = EndpointSchema.parse(initialEndpoints);
+
+  // Filter steps based on selected endpoints
+  const availableSteps = useMemo(() => {
+    return FRAMEWORK_STEPS[selectedFramework].filter(step => {
+      // Always show types and setup if any endpoint is enabled
+      if (step.id === StepType.TYPES || step.id === StepType.SETUP) {
+        return Object.values(endpoints).some(Boolean);
+      }
+      
+      // Show specific endpoints based on selection
+      switch (step.id) {
+        case StepType.GET_ALL: return endpoints.get;
+        case StepType.GET_ONE: return endpoints.getById;
+        case StepType.CREATE: return endpoints.post;
+        case StepType.UPDATE: return endpoints.put;
+        case StepType.DELETE: return endpoints.delete;
+        default: return false;
+      }
+    });
+  }, [selectedFramework, endpoints]);
+
+  // Handle framework change and initial setup
+  useEffect(() => {
+    const initializeSteps = () => {
+      if (availableSteps.length > 0) {
+        const firstStep = availableSteps[0];
+        const params: GeneratorParams = {
+          projectName,
+          resourceName,
+          version,
+          template,
+          allowedEndpoints: endpoints
+        };
+        
+        const generatedCode = firstStep.generator(params);
+        
+        // Batch state updates
+        setSelectedStep(firstStep.id);
+        setCode(generatedCode);
+        setCompletedSteps(new Set([firstStep.id]));
+      } else {
+        // Batch state updates for no steps
+        setSelectedStep('');
+        setCode('// No endpoints selected');
+        setCompletedSteps(new Set());
+      }
+    };
 
-  const handleGenerate = () => {
-    let generatedCode = '';
-    switch (selectedGenerator) {
-      case CodeGeneratorType.FASTAPI:
-        generatedCode = generateFastAPICode(projectName, resourceName, version, template);
-        break;
-      case CodeGeneratorType.EXPRESS:
-        generatedCode = generateExpressCode(projectName, resourceName, version, template);
-        break;
-      case CodeGeneratorType.REACT:
-        generatedCode = generateReactCode(projectName, resourceName, version, template);
-        break;
+    initializeSteps();
+  }, [selectedFramework]); // Only depend on framework changes
+
+  const handleGenerate = useCallback((step: Step) => {
+    const params: GeneratorParams = {
+      projectName,
+      resourceName,
+      version,
+      template,
+      allowedEndpoints: endpoints
+    };
+    
+    const generatedCode = step.generator(params);
+    
+    // Update completed steps
+    const stepsToComplete = new Set<string>();
+    for (const s of availableSteps) {
+      stepsToComplete.add(s.id);
+      if (s.id === step.id) break;
     }
+    
     setCode(generatedCode);
+    setCompletedSteps(stepsToComplete);
+  }, [projectName, resourceName, version, template, endpoints, availableSteps]);
+
+  const isStepDisabled = (step: Step) => {
+    if (!step.requires?.length) return false;
+    return step.requires.some(req => !completedSteps.has(req));
   };
 
   const handleCopy = async () => {
@@ -45,38 +317,105 @@ export function CodeGenerator({
   };
 
   return (
-    <div className="space-y-4">
-      <div className="flex gap-4">
-        <select
-          value={selectedGenerator}
-          onChange={(e) => setSelectedGenerator(e.target.value as CodeGeneratorType)}
-          className="bg-gray-700 text-gray-100 rounded px-3 py-2"
-        >
-          <option value={CodeGeneratorType.FASTAPI}>FastAPI</option>
-          <option value={CodeGeneratorType.EXPRESS}>Express.js</option>
-          <option value={CodeGeneratorType.REACT}>React Client</option>
-        </select>
-        <button
-          onClick={handleGenerate}
-          className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
-        >
-          Generate Code
-        </button>
-      </div>
-
-      {code && (
-        <div className="relative">
+    <div className="space-y-8">
+      {/* Framework Selector */}
+      <div className="flex items-center gap-3">
+        {Object.values(CodeGeneratorType).map((framework) => (
           <button
-            onClick={handleCopy}
-            className="absolute top-2 right-2 px-3 py-1 bg-gray-700 text-sm rounded"
+            key={framework}
+            onClick={() => setSelectedFramework(framework)}
+            className={cn(
+              "px-6 py-3 rounded-lg transition-all duration-300 font-medium",
+              selectedFramework === framework
+                ? "bg-gradient-to-r from-blue-500 to-blue-600 text-white"
+                : "bg-gray-800/50 text-gray-300 hover:bg-gray-700/50"
+            )}
           >
-            {copied ? 'Copied!' : 'Copy'}
+            {framework}
           </button>
-          <pre className="bg-gray-800 p-4 rounded-lg overflow-x-auto">
-            <code className="text-gray-100">{code}</code>
-          </pre>
+        ))}
+      </div>
+
+      <div className="grid grid-cols-12 gap-6">
+        {/* Steps Sidebar */}
+        <div className="col-span-4 space-y-4">
+          <h3 className="text-lg font-semibold text-gray-100 mb-4">Implementation Steps</h3>
+          {availableSteps.map((step, index) => (
+            <button
+              key={step.id}
+              onClick={() => {
+                setSelectedStep(step.id);
+                handleGenerate(step);
+              }}
+              className={cn(
+                "w-full text-left p-4 rounded-lg",
+                selectedStep === step.id
+                  ? "bg-blue-500/10 text-white"
+                  : "bg-gray-800/50 text-gray-300",
+                isStepDisabled(step) && "opacity-50 cursor-not-allowed"
+              )}
+              disabled={isStepDisabled(step)}
+            >
+              <div className="flex items-start gap-3">
+                <div className={cn(
+                  "w-6 h-6 rounded-full flex items-center justify-center text-xs shrink-0",
+                  selectedStep === step.id
+                    ? "bg-blue-500 text-white"
+                    : "bg-gray-700 text-gray-400"
+                )}>
+                  {index + 1}
+                </div>
+                <div>
+                  <div className="font-medium mb-1">{step.title}</div>
+                  <div className="text-sm opacity-80">{step.description}</div>
+                  <div className="text-xs mt-2 font-mono text-gray-500">{step.path}</div>
+                  {step.requires?.length && (
+                    <div className="text-xs mt-2 text-gray-500 flex items-center gap-1">
+                      <span className="w-1 h-1 rounded-full bg-gray-500" />
+                      Requires: {step.requires.join(', ')}
+                    </div>
+                  )}
+                </div>
+              </div>
+            </button>
+          ))}
+        </div>
+
+        {/* Code Display */}
+        <div className="col-span-8">
+          {code && (
+            <div className="relative group">
+              <div className="flex items-center justify-between bg-[#1e1e1e] px-4 py-3 rounded-t-lg border-b border-gray-700/50">
+                <div className="flex items-center gap-2">
+                  <div className="flex gap-1.5">
+                    <div className="w-3 h-3 rounded-full bg-[#ff5f56]" />
+                    <div className="w-3 h-3 rounded-full bg-[#ffbd2e]" />
+                    <div className="w-3 h-3 rounded-full bg-[#27c93f]" />
+                  </div>
+                  <code className="text-sm text-gray-400 ml-3">
+                    {availableSteps.find(s => s.id === selectedStep)?.path}
+                  </code>
+                </div>
+                <button
+                  onClick={handleCopy}
+                  className={cn(
+                    "px-3 py-1.5 text-sm rounded-md transition-all duration-200",
+                    "opacity-0 group-hover:opacity-100",
+                    copied 
+                      ? "bg-green-500/10 text-green-400 border border-green-500/20" 
+                      : "bg-gray-700/50 text-gray-300 hover:bg-gray-600/50 border border-gray-600/50"
+                  )}
+                >
+                  {copied ? 'Copied!' : 'Copy'}
+                </button>
+              </div>
+              <pre className="bg-[#1e1e1e] p-6 rounded-b-lg overflow-x-auto">
+                <code className="text-gray-100 text-sm font-mono">{code}</code>
+              </pre>
+            </div>
+          )}
         </div>
-      )}
+      </div>
     </div>
   );
 } 
\ No newline at end of file
diff --git a/src/components/resource/CodeGeneratorWrapper.tsx b/src/components/resource/CodeGeneratorWrapper.tsx
new file mode 100644
index 0000000..e291ace
--- /dev/null
+++ b/src/components/resource/CodeGeneratorWrapper.tsx
@@ -0,0 +1,12 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+
+const CodeGeneratorClient = dynamic(
+  () => import('./CodeGenerator').then(mod => mod.CodeGenerator),
+  { ssr: false }
+);
+
+export function CodeGeneratorWrapper(props: React.ComponentProps<typeof CodeGeneratorClient>) {
+  return <CodeGeneratorClient {...props} />;
+} 
\ No newline at end of file
diff --git a/src/components/resource/ResourceTemplateEditor.tsx b/src/components/resource/ResourceTemplateEditor.tsx
index a695369..d98fe48 100644
--- a/src/components/resource/ResourceTemplateEditor.tsx
+++ b/src/components/resource/ResourceTemplateEditor.tsx
@@ -55,12 +55,13 @@ export function ResourceTemplateEditor({ template, onUpdate }: ResourceTemplateE
   const [fields, setFields] = useState<TemplateField[]>([]);
   const [error, setError] = useState<string | null>(null);
   const [editorState, setEditorState] = useState({
-    mode: "visual",
+    mode: "visual" as "visual" | "manual",
     template: JSON.stringify(template, null, 2),
+    manualTemplate: JSON.stringify(template, null, 2),
   });
   const [isSaving, setIsSaving] = useState(false);
+  const [isDirty, setIsDirty] = useState(false);
   
-  // Use ref to track initial load
   const isInitialized = useRef(false);
 
   // Initialize fields only once on mount
@@ -76,13 +77,62 @@ export function ResourceTemplateEditor({ template, onUpdate }: ResourceTemplateE
     }
   }, [template]);
 
-  // Sync fields with manual template when switching modes
-  useEffect(() => {
-    if (editorState.mode === "manual") {
-      const template = JSON.stringify(generateTemplate(fields), null, 2);
-      setEditorState(prev => ({ ...prev, template }));
+  // Handle mode switching
+  const handleModeChange = (newMode: "visual" | "manual") => {
+    try {
+      if (newMode === "manual") {
+        // When switching to manual, update the manual template with current fields
+        const template = JSON.stringify(generateTemplate(fields), null, 2);
+        setEditorState(prev => ({ 
+          ...prev, 
+          mode: newMode,
+          manualTemplate: template 
+        }));
+      } else {
+        // When switching to visual, parse the manual template to fields
+        const parsed = JSON.parse(editorState.manualTemplate);
+        const newFields = parseTemplateToFields(parsed);
+        setFields(newFields);
+        setEditorState(prev => ({ ...prev, mode: newMode }));
+      }
+      setError(null);
+    } catch (error) {
+      setError("Invalid JSON format");
     }
-  }, [editorState.mode, fields]);
+  };
+
+  const handleTemplateChange = (value: string) => {
+    // Update the template without validation
+    setEditorState(prev => ({ ...prev, manualTemplate: value }));
+    setIsDirty(true);
+    
+    // Optional: Try to validate after a delay
+    try {
+      JSON.parse(value);
+      setError(null);
+    } catch {
+      setError("Invalid JSON format");
+    }
+  };
+
+  const handleSave = async () => {
+    try {
+      // Validate JSON only when saving
+      const newTemplate = editorState.mode === "visual" 
+        ? generateTemplate(fields)
+        : JSON.parse(editorState.manualTemplate); // This will throw if invalid
+      
+      setIsSaving(true);
+      await onUpdate(newTemplate);
+      setIsDirty(false);
+      setError(null);
+    } catch (error) {
+      console.error("Error saving template:", error);
+      setError("Failed to update template: Invalid JSON format");
+    } finally {
+      setIsSaving(false);
+    }
+  };
 
   const handleUpdateField = (field: TemplateField, updates: Partial<TemplateField>) => {
     const updateFieldInArray = (fieldsArray: TemplateField[]): TemplateField[] => {
@@ -107,31 +157,7 @@ export function ResourceTemplateEditor({ template, onUpdate }: ResourceTemplateE
 
     const updatedFields = updateFieldInArray(fields);
     setFields(updatedFields);
-    handleSave(generateTemplate(updatedFields));
-  };
-
-  const handleTemplateChange = async (value: string) => {
-    try {
-      const parsed = JSON.parse(value);
-      setEditorState({ ...editorState, template: value });
-      handleSave(parsed);
-      setError(null);
-    } catch {
-      setError("Invalid JSON format");
-    }
-  };
-
-  const handleSave = async (newTemplate: Record<string, unknown>) => {
-    try {
-      setIsSaving(true);
-      await onUpdate(newTemplate);
-      setError(null);
-    } catch (error) {
-      console.error("Error saving template:", error);
-      setError("Failed to update template");
-    } finally {
-      setIsSaving(false);
-    }
+    setIsDirty(true);
   };
 
   return (
@@ -139,26 +165,32 @@ export function ResourceTemplateEditor({ template, onUpdate }: ResourceTemplateE
       <div className="flex justify-between items-center">
         <h2 className="text-xl font-semibold text-gray-100">Data Template Builder</h2>
         <button
-          onClick={() => handleSave(generateTemplate(fields))}
-          disabled={isSaving}
+          onClick={handleSave}
+          disabled={isSaving || !isDirty}
           className={`px-4 py-2 rounded-md text-white ${
-            isSaving 
-              ? "bg-blue-500 cursor-not-allowed" 
-              : "bg-blue-600 hover:bg-blue-700"
+            !isDirty 
+              ? "bg-gray-600 cursor-not-allowed"
+              : isSaving 
+                ? "bg-blue-500 cursor-not-allowed" 
+                : "bg-blue-600 hover:bg-blue-700"
           }`}
         >
-          {isSaving ? "Saving..." : "Save Changes"}
+          {isSaving ? "Saving..." : isDirty ? "Save Changes" : "Saved"}
         </button>
       </div>
       
       <TemplateEditor
-        mode={editorState.mode as "visual" | "manual"}
-        template={editorState.template}
+        mode={editorState.mode}
+        template={editorState.manualTemplate}
         fields={fields}
-        onAddField={() => setFields([...fields, { key: "", type: "simple" }])}
+        onAddField={() => {
+          setFields([...fields, { key: "", type: "simple" }]);
+          setIsDirty(true);
+        }}
         onUpdateField={handleUpdateField}
         onRemoveField={(fieldToRemove) => {
           setFields(fields.filter(f => f !== fieldToRemove));
+          setIsDirty(true);
         }}
         onAddNestedField={(parentField) => {
           const updateFieldInArray = (fieldsArray: TemplateField[]): TemplateField[] => {
@@ -176,9 +208,10 @@ export function ResourceTemplateEditor({ template, onUpdate }: ResourceTemplateE
             });
           };
           setFields(updateFieldInArray(fields));
+          setIsDirty(true);
         }}
         onTemplateChange={handleTemplateChange}
-        onModeChange={(mode) => setEditorState({ ...editorState, mode })}
+        onModeChange={handleModeChange}
       />
       {error && <p className="text-sm text-red-500">{error}</p>}
     </div>
diff --git a/src/components/template/TemplateEditor.tsx b/src/components/template/TemplateEditor.tsx
index 4dc9157..7a61bb6 100644
--- a/src/components/template/TemplateEditor.tsx
+++ b/src/components/template/TemplateEditor.tsx
@@ -1,6 +1,7 @@
 import { FieldBuilder } from "./FieldBuilder";
 import type { TemplateField } from "@/types/template";
 import { generateTemplate } from "@/utils/templateUtils";
+import { useMemo } from "react";
 
 interface TemplateEditorProps {
   mode: "visual" | "manual";
@@ -25,9 +26,17 @@ export function TemplateEditor({
   onRemoveField,
   onModeChange,
 }: TemplateEditorProps) {
-  const previewTemplate = mode === "visual" 
-    ? JSON.stringify(generateTemplate(fields), null, 2)
-    : JSON.stringify(JSON.parse(template || "{}"), null, 2);
+  // Get the preview template based on mode
+  const previewTemplate = useMemo(() => {
+    try {
+      if (mode === "visual") {
+        return JSON.stringify(generateTemplate(fields), null, 2);
+      }
+      return JSON.stringify(JSON.parse(template || "{}"), null, 2);
+    } catch (error) {
+      return "// Invalid JSON";
+    }
+  }, [mode, fields, template]);
 
   return (
     <div className="space-y-4">
@@ -82,7 +91,7 @@ export function TemplateEditor({
           <textarea
             value={template}
             onChange={(e) => onTemplateChange(e.target.value)}
-            className="w-full h-96 rounded-md border border-gray-600 bg-gray-700 text-gray-100 font-mono text-sm p-4"
+            className="w-full h-96 rounded-md border border-gray-600 bg-gray-700 text-gray-100 font-mono text-sm p-4 focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
             placeholder={`{
   "username": "$internet.userName",
   "details": {
@@ -90,6 +99,7 @@ export function TemplateEditor({
     "lastName": "$name.lastName"
   }
 }`}
+            spellCheck="false"
           />
         </div>
       )}
diff --git a/src/lib/generators/express.ts b/src/lib/generators/express.ts
index 5e8266d..ed8ce5f 100644
--- a/src/lib/generators/express.ts
+++ b/src/lib/generators/express.ts
@@ -1,74 +1,183 @@
+import type { GeneratorParams } from "./index";
 import { toPascalCase } from "@/utils/string";
 
-export function generateExpressCode(
-  projectName: string,
-  resourceName: string,
-  version: string,
-  template: Record<string, unknown>
-): string {
-  return `
-const express = require('express');
+export function generateExpressTypes({ resourceName, template }: GeneratorParams): string {
+  const typeName = toPascalCase(resourceName);
+  const fields = Object.entries(template)
+    .map(([key, value]) => {
+      if (typeof value === 'string') return `  ${key}: string;`;
+      if (typeof value === 'number') return `  ${key}: number;`;
+      if (typeof value === 'boolean') return `  ${key}: boolean;`;
+      return `  ${key}: any;`;
+    })
+    .join('\n');
+
+  return `export interface ${typeName} {
+  id: string;
+${fields}
+}
+
+export interface ${typeName}Create extends Omit<${typeName}, 'id'> {}
+
+export interface ${typeName}Response {
+  data: ${typeName}[];
+}`;
+}
+
+export function generateExpressRouter({ resourceName }: GeneratorParams): string {
+  const typeName = toPascalCase(resourceName);
+  
+  return `import express from 'express';
+import { validate${typeName} } from '../middleware/validation';
+import type { ${typeName}, ${typeName}Create } from '../types/${resourceName}';
+
 const router = express.Router();
-const { v4: uuidv4 } = require('uuid');
 
 // In-memory storage
-const ${resourceName}DB = new Map();
+const ${resourceName}DB = new Map<string, ${typeName}>();
 
-// Validation middleware
-const validate${toPascalCase(resourceName)} = (req, res, next) => {
-  const data = req.body;
-  ${generateValidation(template)}
-  next();
-};
+export default router;`;
+}
 
-// CRUD Routes
-router.post('/${version}/${resourceName}', validate${toPascalCase(resourceName)}, (req, res) => {
-  const id = uuidv4();
-  const new${toPascalCase(resourceName)} = { id, ...req.body };
-  ${resourceName}DB.set(id, new${toPascalCase(resourceName)});
-  res.status(201).json(new${toPascalCase(resourceName)});
-});
+export function generateExpressHandlers({ resourceName, allowedEndpoints }: GeneratorParams): string {
+  const typeName = toPascalCase(resourceName);
+  const endpoints: string[] = [];
+  
+  // Only add uuid import if needed
+  if (allowedEndpoints?.post) {
+    endpoints.push(`import { v4 as uuidv4 } from 'uuid';`);
+  }
 
-router.get('/${version}/${resourceName}', (req, res) => {
-  res.json(Array.from(${resourceName}DB.values()));
-});
+  if (allowedEndpoints?.get) {
+    endpoints.push(`
+router.get('/', (req, res) => {
+  const data = Array.from(${resourceName}DB.values());
+  res.json({ data });
+});`);
+  }
 
-router.get('/${version}/${resourceName}/:id', (req, res) => {
-  const item = ${resourceName}DB.get(req.params.id);
+  if (allowedEndpoints?.getById) {
+    endpoints.push(`
+router.get('/:id', (req, res) => {
+  const { id } = req.params;
+  const item = ${resourceName}DB.get(id);
+  
   if (!item) {
     return res.status(404).json({ message: '${resourceName} not found' });
   }
+  
   res.json(item);
-});
+});`);
+  }
 
-router.put('/${version}/${resourceName}/:id', validate${toPascalCase(resourceName)}, (req, res) => {
-  if (!${resourceName}DB.has(req.params.id)) {
+  if (allowedEndpoints?.post) {
+    endpoints.push(`
+router.post('/', validate${typeName}, (req, res) => {
+  const data = req.body as ${typeName}Create;
+  const id = uuidv4();
+  const new${typeName} = { ...data, id };
+  
+  ${resourceName}DB.set(id, new${typeName});
+  res.status(201).json(new${typeName});
+});`);
+  }
+
+  if (allowedEndpoints?.put) {
+    endpoints.push(`
+router.put('/:id', validate${typeName}, (req, res) => {
+  const { id } = req.params;
+  const data = req.body as ${typeName}Create;
+  
+  if (!${resourceName}DB.has(id)) {
     return res.status(404).json({ message: '${resourceName} not found' });
   }
-  const updated${toPascalCase(resourceName)} = { id: req.params.id, ...req.body };
-  ${resourceName}DB.set(req.params.id, updated${toPascalCase(resourceName)});
-  res.json(updated${toPascalCase(resourceName)});
-});
+  
+  const updated${typeName} = { ...data, id };
+  ${resourceName}DB.set(id, updated${typeName});
+  res.json(updated${typeName});
+});`);
+  }
 
-router.delete('/${version}/${resourceName}/:id', (req, res) => {
-  if (!${resourceName}DB.has(req.params.id)) {
+  if (allowedEndpoints?.delete) {
+    endpoints.push(`
+router.delete('/:id', (req, res) => {
+  const { id } = req.params;
+  
+  if (!${resourceName}DB.has(id)) {
     return res.status(404).json({ message: '${resourceName} not found' });
   }
-  ${resourceName}DB.delete(req.params.id);
+  
+  ${resourceName}DB.delete(id);
   res.status(204).send();
-});
+});`);
+  }
 
-module.exports = router;
-`;
+  return endpoints.join('\n\n');
 }
 
-function generateValidation(template: Record<string, unknown>): string {
-  const checks = Object.entries(template).map(([key, value]) => {
-    if (typeof value === 'string' && value.startsWith('$')) {
-      return `  if (!data.${key}) return res.status(400).json({ message: '${key} is required' });`;
-    }
-    return '';
-  }).filter(Boolean);
+export function generateExpressGetAll({ resourceName }: GeneratorParams): string {
+  return `router.get('/', (req, res) => {
+  const data = Array.from(${resourceName}DB.values());
+  res.json({ data });
+});`;
+}
+
+export function generateExpressGetOne({ resourceName }: GeneratorParams): string {
+  return `router.get('/:id', (req, res) => {
+  const { id } = req.params;
+  const item = ${resourceName}DB.get(id);
+  
+  if (!item) {
+    return res.status(404).json({ message: '${resourceName} not found' });
+  }
+  
+  res.json(item);
+});`;
+}
+
+export function generateExpressCreate({ resourceName }: GeneratorParams): string {
+  const typeName = toPascalCase(resourceName);
+  return `router.post('/', validate${typeName}, (req, res) => {
+  const data = req.body as ${typeName}Create;
+  const id = crypto.randomUUID();
+  const new${typeName} = { ...data, id };
+  
+  ${resourceName}DB.set(id, new${typeName});
+  res.status(201).json(new${typeName});
+});`;
+}
+
+export function generateExpressUpdate({ resourceName }: GeneratorParams): string {
+  const typeName = toPascalCase(resourceName);
+  return `router.put('/:id', validate${typeName}, (req, res) => {
+  const { id } = req.params;
+  const data = req.body as ${typeName}Create;
+  
+  if (!${resourceName}DB.has(id)) {
+    return res.status(404).json({ message: '${resourceName} not found' });
+  }
+  
+  const updated${typeName} = { ...data, id };
+  ${resourceName}DB.set(id, updated${typeName});
+  res.json(updated${typeName});
+});`;
+}
+
+export function generateExpressDelete({ resourceName }: GeneratorParams): string {
+  return `router.delete('/:id', (req, res) => {
+  const { id } = req.params;
+  
+  if (!${resourceName}DB.has(id)) {
+    return res.status(404).json({ message: '${resourceName} not found' });
+  }
+  
+  ${resourceName}DB.delete(id);
+  res.status(204).send();
+});`;
+}
 
-  return checks.join('\n');
+// Keep the original function for backward compatibility
+export function generateExpressCode(projectName: string, resourceName: string, version: string, template: Record<string, unknown>): string {
+  const params = { projectName, resourceName, version, template };
+  return `${generateExpressTypes(params)}\n\n${generateExpressRouter(params)}\n\n${generateExpressHandlers(params)}`;
 } 
\ No newline at end of file
diff --git a/src/lib/generators/fastapi.ts b/src/lib/generators/fastapi.ts
index bbeead3..fd2ab0d 100644
--- a/src/lib/generators/fastapi.ts
+++ b/src/lib/generators/fastapi.ts
@@ -1,141 +1,88 @@
-import type { TemplateField } from "@/types/template";
+import type { GeneratorParams } from "./index";
 import { toPascalCase } from "@/utils/string";
 
+// Types/Models
+export function generateFastAPIModels({ resourceName, template }: GeneratorParams): string {
+  const typeName = toPascalCase(resourceName);
+  return `from pydantic import BaseModel
+from typing import List, Any
 
-export function generateFastAPICode(
-  projectName: string,
-  resourceName: string,
-  version: string,
-  template: Record<string, unknown>
-): string {
-  const schemaName = toPascalCase(resourceName);
-  const schemas = generatePydanticSchemas(template, schemaName);
-  const endpoints = generateEndpoints(resourceName, version, schemaName);
+class ${typeName}Base(BaseModel):
+${Object.entries(template)
+    .map(([key, value]) => `    ${key}: ${typeof value === 'string' ? 'str' : 'Any'}`)
+    .join('\n')}
 
-  return `
-from fastapi import FastAPI, HTTPException
-from pydantic import BaseModel
-from typing import List, Optional
-import uuid
-
-app = FastAPI(title="${projectName} API")
-
-${schemas}
+class ${typeName}Create(${typeName}Base):
+    pass
 
-# In-memory storage
-${resourceName}_db = {}
+class ${typeName}(${typeName}Base):
+    id: str
 
-${endpoints}
-`;
+class ${typeName}Response(BaseModel):
+    data: List[${typeName}]`;
 }
 
-function generatePydanticSchemas(template: Record<string, unknown>, schemaName: string): string {
-  // Convert object template to array format if needed
-  const templateArray = Array.isArray(template) 
-    ? template 
-    : Object.entries(template).map(([key, value]) => ({
-        key,
-        type: typeof value === 'object' ? 'object' : 'simple',
-        ...(typeof value === 'string' && value.startsWith('$') 
-          ? parseTemplateString(value) 
-          : {}),
-      }));
-
-  const fields = templateArray.map(field => {
-    if (field.type === 'simple') {
-      return `    ${field.key}: ${getPydanticType(field)}`;
-    } else if (field.type === 'object') {
-      return `    ${field.key}: ${generateNestedSchema(field)}`;
-    } else if (field.type === 'array') {
-      return `    ${field.key}: List[${getPydanticArrayType(field)}]`;
-    }
-    return '';
-  }).filter(Boolean).join('\n');
+// Router Setup
+export function generateFastAPIRouter({ resourceName }: GeneratorParams): string {
+  return `from fastapi import APIRouter, HTTPException
+from uuid import uuid4
+from .models import ${toPascalCase(resourceName)}, ${toPascalCase(resourceName)}Create, ${toPascalCase(resourceName)}Response
 
-  return `
-class ${schemaName}Base(BaseModel):
-${fields}
+router = APIRouter(prefix="/${resourceName}", tags=["${resourceName}"])
 
-class ${schemaName}Create(${schemaName}Base):
-    pass
-
-class ${schemaName}(${schemaName}Base):
-    id: str
-`;
+# In-memory storage
+${resourceName}_db = {}`;
 }
 
-function parseTemplateString(value: string) {
-  const [module, method] = value.slice(1).split('.');
-  return { module, method };
+// Individual Endpoints
+export function generateFastAPIGetAll({ resourceName }: GeneratorParams): string {
+  const typeName = toPascalCase(resourceName);
+  return `@router.get("", response_model=${typeName}Response)
+async def list_${resourceName}s():
+    return {"data": list(${resourceName}_db.values())}`;
 }
 
-function generateEndpoints(resourceName: string, version: string, schemaName: string): string {
-  return `
-@app.post("/${version}/${resourceName}", response_model=${schemaName})
-async def create_${resourceName}(item: ${schemaName}Create):
-    item_dict = item.dict()
-    item_id = str(uuid.uuid4())
-    new_item = ${schemaName}(id=item_id, **item_dict)
-    ${resourceName}_db[item_id] = new_item
-    return new_item
-
-@app.get("/${version}/${resourceName}", response_model=List[${schemaName}])
-async def list_${resourceName}():
-    return list(${resourceName}_db.values())
-
-@app.get("/${version}/${resourceName}/{item_id}", response_model=${schemaName})
+export function generateFastAPIGetOne({ resourceName }: GeneratorParams): string {
+  const typeName = toPascalCase(resourceName);
+  return `@router.get("/{item_id}", response_model=${typeName})
 async def get_${resourceName}(item_id: str):
     if item_id not in ${resourceName}_db:
         raise HTTPException(status_code=404, detail="${resourceName} not found")
-    return ${resourceName}_db[item_id]
+    return ${resourceName}_db[item_id]`;
+}
+
+export function generateFastAPICreate({ resourceName }: GeneratorParams): string {
+  const typeName = toPascalCase(resourceName);
+  return `@router.post("", response_model=${typeName}, status_code=201)
+async def create_${resourceName}(item: ${typeName}Create):
+    item_id = str(uuid4())
+    new_item = ${typeName}(id=item_id, **item.dict())
+    ${resourceName}_db[item_id] = new_item
+    return new_item`;
+}
 
-@app.put("/${version}/${resourceName}/{item_id}", response_model=${schemaName})
-async def update_${resourceName}(item_id: str, item: ${schemaName}Create):
+export function generateFastAPIUpdate({ resourceName }: GeneratorParams): string {
+  const typeName = toPascalCase(resourceName);
+  return `@router.put("/{item_id}", response_model=${typeName})
+async def update_${resourceName}(item_id: str, item: ${typeName}Create):
     if item_id not in ${resourceName}_db:
         raise HTTPException(status_code=404, detail="${resourceName} not found")
-    update_item = ${schemaName}(id=item_id, **item.dict())
-    ${resourceName}_db[item_id] = update_item
-    return update_item
+    updated_item = ${typeName}(id=item_id, **item.dict())
+    ${resourceName}_db[item_id] = updated_item
+    return updated_item`;
+}
 
-@app.delete("/${version}/${resourceName}/{item_id}")
+export function generateFastAPIDelete({ resourceName }: GeneratorParams): string {
+  return `@router.delete("/{item_id}")
 async def delete_${resourceName}(item_id: str):
     if item_id not in ${resourceName}_db:
         raise HTTPException(status_code=404, detail="${resourceName} not found")
     del ${resourceName}_db[item_id]
-    return {"message": "${resourceName} deleted"}
-`;
+    return {"success": True}`;
 }
 
-function getPydanticType(field: TemplateField): string {
-  // Map faker types to Pydantic types
-  const typeMap: Record<string, string> = {
-    'userName': 'str',
-    'email': 'str',
-    'firstName': 'str',
-    'lastName': 'str',
-    'int': 'int',
-    'float': 'float',
-    'boolean': 'bool',
-    'date': 'datetime',
-    // Add more mappings as needed
-  };
-
-  return field.method ? typeMap[field.method] || 'str' : 'str';
-}
-
-function getPydanticArrayType(field: TemplateField): string {
-  if (field.arrayType === 'simple') {
-    return getPydanticType(field.items!);
-  }
-  return generateNestedSchema(field.items!);
-}
-
-function generateNestedSchema(field: TemplateField): string {
-  if (!field.fields) return 'dict';
-  
-  const fields = field.fields.map(f => 
-    `        ${f.key}: ${getPydanticType(f)}`
-  ).join('\n');
-
-  return `dict #{\n${fields}\n    }`;
+// Update the main generator function to use the new modular functions
+export function generateFastAPICode(projectName: string, resourceName: string, version: string, template: Record<string, unknown>): string {
+  const params = { projectName, resourceName, version, template };
+  return `${generateFastAPIModels(params)}\n\n${generateFastAPIRouter(params)}\n\n${generateFastAPIGetAll(params)}\n${generateFastAPIGetOne(params)}\n${generateFastAPICreate(params)}\n${generateFastAPIUpdate(params)}\n${generateFastAPIDelete(params)}`;
 } 
\ No newline at end of file
diff --git a/src/lib/generators/index.ts b/src/lib/generators/index.ts
index 3fa1775..7eeff53 100644
--- a/src/lib/generators/index.ts
+++ b/src/lib/generators/index.ts
@@ -1,7 +1,7 @@
 export enum CodeGeneratorType {
-  FASTAPI = 'fastapi',
-  EXPRESS = 'express',
-  REACT = 'react'
+  NEXTJS = 'Next.js',
+  EXPRESS = 'Express.js',
+  FASTAPI = 'FastAPI'
 }
 
 export interface CodeGenerator {
@@ -14,6 +14,17 @@ export interface GeneratorParams {
   projectName: string;
   resourceName: string;
   version: string;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  template: Record<string, any>;
-} 
\ No newline at end of file
+  template: Record<string, unknown>;
+  allowedEndpoints?: {
+    get: boolean;
+    getById: boolean;
+    post: boolean;
+    put: boolean;
+    delete: boolean;
+  };
+}
+
+export { generateFastAPICode } from './fastapi';
+export { generateExpressCode } from './express';
+export { generateReactCode } from './react';
+export { generateNextJSRoute } from './nextjs'; 
\ No newline at end of file
diff --git a/src/lib/generators/nextjs.ts b/src/lib/generators/nextjs.ts
new file mode 100644
index 0000000..3c770e3
--- /dev/null
+++ b/src/lib/generators/nextjs.ts
@@ -0,0 +1,247 @@
+import type { GeneratorParams } from "./index";
+import { toPascalCase } from "@/utils/string";
+
+// Step 1: Initial setup with GET all endpoint
+export function generateInitialSetup({ resourceName, template, allowedEndpoints }: GeneratorParams): string {
+  const typeName = toPascalCase(resourceName);
+  
+  if (!allowedEndpoints?.get) {
+    return '// No GET endpoint selected';
+  }
+
+  return `/** ${resourceName}/route.ts */
+import { NextRequest, NextResponse } from "next/server";
+
+interface ${typeName}Data {
+  id: string;
+${Object.entries(template)
+    .map(([key, value]) => `  ${key}: ${typeof value};`)
+    .join('\n')}
+}
+
+interface ${typeName}Response {
+  data: ${typeName}Data[];
+}
+
+// In-memory storage
+const ${resourceName}DB = new Map<string, ${typeName}Data>();
+
+export async function GET(req: NextRequest) {
+  const data = Array.from(${resourceName}DB.values());
+  return NextResponse.json({ data });
+}`;
+}
+
+// Step 3: Setup [id] route with GET by ID
+export function generateGetByIdEndpoint({ resourceName }: GeneratorParams): string {
+  return `/** ${resourceName}/[id]/route.ts */
+import { NextRequest, NextResponse } from "next/server";
+import { getErrorResponse } from "@/lib/utils";
+
+export async function GET(
+  req: NextRequest,
+  { params }: { params: { id: string } }
+) {
+  const { id } = params;
+  const item = ${resourceName}DB.get(id);
+
+  if (!item) {
+    return getErrorResponse(404, "${resourceName} not found");
+  }
+
+  return NextResponse.json(item);
+}`;
+}
+
+// Step 4: Add PUT endpoint
+export function generatePutEndpoint({ resourceName }: GeneratorParams): string {
+  return `/** ${resourceName}/[id]/route.ts */
+
+// ... existing imports and types ...
+
+export async function PUT(
+  request: NextRequest,
+  { params }: { params: { id: string } }
+) {
+  try {
+    const { id } = params;
+    const body = await request.json();
+
+    if (!validateData(body)) {
+      return getErrorResponse(400, "Invalid request body");
+    }
+
+    const response = { ...body, id };
+    return NextResponse.json(response);
+  } catch (error) {
+    console.error("API Error:", error);
+    return getErrorResponse(500, "Internal server error");
+  }
+}`;
+}
+
+// Step 5: Add DELETE endpoint
+export function generateDeleteEndpoint({ resourceName }: GeneratorParams): string {
+  return `/** ${resourceName}/[id]/route.ts */
+
+// ... existing imports and types ...
+
+export async function DELETE(
+  request: NextRequest,
+  { params }: { params: { id: string } }
+) {
+  try {
+    const { id } = params;
+    const exists = mockData.some(d => d.id === id);
+    
+    if (!exists) {
+      return getErrorResponse(404, "${resourceName} not found");
+    }
+
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    console.error("API Error:", error);
+    return getErrorResponse(500, "Internal server error");
+  }
+}`;
+}
+
+// Add the missing POST endpoint generator
+export function generateNextPost({ resourceName }: GeneratorParams): string {
+  const typeName = toPascalCase(resourceName);
+  return `export async function POST(request: NextRequest) {
+  const data = await request.json() as ${typeName}Create;
+  const id = crypto.randomUUID();
+  const newItem = { ...data, id };
+  
+  ${resourceName}DB.set(id, newItem);
+  return NextResponse.json(newItem, { status: 201 });
+}`;
+}
+
+// Update the main generator function
+export function generateNextJSRoute(params: GeneratorParams): string {
+  const { resourceName, allowedEndpoints } = params;
+  const files: { path: string; content: string }[] = [];
+
+  // Main route file (GET all and POST)
+  if (allowedEndpoints?.get || allowedEndpoints?.post) {
+    let mainRouteContent = generateInitialSetup(params);
+    if (allowedEndpoints?.post) {
+      mainRouteContent += '\n\n' + generateNextPost(params);  // Use the new function
+    }
+    files.push({ path: `${resourceName}/route.ts`, content: mainRouteContent });
+  }
+
+  // [id] route file (GET by ID, PUT, DELETE)
+  if (allowedEndpoints?.getById || allowedEndpoints?.put || allowedEndpoints?.delete) {
+    let idRouteContent = '';
+    if (allowedEndpoints?.getById) {
+      idRouteContent = generateGetByIdEndpoint(params);
+    }
+    if (allowedEndpoints?.put) {
+      idRouteContent += '\n\n' + generatePutEndpoint(params);
+    }
+    if (allowedEndpoints?.delete) {
+      idRouteContent += '\n\n' + generateDeleteEndpoint(params);
+    }
+    files.push({ path: `${resourceName}/[id]/route.ts`, content: idRouteContent });
+  }
+
+  return files.map(file => `// ${file.path}\n${file.content}`).join('\n\n// ========================================\n\n');
+}
+
+export function generateNextGetAll({ resourceName }: GeneratorParams): string {
+  return `export async function GET(req: NextRequest) {
+  const data = Array.from(${resourceName}DB.values());
+  return NextResponse.json({ data });
+}`;
+}
+
+export function generateNextGetById({ resourceName }: GeneratorParams): string {
+  return `export async function GET(
+  req: NextRequest,
+  { params }: { params: { id: string } }
+) {
+  const { id } = params;
+  const item = ${resourceName}DB.get(id);
+
+  if (!item) {
+    return getErrorResponse(404, "${resourceName} not found");
+  }
+
+  return NextResponse.json(item);
+}`;
+}
+
+// Export all the generator functions
+export function generateNextTypes({ resourceName, template }: GeneratorParams): string {
+  const typeName = toPascalCase(resourceName);
+  return `interface ${typeName}Data {
+  id: string;
+${Object.entries(template)
+    .map(([key, value]) => `  ${key}: ${typeof value};`)
+    .join('\n')}
+}
+
+interface ${typeName}Response {
+  data: ${typeName}Data[];
+}
+
+interface ${typeName}Create extends Omit<${typeName}Data, 'id'> {}`;
+}
+
+export function generateNextSetup({ resourceName }: GeneratorParams): string {
+  return `import { NextRequest, NextResponse } from "next/server";
+import { getErrorResponse } from "@/lib/utils";
+
+// In-memory storage
+const ${resourceName}DB = new Map<string, ${toPascalCase(resourceName)}Data>();`;
+}
+
+export function generateNextCreate({ resourceName }: GeneratorParams): string {
+  const typeName = toPascalCase(resourceName);
+  return `export async function POST(request: NextRequest) {
+  const data = await request.json() as ${typeName}Create;
+  const id = crypto.randomUUID();
+  const newItem = { ...data, id };
+  
+  ${resourceName}DB.set(id, newItem);
+  return NextResponse.json(newItem, { status: 201 });
+}`;
+}
+
+export function generateNextUpdate({ resourceName }: GeneratorParams): string {
+  const typeName = toPascalCase(resourceName);
+  return `export async function PUT(
+  request: NextRequest,
+  { params }: { params: { id: string } }
+) {
+  const { id } = params;
+  const data = await request.json() as ${typeName}Create;
+
+  if (!${resourceName}DB.has(id)) {
+    return getErrorResponse(404, "${resourceName} not found");
+  }
+
+  const updatedItem = { ...data, id };
+  ${resourceName}DB.set(id, updatedItem);
+  return NextResponse.json(updatedItem);
+}`;
+}
+
+export function generateNextDelete({ resourceName }: GeneratorParams): string {
+  return `export async function DELETE(
+  request: NextRequest,
+  { params }: { params: { id: string } }
+) {
+  const { id } = params;
+  
+  if (!${resourceName}DB.has(id)) {
+    return getErrorResponse(404, "${resourceName} not found");
+  }
+
+  ${resourceName}DB.delete(id);
+  return NextResponse.json({ success: true });
+}`;
+} 
\ No newline at end of file
diff --git a/src/lib/generators/react.ts b/src/lib/generators/react.ts
index 4977ba4..bfc625d 100644
--- a/src/lib/generators/react.ts
+++ b/src/lib/generators/react.ts
@@ -1,57 +1,75 @@
+import type { GeneratorParams } from "./index";
 import { toPascalCase } from "@/utils/string";
-export function generateReactCode(
-  projectName: string,
-  resourceName: string,
-  version: string,
-  template: Record<string, unknown>
-): string {
-  const resourceType = toPascalCase(resourceName);
-  
-  return `
-import axios from 'axios';
 
-const api = axios.create({
-  baseURL: process.env.NEXT_PUBLIC_API_URL
-});
+export function generateReactTypes({ resourceName, template }: GeneratorParams): string {
+  const typeName = toPascalCase(resourceName);
+  const fields = Object.entries(template)
+    .map(([key, value]) => {
+      if (typeof value === 'string') return `  ${key}: string;`;
+      if (typeof value === 'number') return `  ${key}: number;`;
+      if (typeof value === 'boolean') return `  ${key}: boolean;`;
+      return `  ${key}: any;`;
+    })
+    .join('\n');
 
-export interface ${resourceType} {
-${generateTypeDefinition(template)}
+  return `export interface ${typeName} {
   id: string;
+${fields}
 }
 
-export interface Create${resourceType}Dto {
-${generateTypeDefinition(template)}
+export interface ${typeName}Create extends Omit<${typeName}, 'id'> {}
+
+export interface ${typeName}Response {
+  data: ${typeName}[];
+}`;
 }
 
+export function generateReactApi({ resourceName, version }: GeneratorParams): string {
+  const typeName = toPascalCase(resourceName);
+  
+  return `import axios from 'axios';
+import type { ${typeName}, ${typeName}Create, ${typeName}Response } from '../types/${resourceName}';
+
+const api = axios.create({
+  baseURL: process.env.NEXT_PUBLIC_API_URL
+});
+
 export const ${resourceName}Api = {
-  create: async (data: Create${resourceType}Dto): Promise<${resourceType}> => {
-    const response = await api.post<${resourceType}>('/${version}/${resourceName}', data);
-    return response.data;
+  getAll: async (): Promise<${typeName}[]> => {
+    const response = await api.get<${typeName}Response>('/${version}/${resourceName}');
+    return response.data.data;
   },
 
-  getAll: async (): Promise<${resourceType}[]> => {
-    const response = await api.get<${resourceType}[]>('/${version}/${resourceName}');
+  getById: async (id: string): Promise<${typeName}> => {
+    const response = await api.get<${typeName}>(\`/${version}/${resourceName}/\${id}\`);
     return response.data;
   },
 
-  getById: async (id: string): Promise<${resourceType}> => {
-    const response = await api.get<${resourceType}>('/${version}/${resourceName}/' + id);
+  create: async (data: ${typeName}Create): Promise<${typeName}> => {
+    const response = await api.post<${typeName}>('/${version}/${resourceName}', data);
     return response.data;
   },
 
-  update: async (id: string, data: Create${resourceType}Dto): Promise<${resourceType}> => {
-    const response = await api.put<${resourceType}>('/${version}/${resourceName}/' + id, data);
+  update: async (id: string, data: ${typeName}Create): Promise<${typeName}> => {
+    const response = await api.put<${typeName}>(\`/${version}/${resourceName}/\${id}\`, data);
     return response.data;
   },
 
   delete: async (id: string): Promise<void> => {
-    await api.delete('/${version}/${resourceName}/' + id);
+    await api.delete(\`/${version}/${resourceName}/\${id}\`);
   }
-};
+};`;
+}
 
-// Example React Hook
-export function use${resourceType}s() {
-  const [data, setData] = useState<${resourceType}[]>([]);
+export function generateReactHooks({ resourceName }: GeneratorParams): string {
+  const typeName = toPascalCase(resourceName);
+  
+  return `import { useState, useEffect } from 'react';
+import type { ${typeName} } from '../types/${resourceName}';
+import { ${resourceName}Api } from '../api/${resourceName}';
+
+export function use${typeName}s() {
+  const [data, setData] = useState<${typeName}[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<Error | null>(null);
 
@@ -64,16 +82,25 @@ export function use${resourceType}s() {
 
   return { data, loading, error };
 }
-`;
+
+export function use${typeName}(id: string) {
+  const [data, setData] = useState<${typeName} | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    ${resourceName}Api.getById(id)
+      .then(setData)
+      .catch(setError)
+      .finally(() => setLoading(false));
+  }, [id]);
+
+  return { data, loading, error };
+}`;
 }
 
-function generateTypeDefinition(template: Record<string, unknown>): string {
-  return Object.entries(template)
-    .map(([key, value]) => {
-      if (typeof value === 'string' && value.startsWith('$')) {
-        return `  ${key}: string;`;
-      }
-      return `  ${key}: ${typeof value};`;
-    })
-    .join('\n');
+// Keep the original function for backward compatibility
+export function generateReactCode(projectName: string, resourceName: string, version: string, template: Record<string, unknown>): string {
+  const params = { projectName, resourceName, version, template };
+  return `${generateReactTypes(params)}\n\n${generateReactApi(params)}\n\n${generateReactHooks(params)}`;
 } 
\ No newline at end of file
diff --git a/src/lib/schemas/endpoints.ts b/src/lib/schemas/endpoints.ts
new file mode 100644
index 0000000..a89f5bd
--- /dev/null
+++ b/src/lib/schemas/endpoints.ts
@@ -0,0 +1,11 @@
+import { z } from 'zod';
+
+export const EndpointSchema = z.object({
+  get: z.boolean().default(false),
+  getById: z.boolean().default(false),
+  post: z.boolean().default(false),
+  put: z.boolean().default(false),
+  delete: z.boolean().default(false)
+});
+
+export type EndpointState = z.infer<typeof EndpointSchema>; 
\ No newline at end of file
diff --git a/src/lib/types/steps.ts b/src/lib/types/steps.ts
new file mode 100644
index 0000000..a8edd41
--- /dev/null
+++ b/src/lib/types/steps.ts
@@ -0,0 +1,9 @@
+export enum StepType {
+  TYPES = 'types',        // Define types/models/interfaces
+  SETUP = 'setup',        // Initial setup (imports, router setup)
+  GET_ALL = 'get-all',    // GET / endpoint
+  GET_ONE = 'get-by-id',  // GET /:id endpoint
+  CREATE = 'create',      // POST / endpoint
+  UPDATE = 'update',      // PUT /:id endpoint
+  DELETE = 'delete'       // DELETE /:id endpoint
+} 
\ No newline at end of file

From b2b31ce330eaff28bd224dec98d24038f4baad82 Mon Sep 17 00:00:00 2001
From: Faisal Ahmed Sifat <Faisalahmed531@gmail.com>
Date: Tue, 25 Feb 2025 05:55:14 +0600
Subject: [PATCH 10/10] ui: updated ui for different components with animation

---
 package-lock.json                             |  43 ++++
 package.json                                  |   1 +
 src/app/page.tsx                              |  80 +++---
 src/app/projects/[id]/page.tsx                | 138 +++++++----
 .../[id]/resources/[resourceId]/page.tsx      | 163 ++++++------
 src/components/common/CopyButton.tsx          |  35 +++
 src/components/common/Tooltip.tsx             |  10 +
 src/components/resource/CodeGenerator.tsx     | 121 +++++----
 .../resource/ResourceTemplateEditor.tsx       |   1 +
 src/components/template/FieldBuilder.tsx      | 234 +++++++++++-------
 src/components/template/TemplateEditor.tsx    | 195 ++++++++++-----
 src/constants/fakerModules.ts                 |   6 +-
 src/lib/generators/express.ts                 |  35 ++-
 src/lib/generators/fastapi.ts                 |  33 ++-
 src/lib/generators/nextjs.ts                  |  59 ++++-
 src/server/actions/projects.ts                |  19 +-
 16 files changed, 790 insertions(+), 383 deletions(-)
 create mode 100644 src/components/common/CopyButton.tsx
 create mode 100644 src/components/common/Tooltip.tsx

diff --git a/package-lock.json b/package-lock.json
index d3de4ac..251645b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "@paralleldrive/cuid2": "^2.2.2",
         "@prisma/client": "^6.3.1",
         "clsx": "^2.1.1",
+        "framer-motion": "^12.4.7",
         "next": "15.1.7",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
@@ -3080,6 +3081,33 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "12.4.7",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.4.7.tgz",
+      "integrity": "sha512-VhrcbtcAMXfxlrjeHPpWVu2+mkcoR31e02aNSR7OUS/hZAciKa8q6o3YN2mA1h+jjscRsSyKvX6E1CiY/7OLMw==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.4.5",
+        "motion-utils": "^12.0.0",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -4225,6 +4253,21 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/motion-dom": {
+      "version": "12.4.5",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.4.5.tgz",
+      "integrity": "sha512-Q2xmhuyYug1CGTo0jdsL05EQ4RhIYXlggFS/yPhQQRNzbrhjKQ1tbjThx5Plv68aX31LsUQRq4uIkuDxdO5vRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.0.0"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.0.0.tgz",
+      "integrity": "sha512-MNFiBKbbqnmvOjkPyOKgHUp3Q6oiokLkI1bEwm5QA28cxMZrv0CbbBGDNmhF6DIXsi1pCQBSs0dX8xjeER1tmA==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
diff --git a/package.json b/package.json
index d7eecbd..178e952 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "@paralleldrive/cuid2": "^2.2.2",
     "@prisma/client": "^6.3.1",
     "clsx": "^2.1.1",
+    "framer-motion": "^12.4.7",
     "next": "15.1.7",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 7e70fb8..3096412 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -11,85 +11,93 @@ export default async function Home() {
   return (
     <div className="min-h-screen bg-gradient-to-b from-gray-900 to-gray-800">
       <div className="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:px-8">
-        {/* Hero Section */}
+        {/* Hero Section with Nextra-style */}
         <div className="text-center mb-16">
-          <h1 className="text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-400 mb-6">
-            Create Your Mock API
+          <h1 className="text-6xl font-extrabold tracking-tight text-white mb-4">
+            Mock<span className="text-blue-500">API</span>
           </h1>
-          <p className="mt-4 max-w-2xl mx-auto text-xl text-gray-400">
-            Design, create and manage your mock APIs with ease. Generate realistic data for your frontend development.
+          <p className="mt-4 text-xl text-gray-400 max-w-2xl mx-auto">
+            Build and test your frontend with realistic mock APIs. Generate code for Next.js, Express, and FastAPI.
           </p>
-          <div className="mt-8">
+          <div className="mt-8 flex justify-center gap-4">
             <Link
               href="/projects/new"
-              className="inline-flex items-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 transition-all duration-200 shadow-lg hover:shadow-blue-500/20"
+              className="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-lg text-white bg-blue-600 hover:bg-blue-700 transition-all duration-200 shadow-lg hover:shadow-blue-500/20"
             >
               Create New Project
-              <svg className="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
-                <path fillRule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clipRule="evenodd" />
+              <svg className="ml-2 -mr-1 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+              </svg>
+            </Link>
+            <Link
+              href="/docs"
+              className="inline-flex items-center px-6 py-3 border border-gray-700 text-base font-medium rounded-lg text-gray-300 hover:bg-gray-800 transition-all duration-200"
+            >
+              Documentation
+              <svg className="ml-2 -mr-1 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
               </svg>
             </Link>
           </div>
         </div>
 
-        {/* Features Grid */}
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
-          {/* Feature 1 */}
-          <div className="bg-gray-800/50 p-6 rounded-xl border border-gray-700 hover:border-blue-500/50 transition-all duration-200">
+        {/* Features Grid with Nextra-style cards */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-16">
+          <div className="p-6 rounded-xl border border-gray-700/50 bg-gray-800/30 hover:border-blue-500/30 hover:bg-gray-800/50 transition-all duration-200">
             <div className="text-blue-400 mb-4">
               <svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
               </svg>
             </div>
-            <h3 className="text-xl font-semibold text-white mb-2">Instant API Generation</h3>
-            <p className="text-gray-400">Create RESTful APIs with mock data in seconds using our intuitive interface.</p>
+            <h3 className="text-lg font-semibold text-white mb-2">Instant API Generation</h3>
+            <p className="text-gray-400">Generate RESTful APIs with realistic mock data in seconds.</p>
           </div>
 
-          {/* Feature 2 */}
-          <div className="bg-gray-800/50 p-6 rounded-xl border border-gray-700 hover:border-purple-500/50 transition-all duration-200">
+          <div className="p-6 rounded-xl border border-gray-700/50 bg-gray-800/30 hover:border-purple-500/30 hover:bg-gray-800/50 transition-all duration-200">
             <div className="text-purple-400 mb-4">
               <svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
               </svg>
             </div>
-            <h3 className="text-xl font-semibold text-white mb-2">Realistic Data</h3>
-            <p className="text-gray-400">Generate realistic mock data using our extensive library of data types.</p>
+            <h3 className="text-lg font-semibold text-white mb-2">Realistic Data</h3>
+            <p className="text-gray-400">Powered by Faker.js for realistic and customizable mock data.</p>
           </div>
 
-          {/* Feature 3 */}
-          <div className="bg-gray-800/50 p-6 rounded-xl border border-gray-700 hover:border-green-500/50 transition-all duration-200">
+          <div className="p-6 rounded-xl border border-gray-700/50 bg-gray-800/30 hover:border-green-500/30 hover:bg-gray-800/50 transition-all duration-200">
             <div className="text-green-400 mb-4">
               <svg className="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
               </svg>
             </div>
-            <h3 className="text-xl font-semibold text-white mb-2">Code Generation</h3>
-            <p className="text-gray-400">Get ready-to-use code for popular frameworks like Next.js, Express, and FastAPI.</p>
+            <h3 className="text-lg font-semibold text-white mb-2">Code Generation</h3>
+            <p className="text-gray-400">Get ready-to-use code for your favorite frameworks.</p>
           </div>
         </div>
 
-        {/* Projects List */}
-        <div className="bg-gray-800/30 rounded-xl border border-gray-700 overflow-hidden">
-          <div className="px-6 py-4 border-b border-gray-700">
+        {/* Projects List with Nextra-style */}
+        <div className="rounded-xl border border-gray-700/50 bg-gray-800/30 overflow-hidden">
+          <div className="px-6 py-4 border-b border-gray-700/50">
             <h2 className="text-xl font-semibold text-white">Your Projects</h2>
           </div>
-          <div className="divide-y divide-gray-700">
+          <div className="divide-y divide-gray-700/50">
             {projects.map((project) => (
               <Link 
                 key={project.id}
                 href={`/projects/${project.id}`}
-                className="block hover:bg-gray-700/50 transition-colors duration-200"
+                className="block hover:bg-gray-700/30 transition-colors duration-200"
               >
                 <div className="px-6 py-4">
                   <div className="flex items-center justify-between">
                     <div>
                       <h3 className="text-lg font-medium text-white">{project.name}</h3>
-                      <p className="mt-1 text-sm text-gray-400">
-                        {project.resources.length} resources
-                      </p>
-                      <p className="mt-1 text-xs text-gray-500">
-                        {ROOT_URL}/{project.id}
-                      </p>
+                      <div className="mt-1 flex items-center gap-4">
+                        <p className="text-sm text-gray-400">
+                          {project.resources.length} resources
+                        </p>
+                        <code className="text-xs px-2 py-1 rounded-md bg-gray-700/50 text-gray-300">
+                          {ROOT_URL}/{project.id}
+                        </code>
+                      </div>
                     </div>
                     <svg className="w-5 h-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
@@ -99,8 +107,8 @@ export default async function Home() {
               </Link>
             ))}
             {projects.length === 0 && (
-              <div className="px-6 py-8 text-center text-gray-400">
-                No projects yet. Create your first project to get started.
+              <div className="px-6 py-8 text-center">
+                <p className="text-gray-400">No projects yet. Create your first project to get started.</p>
               </div>
             )}
           </div>
diff --git a/src/app/projects/[id]/page.tsx b/src/app/projects/[id]/page.tsx
index abb6121..e20acc3 100644
--- a/src/app/projects/[id]/page.tsx
+++ b/src/app/projects/[id]/page.tsx
@@ -3,13 +3,15 @@ import { notFound } from "next/navigation";
 import { getProject } from "@/server/actions/projects";
 import { DeleteResourceButton } from "@/app/resources/DeleteResourceButton";
 import { DeleteProjectButton } from "@/app/projects/DeleteProjectButton";
+import { CopyButton } from "@/components/common/CopyButton";
+import type { Resource as PrismaResource } from "@prisma/client";
 
 const ROOT_URL = process.env.ROOT_SITE;
 
-interface Resource {
-  id: string;
-  name: string;
-  endpoint: string;
+interface Resource extends PrismaResource {
+  _count?: {
+    data: number;
+  };
 }
 
 interface PageProps {
@@ -33,60 +35,94 @@ export default async function ProjectPage({ params }: PageProps) {
   };
 
   return (
-    <div className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
-      <div className="px-4 py-6 sm:px-0">
-        <div className="flex justify-between items-center mb-6">
-          <div>
-            <h1 className="text-2xl font-semibold text-gray-100">
-              {project.name}
-            </h1>
-            <p className="mt-1 text-sm text-gray-400">Base URL: {apiBaseUrl}</p>
-          </div>
-          <div className="flex items-center gap-4">
-            <DeleteProjectButton id={project.id} />
-            <Link
-              href={`/projects/${project.id}/resources/new`}
-              className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-lg text-white bg-blue-600 hover:bg-blue-700 transition-colors duration-200"
-            >
-              Create Resource
+    <div className="min-h-screen bg-gradient-to-b from-gray-900 to-gray-800">
+      <div className="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
+        {/* Project Header */}
+        <div className="mb-8">
+          <div className="flex items-center gap-2 text-sm text-gray-400 mb-2">
+            <Link href="/" className="hover:text-gray-300 transition-colors">
+              Projects
             </Link>
+            <span>/</span>
+            <span className="text-gray-300">{project.name}</span>
+          </div>
+          <div className="flex items-center justify-between">
+            <div>
+              <h1 className="text-3xl font-bold text-white mb-2">{project.name}</h1>
+              <div className="flex items-center gap-2 text-sm">
+                <code className="px-2 py-1 bg-gray-800 rounded-md text-gray-300 font-mono">
+                  {apiBaseUrl}
+                </code>
+                <CopyButton text={apiBaseUrl} />
+              </div>
+            </div>
+            <div className="flex items-center gap-3">
+              <DeleteProjectButton id={project.id} />
+              <Link
+                href={`/projects/${project.id}/resources/new`}
+                className="inline-flex items-center px-4 py-2 rounded-lg text-white bg-blue-600 hover:bg-blue-700 transition-all duration-200 shadow-lg hover:shadow-blue-500/20"
+              >
+                <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+                </svg>
+                New Resource
+              </Link>
+            </div>
           </div>
         </div>
 
-        <div className="bg-gray-800 shadow-xl overflow-hidden sm:rounded-lg border border-gray-700">
-          <ul className="divide-y divide-gray-700">
-            {project.resources.map((resource) => (
-              <li key={resource.id}>
-                <div className="px-4 py-4 flex items-center justify-between sm:px-6 hover:bg-gray-700/50 transition-colors duration-200">
-                  <div className="flex-1 min-w-0">
-                    <h3 className="text-lg font-medium text-gray-100">
-                      {resource.name}
-                    </h3>
-                    <p className="mt-1 text-sm text-gray-400">
-                      Endpoint: {apiBaseUrl}/{getResourceEndpoint(resource)}
-                    </p>
-                  </div>
-                  <div className="flex gap-2">
-                    <Link
-                      href={`/projects/${project.id}/resources/${resource.id}`}
-                      className="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
-                    >
-                      View
-                    </Link>
-                    <DeleteResourceButton resourceId={resource.id} />
+        {/* Resources List */}
+        <div className="space-y-4">
+          {project.resources.map((resource) => (
+            <div 
+              key={resource.id}
+              className="p-6 rounded-xl border border-gray-700/50 bg-gray-800/30 hover:border-blue-500/30 hover:bg-gray-800/50 transition-all duration-200"
+            >
+              <div className="flex items-center justify-between">
+                <div>
+                  <h3 className="text-xl font-semibold text-white mb-2">
+                    {resource.name}
+                  </h3>
+                  <div className="flex items-center gap-4">
+                    <code className="text-sm px-2 py-1 bg-gray-800 rounded-md text-gray-300 font-mono">
+                      {apiBaseUrl}/{getResourceEndpoint(resource)}
+                    </code>
+                    <div className="flex items-center gap-2 text-sm text-gray-400">
+                      <span className="w-2 h-2 rounded-full bg-green-500"></span>
+                      {resource._count?.data || 0} records
+                    </div>
                   </div>
                 </div>
-              </li>
-            ))}
-
-            {project.resources.length === 0 && (
-              <li>
-                <div className="px-4 py-8 text-center text-gray-500">
-                  No resources yet. Create your first resource to get started.
+                <div className="flex items-center gap-2">
+                  <Link
+                    href={`/projects/${project.id}/resources/${resource.id}`}
+                    className="px-3 py-2 rounded-lg text-gray-300 hover:text-white hover:bg-gray-700/50 transition-all duration-200"
+                  >
+                    <span className="sr-only">View Resource</span>
+                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                    </svg>
+                  </Link>
+                  <DeleteResourceButton resourceId={resource.id} />
                 </div>
-              </li>
-            )}
-          </ul>
+              </div>
+            </div>
+          ))}
+
+          {project.resources.length === 0 && (
+            <div className="text-center py-12">
+              <svg className="w-12 h-12 text-gray-600 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+              </svg>
+              <p className="text-gray-400 mb-4">No resources yet</p>
+              <Link
+                href={`/projects/${project.id}/resources/new`}
+                className="inline-flex items-center px-4 py-2 rounded-lg text-white bg-blue-600 hover:bg-blue-700 transition-all duration-200"
+              >
+                Create your first resource
+              </Link>
+            </div>
+          )}
         </div>
       </div>
     </div>
diff --git a/src/app/projects/[id]/resources/[resourceId]/page.tsx b/src/app/projects/[id]/resources/[resourceId]/page.tsx
index 611e609..36d8f42 100644
--- a/src/app/projects/[id]/resources/[resourceId]/page.tsx
+++ b/src/app/projects/[id]/resources/[resourceId]/page.tsx
@@ -4,11 +4,10 @@ import { getProject } from "@/server/actions/projects";
 import { getResource} from "@/server/actions/resources";
 import { DeleteResourceButton } from "@/app/resources/DeleteResourceButton";
 import { GenerateDataSection } from "./GenerateDataSection";
-import { IdTypeToggle } from "@/app/components/IdTypeToggle";
 import { ApiEndpointsSection } from "@/app/components/ApiEndpointsSection";
-import { EndpointTemplateEditor } from "@/app/components/EndpointTemplateEditor";
 import { CodeGenerator } from "@/components/resource/CodeGenerator";
 import { ResourceTemplateWrapper } from "@/components/resource/ResourceTemplateWrapper";
+import { CopyButton } from "@/components/common/CopyButton";
 
 const ROOT_URL = process.env.ROOT_SITE;
 
@@ -30,95 +29,101 @@ export default async function ResourcePage({ params }: PageProps) {
 
   const apiBaseUrl = `${ROOT_URL}/${project.id}`;
   const resourceEndpoint = `api/${resource.endpoint}`;
-  const currentCount = resource._count?.data ?? 0;
-
   const fullUrl = `${apiBaseUrl}/${resourceEndpoint}`;
 
   return (
-    <div className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
-      <div className="px-4 py-6 sm:px-0">
-        <div className="flex justify-between items-center mb-6">
-          <div>
-            <div className="flex items-center gap-2 text-sm text-gray-400 mb-2">
-              <Link
-                href={`/projects/${project.id}`}
-                className="hover:text-gray-300 transition-colors duration-200"
-              >
-                {project.name}
-              </Link>
-              <span>/</span>
-              <span>{resource.name}</span>
-            </div>
-            <div className="flex items-center gap-4">
-              <h1 className="text-2xl font-semibold text-gray-100">
+    <div className="min-h-screen bg-gradient-to-b from-gray-900 to-gray-800">
+      <div className="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
+        {/* Resource Header */}
+        <div className="mb-8">
+          <div className="flex items-center gap-2 text-sm text-gray-400 mb-2">
+            <Link href="/" className="hover:text-gray-300 transition-colors">
+              Projects
+            </Link>
+            <span>/</span>
+            <Link 
+              href={`/projects/${project.id}`}
+              className="hover:text-gray-300 transition-colors"
+            >
+              {project.name}
+            </Link>
+            <span>/</span>
+            <span className="text-gray-300">{resource.name}</span>
+          </div>
+          <div className="flex items-center justify-between">
+            <div>
+              <h1 className="text-3xl font-bold text-white mb-2">
                 {resource.name}
               </h1>
-              <IdTypeToggle
-                resourceId={resource.id}
-                initialIsIncremental={resource.useIncrementalIds}
-                currentCount={currentCount}
-              />
+              <div className="flex items-center gap-4">
+                <code className="px-2 py-1 bg-gray-800 rounded-md text-gray-300 font-mono">
+                  {fullUrl}
+                </code>
+                <CopyButton text={fullUrl} />
+                <div className="flex items-center gap-2 text-sm text-gray-400">
+                  <span className="w-2 h-2 rounded-full bg-green-500"></span>
+                  {resource._count?.data || 0} records
+                </div>
+              </div>
             </div>
-            <p className="mt-1 text-sm text-gray-400">
-              Base URL: {apiBaseUrl}/{resourceEndpoint}
-            </p>
+            <DeleteResourceButton resourceId={resource.id} />
           </div>
-          <DeleteResourceButton resourceId={resource.id} />
         </div>
 
-        <GenerateDataSection
-          projectId={project.id}
-          resourceId={resource.id}
-          initialCount={currentCount}
-        />
+        {/* Main Content */}
+        <div className="grid grid-cols-1 gap-6">
+          {/* Data Generation Section */}
+          <div className="p-6 rounded-xl border border-gray-700/50 bg-gray-800/30">
+            <GenerateDataSection
+              projectId={project.id}
+              resourceId={resource.id}
+              initialCount={resource._count?.data ?? 0}
+            />
+          </div>
 
-        <div className="grid grid-cols-1 gap-6 mt-6">
-          <ApiEndpointsSection
-            resourceId={resource.id}
-            fullUrl={fullUrl}
-            initialSettings={{
-              allowGet: resource.allowGet,
-              allowGetById: resource.allowGetById,
-              allowPost: resource.allowPost,
-              allowPut: resource.allowPut,
-              allowDelete: resource.allowDelete,
-            }}
-            template={resource.template as Record<string, unknown>}
-          />
-          <div className="mt-6 bg-gray-800 shadow-xl sm:rounded-lg border border-gray-700">
-            <div className="px-4 py-5 sm:p-6">
-              <ResourceTemplateWrapper
-                resourceId={resource.id}
-                template={resource.template as Record<string, unknown>}
-              />
-            </div>
+          {/* API Endpoints Section */}
+          <div className="p-6 rounded-xl border border-gray-700/50 bg-gray-800/30">
+            <ApiEndpointsSection
+              resourceId={resource.id}
+              fullUrl={fullUrl}
+              initialSettings={{
+                allowGet: resource.allowGet,
+                allowGetById: resource.allowGetById,
+                allowPost: resource.allowPost,
+                allowPut: resource.allowPut,
+                allowDelete: resource.allowDelete,
+              }}
+              template={resource.template as Record<string, unknown>}
+            />
+          </div>
+
+          {/* Template Editor */}
+          <div className="p-6 rounded-xl border border-gray-700/50 bg-gray-800/30">
+            <ResourceTemplateWrapper
+              resourceId={resource.id}
+              template={resource.template as Record<string, unknown>}
+            />
           </div>
-          <EndpointTemplateEditor
-            resourceId={resource.id}
-            initialTemplate={
-              resource.endpointTemplate as Record<string, unknown>
-            }
-          />
-        </div>
 
-        {/* API Code Generator */}
-        <div className="bg-gray-800 rounded-lg p-6 mt-6">
-          <h2 className="text-xl font-semibold mb-4 text-gray-100">
-            API Code Generator
-          </h2>
-          <CodeGenerator
-            projectName={project.name}
-            resourceName={resource.name}
-            version={resource.endpoint.split('/')[0]}
-            template={resource.template as Record<string, unknown>}
-            initialEndpoints={{
-              get: resource.allowGet,
-              getById: resource.allowGetById,
-              post: resource.allowPost,
-              put: resource.allowPut,
-              delete: resource.allowDelete
-            }}
-          />
+          {/* Code Generator */}
+          <div className="p-6 rounded-xl border border-gray-700/50 bg-gray-800/30">
+            <h2 className="text-xl font-semibold mb-6 text-white">
+              API Code Generator
+            </h2>
+            <CodeGenerator
+              projectName={project.name}
+              resourceName={resource.name}
+              version={resource.endpoint.split('/')[0]}
+              template={resource.template as Record<string, unknown>}
+              initialEndpoints={{
+                get: resource.allowGet,
+                getById: resource.allowGetById,
+                post: resource.allowPost,
+                put: resource.allowPut,
+                delete: resource.allowDelete
+              }}
+            />
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/components/common/CopyButton.tsx b/src/components/common/CopyButton.tsx
new file mode 100644
index 0000000..e11a3dc
--- /dev/null
+++ b/src/components/common/CopyButton.tsx
@@ -0,0 +1,35 @@
+"use client";
+
+import { useState } from 'react';
+
+interface CopyButtonProps {
+  text: string;
+}
+
+export function CopyButton({ text }: CopyButtonProps) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <button 
+      onClick={handleCopy}
+      className="text-gray-400 hover:text-gray-300 transition-colors"
+      title="Copy to clipboard"
+    >
+      {copied ? (
+        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+        </svg>
+      ) : (
+        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
+        </svg>
+      )}
+    </button>
+  );
+} 
\ No newline at end of file
diff --git a/src/components/common/Tooltip.tsx b/src/components/common/Tooltip.tsx
new file mode 100644
index 0000000..185b397
--- /dev/null
+++ b/src/components/common/Tooltip.tsx
@@ -0,0 +1,10 @@
+export function Tooltip({ children, content }: { children: React.ReactNode; content: string }) {
+  return (
+    <div className="group relative">
+      {children}
+      <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-gray-800 text-xs text-gray-200 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200">
+        {content}
+      </div>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/src/components/resource/CodeGenerator.tsx b/src/components/resource/CodeGenerator.tsx
index 3da58e3..57f4668 100644
--- a/src/components/resource/CodeGenerator.tsx
+++ b/src/components/resource/CodeGenerator.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect, useMemo, useCallback } from 'react';
+import { useState, useEffect, useMemo, useCallback, useRef } from 'react';
 import { CodeGeneratorType } from '@/lib/generators';
 import cn from 'clsx';
 import { 
@@ -225,23 +225,33 @@ export function CodeGenerator({
   initialEndpoints = {}
 }: CodeGeneratorProps) {
   const [selectedFramework, setSelectedFramework] = useState<CodeGeneratorType>(CodeGeneratorType.NEXTJS);
-  const [selectedStep, setSelectedStep] = useState<string>('');
-  const [completedSteps, setCompletedSteps] = useState<Set<string>>(new Set());
-  const [code, setCode] = useState('');
+  const [state, setState] = useState({
+    selectedStep: '',
+    code: '',
+    completedSteps: new Set<string>()
+  });
   const [copied, setCopied] = useState(false);
+  const isInitialized = useRef(false);
   
   // Parse and validate endpoints with Zod
   const endpoints = EndpointSchema.parse(initialEndpoints);
 
+  // Memoize generator params
+  const generatorParams = useMemo<GeneratorParams>(() => ({
+    projectName,
+    resourceName,
+    version,
+    template,
+    allowedEndpoints: endpoints
+  }), [projectName, resourceName, version, template, endpoints]);
+
   // Filter steps based on selected endpoints
   const availableSteps = useMemo(() => {
     return FRAMEWORK_STEPS[selectedFramework].filter(step => {
-      // Always show types and setup if any endpoint is enabled
       if (step.id === StepType.TYPES || step.id === StepType.SETUP) {
         return Object.values(endpoints).some(Boolean);
       }
       
-      // Show specific endpoints based on selection
       switch (step.id) {
         case StepType.GET_ALL: return endpoints.get;
         case StepType.GET_ONE: return endpoints.getById;
@@ -253,46 +263,40 @@ export function CodeGenerator({
     });
   }, [selectedFramework, endpoints]);
 
-  // Handle framework change and initial setup
+  // Initialize first step only once
   useEffect(() => {
-    const initializeSteps = () => {
-      if (availableSteps.length > 0) {
-        const firstStep = availableSteps[0];
-        const params: GeneratorParams = {
-          projectName,
-          resourceName,
-          version,
-          template,
-          allowedEndpoints: endpoints
-        };
-        
-        const generatedCode = firstStep.generator(params);
-        
-        // Batch state updates
-        setSelectedStep(firstStep.id);
-        setCode(generatedCode);
-        setCompletedSteps(new Set([firstStep.id]));
-      } else {
-        // Batch state updates for no steps
-        setSelectedStep('');
-        setCode('// No endpoints selected');
-        setCompletedSteps(new Set());
-      }
-    };
+    if (isInitialized.current) return;
+    isInitialized.current = true;
+
+    if (availableSteps.length === 0) {
+      setState({
+        selectedStep: '',
+        code: '// No endpoints selected',
+        completedSteps: new Set()
+      });
+      return;
+    }
 
-    initializeSteps();
-  }, [selectedFramework]); // Only depend on framework changes
+    const firstStep = availableSteps[0];
+    if (!firstStep) return;
 
-  const handleGenerate = useCallback((step: Step) => {
-    const params: GeneratorParams = {
-      projectName,
-      resourceName,
-      version,
-      template,
-      allowedEndpoints: endpoints
-    };
+    const generatedCode = firstStep.generator(generatorParams);
     
-    const generatedCode = step.generator(params);
+    setState({
+      selectedStep: firstStep.id,
+      code: generatedCode,
+      completedSteps: new Set([firstStep.id])
+    });
+  }, [availableSteps, generatorParams]);
+
+  // Reset initialization when framework changes
+  useEffect(() => {
+    isInitialized.current = false;
+  }, [selectedFramework]);
+
+  // Handle step generation
+  const handleGenerate = useCallback((step: Step) => {
+    const generatedCode = step.generator(generatorParams);
     
     // Update completed steps
     const stepsToComplete = new Set<string>();
@@ -301,17 +305,20 @@ export function CodeGenerator({
       if (s.id === step.id) break;
     }
     
-    setCode(generatedCode);
-    setCompletedSteps(stepsToComplete);
-  }, [projectName, resourceName, version, template, endpoints, availableSteps]);
+    setState({
+      selectedStep: step.id,
+      code: generatedCode,
+      completedSteps: stepsToComplete
+    });
+  }, [availableSteps, generatorParams]);
 
-  const isStepDisabled = (step: Step) => {
+  const isStepDisabled = useCallback((step: Step) => {
     if (!step.requires?.length) return false;
-    return step.requires.some(req => !completedSteps.has(req));
-  };
+    return step.requires.some(req => !state.completedSteps.has(req));
+  }, [state.completedSteps]);
 
   const handleCopy = async () => {
-    await navigator.clipboard.writeText(code);
+    await navigator.clipboard.writeText(state.code);
     setCopied(true);
     setTimeout(() => setCopied(false), 2000);
   };
@@ -344,12 +351,16 @@ export function CodeGenerator({
             <button
               key={step.id}
               onClick={() => {
-                setSelectedStep(step.id);
+                setState({
+                  selectedStep: step.id,
+                  code: '',
+                  completedSteps: new Set()
+                });
                 handleGenerate(step);
               }}
               className={cn(
                 "w-full text-left p-4 rounded-lg",
-                selectedStep === step.id
+                state.selectedStep === step.id
                   ? "bg-blue-500/10 text-white"
                   : "bg-gray-800/50 text-gray-300",
                 isStepDisabled(step) && "opacity-50 cursor-not-allowed"
@@ -359,7 +370,7 @@ export function CodeGenerator({
               <div className="flex items-start gap-3">
                 <div className={cn(
                   "w-6 h-6 rounded-full flex items-center justify-center text-xs shrink-0",
-                  selectedStep === step.id
+                  state.selectedStep === step.id
                     ? "bg-blue-500 text-white"
                     : "bg-gray-700 text-gray-400"
                 )}>
@@ -383,7 +394,7 @@ export function CodeGenerator({
 
         {/* Code Display */}
         <div className="col-span-8">
-          {code && (
+          {state.code && (
             <div className="relative group">
               <div className="flex items-center justify-between bg-[#1e1e1e] px-4 py-3 rounded-t-lg border-b border-gray-700/50">
                 <div className="flex items-center gap-2">
@@ -393,7 +404,7 @@ export function CodeGenerator({
                     <div className="w-3 h-3 rounded-full bg-[#27c93f]" />
                   </div>
                   <code className="text-sm text-gray-400 ml-3">
-                    {availableSteps.find(s => s.id === selectedStep)?.path}
+                    {availableSteps.find(s => s.id === state.selectedStep)?.path}
                   </code>
                 </div>
                 <button
@@ -410,7 +421,7 @@ export function CodeGenerator({
                 </button>
               </div>
               <pre className="bg-[#1e1e1e] p-6 rounded-b-lg overflow-x-auto">
-                <code className="text-gray-100 text-sm font-mono">{code}</code>
+                <code className="text-gray-100 text-sm font-mono">{state.code}</code>
               </pre>
             </div>
           )}
diff --git a/src/components/resource/ResourceTemplateEditor.tsx b/src/components/resource/ResourceTemplateEditor.tsx
index d98fe48..17ad37a 100644
--- a/src/components/resource/ResourceTemplateEditor.tsx
+++ b/src/components/resource/ResourceTemplateEditor.tsx
@@ -97,6 +97,7 @@ export function ResourceTemplateEditor({ template, onUpdate }: ResourceTemplateE
       }
       setError(null);
     } catch (error) {
+      console.error("Error switching mode:", error);
       setError("Invalid JSON format");
     }
   };
diff --git a/src/components/template/FieldBuilder.tsx b/src/components/template/FieldBuilder.tsx
index 9b8190b..bb5446a 100644
--- a/src/components/template/FieldBuilder.tsx
+++ b/src/components/template/FieldBuilder.tsx
@@ -1,5 +1,7 @@
 import { FAKER_MODULES, FIELD_TYPES } from "@/constants/fakerModules";
 import type { TemplateField } from "@/types/template";
+import { motion } from "framer-motion";
+import { Tooltip } from "@/components/common/Tooltip";
 
 interface FieldBuilderProps {
   fields: TemplateField[];
@@ -32,104 +34,156 @@ export function FieldBuilder({
     onUpdate(field, updates);
   };
 
+  const getMethodOptions = (moduleKey: string | undefined) => {
+    if (!moduleKey) return [];
+    const fakerModule = FAKER_MODULES[moduleKey as keyof typeof FAKER_MODULES];
+    if (!fakerModule || !fakerModule.methods) return [];
+    return Object.entries(fakerModule.methods);
+  };
+
+  const FieldTypeIcon = ({ type }: { type: string }) => {
+    const icons = {
+      simple: (
+        <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+        </svg>
+      ),
+      object: (
+        <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
+        </svg>
+      ),
+      array: (
+        <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 10h16M4 14h16M4 18h16" />
+        </svg>
+      ),
+    };
+
+    return (
+      <div className="text-gray-400">
+        {icons[type as keyof typeof icons]}
+      </div>
+    );
+  };
+
   return (
     <div className="space-y-4">
       {fields.map((field, index) => (
-        <div key={index} className={`space-y-4 ${depth > 0 ? 'ml-8' : ''}`}>
-          <div className="flex gap-4 items-start bg-gray-800 p-4 rounded-md">
-            <div className="flex-1">
-              <input
-                type="text"
-                value={field.key}
-                onChange={(e) => onUpdate(field, { key: e.target.value })}
-                placeholder="Field name"
-                className="w-full rounded-md border border-gray-600 bg-gray-700 text-gray-100 p-2"
-              />
+        <motion.div
+          key={index}
+          initial={{ opacity: 0, y: -10 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: -10 }}
+          className={`space-y-4 ${depth > 0 ? 'ml-8 pl-4 border-l border-gray-800' : ''}`}
+        >
+          <motion.div
+            className="flex gap-4 items-start bg-gray-900/30 p-4 rounded-lg border border-gray-800 hover:border-gray-700 transition-all duration-300"
+          >
+            <div className="p-2 bg-gray-800 rounded-lg">
+              <FieldTypeIcon type={field.type} />
             </div>
 
-            <div className="flex-1">
-              <select
-                value={field.type}
-                onChange={(e) => handleTypeChange(field, e.target.value as "simple" | "object" | "array")}
-                className="w-full rounded-md border border-gray-600 bg-gray-700 text-gray-100 p-2"
-              >
-                {FIELD_TYPES.map(({ value, label }) => (
-                  <option key={value} value={value}>{label}</option>
-                ))}
-              </select>
-            </div>
+            <div className="flex-1 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+              <div className="flex-1">
+                <input
+                  type="text"
+                  value={field.key}
+                  onChange={(e) => onUpdate(field, { key: e.target.value })}
+                  placeholder="Field name"
+                  className="w-full rounded-md border border-gray-600 bg-gray-700 text-gray-100 p-2"
+                />
+              </div>
 
-            {field.type === "simple" && (
-              <>
-                <div className="flex-1">
-                  <select
-                    value={field.module || ""}
-                    onChange={(e) => onUpdate(field, { module: e.target.value, method: "" })}
-                    className="w-full rounded-md border border-gray-600 bg-gray-700 text-gray-100 p-2"
-                  >
-                    <option value="">Select Category</option>
-                    {Object.entries(FAKER_MODULES).map(([key, { label }]) => (
-                      <option key={key} value={key}>{label}</option>
-                    ))}
-                  </select>
-                </div>
+              <div className="flex-1">
+                <select
+                  value={field.type}
+                  onChange={(e) => handleTypeChange(field, e.target.value as "simple" | "object" | "array")}
+                  className="w-full rounded-md border border-gray-600 bg-gray-700 text-gray-100 p-2"
+                >
+                  {FIELD_TYPES.map(({ value, label }) => (
+                    <option key={value} value={value}>{label}</option>
+                  ))}
+                </select>
+              </div>
 
-                <div className="flex-1">
-                  <select
-                    value={field.method || ""}
-                    onChange={(e) => onUpdate(field, { method: e.target.value })}
-                    className="w-full rounded-md border border-gray-600 bg-gray-700 text-gray-100 p-2"
-                    disabled={!field.module}
-                  >
-                    <option value="">Select Type</option>
-                    {field.module && Object.entries(FAKER_MODULES[field.module as keyof typeof FAKER_MODULES].methods).map(([key, label]) => (
-                      <option key={key} value={key}>{label}</option>
-                    ))}
-                  </select>
-                </div>
-              </>
-            )}
+              {field.type === "simple" && (
+                <>
+                  <div className="flex-1">
+                    <select
+                      value={field.module || ""}
+                      onChange={(e) => onUpdate(field, { module: e.target.value, method: "" })}
+                      className="w-full rounded-md border border-gray-600 bg-gray-700 text-gray-100 p-2"
+                    >
+                      <option value="">Select Category</option>
+                      {Object.entries(FAKER_MODULES).map(([key, { label }]) => (
+                        <option key={key} value={key}>{label}</option>
+                      ))}
+                    </select>
+                  </div>
 
-            {field.type === "array" && (
-              <>
-                <div className="flex-1">
-                  <select
-                    value={field.arrayType || "simple"}
-                    onChange={(e) => onUpdate(field, { 
-                      arrayType: e.target.value as "simple" | "object",
-                      items: { 
-                        key: "", 
-                        type: e.target.value as "simple" | "object",
-                        fields: e.target.value === "object" ? [] : undefined
-                      }
-                    })}
-                    className="w-full rounded-md border border-gray-600 bg-gray-700 text-gray-100 p-2"
-                  >
-                    <option value="simple">Simple Values</option>
-                    <option value="object">Objects</option>
-                  </select>
-                </div>
-                <div className="flex-1">
-                  <input
-                    type="number"
-                    value={field.count || 3}
-                    onChange={(e) => onUpdate(field, { count: parseInt(e.target.value) })}
-                    min={1}
-                    max={10}
-                    className="w-full rounded-md border border-gray-600 bg-gray-700 text-gray-100 p-2"
-                  />
-                </div>
-              </>
-            )}
+                  <div className="flex-1">
+                    <select
+                      value={field.method || ""}
+                      onChange={(e) => onUpdate(field, { method: e.target.value })}
+                      className="w-full rounded-md border border-gray-600 bg-gray-700 text-gray-100 p-2"
+                      disabled={!field.module}
+                    >
+                      <option value="">Select Type</option>
+                      {getMethodOptions(field.module).map(([key, label]) => (
+                        <option key={key} value={key}>{label}</option>
+                      ))}
+                    </select>
+                  </div>
+                </>
+              )}
 
-            <button
-              type="button"
-              onClick={() => onRemove(field)}
-              className="px-3 py-2 text-red-400 hover:text-red-300"
-            >
-              Remove
-            </button>
-          </div>
+              {field.type === "array" && (
+                <>
+                  <div className="flex-1">
+                    <select
+                      value={field.arrayType || "simple"}
+                      onChange={(e) => onUpdate(field, { 
+                        arrayType: e.target.value as "simple" | "object",
+                        items: { 
+                          key: "", 
+                          type: e.target.value as "simple" | "object",
+                          fields: e.target.value === "object" ? [] : undefined
+                        }
+                      })}
+                      className="w-full rounded-md border border-gray-600 bg-gray-700 text-gray-100 p-2"
+                    >
+                      <option value="simple">Simple Values</option>
+                      <option value="object">Objects</option>
+                    </select>
+                  </div>
+                  <div className="flex-1">
+                    <input
+                      type="number"
+                      value={field.count || 3}
+                      onChange={(e) => onUpdate(field, { count: parseInt(e.target.value) })}
+                      min={1}
+                      max={10}
+                      className="w-full rounded-md border border-gray-600 bg-gray-700 text-gray-100 p-2"
+                    />
+                  </div>
+                </>
+              )}
+            </div>
+
+            <Tooltip content="Remove field">
+              <motion.button
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
+                className="p-2 text-red-400 hover:text-red-300 bg-red-500/10 rounded-lg transition-colors duration-200"
+                onClick={() => onRemove(field)}
+              >
+                <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                </svg>
+              </motion.button>
+            </Tooltip>
+          </motion.div>
 
           {field.type === "object" && field.fields && (
             <div className="space-y-4">
@@ -183,7 +237,7 @@ export function FieldBuilder({
               )}
             </div>
           )}
-        </div>
+        </motion.div>
       ))}
     </div>
   );
diff --git a/src/components/template/TemplateEditor.tsx b/src/components/template/TemplateEditor.tsx
index 7a61bb6..17e3ecf 100644
--- a/src/components/template/TemplateEditor.tsx
+++ b/src/components/template/TemplateEditor.tsx
@@ -1,7 +1,10 @@
+"use client";
+
 import { FieldBuilder } from "./FieldBuilder";
 import type { TemplateField } from "@/types/template";
 import { generateTemplate } from "@/utils/templateUtils";
-import { useMemo } from "react";
+import { useState, useEffect, useCallback } from "react";
+import { motion, AnimatePresence } from "framer-motion";
 
 interface TemplateEditorProps {
   mode: "visual" | "manual";
@@ -26,32 +29,61 @@ export function TemplateEditor({
   onRemoveField,
   onModeChange,
 }: TemplateEditorProps) {
-  // Get the preview template based on mode
-  const previewTemplate = useMemo(() => {
+  const [isPreviewOpen, setIsPreviewOpen] = useState(true);
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [isValidJSON, setIsValidJSON] = useState(true);
+  const [previewTemplate, setPreviewTemplate] = useState("");
+
+  const handlePreviewGenerate = useCallback(async () => {
+    setIsGenerating(true);
     try {
-      if (mode === "visual") {
-        return JSON.stringify(generateTemplate(fields), null, 2);
-      }
-      return JSON.stringify(JSON.parse(template || "{}"), null, 2);
-    } catch (error) {
-      return "// Invalid JSON";
+      const newPreview = mode === "visual" 
+        ? JSON.stringify(generateTemplate(fields), null, 2)
+        : JSON.stringify(JSON.parse(template || "{}"), null, 2);
+      setPreviewTemplate(newPreview);
+      setIsValidJSON(true);
+    } catch (err) {
+      console.error('Failed to generate preview:', err);
+      setIsValidJSON(false);
+    } finally {
+      setIsGenerating(false);
     }
-  }, [mode, fields, template]);
+  }, [mode, template, fields]);
+
+  useEffect(() => {
+    handlePreviewGenerate();
+  }, [handlePreviewGenerate]);
+
+  useEffect(() => {
+    const handleKeyPress = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        setIsPreviewOpen(false);
+      }
+      if ((e.metaKey || e.ctrlKey) && e.key === 'p') {
+        e.preventDefault();
+        setIsPreviewOpen(!isPreviewOpen);
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyPress);
+    return () => window.removeEventListener('keydown', handleKeyPress);
+  }, [isPreviewOpen]);
 
   return (
-    <div className="space-y-4">
-      <div className="flex justify-between items-center">
-        <label className="block text-sm font-medium text-gray-300">
+    <div className="space-y-6">
+      {/* Header Section */}
+      <div className="flex justify-between items-center bg-gray-900/50 p-4 rounded-lg border border-gray-800">
+        <label className="text-sm font-medium bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
           Data Template Builder
         </label>
-        <div className="flex gap-2">
+        <div className="flex gap-2 p-1 bg-gray-800 rounded-lg">
           <button
             type="button"
             onClick={() => onModeChange("visual")}
-            className={`px-3 py-1 text-sm rounded-md transition-colors ${
+            className={`px-4 py-2 text-sm rounded-md transition-all duration-300 ${
               mode === "visual"
-                ? "bg-blue-600 text-white"
-                : "bg-gray-700 text-gray-300 hover:bg-gray-600"
+                ? "bg-blue-500 text-white shadow-lg shadow-blue-500/20"
+                : "text-gray-400 hover:text-gray-300"
             }`}
           >
             Visual Builder
@@ -59,10 +91,10 @@ export function TemplateEditor({
           <button
             type="button"
             onClick={() => onModeChange("manual")}
-            className={`px-3 py-1 text-sm rounded-md transition-colors ${
+            className={`px-4 py-2 text-sm rounded-md transition-all duration-300 ${
               mode === "manual"
-                ? "bg-blue-600 text-white"
-                : "bg-gray-700 text-gray-300 hover:bg-gray-600"
+                ? "bg-blue-500 text-white shadow-lg shadow-blue-500/20"
+                : "text-gray-400 hover:text-gray-300"
             }`}
           >
             Manual JSON
@@ -70,50 +102,99 @@ export function TemplateEditor({
         </div>
       </div>
 
-      {mode === "visual" ? (
-        <>
-          <FieldBuilder
-            fields={fields}
-            onUpdate={onUpdateField}
-            onRemove={onRemoveField}
-            onAddNestedField={onAddNestedField}
-          />
-          <button
-            type="button"
-            onClick={onAddField}
-            className="w-full py-2 px-4 border border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-300 bg-gray-800 hover:bg-gray-700"
-          >
-            Add Field
-          </button>
-        </>
-      ) : (
-        <div className="space-y-2">
-          <textarea
-            value={template}
-            onChange={(e) => onTemplateChange(e.target.value)}
-            className="w-full h-96 rounded-md border border-gray-600 bg-gray-700 text-gray-100 font-mono text-sm p-4 focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
-            placeholder={`{
-  "username": "$internet.userName",
+      {/* Main Content */}
+      <div className="bg-gray-900/50 rounded-xl border border-gray-800 overflow-hidden backdrop-blur-sm">
+        <div className="p-6">
+          {mode === "visual" ? (
+            <div className="space-y-6">
+              <FieldBuilder
+                fields={fields}
+                onUpdate={onUpdateField}
+                onRemove={onRemoveField}
+                onAddNestedField={onAddNestedField}
+              />
+              <button
+                type="button"
+                onClick={onAddField}
+                className="w-full py-3 px-4 bg-gradient-to-r from-blue-500 to-blue-600 rounded-lg text-white font-medium hover:from-blue-600 hover:to-blue-700 transition-all duration-300 shadow-lg hover:shadow-blue-500/20"
+              >
+                Add New Field
+              </button>
+            </div>
+          ) : (
+            <textarea
+              value={template}
+              onChange={(e) => onTemplateChange(e.target.value)}
+              className="w-full h-96 rounded-lg border border-gray-800 bg-gray-900/50 text-gray-100 font-mono text-sm p-4 focus:border-blue-500 focus:ring-1 focus:ring-blue-500/50 transition-all duration-300"
+              placeholder={`{
+  "username": "$internet.username",
   "details": {
     "firstName": "$name.firstName",
     "lastName": "$name.lastName"
   }
 }`}
-            spellCheck="false"
-          />
+              spellCheck="false"
+            />
+          )}
         </div>
-      )}
 
-      {/* Template Preview */}
-      <div className="mt-4">
-        <label className="block text-sm font-medium text-gray-300 mb-2">
-          Template Preview
-        </label>
-        <pre className="bg-gray-800 p-4 rounded-md overflow-x-auto">
-          <code className="text-sm text-gray-100">
-            {previewTemplate}
-          </code>
-        </pre>
+        {/* Preview Section */}
+        <div className="border-t border-gray-800">
+          <div className="flex items-center justify-between px-6 py-4 bg-gray-900/30">
+            <button
+              onClick={() => setIsPreviewOpen(!isPreviewOpen)}
+              className="flex items-center gap-2 text-sm font-medium text-gray-400 hover:text-white transition-colors duration-200"
+            >
+              <span>Preview</span>
+              <motion.svg
+                animate={{ rotate: isPreviewOpen ? 180 : 0 }}
+                transition={{ duration: 0.2 }}
+                className="w-4 h-4"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+              </motion.svg>
+            </button>
+            <div className="flex items-center gap-3">
+              {isGenerating && (
+                <motion.div
+                  animate={{ rotate: 360 }}
+                  transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
+                  className="w-4 h-4 text-blue-400"
+                >
+                  <svg className="animate-spin" viewBox="0 0 24 24">
+                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
+                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+                  </svg>
+                </motion.div>
+              )}
+              {!isValidJSON && (
+                <span className="text-xs px-2 py-1 rounded-full bg-red-500/10 text-red-400 border border-red-500/20">
+                  Invalid JSON
+                </span>
+              )}
+            </div>
+          </div>
+          <AnimatePresence>
+            {isPreviewOpen && (
+              <motion.div
+                initial={{ height: 0, opacity: 0 }}
+                animate={{ height: "auto", opacity: 1 }}
+                exit={{ height: 0, opacity: 0 }}
+                transition={{ duration: 0.2 }}
+                className="overflow-hidden"
+              >
+                <pre className={`p-6 overflow-x-auto bg-gray-900/80 ${!isValidJSON ? 'border-l-2 border-red-500' : ''}`}>
+                  <code className="text-sm text-gray-100">
+                    {previewTemplate}
+                  </code>
+                </pre>
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </div>
       </div>
     </div>
   );
diff --git a/src/constants/fakerModules.ts b/src/constants/fakerModules.ts
index 3e8341d..618d89d 100644
--- a/src/constants/fakerModules.ts
+++ b/src/constants/fakerModules.ts
@@ -2,7 +2,7 @@ export const FAKER_MODULES = {
   internet: {
     label: "Internet",
     methods: {
-      userName: "Username",
+      username: "Username",
       email: "Email Address",
       password: "Password",
       url: "URL",
@@ -26,8 +26,8 @@ export const FAKER_MODULES = {
       imei: "IMEI",
     },
   },
-  address: {
-    label: "Address",
+  location: {
+    label: "Location",
     methods: {
       streetAddress: "Street Address",
       city: "City",
diff --git a/src/lib/generators/express.ts b/src/lib/generators/express.ts
index ed8ce5f..1f8e3d2 100644
--- a/src/lib/generators/express.ts
+++ b/src/lib/generators/express.ts
@@ -24,21 +24,46 @@ export interface ${typeName}Response {
 }`;
 }
 
-export function generateExpressRouter({ resourceName }: GeneratorParams): string {
+export function generateExpressRouter({ resourceName, template }: GeneratorParams): string {
   const typeName = toPascalCase(resourceName);
-  
   return `import express from 'express';
-import { validate${typeName} } from '../middleware/validation';
+import { v4 as uuidv4 } from 'uuid';
 import type { ${typeName}, ${typeName}Create } from '../types/${resourceName}';
 
 const router = express.Router();
 
-// In-memory storage
-const ${resourceName}DB = new Map<string, ${typeName}>();
+// In-memory storage with mock data
+const ${resourceName}DB = new Map<string, ${typeName}>(
+${generateJSMockData(template, 3).map(data => 
+    `  ["${data.id}", ${JSON.stringify(data)}]`
+  ).join(',\n')}
+);
 
 export default router;`;
 }
 
+function generateJSMockData(template: Record<string, unknown>, count: number = 3): Array<Record<string, unknown>> {
+  return Array.from({ length: count }, (_, index) => ({
+    id: `mock-id-${index + 1}`,
+    ...Object.entries(template).reduce((acc, [key, value]) => {
+      if (typeof value === 'string' && value.startsWith('$')) {
+        acc[key] = `Mock ${key} ${index + 1}`;
+      } else if (Array.isArray(value)) {
+        acc[key] = value.map((item, i) => 
+          typeof item === 'string' && item.startsWith('$') 
+            ? `Mock ${key} Item ${i + 1}` 
+            : item
+        );
+      } else if (typeof value === 'object' && value !== null) {
+        acc[key] = generateJSMockData(value as Record<string, unknown>, 1)[0];
+      } else {
+        acc[key] = value;
+      }
+      return acc;
+    }, {} as Record<string, unknown>)
+  }));
+}
+
 export function generateExpressHandlers({ resourceName, allowedEndpoints }: GeneratorParams): string {
   const typeName = toPascalCase(resourceName);
   const endpoints: string[] = [];
diff --git a/src/lib/generators/fastapi.ts b/src/lib/generators/fastapi.ts
index fd2ab0d..18a94f2 100644
--- a/src/lib/generators/fastapi.ts
+++ b/src/lib/generators/fastapi.ts
@@ -23,15 +23,42 @@ class ${typeName}Response(BaseModel):
 }
 
 // Router Setup
-export function generateFastAPIRouter({ resourceName }: GeneratorParams): string {
+export function generateFastAPIRouter({ resourceName, template }: GeneratorParams): string {
+  const typeName = toPascalCase(resourceName);
   return `from fastapi import APIRouter, HTTPException
 from uuid import uuid4
-from .models import ${toPascalCase(resourceName)}, ${toPascalCase(resourceName)}Create, ${toPascalCase(resourceName)}Response
+from .models import ${typeName}, ${typeName}Create, ${typeName}Response
 
 router = APIRouter(prefix="/${resourceName}", tags=["${resourceName}"])
 
 # In-memory storage
-${resourceName}_db = {}`;
+${resourceName}_db = {
+${generatePythonMockData(template, 3).map(data => 
+    `    "${data.id}": ${typeName}(**${JSON.stringify(data)})`
+  ).join(',\n')}
+}`;
+}
+
+function generatePythonMockData(template: Record<string, unknown>, count: number = 3): Array<Record<string, unknown>> {
+  return Array.from({ length: count }, (_, index) => ({
+    "id": `mock-id-${index + 1}`,
+    ...Object.entries(template).reduce((acc, [key, value]) => {
+      if (typeof value === 'string' && value.startsWith('$')) {
+        acc[key] = `Mock ${key} ${index + 1}`;
+      } else if (Array.isArray(value)) {
+        acc[key] = value.map((item, i) => 
+          typeof item === 'string' && item.startsWith('$') 
+            ? `Mock ${key} Item ${i + 1}` 
+            : item
+        );
+      } else if (typeof value === 'object' && value !== null) {
+        acc[key] = generatePythonMockData(value as Record<string, unknown>, 1)[0];
+      } else {
+        acc[key] = value;
+      }
+      return acc;
+    }, {} as Record<string, unknown>)
+  }));
 }
 
 // Individual Endpoints
diff --git a/src/lib/generators/nextjs.ts b/src/lib/generators/nextjs.ts
index 3c770e3..fb89b3c 100644
--- a/src/lib/generators/nextjs.ts
+++ b/src/lib/generators/nextjs.ts
@@ -191,12 +191,67 @@ interface ${typeName}Response {
 interface ${typeName}Create extends Omit<${typeName}Data, 'id'> {}`;
 }
 
-export function generateNextSetup({ resourceName }: GeneratorParams): string {
+// Update the mock data generator to use the latest faker methods
+function generateMockData(template: Record<string, unknown>, count: number = 3): Array<Record<string, unknown>> {
+  // Map of deprecated methods to their new versions
+  const fakerMethodMap: Record<string, string> = {
+    'internet.userName': 'internet.username',
+    'address.streetAddress': 'location.streetAddress',
+    'address.city': 'location.city',
+    'address.state': 'location.state',
+    'address.country': 'location.country',
+    'address.zipCode': 'location.zipCode',
+  };
+
+  return Array.from({ length: count }, (_, index) => ({
+    id: `mock-${index + 1}`,
+    ...Object.entries(template).reduce((acc, [key, value]) => {
+      if (typeof value === 'string' && value.startsWith('$')) {
+        // Parse faker method and check for deprecated methods
+        const methodPath = value.slice(1); // Remove the $ prefix
+        const updatedPath = fakerMethodMap[methodPath] || methodPath;
+        acc[key] = `\${faker.${updatedPath}()}`; // Use updated method path
+      } else if (Array.isArray(value)) {
+        acc[key] = value.map(item => {
+          if (typeof item === 'string' && item.startsWith('$')) {
+            const methodPath = item.slice(1);
+            const updatedPath = fakerMethodMap[methodPath] || methodPath;
+            return `\${faker.${updatedPath}()}`;
+          }
+          return item;
+        });
+      } else if (typeof value === 'object' && value !== null) {
+        acc[key] = generateMockData(value as Record<string, unknown>, 1)[0];
+      } else {
+        acc[key] = value;
+      }
+      return acc;
+    }, {} as Record<string, unknown>)
+  }));
+}
+
+// Update the setup function to import faker
+export function generateNextSetup({ resourceName, template }: GeneratorParams): string {
+  const typeName = toPascalCase(resourceName);
   return `import { NextRequest, NextResponse } from "next/server";
 import { getErrorResponse } from "@/lib/utils";
+import { faker } from '@faker-js/faker';
 
 // In-memory storage
-const ${resourceName}DB = new Map<string, ${toPascalCase(resourceName)}Data>();`;
+const ${resourceName}DB = new Map<string, ${typeName}Data>();
+
+// Initialize with mock data
+const mockData = [
+${generateMockData(template, 3).map(data => `  ${JSON.stringify(data, null, 2)}`).join(',\n')}
+].map(item => ({
+  ...item,
+  id: crypto.randomUUID() // Generate real UUIDs for the IDs
+}));
+
+// Populate DB with mock data
+mockData.forEach(data => {
+  ${resourceName}DB.set(data.id, data);
+});`;
 }
 
 export function generateNextCreate({ resourceName }: GeneratorParams): string {
diff --git a/src/server/actions/projects.ts b/src/server/actions/projects.ts
index 27a8982..069ee8b 100644
--- a/src/server/actions/projects.ts
+++ b/src/server/actions/projects.ts
@@ -2,6 +2,15 @@
 
 import { revalidatePath } from "next/cache";
 import { prisma } from "../infrastructure/prisma/client";
+import type { Project, Resource } from "@prisma/client";
+
+interface ProjectWithResources extends Project {
+  resources: (Resource & {
+    _count?: {
+      data: number;
+    };
+  })[];
+}
 
 export async function createProject(data: { name: string }) {
   const project = await prisma.project.create({
@@ -35,11 +44,17 @@ export async function getProjectsWithoutResources() {
   });
 }
 
-export async function getProject(id: string) {
+export async function getProject(id: string): Promise<ProjectWithResources | null> {
   return await prisma.project.findUnique({
     where: { id },
     include: {
-      resources: true,
+      resources: {
+        include: {
+          _count: {
+            select: { data: true }
+          }
+        }
+      }
     },
   });
 }