diff --git a/package-lock.json b/package-lock.json
index ff2a8d0..251645b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,19 +1,24 @@
 {
-  "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": {
+        "@clerk/nextjs": "^6.12.0",
         "@faker-js/faker": "^9.5.0",
         "@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"
+        "react-dom": "^19.0.0",
+        "zod": "^3.24.2"
       },
       "devDependencies": {
         "@eslint/eslintrc": "^3",
@@ -41,6 +46,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",
@@ -1848,6 +1970,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",
@@ -1910,6 +2041,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",
@@ -1925,6 +2065,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",
@@ -1942,7 +2088,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": {
@@ -2067,6 +2212,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",
@@ -2104,6 +2258,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",
@@ -2917,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",
@@ -3077,6 +3268,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",
@@ -3782,6 +3979,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",
@@ -3952,6 +4158,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",
@@ -3959,6 +4174,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",
@@ -4026,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",
@@ -4152,6 +4394,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",
@@ -4951,6 +5203,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",
@@ -5162,6 +5420,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",
@@ -5178,6 +5460,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",
@@ -5498,6 +5786,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",
@@ -5706,6 +6007,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",
@@ -5834,6 +6147,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",
@@ -6075,6 +6397,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..178e952 100644
--- a/package.json
+++ b/package.json
@@ -10,12 +10,16 @@
     "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",
+    "clsx": "^2.1.1",
+    "framer-motion": "^12.4.7",
     "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/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/page.tsx b/src/app/page.tsx
index 755c13b..3096412 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -7,67 +7,111 @@ 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">
-            Create Your Mock API
+    <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 with Nextra-style */}
+        <div className="text-center mb-16">
+          <h1 className="text-6xl font-extrabold tracking-tight text-white mb-4">
+            Mock<span className="text-blue-500">API</span>
           </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 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-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 flex justify-center gap-4">
+            <Link
+              href="/projects/new"
+              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="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 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-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>
+
+          <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-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>
+
+          <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-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>
 
-        <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 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/50">
             {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>
-                      <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}
-                      </p>
-                    </div>
+              <Link 
+                key={project.id}
+                href={`/projects/${project.id}`}
+                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>
-                      <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>
+                      <h3 className="text-lg font-medium text-white">{project.name}</h3>
+                      <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" />
+                    </svg>
                   </div>
-                </Link>
-              </li>
+                </div>
+              </Link>
             ))}
