npm - create-flex-stack - Versions diffs - 1.0.0 - Mend

create-flex-stack 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/LICENSE +21 -0
package/README.md +57 -0
package/dist/index.js +330 -0
package/dist/templates/cleanTemplate.js +697 -0
package/dist/templates/frontendTemplate.js +855 -0
package/dist/templates/hexagonalTemplate.js +855 -0
package/dist/templates/layeredTemplate.js +745 -0
package/dist/templates/modularTemplate.js +691 -0
package/dist/templates/sharedTemplate.js +654 -0
package/dist/templates/vmcTemplate.js +26 -0
package/dist/types.js +1 -0
package/dist/utils/generator.js +1120 -0
package/package.json +46 -0

package/dist/templates/frontendTemplate.js ADDED Viewed

@@ -0,0 +1,855 @@
+function toPackageName(name) {
+    const normalized = name
+        .toLowerCase()
+        .replace(/[^a-z0-9._-]+/g, '-')
+        .replace(/^[._-]+/, '')
+        .replace(/[._-]+$/, '');
+    return normalized || 'app';
+}
+export function getFrontendFiles(options) {
+    if (!options.auth) {
+        return getPublicFrontendFiles(options);
+    }
+    const files = {};
+    const packageName = toPackageName(options.projectName);
+    // 1. package.json
+    files['package.json'] = `{
+  "name": "${packageName}-frontend",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "axios": "^1.6.8",
+    "zustand": "^4.5.2",
+    "lucide-react": "^0.372.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.2.1",
+    "vite": "^5.2.10",
+    "typescript": "^5.4.5",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.1",
+    "tailwindcss": "^3.4.3",
+    "postcss": "^8.4.38",
+    "autoprefixer": "^10.4.19"
+  }
+}`;
+    // 2. tsconfig.json
+    files['tsconfig.json'] = `{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ES2020"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}`;
+    // 3. vite.config.ts
+    files['vite.config.ts'] = `import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 5173,
+    proxy: {
+      '/api': 'http://localhost:3000'
+    }
+  }
+});
+`;
+    // 4. tailwind.config.js & postcss.config.js
+    files['tailwind.config.js'] = `/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+`;
+    files['postcss.config.js'] = `export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
+`;
+    // 5. HTML entry point
+    files['index.html'] = `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🚀</text></svg>" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${options.projectName}</title>
+  </head>
+  <body className="bg-slate-950 text-slate-100 min-h-screen">
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
+`;
+    // 6. Source Entry Points
+    files['src/main.tsx'] = `import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+import './index.css'
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)
+`;
+    files['src/index.css'] = `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@layer base {
+  body {
+    @apply antialiased selection:bg-cyan-500/30 selection:text-cyan-200;
+  }
+}
+`;
+    // 7. API client (Axios with Auto JWT Refresh Interceptor)
+    files['src/api/client.ts'] = `import axios from 'axios';
+import { useAuthStore } from '../store/authStore.ts';
+export const apiClient = axios.create({
+  baseURL: '/api',
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+// Request Interceptor: Attach access token
+apiClient.interceptors.request.use(
+  (config) => {
+    const token = useAuthStore.getState().accessToken;
+    if (token) {
+      config.headers.Authorization = \`Bearer \${token}\`;
+    }
+    return config;
+  },
+  (error) => Promise.reject(error)
+);
+// Response Interceptor: Auto-refresh JWT tokens on 401
+let isRefreshing = false;
+let failedQueue: any[] = [];
+const processQueue = (error: any, token: string | null = null) => {
+  failedQueue.forEach((prom) => {
+    if (error) {
+      prom.reject(error);
+    } else {
+      prom.resolve(token);
+    }
+  });
+  failedQueue = [];
+};
+apiClient.interceptors.response.use(
+  (response) => response,
+  async (error) => {
+    const originalRequest = error.config;
+    if (error.response?.status === 401 && !originalRequest._retry) {
+      if (isRefreshing) {
+        return new Promise((resolve, reject) => {
+          failedQueue.push({ resolve, reject });
+        })
+          .then((token) => {
+            originalRequest.headers.Authorization = \`Bearer \${token}\`;
+            return apiClient(originalRequest);
+          })
+          .catch((err) => Promise.reject(err));
+      }
+      originalRequest._retry = true;
+      isRefreshing = true;
+      try {
+        const refreshToken = useAuthStore.getState().refreshToken;
+        if (!refreshToken) {
+          throw new Error('No refresh token available');
+        }
+        const res = await axios.post('/api/users/refresh', { refreshToken });
+        const { accessToken, refreshToken: newRefreshToken } = res.data.data;
+        useAuthStore.getState().setTokens(accessToken, newRefreshToken);
+        processQueue(null, accessToken);
+        isRefreshing = false;
+        originalRequest.headers.Authorization = \`Bearer \${accessToken}\`;
+        return apiClient(originalRequest);
+      } catch (refreshError) {
+        processQueue(refreshError, null);
+        isRefreshing = false;
+        useAuthStore.getState().logout();
+        return Promise.reject(refreshError);
+      }
+    }
+    return Promise.reject(error);
+  }
+);
+`;
+    // 8. Zustand Auth Store
+    files['src/store/authStore.ts'] = `import { create } from 'zustand';
+interface User {
+  id: string;
+  email: string;
+  name: string | null;
+  role: string;
+}
+interface AuthState {
+  user: User | null;
+  accessToken: string | null;
+  refreshToken: string | null;
+  isAuthenticated: boolean;
+  login: (user: User, accessToken: string, refreshToken: string) => void;
+  setTokens: (accessToken: string, refreshToken: string) => void;
+  logout: () => void;
+}
+export const useAuthStore = create<AuthState>((set) => {
+  // Load initial state from LocalStorage
+  const cachedUser = localStorage.getItem('user');
+  const cachedAccess = localStorage.getItem('accessToken');
+  const cachedRefresh = localStorage.getItem('refreshToken');
+  return {
+    user: cachedUser ? JSON.parse(cachedUser) : null,
+    accessToken: cachedAccess || null,
+    refreshToken: cachedRefresh || null,
+    isAuthenticated: !!cachedAccess,
+    login: (user, accessToken, refreshToken) => {
+      localStorage.setItem('user', JSON.stringify(user));
+      localStorage.setItem('accessToken', accessToken);
+      localStorage.setItem('refreshToken', refreshToken);
+      set({ user, accessToken, refreshToken, isAuthenticated: true });
+    },
+    setTokens: (accessToken, refreshToken) => {
+      localStorage.setItem('accessToken', accessToken);
+      localStorage.setItem('refreshToken', refreshToken);
+      set({ accessToken, refreshToken });
+    },
+    logout: () => {
+      localStorage.removeItem('user');
+      localStorage.removeItem('accessToken');
+      localStorage.removeItem('refreshToken');
+      set({ user: null, accessToken: null, refreshToken: null, isAuthenticated: false });
+    },
+  };
+});
+`;
+    // 9. React Views & Components
+    // App Router & View Controller
+    files['src/App.tsx'] = `import { useState } from 'react';
+import { useAuthStore } from './store/authStore.ts';
+import { LoginView } from './views/Login.tsx';
+import { RegisterView } from './views/Register.tsx';
+import { DashboardView } from './views/Dashboard.tsx';
+import { Navbar } from './components/Navbar.tsx';
+function App() {
+  const { isAuthenticated } = useAuthStore();
+  const [view, setView] = useState<'login' | 'register'>('login');
+  return (
+    <div className="flex flex-col min-h-screen bg-slate-950 text-slate-100 font-sans">
+      <Navbar setView={setView} />
+      <main className="flex-grow flex items-center justify-center p-6">
+        {isAuthenticated ? (
+          <DashboardView />
+        ) : view === 'login' ? (
+          <LoginView setView={setView} />
+        ) : (
+          <RegisterView setView={setView} />
+        )}
+      </main>
+      <footer className="border-t border-slate-900 py-6 text-center text-slate-500 text-xs">
+        <p>&copy; {new Date().getFullYear()} ${options.projectName}. Generated with create-flex-stack.</p>
+      </footer>
+    </div>
+  );
+}
+export default App;
+`;
+    // Components - Navbar
+    files['src/components/Navbar.tsx'] = `import React from 'react';
+import { useAuthStore } from '../store/authStore.ts';
+import { LogOut, LogIn, UserPlus } from 'lucide-react';
+interface NavbarProps {
+  setView: (view: 'login' | 'register') => void;
+}
+export const Navbar: React.FC<NavbarProps> = ({ setView }) => {
+  const { isAuthenticated, user, logout } = useAuthStore();
+  return (
+    <header className="border-b border-slate-900 bg-slate-950/80 backdrop-blur-md sticky top-0 z-50">
+      <div className="max-w-7xl mx-auto px-4 h-16 flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <span className="text-xl font-bold bg-gradient-to-r from-cyan-400 to-indigo-500 bg-clip-text text-transparent">
+            🚀 UltimateStack
+          </span>
+        </div>
+        <nav className="flex items-center gap-4">
+          {isAuthenticated ? (
+            <div className="flex items-center gap-4">
+              <span className="text-sm text-slate-400">
+                Welcome, <strong className="text-slate-200">{user?.name || user?.email}</strong>
+                <span className="ml-2 px-2 py-0.5 text-xs bg-slate-800 text-cyan-400 rounded-full font-mono uppercase">
+                  {user?.role}
+                </span>
+              </span>
+              <button
+                onClick={logout}
+                className="flex items-center gap-1.5 px-3.5 py-1.5 bg-rose-600 hover:bg-rose-500 text-sm font-medium rounded-lg transition-colors"
+              >
+                <LogOut className="w-4 h-4" /> Logout
+              </button>
+            </div>
+          ) : (
+            <div className="flex gap-2">
+              <button
+                onClick={() => setView('login')}
+                className="flex items-center gap-1.5 px-3 py-1.5 border border-slate-800 hover:bg-slate-900 text-sm font-medium rounded-lg transition-colors"
+              >
+                <LogIn className="w-4 h-4" /> Sign In
+              </button>
+              <button
+                onClick={() => setView('register')}
+                className="flex items-center gap-1.5 px-3 py-1.5 bg-cyan-600 hover:bg-cyan-500 text-sm font-medium rounded-lg transition-colors"
+              >
+                <UserPlus className="w-4 h-4" /> Sign Up
+              </button>
+            </div>
+          )}
+        </nav>
+      </div>
+    </header>
+  );
+};
+`;
+    // Views - Login
+    files['src/views/Login.tsx'] = `import React, { useState } from 'react';
+import { useAuthStore } from '../store/authStore.ts';
+import { apiClient } from '../api/client.ts';
+import { LogIn, Key, Mail, AlertTriangle } from 'lucide-react';
+interface LoginViewProps {
+  setView: (view: 'login' | 'register') => void;
+}
+export const LoginView: React.FC<LoginViewProps> = ({ setView }) => {
+  const { login } = useAuthStore();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+    try {
+      const res = await apiClient.post('/users/login', { email, password });
+      const { user, accessToken, refreshToken } = res.data.data;
+      login(user, accessToken, refreshToken);
+    } catch (err: any) {
+      setError(err.response?.data?.message || 'Failed to authenticate user.');
+    } finally {
+      setLoading(false);
+    }
+  };
+  return (
+    <div className="w-full max-w-md bg-slate-900/40 border border-slate-900 p-8 rounded-2xl backdrop-blur-lg">
+      <div className="text-center mb-6">
+        <h2 className="text-2xl font-bold tracking-tight">Welcome Back</h2>
+        <p className="text-slate-400 text-sm mt-1">Please sign in to access the secure dashboard.</p>
+      </div>
+      {error && (
+        <div className="flex items-center gap-2 mb-4 p-3.5 bg-rose-500/10 border border-rose-500/20 text-rose-300 text-sm rounded-lg">
+          <AlertTriangle className="w-4 h-4 shrink-0" />
+          <p>{error}</p>
+        </div>
+      )}
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div>
+          <label className="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5">Email Address</label>
+          <div className="relative">
+            <Mail className="absolute left-3 top-3 w-4.5 h-4.5 text-slate-500" />
+            <input
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+              className="w-full pl-10 pr-4 py-2.5 bg-slate-950/60 border border-slate-800 focus:border-cyan-500 rounded-lg text-slate-200 outline-none text-sm transition-colors"
+              placeholder="name@example.com"
+            />
+          </div>
+        </div>
+        <div>
+          <label className="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5">Password</label>
+          <div className="relative">
+            <Key className="absolute left-3 top-3 w-4.5 h-4.5 text-slate-500" />
+            <input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+              className="w-full pl-10 pr-4 py-2.5 bg-slate-950/60 border border-slate-800 focus:border-cyan-500 rounded-lg text-slate-200 outline-none text-sm transition-colors"
+              placeholder="••••••••"
+            />
+          </div>
+        </div>
+        <button
+          type="submit"
+          disabled={loading}
+          className="w-full flex items-center justify-center gap-2 py-2.5 bg-cyan-600 hover:bg-cyan-500 disabled:bg-cyan-700 text-sm font-semibold rounded-lg transition-colors mt-2"
+        >
+          {loading ? 'Authenticating...' : (
+            <>
+              <LogIn className="w-4 h-4" /> Sign In
+            </>
+          )}
+        </button>
+      </form>
+      <div className="text-center text-sm text-slate-400 mt-6">
+        Don't have an account?{' '}
+        <button onClick={() => setView('register')} className="text-cyan-400 hover:underline">
+          Sign up
+        </button>
+      </div>
+    </div>
+  );
+};
+`;
+    // Views - Register
+    files['src/views/Register.tsx'] = `import React, { useState } from 'react';
+import { useAuthStore } from '../store/authStore.ts';
+import { apiClient } from '../api/client.ts';
+import { UserPlus, User as UserIcon, Mail, Key, AlertTriangle } from 'lucide-react';
+interface RegisterViewProps {
+  setView: (view: 'login' | 'register') => void;
+}
+export const RegisterView: React.FC<RegisterViewProps> = ({ setView }) => {
+  const { login } = useAuthStore();
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+    try {
+      const res = await apiClient.post('/users/register', { name, email, password });
+      const { user, accessToken, refreshToken } = res.data.data;
+      login(user, accessToken, refreshToken);
+    } catch (err: any) {
+      setError(err.response?.data?.message || 'Failed to register account.');
+    } finally {
+      setLoading(false);
+    }
+  };
+  return (
+    <div className="w-full max-w-md bg-slate-900/40 border border-slate-900 p-8 rounded-2xl backdrop-blur-lg">
+      <div className="text-center mb-6">
+        <h2 className="text-2xl font-bold tracking-tight">Create Account</h2>
+        <p className="text-slate-400 text-sm mt-1">Get started with your fresh boilerplate workspace.</p>
+      </div>
+      {error && (
+        <div className="flex items-center gap-2 mb-4 p-3.5 bg-rose-500/10 border border-rose-500/20 text-rose-300 text-sm rounded-lg">
+          <AlertTriangle className="w-4 h-4 shrink-0" />
+          <p>{error}</p>
+        </div>
+      )}
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div>
+          <label className="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5">Full Name</label>
+          <div className="relative">
+            <UserIcon className="absolute left-3 top-3 w-4.5 h-4.5 text-slate-500" />
+            <input
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              required
+              className="w-full pl-10 pr-4 py-2.5 bg-slate-950/60 border border-slate-800 focus:border-cyan-500 rounded-lg text-slate-200 outline-none text-sm transition-colors"
+              placeholder="John Doe"
+            />
+          </div>
+        </div>
+        <div>
+          <label className="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5">Email Address</label>
+          <div className="relative">
+            <Mail className="absolute left-3 top-3 w-4.5 h-4.5 text-slate-500" />
+            <input
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required
+              className="w-full pl-10 pr-4 py-2.5 bg-slate-950/60 border border-slate-800 focus:border-cyan-500 rounded-lg text-slate-200 outline-none text-sm transition-colors"
+              placeholder="name@example.com"
+            />
+          </div>
+        </div>
+        <div>
+          <label className="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5">Password</label>
+          <div className="relative">
+            <Key className="absolute left-3 top-3 w-4.5 h-4.5 text-slate-500" />
+            <input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+              className="w-full pl-10 pr-4 py-2.5 bg-slate-950/60 border border-slate-800 focus:border-cyan-500 rounded-lg text-slate-200 outline-none text-sm transition-colors"
+              placeholder="••••••••"
+            />
+          </div>
+        </div>
+        <button
+          type="submit"
+          disabled={loading}
+          className="w-full flex items-center justify-center gap-2 py-2.5 bg-cyan-600 hover:bg-cyan-500 disabled:bg-cyan-700 text-sm font-semibold rounded-lg transition-colors mt-2"
+        >
+          {loading ? 'Creating Account...' : (
+            <>
+              <UserPlus className="w-4 h-4" /> Sign Up
+            </>
+          )}
+        </button>
+      </form>
+      <div className="text-center text-sm text-slate-400 mt-6">
+        Already have an account?{' '}
+        <button onClick={() => setView('login')} className="text-cyan-400 hover:underline">
+          Sign in
+        </button>
+      </div>
+    </div>
+  );
+};
+`;
+    // Views - Dashboard
+    files['src/views/Dashboard.tsx'] = `import React, { useState, useEffect } from 'react';
+import { useAuthStore } from '../store/authStore.ts';
+import { apiClient } from '../api/client.ts';
+import { Users, Shield, Server, CheckCircle, Database } from 'lucide-react';
+export const DashboardView: React.FC = () => {
+  const { user } = useAuthStore();
+  const [usersList, setUsersList] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  useEffect(() => {
+    const fetchUsers = async () => {
+      try {
+        const res = await apiClient.get('/users');
+        setUsersList(res.data.data.users || []);
+      } catch (err: any) {
+        setError(err.response?.data?.message || 'Access restricted. Administrator privileges required.');
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchUsers();
+  }, []);
+  return (
+    <div className="w-full max-w-5xl space-y-6">
+      {/* Welcome Card */}
+      <div className="p-8 bg-slate-900/40 border border-slate-900 rounded-2xl backdrop-blur-lg flex flex-col md:flex-row md:items-center justify-between gap-6">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight">Active Boilerplate Workspace</h1>
+          <p className="text-slate-400 text-sm mt-1">
+            You are authenticated as <strong className="text-slate-200">{user?.email}</strong>.
+            All client requests are dynamically authorized.
+          </p>
+        </div>
+        <div className="flex items-center gap-2 text-emerald-400 bg-emerald-500/10 px-4 py-2 border border-emerald-500/20 text-sm rounded-lg font-medium self-start md:self-auto">
+          <CheckCircle className="w-4 h-4" /> Connected to Express
+        </div>
+      </div>
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        {/* Stat Cards */}
+        <div className="p-6 bg-slate-900/40 border border-slate-900 rounded-xl flex items-center gap-4">
+          <div className="p-3 bg-cyan-500/10 text-cyan-400 rounded-lg"><Server className="w-6 h-6" /></div>
+          <div>
+            <span className="text-slate-400 text-xs font-semibold uppercase tracking-wider block">Backend Framework</span>
+            <strong className="text-lg text-slate-200">ExpressJS + TypeScript</strong>
+          </div>
+        </div>
+        <div className="p-6 bg-slate-900/40 border border-slate-900 rounded-xl flex items-center gap-4">
+          <div className="p-3 bg-indigo-500/10 text-indigo-400 rounded-lg"><Database className="w-6 h-6" /></div>
+          <div>
+            <span className="text-slate-400 text-xs font-semibold uppercase tracking-wider block">Architecture Style</span>
+            <strong className="text-lg text-slate-200">${options.architecture.toUpperCase()}</strong>
+          </div>
+        </div>
+        <div className="p-6 bg-slate-900/40 border border-slate-900 rounded-xl flex items-center gap-4">
+          <div className="p-3 bg-cyan-500/10 text-cyan-400 rounded-lg"><Shield className="w-6 h-6" /></div>
+          <div>
+            <span className="text-slate-400 text-xs font-semibold uppercase tracking-wider block">Auth Middleware</span>
+            <strong className="text-lg text-slate-200">JWT Token Rotation</strong>
+          </div>
+        </div>
+      </div>
+      {/* Users Table */}
+      <div className="bg-slate-900/40 border border-slate-900 rounded-2xl p-6">
+        <div className="flex items-center gap-2 mb-4">
+          <Users className="w-5 h-5 text-cyan-400" />
+          <h3 className="text-lg font-semibold text-slate-200">Registered Accounts</h3>
+        </div>
+        {loading ? (
+          <div className="text-center py-8 text-slate-400 text-sm">Loading users from backend...</div>
+        ) : error ? (
+          <div className="text-center py-8 text-rose-400 text-sm">{error} (RBAC protected: Only admin role can view this list)</div>
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="w-full text-left text-sm border-collapse">
+              <thead>
+                <tr className="border-b border-slate-800 text-slate-400 font-semibold uppercase tracking-wider text-xs">
+                  <th className="pb-3 px-4">Name</th>
+                  <th className="pb-3 px-4">Email</th>
+                  <th className="pb-3 px-4">Role</th>
+                  <th className="pb-3 px-4">Created At</th>
+                </tr>
+              </thead>
+              <tbody>
+                {usersList.map((usr: any) => (
+                  <tr key={usr.id} className="border-b border-slate-900 hover:bg-slate-900/20 text-slate-300">
+                    <td className="py-3 px-4">{usr.name || 'Anonymous'}</td>
+                    <td className="py-3 px-4 font-mono">{usr.email}</td>
+                    <td className="py-3 px-4">
+                      <span className="px-2 py-0.5 text-xs bg-slate-800 text-cyan-400 rounded-full font-mono uppercase">
+                        {usr.role}
+                      </span>
+                    </td>
+                    <td className="py-3 px-4 text-slate-500 text-xs">{new Date(usr.createdAt).toLocaleDateString()}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+`;
+    return files;
+}
+function getPublicFrontendFiles(options) {
+    const packageName = toPackageName(options.projectName);
+    return {
+        'package.json': `{
+  "name": "${packageName}-frontend",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "lucide-react": "^0.372.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.2.1",
+    "vite": "^5.2.10",
+    "typescript": "^5.4.5",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.1",
+    "tailwindcss": "^3.4.3",
+    "postcss": "^8.4.38",
+    "autoprefixer": "^10.4.19"
+  }
+}`,
+        'tsconfig.json': `{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ES2020"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}`,
+        'vite.config.ts': `import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 5173,
+    proxy: {
+      '/api': 'http://localhost:3000'
+    }
+  }
+});
+`,
+        'tailwind.config.js': `/** @type {import('tailwindcss').Config} */
+export default {
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+  theme: { extend: {} },
+  plugins: [],
+}
+`,
+        'postcss.config.js': `export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
+`,
+        'index.html': `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${options.projectName}</title>
+  </head>
+  <body class="bg-zinc-950 text-zinc-100 min-h-screen">
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
+`,
+        'src/main.tsx': `import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.tsx';
+import './index.css';
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
+`,
+        'src/index.css': `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@layer base {
+  body {
+    @apply antialiased selection:bg-emerald-500/30 selection:text-emerald-100;
+  }
+}
+`,
+        'src/App.tsx': `import { Database, Server, Boxes } from 'lucide-react';
+function App() {
+  return (
+    <main className="min-h-screen bg-zinc-950 text-zinc-100">
+      <section className="mx-auto flex min-h-screen w-full max-w-6xl flex-col justify-center gap-8 px-6 py-10">
+        <div className="space-y-3">
+          <p className="text-sm font-semibold uppercase tracking-wide text-emerald-300">${options.architecture} architecture</p>
+          <h1 className="max-w-3xl text-4xl font-bold tracking-normal text-zinc-50 md:text-6xl">${options.projectName}</h1>
+          <p className="max-w-2xl text-base leading-7 text-zinc-400">
+            Public full-stack starter generated with open API routes.
+          </p>
+        </div>
+        <div className="grid gap-4 md:grid-cols-3">
+          <div className="rounded-lg border border-zinc-800 bg-zinc-900/50 p-5">
+            <Server className="mb-4 h-6 w-6 text-emerald-300" />
+            <h2 className="text-lg font-semibold">Express API</h2>
+            <p className="mt-2 text-sm text-zinc-400">Backend endpoints are available under /api.</p>
+          </div>
+          <div className="rounded-lg border border-zinc-800 bg-zinc-900/50 p-5">
+            <Database className="mb-4 h-6 w-6 text-sky-300" />
+            <h2 className="text-lg font-semibold">${options.database}</h2>
+            <p className="mt-2 text-sm text-zinc-400">Configured with ${options.orm} for persistence.</p>
+          </div>
+          <div className="rounded-lg border border-zinc-800 bg-zinc-900/50 p-5">
+            <Boxes className="mb-4 h-6 w-6 text-amber-300" />
+            <h2 className="text-lg font-semibold">Public UI</h2>
+            <p className="mt-2 text-sm text-zinc-400">A lightweight interface for open project workflows.</p>
+          </div>
+        </div>
+      </section>
+    </main>
+  );
+}
+export default App;
+`,
+    };
+}