refactor: Implement feature-sliced architecture for workflows, centralize application constants, and enhance developer setup script.

Author: googleknight

backend/jest.config.js

@@ -1,12 +1,10 @@
 module.exports = {
   testEnvironment: "node",
-  setupFilesAfterEnv: ["<rootDir>/src/tests/setup.ts"],
   transform: {
     "^.+\\.(t|j)sx?$": ["@swc/jest"],
   },
   moduleNameMapper: {
     "^@/(.*)$": "<rootDir>/src/$1",
-    "^@/(.*)$": "<rootDir>/src/$1",
   },
   testMatch: ["**/*.test.ts"],
   verbose: true,

backend/src/tests/setup.ts

@@ -1,4 +1,44 @@
 #!/bin/bash
+
+# Function to handle initialization
+init() {
+  echo "🚀 Initializing development environment..."
+  
+  # Copy .env files if they don't exist
+  if [ -f "backend/.env.example" ]; then
+    if [ ! -f "backend/.env" ]; then
+      echo "📝 Creating backend/.env from .env.example..."
+      cp backend/.env.example backend/.env
+    else
+      echo "ℹ️  backend/.env already exists, skipping copy."
+    fi
+  fi
+
+  if [ -f "frontend/.env.example" ]; then
+    if [ ! -f "frontend/.env" ]; then
+      echo "📝 Creating frontend/.env from .env.example..."
+      cp frontend/.env.example frontend/.env
+    else
+      echo "ℹ️  frontend/.env already exists, skipping copy."
+    fi
+  fi
+
+  # Install dependencies
+  echo "📦 Installing backend dependencies..."
+  (cd backend && npm install)
+
+  echo "📦 Installing frontend dependencies..."
+  (cd frontend && npm install)
+
+  echo "✅ Initialization complete!"
+}
+
+# Check for --init flag
+if [[ "$1" == "--init" ]]; then
+  init
+  exit 0
+fi
+
 echo "Starting local development..."
 
 if ! docker info > /dev/null 2>&1; then
@@ -13,3 +53,4 @@ fi
 (cd backend && npm run dev) &
 (cd frontend && npm run dev) &
 wait
+

dev.sh

@@ -10,7 +10,12 @@ const config = {
   moduleNameMapper: {
     "^@/(.*)$": "<rootDir>/src/$1",
   },
-  testMatch: ["**/__tests__/**/*.test.tsx", "**/__tests__/**/*.test.ts"],
+  testMatch: [
+    "**/__tests__/**/*.test.tsx",
+    "**/__tests__/**/*.test.ts",
+    "**/*.test.tsx",
+    "**/*.test.ts",
+  ],
 };
 
 module.exports = createJestConfig(config);

frontend/jest.config.js

@@ -1,14 +1,15 @@
 "use client";
 
 import { useState } from "react";
-import WorkflowList from "@/components/WorkflowList";
-import WorkflowEditor from "@/components/WorkflowEditor";
+import WorkflowList from "@/features/workflows/components/WorkflowList";
+import WorkflowEditor from "@/features/workflows/components/WorkflowEditor";
 import ThemeToggle from "@/components/ThemeToggle";
 import { Plus, CircuitBoard } from "lucide-react";
 import styles from "./page.module.css";
-import { Workflow } from "@/lib/types";
-import { fetchWorkflow } from "@/lib/api";
+import { Workflow } from "@/features/workflows/types";
+import { fetchWorkflow } from "@/features/workflows/api";
 import { handleError } from "@/lib/error-handler";
+import { MESSAGES, LABELS } from "@/lib/constants";
 
 export default function Home() {
   const [isEditorOpen, setIsEditorOpen] = useState(false);
@@ -25,7 +26,7 @@ export default function Home() {
       setEditingWorkflow(workflow);
       setIsEditorOpen(true);
     } catch (error) {
-      handleError(error, "Failed to load workflow for editing");
+      handleError(error, MESSAGES.LOAD_FOR_EDIT_ERROR);
     }
   };
 
@@ -38,25 +39,34 @@ export default function Home() {
     <main className={styles.main}>
       <header className={styles.header}>
         <div className={styles.logo}>
-          <CircuitBoard size={24} color="var(--primary)" />
-          <h1>WorkFlowEngine</h1>
+          <CircuitBoard size={24} color="var(--primary)" aria-hidden="true" />
+          <h1>{LABELS.APP_NAME}</h1>
         </div>
         <div className={styles.headerActions}>
           <ThemeToggle />
         </div>
       </header>
 
       <div className={styles.content}>
-        <div className={styles.pageHeader}>
+        <section
+          className={styles.pageHeader}
+          aria-labelledby="workflows-title"
+        >
           <div>
-            <h2 className={styles.pageTitle}>Workflows</h2>
-            <p className={styles.pageSubtitle}>Manage your automation tasks.</p>
+            <h2 id="workflows-title" className={styles.pageTitle}>
+              {LABELS.WORKFLOWS}
+            </h2>
+            <p className={styles.pageSubtitle}>{LABELS.MANAGE_TASKS}</p>
           </div>
-          <button onClick={handleCreate} className={styles.createBtn}>
-            <Plus size={18} />
-            Create Workflow
+          <button
+            onClick={handleCreate}
+            className={styles.createBtn}
+            aria-label={LABELS.CREATE_WORKFLOW}
+          >
+            <Plus size={18} aria-hidden="true" />
+            {LABELS.CREATE_WORKFLOW}
           </button>
-        </div>
+        </section>
 
         <WorkflowList onEdit={handleEdit} />
       </div>

frontend/src/app/page.tsx

@@ -3,6 +3,7 @@
 import { useTheme } from "@/providers/ThemeProvider";
 import { Sun, Moon } from "lucide-react";
 import styles from "./ThemeToggle.module.css";
+import { LABELS } from "@/lib/constants";
 
 export default function ThemeToggle() {
   const { theme, toggleTheme } = useTheme();
@@ -11,7 +12,7 @@ export default function ThemeToggle() {
     <button
       onClick={toggleTheme}
       className={styles.toggle}
-      aria-label="Toggle theme"
+      aria-label={LABELS.TOGGLE_THEME}
     >
       {theme === "light" ? <Moon size={20} /> : <Sun size={20} />}
     </button>