create-stackflow 1.0.4 → 1.0.5

package/cli.js

@@ -8,7 +8,7 @@ const program = new Command();
 program
   .name("create-stackflow")
   .description("Generate a production-minded MERN starter with frontend, backend, auth, CRUD, and dashboard UI.")
-  .version("1.0.4")
+  .version("1.0.5")
   .argument("[project-name]", "project folder name")
   .option("--skip-install", "generate files without installing dependencies")
   .option("--yes", "use recommended defaults")

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-stackflow",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Interactive CLI for generating modern full-stack MERN applications.",
   "type": "module",
   "bin": {

package/src/generators/backend.js

@@ -125,6 +125,13 @@ COOKIE_NAME=stackflow_token
   if (context.multer) await fs.outputFile(path.join(context.backendDir, "uploads", ".gitkeep"), "");
 
   const files = backendTemplates({ ...context, language: backendContext.language, clientUrl }, e);
+  
+  // Filter out unused configuration files
+  if (!context.cloudinary) delete files[`src/config/cloudinary.${e}`];
+  if (!context.multer) delete files[`src/services/uploadService.${e}`];
+  if (!context.winston) delete files[`src/utils/logger.${e}`];
+  if (!context.swagger) delete files[`src/config/swagger.${e}`];
+
   await Promise.all(Object.entries(files).map(([file, content]) =>
     writeTemplate(path.join(context.backendDir, file), content, context)
   ));
@@ -188,9 +195,9 @@ ${context.rateLimit === false ? "" : "import rateLimit from \"express-rate-limit
 ${context.hpp ? "import hpp from \"hpp\";" : ""}
 ${imports.morgan}
 ${imports.swagger}
-import apiRoutes from "./routes/index.routes.js";
-import { errorHandler } from "./middleware/error.middleware.js";
-import { notFound } from "./middleware/not-found.middleware.js";
+import apiRoutes from "./routes/mainRoute.js";
+import { errorHandler } from "./middleware/errorMiddleware.js";
+import { notFound } from "./middleware/notFoundMiddleware.js";
 
 const app = express();
 
@@ -228,7 +235,7 @@ export async function connectDB() {
   ${context.winston ? "logger.info(\"MongoDB connected\");" : "console.log(\"MongoDB connected\");"}
 }
 `,
-    [`src/models/user.model.${e}`]: `import mongoose from "mongoose";
+    [`src/models/userModel.${e}`]: `import mongoose from "mongoose";
 import bcrypt from "bcryptjs";
 
 const userSchema = new mongoose.Schema({
@@ -248,9 +255,9 @@ userSchema.methods.comparePassword = function(candidatePassword) {
 
 export const User = mongoose.model("User", userSchema);
 `,
-    [`src/models/task.model.${e}`]: `import mongoose from "mongoose";
+    [`src/models/todoModel.${e}`]: `import mongoose from "mongoose";
 
-const taskSchema = new mongoose.Schema({
+const todoSchema = new mongoose.Schema({
   title: { type: String, required: true, trim: true },
   description: { type: String, default: "" },
   imageUrl: { type: String, default: "" },
@@ -258,7 +265,7 @@ const taskSchema = new mongoose.Schema({
   owner: { type: mongoose.Schema.Types.ObjectId, ref: "User", required: true }
 }, { timestamps: true });
 
-export const Task = mongoose.model("Task", taskSchema);
+export const Todo = mongoose.model("Todo", todoSchema);
 `,
     [`src/utils/jwt.${e}`]: `import jwt from "jsonwebtoken";
 
@@ -277,8 +284,8 @@ export function setAuthCookie(res, token) {
   });
 }
 `,
-    [`src/middleware/auth.middleware.${e}`]: `${reqRes}import jwt from "jsonwebtoken";
-import { User } from "../models/user.model.js";
+    [`src/middleware/authMiddleware.${e}`]: `${reqRes}import jwt from "jsonwebtoken";
+import { User } from "../models/userModel.js";
 
 export async function protect(req${type("Request & { user?: unknown }")}, res${type("Response")}, next${type("NextFunction")}) {
   try {
@@ -301,7 +308,7 @@ export async function protect(req${type("Request & { user?: unknown }")}, res${t
   }
 }
 `,
-    [`src/middleware/error.middleware.${e}`]: `${reqRes}export function errorHandler(error${type("Error & { statusCode?: number }")}, _req${type("Request")}, res${type("Response")}, _next${type("NextFunction")}) {
+    [`src/middleware/errorMiddleware.${e}`]: `${reqRes}export function errorHandler(error${type("Error & { statusCode?: number }")}, _req${type("Request")}, res${type("Response")}, _next${type("NextFunction")}) {
   const status = error.statusCode || 500;
   res.status(status).json({
     message: error.message || "Server error",
@@ -309,11 +316,11 @@ export async function protect(req${type("Request & { user?: unknown }")}, res${t
   });
 }
 `,
-    [`src/middleware/not-found.middleware.${e}`]: `${reqRes}export function notFound(req${type("Request")}, res${type("Response")}) {
+    [`src/middleware/notFoundMiddleware.${e}`]: `${reqRes}export function notFound(req${type("Request")}, res${type("Response")}) {
   res.status(404).json({ message: \`Route not found: \${req.originalUrl}\` });
 }
 `,
-    [`src/controllers/auth.controller.${e}`]: `import { User } from "../models/user.model.js";
+    [`src/controllers/authController.${e}`]: `import { User } from "../models/userModel.js";
 import { signToken, setAuthCookie } from "../utils/jwt.js";
 
 function publicUser(user) {
@@ -358,56 +365,93 @@ export async function logout(_req, res) {
   res.json({ message: "Logged out" });
 }
 `,
-    [`src/controllers/task.controller.${e}`]: `import { Task } from "../models/task.model.js";
+    [`src/controllers/todoController.${e}`]: `import { Todo } from "../models/todoModel.js";
 
-export async function listTasks(req, res, next) {
-  try {
-    const tasks = await Task.find({ owner: req.user._id }).sort({ createdAt: -1 });
-    res.json({ tasks });
-  } catch (error) {
-    next(error);
-  }
-}
+const todoController = {
+  // Get All Todos
+  getTodos: async (req, res) => {
+    try {
+      const todos = await Todo.find({ owner: req.user._id }).sort({ createdAt: -1 });
+      res.status(200).json({
+        success: true,
+        message: "Todos fetched successfully",
+        data: todos
+      });
+    } catch (error) {
+      res.status(500).json({
+        success: false,
+        message: error.message
+      });
+    }
+  },
 
-export async function createTask(req, res, next) {
-  try {
-    const imageUrl = req.file ? \`/uploads/\${req.file.filename}\` : "";
-    const task = await Task.create({ ...req.body, imageUrl, owner: req.user._id });
-    res.status(201).json({ task });
-  } catch (error) {
-    next(error);
-  }
-}
+  // Create Todo
+  createTodo: async (req, res) => {
+    try {
+      const imageUrl = req.file ? \`/uploads/\${req.file.filename}\` : "";
+      const newTodo = await Todo.create({ ...req.body, imageUrl, owner: req.user._id });
+      res.status(201).json({
+        success: true,
+        message: "Todo created successfully",
+        data: newTodo
+      });
+    } catch (error) {
+      res.status(500).json({
+        success: false,
+        message: error.message
+      });
+    }
+  },
 
-export async function updateTask(req, res, next) {
-  try {
-    const updates = { ...req.body };
-    if (req.file) updates.imageUrl = \`/uploads/\${req.file.filename}\`;
-    const task = await Task.findOneAndUpdate(
-      { _id: req.params.id, owner: req.user._id },
-      updates,
-      { new: true, runValidators: true }
-    );
-    if (!task) return res.status(404).json({ message: "Task not found" });
-    res.json({ task });
-  } catch (error) {
-    next(error);
-  }
-}
+  // Update Todo
+  updateTodo: async (req, res) => {
+    try {
+      const { id } = req.params;
+      const updates = { ...req.body };
+      if (req.file) updates.imageUrl = \`/uploads/\${req.file.filename}\`;
+      const todo = await Todo.findOneAndUpdate(
+        { _id: id, owner: req.user._id },
+        updates,
+        { new: true, runValidators: true }
+      );
+      if (!todo) return res.status(404).json({ success: false, message: "Todo not found" });
+      res.status(200).json({
+        success: true,
+        message: \`Todo \${id} updated successfully\`,
+        data: todo
+      });
+    } catch (error) {
+      res.status(500).json({
+        success: false,
+        message: error.message
+      });
+    }
+  },
 
-export async function deleteTask(req, res, next) {
-  try {
-    const task = await Task.findOneAndDelete({ _id: req.params.id, owner: req.user._id });
-    if (!task) return res.status(404).json({ message: "Task not found" });
-    res.json({ message: "Task deleted" });
-  } catch (error) {
-    next(error);
+  // Delete Todo
+  deleteTodo: async (req, res) => {
+    try {
+      const { id } = req.params;
+      const todo = await Todo.findOneAndDelete({ _id: id, owner: req.user._id });
+      if (!todo) return res.status(404).json({ success: false, message: "Todo not found" });
+      res.status(200).json({
+        success: true,
+        message: \`Todo \${id} deleted successfully\`
+      });
+    } catch (error) {
+      res.status(500).json({
+        success: false,
+        message: error.message
+      });
+    }
   }
-}
+};
+
+export default todoController;
 `,
-    [`src/routes/auth.routes.${e}`]: `import { Router } from "express";
-import { login, logout, me, register } from "../controllers/auth.controller.js";
-import { protect } from "../middleware/auth.middleware.js";
+    [`src/routes/authRoute.${e}`]: `import { Router } from "express";
+import { login, logout, me, register } from "../controllers/authController.js";
+import { protect } from "../middleware/authMiddleware.js";
 
 const router = Router();
 
@@ -418,33 +462,34 @@ router.post("/logout", logout);
 
 export default router;
 `,
-    [`src/routes/index.routes.${e}`]: `import { Router } from "express";
-import authRoutes from "./auth.routes.js";
-import taskRoutes from "./task.routes.js";
+    [`src/routes/mainRoute.${e}`]: `import { Router } from "express";
+import authRoutes from "./authRoute.js";
+import todoRoutes from "./todoRoute.js";
 
 const router = Router();
 
 router.use("/auth", authRoutes);
-router.use("/tasks", taskRoutes);
+router.use("/todos", todoRoutes);
 
 export default router;
 `,
-    [`src/routes/task.routes.${e}`]: `import { Router } from "express";
-import { createTask, deleteTask, listTasks, updateTask } from "../controllers/task.controller.js";
-import { protect } from "../middleware/auth.middleware.js";
-${context.multer ? "import { upload } from \"../services/upload.service.js\";" : ""}
+    [`src/routes/todoRoute.${e}`]: `import { Router } from "express";
+import todoController from "../controllers/todoController.js";
+import { protect } from "../middleware/authMiddleware.js";
+${context.multer ? "import { upload } from \"../services/uploadService.js\";" : ""}
 
 const router = Router();
 
 router.use(protect);
-router.get("/", listTasks);
-router.post("/", ${context.multer ? "upload.single(\"image\"), " : ""}createTask);
-router.patch("/:id", ${context.multer ? "upload.single(\"image\"), " : ""}updateTask);
-router.delete("/:id", deleteTask);
+
+router.get("/", todoController.getTodos);
+router.post("/", ${context.multer ? "upload.single(\"image\"), " : ""}todoController.createTodo);
+router.put("/:id", ${context.multer ? "upload.single(\"image\"), " : ""}todoController.updateTodo);
+router.delete("/:id", todoController.deleteTodo);
 
 export default router;
 `,
-    [`src/services/upload.service.${e}`]: context.multer ? `import multer from "multer";
+    [`src/services/uploadService.${e}`]: context.multer ? `import multer from "multer";
 
 const storage = multer.diskStorage({
   destination: "uploads/",
@@ -456,7 +501,7 @@ const storage = multer.diskStorage({
 export const upload = multer({ storage });
 ` : `export {};
 `,
-    [`src/validations/auth.validation.${e}`]: `export const authValidation = {
+    [`src/validations/authValidation.${e}`]: `export const authValidation = {
   register: ["name", "email", "password"],
   login: ["email", "password"]
 };

package/src/generators/frontend.js

@@ -122,11 +122,11 @@ async function writeReactOverlay(context) {
   const src = path.join(context.frontendDir, "src");
   await fs.ensureDir(path.join(src, "components", "ui"));
   await fs.ensureDir(path.join(src, "features", "auth"));
-  await fs.ensureDir(path.join(src, "features", "tasks"));
+  await fs.ensureDir(path.join(src, "features", "todos"));
   await fs.ensureDir(path.join(src, "lib"));
   await fs.ensureDir(path.join(src, "pages"));
   await fs.ensureDir(path.join(src, "routes"));
-  await fs.ensureDir(path.join(src, "store"));
+  if (context.state !== "none") await fs.ensureDir(path.join(src, "store"));
 
   await writeTemplate(path.join(context.frontendDir, ".env"), "VITE_API_URL=http://localhost:5000/api\n");
   await relaxTypescriptConfig(context, "react");
@@ -145,6 +145,9 @@ export default defineConfig({
   }
 
   const files = reactTemplates(context, x);
+  if (context.state === "none") delete files[`store/auth.${x}`];
+  if (context.validation === "none") delete files[`lib/validation.${context.language === "typescript" ? "ts" : "js"}`];
+
   await Promise.all(Object.entries(files).map(([file, content]) => writeTemplate(path.join(src, file), content, context)));
   if (context.language === "typescript") {
     await writeTemplate(path.join(src, "vite-env.d.ts"), `/// <reference types="vite/client" />
@@ -160,14 +163,17 @@ async function writeNextOverlay(context) {
   await fs.ensureDir(path.join(src, "app", "register"));
   await fs.ensureDir(path.join(src, "components", "ui"));
   await fs.ensureDir(path.join(src, "features", "auth"));
-  await fs.ensureDir(path.join(src, "features", "tasks"));
+  await fs.ensureDir(path.join(src, "features", "todos"));
   await fs.ensureDir(path.join(src, "lib"));
-  await fs.ensureDir(path.join(src, "store"));
+  if (context.state !== "none") await fs.ensureDir(path.join(src, "store"));
 
   await removeNextGeneratedDuplicates(context, x);
   await writeTemplate(path.join(context.frontendDir, ".env.local"), "NEXT_PUBLIC_API_URL=http://localhost:5000/api\n");
   await relaxTypescriptConfig(context, "next");
   const files = nextTemplates(context, x);
+  if (context.state === "none") delete files[`store/auth.${x}`];
+  if (context.validation === "none") delete files[`lib/validation.${context.language === "typescript" ? "ts" : "js"}`];
+
   await Promise.all(Object.entries(files).map(([file, content]) => writeTemplate(path.join(src, file), content, context)));
 }
 
@@ -241,11 +247,11 @@ async function relaxTypescriptConfig(context, framework) {
 function commonTemplates(context, x) {
   const isTs = context.language === "typescript";
   const typeBlock = isTs ? `export type User = { id: string; name: string; email: string };
-export type Task = { _id: string; title: string; description?: string; imageUrl?: string; status: "todo" | "in-progress" | "done" };
+export type Todo = { _id: string; title: string; description?: string; imageUrl?: string; status: "todo" | "in-progress" | "done" };
 ` : "";
   const schema = context.validation === "none" || context.validation === "joi"
     ? `export const authSchema = null;
-export const taskSchema = null;
+export const todoSchema = null;
 `
     : context.validation === "zod"
     ? `import { z } from "zod";
@@ -256,7 +262,7 @@ export const authSchema = z.object({
   password: z.string().min(6)
 });
 
-export const taskSchema = z.object({
+export const todoSchema = z.object({
   title: z.string().min(2),
   description: z.string().optional(),
   status: z.enum(["todo", "in-progress", "done"]).default("todo")
@@ -270,7 +276,7 @@ export const authSchema = yup.object({
   password: yup.string().min(6).required()
 });
 
-export const taskSchema = yup.object({
+export const todoSchema = yup.object({
   title: yup.string().min(2).required(),
   description: yup.string(),
   status: yup.string().oneOf(["todo", "in-progress", "done"]).default("todo")
@@ -354,7 +360,7 @@ api.interceptors.request.use((config) => {
 `,
     [`lib/validation.${isTs ? "ts" : "js"}`]: schema,
     [`store/auth.${x}`]: authStore,
-    [`features/auth/auth.service.${isTs ? "ts" : "js"}`]: `import { api } from "../../lib/api";
+    [`features/auth/authService.${isTs ? "ts" : "js"}`]: `import { api } from "../../lib/api";
 
 export const authService = {
   register: (payload) => api.post("/auth/register", payload).then((res) => res.data),
@@ -363,13 +369,13 @@ export const authService = {
   logout: () => api.post("/auth/logout").then((res) => res.data)
 };
 `,
-    [`features/tasks/task.service.${isTs ? "ts" : "js"}`]: `import { api } from "../../lib/api";
+    [`features/todos/todoService.${isTs ? "ts" : "js"}`]: `import { api } from "../../lib/api";
 
-export const taskService = {
-  list: () => api.get("/tasks").then((res) => res.data.tasks),
-  create: (payload) => api.post("/tasks", payload, multipartConfig(payload)).then((res) => res.data.task),
-  update: (id, payload) => api.patch(\`/tasks/\${id}\`, payload, multipartConfig(payload)).then((res) => res.data.task),
-  remove: (id) => api.delete(\`/tasks/\${id}\`).then((res) => res.data)
+export const todoService = {
+  list: () => api.get("/todos").then((res) => res.data.data),
+  create: (payload) => api.post("/todos", payload, multipartConfig(payload)).then((res) => res.data.data),
+  update: (id, payload) => api.put(\`/todos/\${id}\`, payload, multipartConfig(payload)).then((res) => res.data.data),
+  remove: (id) => api.delete(\`/todos/\${id}\`).then((res) => res.data)
 };
 
 function multipartConfig(payload) {
@@ -457,13 +463,10 @@ export default function App() {
 }
 `}`,
     [`routes/ProtectedRoute.${x}`]: `import { Navigate } from "react-router-dom";
-${context.state === "zustand" ? "import { useAuthStore } from \"../store/auth\";" : ""}
-${context.state === "context-api" ? "import { useAuthContext } from \"../store/auth\";" : ""}
-${context.state === "redux-toolkit" ? "import { useSelector } from \"react-redux\";" : ""}
 
 export function ProtectedRoute({ children }) {
-  const token = ${context.state === "zustand" ? "useAuthStore((state) => state.token)" : context.state === "context-api" ? "useAuthContext()?.token" : context.state === "redux-toolkit" ? "useSelector((state) => state.auth.token)" : "localStorage.getItem(\"stackflow_token\")"};
-  return token ? children : <Navigate to="/login" replace />;
+  const isAuthenticated = Boolean(localStorage.getItem("stackflow_token"));
+  return isAuthenticated ? children : <Navigate to="/login" replace />;
 }
 `,
     [`pages/Login.${x}`]: authPage("login", context),
@@ -530,12 +533,20 @@ ${navImport}
 import { toast } from "sonner";
 import { Button } from "${next ? "../../components/ui/button" : "../components/ui/button"}";
 import { Input } from "${next ? "../../components/ui/input" : "../components/ui/input"}";
-import { authService } from "${next ? "../../features/auth/auth.service" : "../features/auth/auth.service"}";
+import { authService } from "${next ? "../../features/auth/authService" : "../features/auth/authService"}";
 ${context.state === "zustand" ? `import { useAuthStore } from "${next ? "../../store/auth" : "../store/auth"}";` : ""}
+${context.state === "context-api" ? `import { useAuthContext } from "${next ? "../../store/auth" : "../store/auth"}";` : ""}
+${context.state === "redux-toolkit" ? `import { useDispatch } from "react-redux";\nimport { setSession as setReduxSession } from "${next ? "../../store/auth" : "../store/auth"}";` : ""}
 
 export function ${isRegister ? "Register" : "Login"}() {
   ${navHook}
-  const setSession = ${context.state === "zustand" ? "useAuthStore((state) => state.setSession)" : "({ user, token }) => localStorage.setItem(\"stackflow_token\", token)"};
+  ${context.state === "redux-toolkit" ? "const dispatch = useDispatch();" : ""}
+  const setSession = ${
+    context.state === "zustand" ? "useAuthStore((state) => state.setSession)" : 
+    context.state === "context-api" ? "useAuthContext().setSession" :
+    context.state === "redux-toolkit" ? "(data) => dispatch(setReduxSession(data))" :
+    "({ user, token }) => localStorage.setItem(\"stackflow_token\", token)"
+  };
   const [loading, setLoading] = useState(false);
   const [form, setForm] = useState({ name: "", email: "", password: "" });
 
@@ -583,15 +594,23 @@ import { Edit3, ImagePlus, LogOut, Moon, Plus, Save, Sun, Trash2, X } from "luci
 import { toast } from "sonner";
 import { Button } from "${next ? "../../components/ui/button" : "../components/ui/button"}";
 import { Input } from "${next ? "../../components/ui/input" : "../components/ui/input"}";
-import { taskService } from "${next ? "../../features/tasks/task.service" : "../features/tasks/task.service"}";
+import { todoService } from "${next ? "../../features/todos/todoService" : "../features/todos/todoService"}";
 ${context.state === "zustand" ? `import { useAuthStore } from "${next ? "../../store/auth" : "../store/auth"}";` : ""}
+${context.state === "context-api" ? `import { useAuthContext } from "${next ? "../../store/auth" : "../store/auth"}";` : ""}
+${context.state === "redux-toolkit" ? `import { useDispatch } from "react-redux";\nimport { logout as reduxLogout } from "${next ? "../../store/auth" : "../store/auth"}";` : ""}
 
 ${componentName} {
   const ${next ? "router" : "navigate"} = ${next ? "useRouter()" : "useNavigate()"};
-  const logoutStore = ${context.state === "zustand" ? "useAuthStore((state) => state.logout)" : "() => localStorage.removeItem(\"stackflow_token\")"};
+  ${context.state === "redux-toolkit" ? "const dispatch = useDispatch();" : ""}
+  const logoutStore = ${
+    context.state === "zustand" ? "useAuthStore((state) => state.logout)" :
+    context.state === "context-api" ? "useAuthContext().logout" :
+    context.state === "redux-toolkit" ? "() => dispatch(reduxLogout())" :
+    "() => localStorage.removeItem(\"stackflow_token\")"
+  };
   const [dark, setDark] = useState(() => typeof window !== "undefined" && localStorage.getItem("stackflow_theme") === "dark");
   const [loading, setLoading] = useState(true);
-  const [tasks, setTasks] = useState([]);
+  const [todos, setTodos] = useState([]);
   const [form, setForm] = useState({ title: "", description: "", status: "todo", image: null });
   const [editingId, setEditingId] = useState(null);
 
@@ -601,30 +620,30 @@ ${componentName} {
   }, [dark]);
 
   useEffect(() => {
-    taskService.list()
-      .then(setTasks)
-      .catch(() => toast.error("Could not load tasks"))
+    todoService.list()
+      .then(setTodos)
+      .catch(() => toast.error("Could not load todos"))
       .finally(() => setLoading(false));
   }, []);
 
-  async function createTask(event) {
+  async function createTodo(event) {
     event.preventDefault();
     if (!form.title.trim()) return;
     const payload = toPayload(form);
     const saved = editingId
-      ? await taskService.update(editingId, payload)
-      : await taskService.create(payload);
-    setTasks(editingId ? tasks.map((task) => task._id === editingId ? saved : task) : [saved, ...tasks]);
+      ? await todoService.update(editingId, payload)
+      : await todoService.create(payload);
+    setTodos(editingId ? todos.map((todo) => todo._id === editingId ? saved : todo) : [saved, ...todos]);
     resetForm();
-    toast.success(editingId ? "Task updated" : "Task created");
+    toast.success(editingId ? "Todo updated" : "Todo created");
   }
 
-  function startEdit(task) {
-    setEditingId(task._id);
+  function startEdit(todo) {
+    setEditingId(todo._id);
     setForm({
-      title: task.title || "",
-      description: task.description || "",
-      status: task.status || "todo",
+      title: todo.title || "",
+      description: todo.description || "",
+      status: todo.status || "todo",
       image: null
     });
   }
@@ -634,10 +653,10 @@ ${componentName} {
     setForm({ title: "", description: "", status: "todo", image: null });
   }
 
-  async function removeTask(id) {
-    await taskService.remove(id);
-    setTasks(tasks.filter((task) => task._id !== id));
-    toast.success("Task deleted");
+  async function removeTodo(id) {
+    await todoService.remove(id);
+    setTodos(todos.filter((todo) => todo._id !== id));
+    toast.success("Todo deleted");
   }
 
   function logout() {
@@ -675,37 +694,37 @@ ${componentName} {
       <section className="mx-auto grid max-w-6xl gap-6 px-4 py-8 md:grid-cols-[1fr_320px]">
         <div className="rounded-lg border border-slate-200 bg-white p-5 dark:border-slate-800 dark:bg-slate-900">
           <div className="mb-4 flex items-center justify-between">
-            <h2 className="text-lg font-semibold">Tasks</h2>
-            <span className="text-sm text-slate-500">{tasks.length} total</span>
+            <h2 className="text-lg font-semibold">Todos</h2>
+            <span className="text-sm text-slate-500">{todos.length} total</span>
           </div>
-          {loading ? <p className="text-sm text-slate-500">Loading tasks...</p> : (
+          {loading ? <p className="text-sm text-slate-500">Loading todos...</p> : (
             <div className="space-y-3">
-              {tasks.map((task) => (
-                <div key={task._id} className="grid gap-3 rounded-md border border-slate-200 p-3 dark:border-slate-800 sm:grid-cols-[96px_1fr_auto]">
+              {todos.map((todo) => (
+                <div key={todo._id} className="grid gap-3 rounded-md border border-slate-200 p-3 dark:border-slate-800 sm:grid-cols-[96px_1fr_auto]">
                   <div className="h-24 overflow-hidden rounded-md bg-slate-100 dark:bg-slate-800">
-                    {task.imageUrl ? <img className="h-full w-full object-cover" src={\`http://localhost:5000\${task.imageUrl}\`} alt={task.title} /> : <div className="grid h-full place-items-center text-slate-400"><ImagePlus size={20} /></div>}
+                    {todo.imageUrl ? <img className="h-full w-full object-cover" src={\`http://localhost:5000\${todo.imageUrl}\`} alt={todo.title} /> : <div className="grid h-full place-items-center text-slate-400"><ImagePlus size={20} /></div>}
                   </div>
                   <div>
-                    <p className="font-medium">{task.title}</p>
-                    <p className="mt-1 text-sm text-slate-500">{task.description || "No description"}</p>
-                    <p className="mt-2 text-xs uppercase tracking-wide text-slate-500">{task.status}</p>
+                    <p className="font-medium">{todo.title}</p>
+                    <p className="mt-1 text-sm text-slate-500">{todo.description || "No description"}</p>
+                    <p className="mt-2 text-xs uppercase tracking-wide text-slate-500">{todo.status}</p>
                   </div>
                   <div className="flex items-start gap-2">
-                    <Button variant="ghost" onClick={() => startEdit(task)} aria-label="Edit task"><Edit3 size={16} /></Button>
-                    <Button variant="ghost" onClick={() => removeTask(task._id)} aria-label="Delete task"><Trash2 size={16} /></Button>
+                    <Button variant="ghost" onClick={() => startEdit(todo)} aria-label="Edit todo"><Edit3 size={16} /></Button>
+                    <Button variant="ghost" onClick={() => removeTodo(todo._id)} aria-label="Delete todo"><Trash2 size={16} /></Button>
                   </div>
                 </div>
               ))}
-              {!tasks.length && <p className="text-sm text-slate-500">No tasks yet.</p>}
+              {!todos.length && <p className="text-sm text-slate-500">No todos yet.</p>}
             </div>
           )}
         </div>
-        <form onSubmit={createTask} className="h-fit space-y-3 rounded-lg border border-slate-200 bg-white p-5 dark:border-slate-800 dark:bg-slate-900">
+        <form onSubmit={createTodo} className="h-fit space-y-3 rounded-lg border border-slate-200 bg-white p-5 dark:border-slate-800 dark:bg-slate-900">
           <div className="flex items-center justify-between">
-            <h2 className="text-lg font-semibold">{editingId ? "Edit task" : "Create task"}</h2>
+            <h2 className="text-lg font-semibold">{editingId ? "Edit todo" : "Create todo"}</h2>
             {editingId && <Button type="button" variant="ghost" onClick={resetForm} aria-label="Cancel edit"><X size={18} /></Button>}
           </div>
-          <Input value={form.title} onChange={(event) => setForm({ ...form, title: event.target.value })} placeholder="Task title" />
+          <Input value={form.title} onChange={(event) => setForm({ ...form, title: event.target.value })} placeholder="Todo title" />
           <Input value={form.description} onChange={(event) => setForm({ ...form, description: event.target.value })} placeholder="Description" />
           <select className="h-10 w-full rounded-md border border-slate-300 bg-white px-3 text-sm dark:border-slate-700 dark:bg-slate-900" value={form.status} onChange={(event) => setForm({ ...form, status: event.target.value })}>
             <option value="todo">Todo</option>
@@ -713,7 +732,7 @@ ${componentName} {
             <option value="done">Done</option>
           </select>
           ${context.multer ? `<Input type="file" accept="image/*" onChange={(event) => setForm({ ...form, image: event.target.files?.[0] || null })} />` : ""}
-          <Button className="w-full" aria-label={editingId ? "Save task" : "Add task"}>{editingId ? <Save size={18} /> : <Plus size={18} />}<span className="ml-2">{editingId ? "Save changes" : "Add task"}</span></Button>
+          <Button className="w-full" aria-label={editingId ? "Save todo" : "Add todo"}>{editingId ? <Save size={18} /> : <Plus size={18} />}<span className="ml-2">{editingId ? "Save changes" : "Add todo"}</span></Button>
         </form>
       </section>
     </main>