@pukujan/create-modular-monolith 2.0.0

package/template/frontend/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "modular-monolith-starter-frontend",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test": "node --test 'src/modules/**/tests/**/*.test.js'"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.30.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.1",
+    "vite": "^5.4.10"
+  }
+}

package/template/frontend/src/core/App.jsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { BrowserRouter, NavLink, Navigate, Route, Routes } from "react-router-dom";
+import { moduleRoutes, EmptyModulePage, MissingPage } from "./moduleRegistry.jsx";
+
+export function App() {
+  return (
+    <BrowserRouter>
+      <nav className="nav">
+        <strong>Modular Litigation Starter</strong>
+        <span className="badge">{moduleRoutes.length} modules</span>
+        {moduleRoutes.map((entry) => (
+          <NavLink key={entry.route} to={entry.route}>
+            {entry.label}
+          </NavLink>
+        ))}
+      </nav>
+
+      <main className="container">
+        <Routes>
+          {moduleRoutes.length > 0 ? (
+            <Route path="/" element={<Navigate to={moduleRoutes[0].route} replace />} />
+          ) : (
+            <Route path="/" element={<EmptyModulePage />} />
+          )}
+
+          {moduleRoutes.map((entry) => (
+            <Route key={entry.route} path={entry.route} element={<entry.Component />} />
+          ))}
+
+          <Route path="*" element={<MissingPage />} />
+        </Routes>
+      </main>
+    </BrowserRouter>
+  );
+}

package/template/frontend/src/core/moduleRegistry.jsx

@@ -0,0 +1,39 @@
+import React from "react";
+
+const files = import.meta.glob("../modules/*/index.jsx", { eager: true });
+
+function toRecord(mod) {
+  const value = mod?.default || mod;
+  if (!value || !value.route || !value.label || !value.Component) return null;
+  return {
+    route: value.route,
+    label: value.label,
+    Component: value.Component
+  };
+}
+
+export const moduleRoutes = Object.entries(files)
+  .filter(([path]) => !/\/modules\/_/.test(path))
+  .map(([, mod]) => toRecord(mod))
+  .filter(Boolean)
+  .sort((a, b) => a.label.localeCompare(b.label));
+
+export function EmptyModulePage() {
+  return (
+    <div className="card">
+      <h2>No modules yet</h2>
+      <p className="muted">
+        Add a module with: <strong>node scripts/new-module.mjs my-module --label "My Module"</strong>
+      </p>
+    </div>
+  );
+}
+
+export function MissingPage() {
+  return (
+    <div className="card">
+      <h2>Not Found</h2>
+      <p className="muted">This route is not registered by any module.</p>
+    </div>
+  );
+}

package/template/frontend/src/index.css

@@ -0,0 +1,53 @@
+:root {
+  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  background: #0b1020;
+  color: #f5f7ff;
+}
+
+a {
+  color: inherit;
+}
+
+.container {
+  max-width: 1080px;
+  margin: 0 auto;
+  padding: 24px;
+}
+
+.nav {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  align-items: center;
+  padding: 16px 24px;
+  border-bottom: 1px solid #1f2b4a;
+  background: #121a31;
+}
+
+.badge {
+  font-size: 12px;
+  padding: 4px 8px;
+  border: 1px solid #3657a7;
+  border-radius: 999px;
+  color: #a8c1ff;
+}
+
+.card {
+  border: 1px solid #233257;
+  background: #121a31;
+  border-radius: 10px;
+  padding: 16px;
+  margin-top: 16px;
+}
+
+.muted {
+  color: #a8b4d8;
+}

package/template/frontend/src/main.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { App } from "./core/App.jsx";
+import "./index.css";
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

package/template/frontend/src/modules/_reference/README.md

@@ -0,0 +1,3 @@
+# Reference (example) (frontend)
+
+See [Module internal contract](../../../docs/architecture/MODULE_INTERNAL_CONTRACT.md).

package/template/frontend/src/modules/_reference/components/ModuleHealthCard.jsx

