create-stackflow 1.0.4 → 1.0.7

package/src/generators/frontend.js

@@ -3,6 +3,7 @@ import fs from "fs-extra";
 import ora from "ora";
 import { execa } from "execa";
 import { jsxExt, writeTemplate } from "../utils/template.js";
+import { chatFrontendFiles, chatNextPages } from "./chat.js";
 
 export async function createFrontend(context) {
   await scaffoldOfficialFrontend(context);
@@ -43,30 +44,6 @@ async function scaffoldOfficialFrontend(context) {
 
 async function installFrontendDependencies(context) {
   await updateFrontendPackage(context);
-  if (context.skipInstall) return;
-  const spinner = ora("Installing frontend dependencies").start();
-  try {
-    const deps = [
-      "axios@latest",
-      "sonner@latest",
-      "lucide-react@latest",
-      "clsx@latest",
-      "tailwind-merge@latest"
-    ];
-    if (context.frontend === "react" && context.router) deps.push("react-router-dom@latest");
-    if (context.state === "zustand") deps.push("zustand@latest");
-    if (context.state === "redux-toolkit") deps.push("@reduxjs/toolkit@latest", "react-redux@latest");
-    if (context.form && context.form !== "none") deps.push("react-hook-form@latest", "@hookform/resolvers@latest");
-    if (context.validation === "zod") deps.push("zod@latest");
-    if (context.validation === "yup") deps.push("yup@latest");
-    if (context.tailwind && context.frontend === "react") deps.push("tailwindcss@latest", "@tailwindcss/vite@latest");
-
-    await execa("npm", ["install", ...deps], { cwd: context.frontendDir, stdio: "ignore" });
-    spinner.succeed("Installing frontend dependencies");
-  } catch (error) {
-    spinner.fail("Installing frontend dependencies");
-    throw error;
-  }
 }
 
 async function updateFrontendPackage(context) {
@@ -85,6 +62,7 @@ async function updateFrontendPackage(context) {
   if (context.frontend === "react" && context.router) deps.push("react-router-dom");
   if (context.state === "zustand") deps.push("zustand");
   if (context.state === "redux-toolkit") deps.push("@reduxjs/toolkit", "react-redux");
+  if (context.socketio) deps.push("socket.io-client");
   if (context.form && context.form !== "none") deps.push("react-hook-form", "@hookform/resolvers");
   if (context.validation === "zod") deps.push("zod");
   if (context.validation === "yup") deps.push("yup");
@@ -95,8 +73,21 @@ async function updateFrontendPackage(context) {
     pkg.devDependencies["@tailwindcss/vite"] = "latest";
   }
 
+  const backendName = path.basename(context.backendDir);
+  pkg.devDependencies = pkg.devDependencies || {};
+  pkg.devDependencies.concurrently = "latest";
+
   if (context.frontend === "react") {
-    pkg.scripts = { ...(pkg.scripts || {}), build: "vite build" };
+    pkg.scripts = {
+      ...(pkg.scripts || {}),
+      build: "vite build",
+      dev: `concurrently -n backend,frontend -c blue,green "npm run dev --prefix ../${backendName}" "vite"`,
+    };
+  } else {
+    pkg.scripts = {
+      ...(pkg.scripts || {}),
+      dev: `concurrently -n backend,frontend -c blue,green "npm run dev --prefix ../${backendName}" "next dev"`,
+    };
   }
 
   await fs.writeJson(packageFile, pkg, { spaces: 2 });
@@ -122,13 +113,21 @@ 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"));
+  if (context.socketio) await fs.ensureDir(path.join(src, "features", "chat"));
   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 === "redux-toolkit") {
+    await fs.ensureDir(path.join(src, "redux", "slices"));
+  } else 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 writeTemplate(
+    path.join(context.frontendDir, ".env"),
+    `VITE_API_URL=http://localhost:5000/api\n${context.socketio ? "VITE_SOCKET_URL=http://localhost:5000\n" : ""}`,
+  );
   await relaxTypescriptConfig(context, "react");
   if (context.tailwind) {
     await writeTemplate(path.join(context.frontendDir, "vite.config." + (context.language === "typescript" ? "ts" : "js")), `import { defineConfig } from "vite";
@@ -145,6 +144,8 @@ export default defineConfig({
   }
 
   const files = reactTemplates(context, x);
+  pruneUnusedFrontendFiles(files, context);
+
   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,17 +161,59 @@ 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"));
+  if (context.socketio) await fs.ensureDir(path.join(src, "features", "chat"));
   await fs.ensureDir(path.join(src, "lib"));
-  await fs.ensureDir(path.join(src, "store"));
+  if (context.state === "redux-toolkit") {
+    await fs.ensureDir(path.join(src, "redux", "slices"));
+  } else 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 writeTemplate(
+    path.join(context.frontendDir, ".env.local"),
+    `NEXT_PUBLIC_API_URL=http://localhost:5000/api\n${context.socketio ? "NEXT_PUBLIC_SOCKET_URL=http://localhost:5000\n" : ""}`,
+  );
   await relaxTypescriptConfig(context, "next");
   const files = nextTemplates(context, x);
+  pruneUnusedFrontendFiles(files, context);
+
   await Promise.all(Object.entries(files).map(([file, content]) => writeTemplate(path.join(src, file), content, context)));
 }
 
+function pruneUnusedFrontendFiles(files, context) {
+  const x = jsxExt(context);
+  const isTs = context.language === "typescript";
+
+  if (context.state === "none") {
+    delete files[`store/auth.${x}`];
+    delete files[`redux/store.${isTs ? "ts" : "js"}`];
+    delete files[`redux/slices/authSlice.${isTs ? "ts" : "js"}`];
+    delete files[`redux/slices/todoSlices.${isTs ? "ts" : "js"}`];
+  } else if (context.state === "redux-toolkit") {
+    delete files[`store/auth.${x}`];
+  } else {
+    delete files[`redux/store.${isTs ? "ts" : "js"}`];
+    delete files[`redux/slices/authSlice.${isTs ? "ts" : "js"}`];
+    delete files[`redux/slices/todoSlices.${isTs ? "ts" : "js"}`];
+  }
+
+  if (!isTs) delete files["lib/types.js"];
+  if (context.validation === "none") {
+    delete files[`lib/validation.${isTs ? "ts" : "js"}`];
+  }
+
+  if (!context.socketio) {
+    delete files[`lib/socket.${isTs ? "ts" : "js"}`];
+    delete files[`features/chat/chatService.${isTs ? "ts" : "js"}`];
+    delete files[`pages/Chat.${x}`];
+    for (const key of Object.keys(files)) {
+      if (key.startsWith("app/chat/")) delete files[key];
+    }
+  }
+}
+
 async function removeNextGeneratedDuplicates(context, x) {
   const appDir = path.join(context.frontendDir, "src", "app");
   const generated = ["js", "jsx", "ts", "tsx"].filter((candidate) => candidate !== x);
@@ -241,11 +284,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"
+  const schema = context.validation === "none"
     ? `export const authSchema = null;
-export const taskSchema = null;
+export const todoSchema = null;
 `
     : context.validation === "zod"
     ? `import { z } from "zod";
@@ -256,7 +299,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 +313,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")
@@ -295,7 +338,43 @@ export const useAuthStore = create((set) => ({
 }));
 `
     : context.state === "redux-toolkit"
-      ? `import { configureStore, createSlice } from "@reduxjs/toolkit";
+      ? ""
+      : `import { createContext, useContext, useState } from "react";
+
+const AuthContext = createContext(null);
+
+export function AuthProvider({ children }) {
+  const [session, setSessionState] = useState({ user: null, token: typeof window !== "undefined" ? localStorage.getItem("stackflow_token") : null });
+  const setSession = ({ user, token }) => {
+    if (token && typeof window !== "undefined") localStorage.setItem("stackflow_token", token);
+    setSessionState({ user, token });
+  };
+  const logout = () => {
+    if (typeof window !== "undefined") localStorage.removeItem("stackflow_token");
+    setSessionState({ user: null, token: null });
+  };
+  return <AuthContext.Provider value={{ ...session, setSession, logout }}>{children}</AuthContext.Provider>;
+}
+
+export const useAuthContext = () => useContext(AuthContext);
+`;
+
+  const reduxExt = isTs ? "ts" : "js";
+  const reduxFiles =
+    context.state === "redux-toolkit"
+      ? {
+          [`redux/store.${reduxExt}`]: `import { configureStore } from "@reduxjs/toolkit";
+import authReducer from "./slices/authSlice";
+import todoReducer from "./slices/todoSlices";
+
+export const store = configureStore({
+  reducer: {
+    auth: authReducer,
+    todos: todoReducer
+  }
+});
+`,
+          [`redux/slices/authSlice.${reduxExt}`]: `import { createSlice } from "@reduxjs/toolkit";
 
 const authSlice = createSlice({
   name: "auth",
@@ -315,35 +394,44 @@ const authSlice = createSlice({
 });
 
 export const { setSession, logout } = authSlice.actions;
-export const store = configureStore({ reducer: { auth: authSlice.reducer } });
-`
-      : `import { createContext, useContext, useState } from "react";
-
-const AuthContext = createContext(null);
+export default authSlice.reducer;
+`,
+          [`redux/slices/todoSlices.${reduxExt}`]: `import { createSlice } from "@reduxjs/toolkit";
 
-export function AuthProvider({ children }) {
-  const [session, setSessionState] = useState({ user: null, token: typeof window !== "undefined" ? localStorage.getItem("stackflow_token") : null });
-  const setSession = ({ user, token }) => {
-    if (token && typeof window !== "undefined") localStorage.setItem("stackflow_token", token);
-    setSessionState({ user, token });
-  };
-  const logout = () => {
-    if (typeof window !== "undefined") localStorage.removeItem("stackflow_token");
-    setSessionState({ user: null, token: null });
-  };
-  return <AuthContext.Provider value={{ ...session, setSession, logout }}>{children}</AuthContext.Provider>;
-}
+const todoSlices = createSlice({
+  name: "todos",
+  initialState: { items: [] },
+  reducers: {
+    setTodos: (state, action) => {
+      state.items = action.payload;
+    },
+    addTodo: (state, action) => {
+      state.items.unshift(action.payload);
+    },
+    updateTodo: (state, action) => {
+      const index = state.items.findIndex((todo) => todo._id === action.payload._id);
+      if (index !== -1) state.items[index] = action.payload;
+    },
+    removeTodo: (state, action) => {
+      state.items = state.items.filter((todo) => todo._id !== action.payload);
+    }
+  }
+});
 
-export const useAuthContext = () => useContext(AuthContext);
-`;
+export const { setTodos, addTodo, updateTodo, removeTodo } = todoSlices.actions;
+export default todoSlices.reducer;
+`,
+        }
+      : {};
 
   return {
-    [`lib/types.${isTs ? "ts" : "js"}`]: typeBlock || "export {};\n",
+    ...(isTs ? { "lib/types.ts": typeBlock } : {}),
+    ...reduxFiles,
+    ...chatFrontendFiles(context, x),
     [`lib/api.${isTs ? "ts" : "js"}`]: `import axios from "axios";
 
 export const api = axios.create({
-  baseURL: ${context.frontend === "next" ? "process.env.NEXT_PUBLIC_API_URL" : "import.meta.env.VITE_API_URL"} || "http://localhost:5000/api",
-  withCredentials: true
+  baseURL: ${context.frontend === "next" ? "process.env.NEXT_PUBLIC_API_URL" : "import.meta.env.VITE_API_URL"} || "http://localhost:5000/api"
 });
 
 api.interceptors.request.use((config) => {
@@ -352,24 +440,26 @@ api.interceptors.request.use((config) => {
   return config;
 });
 `,
-    [`lib/validation.${isTs ? "ts" : "js"}`]: schema,
-    [`store/auth.${x}`]: authStore,
-    [`features/auth/auth.service.${isTs ? "ts" : "js"}`]: `import { api } from "../../lib/api";
+    ...(context.validation !== "none" ? { [`lib/validation.${isTs ? "ts" : "js"}`]: schema } : {}),
+    ...(context.state !== "none" && context.state !== "redux-toolkit"
+      ? { [`store/auth.${x}`]: authStore }
+      : {}),
+    [`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),
-  login: (payload) => api.post("/auth/login", payload).then((res) => res.data),
-  me: () => api.get("/auth/me").then((res) => res.data),
+  register: (payload) => api.post("/auth/register", payload).then((res) => res.data.data),
+  login: (payload) => api.post("/auth/login", payload).then((res) => res.data.data),
+  me: () => api.get("/auth/me").then((res) => res.data.data),
   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) {
@@ -415,7 +505,7 @@ body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, B
     [`main.${x}`]: `import React from "react";
 import ReactDOM from "react-dom/client";
 ${context.router ? "import { BrowserRouter } from \"react-router-dom\";" : ""}
-${context.state === "redux-toolkit" ? "import { Provider } from \"react-redux\";\nimport { store } from \"./store/auth\";" : ""}
+${context.state === "redux-toolkit" ? "import { Provider } from \"react-redux\";\nimport { store } from \"./redux/store\";" : ""}
 ${context.state === "context-api" ? "import { AuthProvider } from \"./store/auth\";" : ""}
 import { Toaster } from "sonner";
 import App from "./App";
@@ -439,14 +529,17 @@ import { Dashboard } from "./pages/Dashboard";
 import { Login } from "./pages/Login";
 import { Register } from "./pages/Register";
 import { ProtectedRoute } from "./routes/ProtectedRoute";
+${context.socketio ? 'import { Chat } from "./pages/Chat";' : ""}
 
 export default function App() {
   return (
     <Routes>
-      <Route path="/" element={<Navigate to="/dashboard" replace />} />
+      <Route path="/" element={<Navigate to="${context.socketio ? "/chat" : "/dashboard"}" replace />} />
       <Route path="/login" element={<Login />} />
       <Route path="/register" element={<Register />} />
       <Route path="/dashboard" element={<ProtectedRoute><Dashboard /></ProtectedRoute>} />
+      ${context.socketio ? `<Route path="/chat" element={<ProtectedRoute><Chat /></ProtectedRoute>} />
+      <Route path="/chat/:conversationId" element={<ProtectedRoute><Chat /></ProtectedRoute>} />` : ""}
     </Routes>
   );
 }
@@ -457,13 +550,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),
@@ -475,6 +565,7 @@ export function ProtectedRoute({ children }) {
 function nextTemplates(context, x) {
   return {
     ...commonTemplates(context, x),
+    ...chatNextPages(context, x),
     "app/globals.css": `@import "tailwindcss";
 @custom-variant dark (&:where(.dark, .dark *));
 
@@ -499,7 +590,7 @@ export default function RootLayout({ children }) {
     [`app/page.${x}`]: `import { redirect } from "next/navigation";
 
 export default function Home() {
-  redirect("/dashboard");
+  redirect("${context.socketio ? "/chat" : "/dashboard"}");
 }
 `,
     [`app/login/page.${x}`]: `"use client";
@@ -521,7 +612,9 @@ function authPage(mode, context, next = false) {
   const isRegister = mode === "register";
   const navImport = next ? "import { useRouter } from \"next/navigation\";" : "import { Link, useNavigate } from \"react-router-dom\";";
   const navHook = next ? "const router = useRouter();" : "const navigate = useNavigate();";
-  const redirect = next ? "router.push(\"/dashboard\");" : "navigate(\"/dashboard\");";
+  const redirect = next
+    ? `router.push("${context.socketio ? "/chat" : "/dashboard"}");`
+    : `navigate("${context.socketio ? "/chat" : "/dashboard"}");`;
   const link = next
     ? `<button className="text-sm text-cyan-700" onClick={() => router.push("${isRegister ? "/login" : "/register"}")}>${isRegister ? "Sign in" : "Create account"}</button>`
     : `<Link className="text-sm text-cyan-700" to="${isRegister ? "/login" : "/register"}">${isRegister ? "Sign in" : "Create account"}</Link>`;
@@ -530,12 +623,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 ? "../../redux/slices/authSlice" : "../redux/slices/authSlice"}";` : ""}
 
 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 +684,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 ? "../../redux/slices/authSlice" : "../redux/slices/authSlice"}";` : ""}
 
 ${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 +710,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 +743,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 +784,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 +822,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>