-          </ul>
+            {projects.length === 0 && (
+              <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>
         </div>
       </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 b60b71b..36d8f42 100644
--- a/src/app/projects/[id]/resources/[resourceId]/page.tsx
+++ b/src/app/projects/[id]/resources/[resourceId]/page.tsx
@@ -1,13 +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 { ResourceTemplateWrapper } from "@/components/resource/ResourceTemplateWrapper";
+import { CopyButton } from "@/components/common/CopyButton";
 
 const ROOT_URL = process.env.ROOT_SITE;
 
@@ -29,77 +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">
-              <EditableTemplate
-                template={resource.template as TemplateObject}
-                resourceId={resource.id}
-                currentCount={currentCount}
-                _projectId={project.id}
-              />
-            </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>
+
+          {/* 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>
-          <EndpointTemplateEditor
-            resourceId={resource.id}
-            initialTemplate={
-              resource.endpointTemplate as Record<string, unknown>
-            }
-          />
         </div>
       </div>
     </div>
diff --git a/src/app/projects/[id]/resources/new/NewResourceForm.tsx b/src/app/projects/[id]/resources/new/NewResourceForm.tsx
index 44daf07..07ed998 100644
--- a/src/app/projects/[id]/resources/new/NewResourceForm.tsx
+++ b/src/app/projects/[id]/resources/new/NewResourceForm.tsx
@@ -1,8 +1,14 @@
 "use client";
 
-import { useState } from "react";
+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";
+import type { TemplateField } from "@/types/template";
+import { EditorStateSchema, type EditorState } from "@/schemas/template";
 
 interface NewResourceFormProps {
   projectId: string;
@@ -12,38 +18,120 @@ 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<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 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;
+      });
+    };
+
+    setFields(updateFieldInArray(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;
+      });
+    };
+
+    setFields(removeFieldFromArray(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 f;
+      });
+    };
+
+    setFields(updateFieldInArray(fields));
+  };
+
+  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 handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const sluggedName = toSlug(e.target.value);
-    setName(sluggedName);
+  const handleTemplateChange = (value: string) => {
+    try {
+      JSON.parse(value); // Validate JSON
+      const newState = { ...editorState, template: value };
+      EditorStateSchema.parse(newState);
+      setEditorState(newState);
+      setError(null);
+    } catch {
+      setError("Invalid JSON format");
+    }
   };
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     try {
-      const template = JSON.parse(templateText);
-      const endpoint = `${version}/${name}`;
+      const template = editorState.mode === "visual" 
+        ? generateTemplate(fields)
+        : JSON.parse(editorState.template);
+      
       await createResource(projectId, {
         name,
-        endpoint,
+        endpoint: `${version}/${name}`,
         template,
       });
       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.");
     }
   };
 
@@ -53,89 +141,31 @@ export default function NewResourceForm({ projectId }: NewResourceFormProps) {
         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>
-          <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={`{
-  "username": "$internet.userName",
-  "email": "$internet.email",
-  "status": "$helpers.arrayElement([\"active\", \"inactive\", \"pending\"])",
-  "profile": {
-    "firstName": "$name.firstName",
-    "lastName": "$name.lastName",
-    "age": "$number.int(18, 80)"
-  }
-}`}
-            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>
-        </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"
             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/app/sign-in/page.tsx b/src/app/sign-in/page.tsx
new file mode 100644
index 0000000..b40b6bf
--- /dev/null
+++ b/src/app/sign-in/page.tsx
@@ -0,0 +1,15 @@
+import { SignIn } from "@clerk/nextjs";
+import { Metadata } from "next";
+
+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 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
new file mode 100644
index 0000000..bf61b4e
--- /dev/null
+++ b/src/app/sign-in/sso-callback/page.tsx
@@ -0,0 +1,12 @@
+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>
+  );
+}
+
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
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
new file mode 100644
index 0000000..57f4668
--- /dev/null
+++ b/src/components/resource/CodeGenerator.tsx
@@ -0,0 +1,432 @@
+"use client";
+
+import { useState, useEffect, useMemo, useCallback, useRef } 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,
+  initialEndpoints = {}
+}: CodeGeneratorProps) {
+  const [selectedFramework, setSelectedFramework] = useState<CodeGeneratorType>(CodeGeneratorType.NEXTJS);
+  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 => {
+      if (step.id === StepType.TYPES || step.id === StepType.SETUP) {
+        return Object.values(endpoints).some(Boolean);
+      }
+      
+      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]);
+
+  // Initialize first step only once
+  useEffect(() => {
+    if (isInitialized.current) return;
+    isInitialized.current = true;
+
+    if (availableSteps.length === 0) {
+      setState({
+        selectedStep: '',
+        code: '// No endpoints selected',
+        completedSteps: new Set()
+      });
+      return;
+    }
+
+    const firstStep = availableSteps[0];
+    if (!firstStep) return;
+
+    const generatedCode = firstStep.generator(generatorParams);
+    
+    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>();
+    for (const s of availableSteps) {
+      stepsToComplete.add(s.id);
+      if (s.id === step.id) break;
+    }
+    
+    setState({
+      selectedStep: step.id,
+      code: generatedCode,
+      completedSteps: stepsToComplete
+    });
+  }, [availableSteps, generatorParams]);
+
+  const isStepDisabled = useCallback((step: Step) => {
+    if (!step.requires?.length) return false;
+    return step.requires.some(req => !state.completedSteps.has(req));
+  }, [state.completedSteps]);
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(state.code);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <div className="space-y-8">
+      {/* Framework Selector */}
+      <div className="flex items-center gap-3">
+        {Object.values(CodeGeneratorType).map((framework) => (
+          <button
+            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"
+            )}
+          >
+            {framework}
+          </button>
+        ))}
+      </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={() => {
+                setState({
+                  selectedStep: step.id,
+                  code: '',
+                  completedSteps: new Set()
+                });
+                handleGenerate(step);
+              }}
+              className={cn(
+                "w-full text-left p-4 rounded-lg",
+                state.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",
+                  state.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">
+          {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">
+                  <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 === state.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">{state.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/FastAPIGenerator.tsx b/src/components/resource/FastAPIGenerator.tsx
new file mode 100644
index 0000000..cd7477a
--- /dev/null
+++ b/src/components/resource/FastAPIGenerator.tsx
@@ -0,0 +1,62 @@
+"use client";
+
+import { useState } from 'react';
+import { generateFastAPICode } from '@/lib/generators/fastapi';
+
+interface FastAPIGeneratorProps {
+  projectName: string;
+  resourceName: string;
+  version: string;
+  template: Record<string, unknown>;
+}
+
+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/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/ResourceTemplateEditor.tsx b/src/components/resource/ResourceTemplateEditor.tsx
new file mode 100644
index 0000000..17ad37a
--- /dev/null
+++ b/src/components/resource/ResourceTemplateEditor.tsx
@@ -0,0 +1,220 @@
+"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 "visual" | "manual",
+    template: JSON.stringify(template, null, 2),
+    manualTemplate: JSON.stringify(template, null, 2),
+  });
+  const [isSaving, setIsSaving] = useState(false);
+  const [isDirty, setIsDirty] = useState(false);
+  
+  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]);
+
+  // 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) {
+      console.error("Error switching mode:", error);
+      setError("Invalid JSON format");
+    }
+  };
+
+  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[] => {
+      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);
+    setIsDirty(true);
+  };
+
+  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}
+          disabled={isSaving || !isDirty}
+          className={`px-4 py-2 rounded-md text-white ${
+            !isDirty 
+              ? "bg-gray-600 cursor-not-allowed"
+              : isSaving 
+                ? "bg-blue-500 cursor-not-allowed" 
+                : "bg-blue-600 hover:bg-blue-700"
+          }`}
+        >
+          {isSaving ? "Saving..." : isDirty ? "Save Changes" : "Saved"}
+        </button>
+      </div>
+      
+      <TemplateEditor
+        mode={editorState.mode}
+        template={editorState.manualTemplate}
+        fields={fields}
+        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[] => {
+            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));
+          setIsDirty(true);
+        }}
+        onTemplateChange={handleTemplateChange}
+        onModeChange={handleModeChange}
+      />
+      {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..f390835
--- /dev/null
+++ b/src/components/resource/ResourceTemplateWrapper.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import { ResourceTemplateEditor } from "./ResourceTemplateEditor";
+import { updateResourceTemplate } from "@/server/actions/resources";
+import type { TemplateObject } 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 as TemplateObject);
+    } catch (error) {
+      console.error("Failed to update template:", error);
+    }
+  };
+
+  return (
+    <ResourceTemplateEditor
+      template={template}
+      onUpdate={handleUpdate}
+    />
+  );
+} 
\ 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..bb5446a
--- /dev/null
+++ b/src/components/template/FieldBuilder.tsx
@@ -0,0 +1,244 @@
+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[];
+  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);
+  };
+
+  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) => (
+        <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 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>
+
+              <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>
+                      {getMethodOptions(field.module).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>
+
+            <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">
+              <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>
+          )}
+        </motion.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..17e3ecf
--- /dev/null
+++ b/src/components/template/TemplateEditor.tsx
@@ -0,0 +1,201 @@
+"use client";
+
+import { FieldBuilder } from "./FieldBuilder";
+import type { TemplateField } from "@/types/template";
+import { generateTemplate } from "@/utils/templateUtils";
+import { useState, useEffect, useCallback } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+
+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 [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 {
+      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, 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-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 p-1 bg-gray-800 rounded-lg">
+          <button
+            type="button"
+            onClick={() => onModeChange("visual")}
+            className={`px-4 py-2 text-sm rounded-md transition-all duration-300 ${
+              mode === "visual"
+                ? "bg-blue-500 text-white shadow-lg shadow-blue-500/20"
+                : "text-gray-400 hover:text-gray-300"
+            }`}
+          >
+            Visual Builder
+          </button>
+          <button
+            type="button"
+            onClick={() => onModeChange("manual")}
+            className={`px-4 py-2 text-sm rounded-md transition-all duration-300 ${
+              mode === "manual"
+                ? "bg-blue-500 text-white shadow-lg shadow-blue-500/20"
+                : "text-gray-400 hover:text-gray-300"
+            }`}
+          >
+            Manual JSON
+          </button>
+        </div>
+      </div>
+
+      {/* 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"
+            />
+          )}
+        </div>
+
+        {/* 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>
+  );
+} 
\ No newline at end of file
diff --git a/src/constants/fakerModules.ts b/src/constants/fakerModules.ts
new file mode 100644
index 0000000..618d89d
--- /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",
+    },
+  },
+  location: {
+    label: "Location",
+    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/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/lib/generators/express.ts b/src/lib/generators/express.ts
new file mode 100644
index 0000000..1f8e3d2
--- /dev/null
+++ b/src/lib/generators/express.ts
@@ -0,0 +1,208 @@
+import type { GeneratorParams } from "./index";
+import { toPascalCase } from "@/utils/string";
+
+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, template }: GeneratorParams): string {
+  const typeName = toPascalCase(resourceName);
+  return `import express from 'express';
+import { v4 as uuidv4 } from 'uuid';
+import type { ${typeName}, ${typeName}Create } from '../types/${resourceName}';
+
+const router = express.Router();
+
+// 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[] = [];
+  
+  // Only add uuid import if needed
+  if (allowedEndpoints?.post) {
+    endpoints.push(`import { v4 as uuidv4 } from 'uuid';`);
+  }
+
+  if (allowedEndpoints?.get) {
+    endpoints.push(`
+router.get('/', (req, res) => {
+  const data = Array.from(${resourceName}DB.values());
+  res.json({ data });
+});`);
+  }
+
+  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);
+});`);
+  }
+
+  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${typeName} = { ...data, id };
+  ${resourceName}DB.set(id, updated${typeName});
+  res.json(updated${typeName});
+});`);
+  }
+
+  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(id);
+  res.status(204).send();
+});`);
+  }
+
+  return endpoints.join('\n\n');
+}
+
+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();
+});`;
+}
+
+// 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
new file mode 100644
index 0000000..18a94f2
--- /dev/null
+++ b/src/lib/generators/fastapi.ts
@@ -0,0 +1,115 @@
+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
+
+class ${typeName}Base(BaseModel):
+${Object.entries(template)
+    .map(([key, value]) => `    ${key}: ${typeof value === 'string' ? 'str' : 'Any'}`)
+    .join('\n')}
+
+class ${typeName}Create(${typeName}Base):
+    pass
+
+class ${typeName}(${typeName}Base):
+    id: str
+
+class ${typeName}Response(BaseModel):
+    data: List[${typeName}]`;
+}
+
+// Router Setup
+export function generateFastAPIRouter({ resourceName, template }: GeneratorParams): string {
+  const typeName = toPascalCase(resourceName);
+  return `from fastapi import APIRouter, HTTPException
+from uuid import uuid4
+from .models import ${typeName}, ${typeName}Create, ${typeName}Response
+
+router = APIRouter(prefix="/${resourceName}", tags=["${resourceName}"])
+
+# In-memory storage
+${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
+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())}`;
+}
+
+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]`;
+}
+
+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`;
+}
+
+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")
+    updated_item = ${typeName}(id=item_id, **item.dict())
+    ${resourceName}_db[item_id] = updated_item
+    return updated_item`;
+}
+
+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 {"success": True}`;
+}
+
+// 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
new file mode 100644
index 0000000..7eeff53
--- /dev/null
+++ b/src/lib/generators/index.ts
@@ -0,0 +1,30 @@
+export enum CodeGeneratorType {
+  NEXTJS = 'Next.js',
+  EXPRESS = 'Express.js',
+  FASTAPI = 'FastAPI'
+}
+
+export interface CodeGenerator {
+  type: CodeGeneratorType;
+  label: string;
+  generate: (params: GeneratorParams) => string;
+}
+
+export interface GeneratorParams {
+  projectName: string;
+  resourceName: string;
+  version: string;
+  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..fb89b3c
--- /dev/null
+++ b/src/lib/generators/nextjs.ts
@@ -0,0 +1,302 @@
+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'> {}`;
+}
+
+// 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, ${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 {
+  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
new file mode 100644
index 0000000..bfc625d
--- /dev/null
+++ b/src/lib/generators/react.ts
@@ -0,0 +1,106 @@
+import type { GeneratorParams } from "./index";
+import { toPascalCase } from "@/utils/string";
+
+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');
+
+  return `export interface ${typeName} {
+  id: string;
+${fields}
+}
+
+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 = {
+  getAll: async (): Promise<${typeName}[]> => {
+    const response = await api.get<${typeName}Response>('/${version}/${resourceName}');
+    return response.data.data;
+  },
+
+  getById: async (id: string): Promise<${typeName}> => {
+    const response = await api.get<${typeName}>(\`/${version}/${resourceName}/\${id}\`);
+    return response.data;
+  },
+
+  create: async (data: ${typeName}Create): Promise<${typeName}> => {
+    const response = await api.post<${typeName}>('/${version}/${resourceName}', data);
+    return response.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}\`);
+  }
+};`;
+}
+
+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);
+
+  useEffect(() => {
+    ${resourceName}Api.getAll()
+      .then(setData)
+      .catch(setError)
+      .finally(() => setLoading(false));
+  }, []);
+
+  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 };
+}`;
+}
+
+// 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
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/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
+}; 
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 94bb943..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({
@@ -16,14 +25,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
   }
 }
 
@@ -33,11 +44,17 @@ export async function getProjectsWithoutResources() {
   });
 }
 
-export async function getProject(id: string) {
-  return prisma.project.findUnique({
+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 }
+          }
+        }
+      }
     },
   });
 }
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(
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/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
diff --git a/src/utils/templateUtils.ts b/src/utils/templateUtils.ts
new file mode 100644
index 0000000..f8f01ef
--- /dev/null
+++ b/src/utils/templateUtils.ts
@@ -0,0 +1,43 @@
+import type { 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 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