@@ -0,0 +1,14 @@
+import { useModuleHealth } from "../hooks/use-module-health.js";
+
+export function ModuleHealthCard() {
+  const { data, error, loading } = useModuleHealth();
+
+  if (loading) return <p className="muted">Checking backend…</p>;
+  if (error) return <p className="muted">Backend unavailable: {error.message}</p>;
+
+  return (
+    <p>
+      Backend health: <code>{data?.status}</code> ({data?.module})
+    </p>
+  );
+}

package/template/frontend/src/modules/_reference/hooks/use-module-health.js

@@ -0,0 +1,27 @@
+import { useEffect, useState } from "react";
+import { fetchModuleHealth } from "../services/health-api.js";
+
+export function useModuleHealth() {
+  const [data, setData] = useState(null);
+  const [error, setError] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    let active = true;
+    fetchModuleHealth()
+      .then((result) => {
+        if (active) setData(result);
+      })
+      .catch((err) => {
+        if (active) setError(err);
+      })
+      .finally(() => {
+        if (active) setLoading(false);
+      });
+    return () => {
+      active = false;
+    };
+  }, []);
+
+  return { data, error, loading };
+}

package/template/frontend/src/modules/_reference/index.jsx

@@ -0,0 +1,7 @@
+import { _referencePage } from "./pages/_referencePage.jsx";
+
+export default {
+  route: "/_reference",
+  label: "Reference (example)",
+  Component: _referencePage
+};

package/template/frontend/src/modules/_reference/pages/_referencePage.jsx

@@ -0,0 +1,11 @@
+import { ModuleHealthCard } from "../components/ModuleHealthCard.jsx";
+
+export function _referencePage() {
+  return (
+    <section className="card">
+      <h2>Reference (example)</h2>
+      <p className="muted">Module shell — extend pages, hooks, and services.</p>
+      <ModuleHealthCard />
+    </section>
+  );
+}

package/template/frontend/src/modules/_reference/prompts/README.md

@@ -0,0 +1,3 @@
+# UI prompts — Reference (example)
+
+Optional: assistant copy, tool hints, and in-product AI instructions for this module.

package/template/frontend/src/modules/_reference/schemas/health.schema.js

@@ -0,0 +1,3 @@
+export function isHealthResponse(value) {
+  return Boolean(value && typeof value.status === "string");
+}

package/template/frontend/src/modules/_reference/services/health-api.js

@@ -0,0 +1,5 @@
+import { apiGet } from "../../shared/api/client.js";
+
+export function fetchModuleHealth() {
+  return apiGet("/api/_reference/health");
+}

package/template/frontend/src/modules/_reference/tests/unit/health.schema.test.js

@@ -0,0 +1,8 @@
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import { isHealthResponse } from "../../schemas/health.schema.js";
+
+test("isHealthResponse validates shape", () => {
+  assert.equal(isHealthResponse({ status: "ok" }), true);
+  assert.equal(isHealthResponse(null), false);
+});

package/template/frontend/src/modules/_reference/utils/index.js

@@ -0,0 +1,3 @@
+export function formatModuleLabel(label) {
+  return label?.trim() || "Module";
+}

package/template/frontend/src/shared/api/client.js

@@ -0,0 +1,10 @@
+const BASE_URL = import.meta.env.VITE_API_BASE_URL || "http://localhost:3001";
+
+export async function apiGet(path) {
+  const response = await fetch(`${BASE_URL}${path}`);
+  if (!response.ok) {
+    const text = await response.text();
+    throw new Error(text || `Request failed: ${response.status}`);
+  }
+  return response.json();
+}

package/template/frontend/vite.config.js

@@ -0,0 +1,6 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()]
+});

package/template/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "modular-monolith-starter",
+  "private": true,
+  "version": "2.0.0",
+  "scripts": {
+    "sync:cli-template": "node scripts/sync-cli-template.mjs",
+    "dev:backend": "npm --prefix backend run dev",
+    "dev:frontend": "npm --prefix frontend run dev",
+    "lint:boundaries": "npm --prefix backend run lint:boundaries",
+    "lint:layers": "npm --prefix backend run lint:layers",
+    "lint:architecture": "npm --prefix backend run lint:architecture",
+    "test": "npm --prefix backend test && npm --prefix frontend test",
+    "test:evals": "node scripts/run-module-evals.mjs",
+    "new:module": "node scripts/new-module.mjs"
+  }
+}