create-lumina-project 1.2.0 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-lumina-project",
-  "version": "1.2.0",
+  "version": "2.0.0",
   "author": "Glenson Ansin",
   "description": "Scaffold a modern Node.js API with Lumina architecture.",
   "type": "module",
@@ -12,9 +12,9 @@
     "template"
   ],
   "dependencies": {
-    "fs-extra": "^11.3.4",
+    "fs-extra": "^11.3.6",
     "kleur": "^4.1.5",
-    "ora": "^9.3.0",
+    "ora": "^9.4.1",
     "prompts": "^2.4.2"
   },
   "license": "MIT",

package/template/.env.example

@@ -12,7 +12,8 @@ DB_SSL=
 
 # JWT Configuration
 JWT_SECRET=your_super_secret_key_here
-JWT_EXPIRES_IN=1d
+JWT_EXPIRES_IN=15m
+JWT_REFRESH_EXPIRES_IN=7d
 
 # Application
 NODE_ENV=development

package/template/nodemon.json

@@ -1,5 +1,5 @@
 {
-  "watch": ["src"],
+  "watch": ["src", "server.ts"],
   "ext": "ts,json",
   "exec": "tsx src/server.ts" 
 }

package/template/package.json

@@ -2,10 +2,13 @@
   "name": "lumina",
   "version": "1.0.0",
   "description": "",
-  "main": "server.ts",
+  "main": "src/server.ts",
   "scripts": {
-    "dev": "nodemon --exec tsx server.ts",
-    "build": "tsc",
+    "dev": "concurrently \"npm run dev:server\" \"npm run dev:client\"",
+    "dev:server": "nodemon --exec tsx src/server.ts",
+    "dev:client": "vite",
+    "build:client": "vite build",
+    "build": "tsc && npm run build:client",
     "start": "node dist/server.js",
     "test": "vitest run",
     "migrate": "tsx scripts/migrate.ts up",
@@ -24,38 +27,46 @@
   "private": true,
   "type": "module",
   "dependencies": {
+    "@inertiajs/react": "^3.6.0",
     "bcrypt": "^6.0.0",
-    "bcryptjs": "^3.0.3",
     "compression": "^1.8.1",
     "cookie-parser": "^1.4.7",
     "cors": "^2.8.6",
     "dotenv": "^17.4.2",
     "express": "^5.2.1",
-    "express-rate-limit": "^8.3.2",
-    "helmet": "^8.1.0",
+    "express-rate-limit": "^8.5.2",
+    "helmet": "^8.2.0",
+    "inertia-node": "^2.0.0",
     "jsonwebtoken": "^9.0.3",
-    "multer": "^2.1.1",
-    "mysql2": "^3.22.1",
+    "multer": "^2.2.0",
+    "mysql2": "^3.22.5",
     "nodemon": "^3.1.14",
-    "pg": "^8.20.0",
+    "pg": "^8.22.0",
     "pg-hstore": "^2.3.4",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
     "sequelize": "^6.37.8",
     "sequelize-cli": "^6.6.5",
-    "umzug": "^3.8.2",
+    "umzug": "^3.8.3",
     "winston": "^3.19.0",
-    "zod": "^4.3.6"
+    "zod": "^4.4.3"
   },
   "devDependencies": {
-    "@faker-js/faker": "^10.4.0",
+    "@faker-js/faker": "^10.5.0",
     "@types/bcrypt": "^6.0.0",
     "@types/compression": "^1.8.1",
     "@types/cookie-parser": "^1.4.10",
     "@types/cors": "^2.8.19",
     "@types/express": "^5.0.6",
     "@types/jsonwebtoken": "^9.0.10",
-    "@types/multer": "^2.1.0",
-    "tsx": "^4.21.0",
+    "@types/multer": "^2.2.0",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.3",
+    "concurrently": "^10.0.3",
+    "tsx": "^4.23.0",
     "typescript": "^6.0.3",
-    "vitest": "^4.1.4"
+    "vite": "^8.1.3",
+    "vitest": "^4.1.10"
   }
 }

package/template/resources/css/app.css

@@ -0,0 +1,491 @@
+*, *::before, *::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --indigo-100: #e0e7ff;
+  --indigo-200: #c7d2fe;
+  --indigo-400: #818cf8;
+  --indigo-500: #6366f1;
+  --indigo-600: #4f46e5;
+  --slate-100: #f1f5f9;
+  --slate-200: #e2e8f0;
+  --slate-300: #cbd5e1;
+  --slate-400: #94a3b8;
+  --slate-500: #64748b;
+  --slate-600: #475569;
+  --slate-800: #1e293b;
+  --slate-900: #0f172a;
+  --emerald-400: #34d399;
+  --red-400: #f87171;
+}
+
+body {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  background-color: var(--slate-900);
+  color: var(--slate-100);
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  position: relative;
+}
+
+.bg-gradient {
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  background:
+      radial-gradient(ellipse 80% 60% at 20% 20%, rgba(99, 102, 241, 0.15) 0%, transparent 60%),
+      radial-gradient(ellipse 60% 80% at 80% 80%, rgba(79, 70, 229, 0.12) 0%, transparent 60%);
+  animation: bgShift 12s ease-in-out infinite alternate;
+}
+
+@keyframes bgShift {
+  0%   { opacity: 0.7; transform: scale(1); }
+  50%  { opacity: 1; transform: scale(1.05); }
+  100% { opacity: 0.8; transform: scale(1.02); }
+}
+
+.orb {
+  position: fixed;
+  border-radius: 50%;
+  filter: blur(80px);
+  z-index: -1;
+  animation: float 20s ease-in-out infinite;
+  pointer-events: none;
+}
+
+.orb-1 {
+  width: 350px;
+  height: 350px;
+  background: rgba(99, 102, 241, 0.1);
+  top: -10%;
+  left: -5%;
+}
+
+.orb-2 {
+  width: 250px;
+  height: 250px;
+  background: rgba(52, 211, 153, 0.08);
+  bottom: -5%;
+  right: -5%;
+  animation-delay: -7s;
+}
+
+.orb-3 {
+  width: 300px;
+  height: 300px;
+  background: rgba(167, 139, 250, 0.08);
+  top: 40%;
+  left: 60%;
+  animation-delay: -14s;
+}
+
+.orb-error {
+  background: rgba(248, 113, 113, 0.06) !important;
+}
+
+@keyframes float {
+  0%, 100% { transform: translate(0, 0); }
+  25%      { transform: translate(30px, -40px); }
+  50%      { transform: translate(-20px, 20px); }
+  75%      { transform: translate(15px, 30px); }
+}
+
+.grid-pattern {
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  background-image:
+      linear-gradient(rgba(148, 163, 184, 0.03) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(148, 163, 184, 0.03) 1px, transparent 1px);
+  background-size: 60px 60px;
+  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 80%);
+  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 80%);
+}
+
+.main {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.75rem;
+  padding: 2rem;
+  width: 100%;
+  max-width: 520px;
+  animation: fadeInUp 0.8s ease-out both;
+}
+
+@keyframes fadeInUp {
+  from { opacity: 0; transform: translateY(30px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.logo-wrapper {
+  position: relative;
+  width: 80px;
+  height: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: pulse 4s ease-in-out infinite;
+}
+
+.logo-glow {
+  position: absolute;
+  inset: 0;
+  background: var(--indigo-500);
+  border-radius: 50%;
+  filter: blur(25px);
+  opacity: 0.5;
+}
+
+.logo {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  z-index: 1;
+  drop-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
+}
+
+@keyframes pulse {
+  0%, 100% { transform: scale(1); }
+  50%      { transform: scale(1.05); }
+}
+
+.header {
+  text-align: center;
+}
+
+.title {
+  font-size: 2.25rem;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  background: linear-gradient(135deg, #fff 0%, var(--slate-300) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  margin-bottom: 0.6rem;
+}
+
+.subtitle {
+  font-size: 0.95rem;
+  color: var(--slate-400);
+  line-height: 1.6;
+}
+
+.card {
+  width: 100%;
+  background: rgba(30, 41, 59, 0.4);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(148, 163, 184, 0.1);
+  border-radius: 16px;
+  padding: 1.5rem;
+  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.3);
+  animation: fadeInUp 0.8s ease-out 0.2s both;
+}
+
+.card-title {
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--slate-400);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.features {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1.25rem;
+}
+
+.feature {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+}
+
+.feature-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+  background: rgba(148, 163, 184, 0.06);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1rem;
+}
+
+.feature-text h3 {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--slate-100);
+  margin-bottom: 0.15rem;
+}
+
+.feature-text p {
+  font-size: 0.72rem;
+  color: var(--slate-400);
+  line-height: 1.4;
+}
+
+.status-bar {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1.5rem;
+  animation: fadeInUp 0.8s ease-out 0.35s both;
+}
+
+.status {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.6rem 1.25rem;
+  background: rgba(16, 185, 129, 0.08);
+  border: 1px solid rgba(16, 185, 129, 0.15);
+  border-radius: 999px;
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--emerald-400);
+  letter-spacing: 0.01em;
+}
+
+.status-error {
+  background: rgba(248, 113, 113, 0.08);
+  border-color: rgba(248, 113, 113, 0.15);
+  color: var(--red-400);
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--emerald-400);
+  box-shadow: 0 0 8px rgba(52, 211, 153, 0.5);
+  animation: blink 2s ease-in-out infinite;
+}
+
+.status-dot.error {
+  background: var(--red-400);
+  box-shadow: 0 0 8px rgba(248, 113, 113, 0.5);
+}
+
+@keyframes blink {
+  0%, 100% { opacity: 1; }
+  50%      { opacity: 0.4; }
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  animation: fadeInUp 0.8s ease-out 0.5s both;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.7rem 1.5rem;
+  border-radius: 12px;
+  font-size: 0.85rem;
+  font-weight: 600;
+  text-decoration: none;
+  transition: all 0.25s ease;
+  cursor: pointer;
+}
+
+.btn-primary {
+  background: linear-gradient(135deg, var(--indigo-600), var(--indigo-500));
+  color: white;
+  box-shadow: 0 4px 16px -4px rgba(99, 102, 241, 0.4);
+  border: 1px solid rgba(129, 140, 248, 0.2);
+}
+
+.btn-primary:hover {
+  background: linear-gradient(135deg, var(--indigo-500), var(--indigo-400));
+  box-shadow: 0 6px 24px -4px rgba(99, 102, 241, 0.5);
+  transform: translateY(-2px);
+}
+
+.btn-secondary {
+  background: rgba(148, 163, 184, 0.06);
+  color: var(--slate-300);
+  border: 1px solid rgba(148, 163, 184, 0.1);
+}
+
+.btn-secondary:hover {
+  background: rgba(148, 163, 184, 0.1);
+  color: var(--slate-100);
+  border-color: rgba(148, 163, 184, 0.18);
+  transform: translateY(-2px);
+}
+
+.btn svg {
+  width: 16px;
+  height: 16px;
+}
+
+.footer {
+  margin-top: 0.5rem;
+  font-size: 0.75rem;
+  color: var(--slate-600);
+  animation: fadeInUp 0.8s ease-out 0.5s both;
+  letter-spacing: 0.02em;
+}
+
+.footer a {
+  color: var(--indigo-400);
+  text-decoration: none;
+  font-weight: 500;
+  transition: color 0.2s ease;
+}
+
+.footer a:hover {
+  color: var(--indigo-200);
+}
+
+.info-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem 0;
+  border-bottom: 1px solid rgba(148, 163, 184, 0.06);
+}
+
+.info-row:last-child {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+.info-label {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  font-size: 0.82rem;
+  color: var(--slate-400);
+  font-weight: 500;
+}
+
+.info-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  background: rgba(148, 163, 184, 0.06);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.85rem;
+  flex-shrink: 0;
+}
+
+.info-value {
+  font-family: 'JetBrains Mono', monospace, monospace;
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: var(--slate-200);
+  background: rgba(148, 163, 184, 0.06);
+  padding: 0.3rem 0.7rem;
+  border-radius: 6px;
+}
+
+.info-value.env-badge {
+  background: rgba(99, 102, 241, 0.1);
+  color: var(--indigo-400);
+  border: 1px solid rgba(99, 102, 241, 0.15);
+}
+
+.info-value.status-up {
+  background: rgba(16, 185, 129, 0.1);
+  color: var(--emerald-400);
+  border: 1px solid rgba(16, 185, 129, 0.15);
+}
+
+.services-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.6rem;
+}
+
+.service-item {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.7rem 0.85rem;
+  border-radius: 10px;
+  background: rgba(148, 163, 184, 0.03);
+  border: 1px solid rgba(148, 163, 184, 0.05);
+  transition: background 0.2s ease, border-color 0.2s ease;
+}
+
+.service-item:hover {
+  background: rgba(148, 163, 184, 0.06);
+  border-color: rgba(148, 163, 184, 0.1);
+}
+
+.service-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.service-dot.up {
+  background: var(--emerald-400);
+  box-shadow: 0 0 6px rgba(52, 211, 153, 0.4);
+}
+
+.service-name {
+  font-size: 0.78rem;
+  font-weight: 500;
+  color: var(--slate-300);
+}
+
+.error-code {
+  font-size: 7rem;
+  font-weight: 800;
+  letter-spacing: -0.04em;
+  background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(99, 102, 241, 0.2) 50%, rgba(248, 113, 113, 0.15) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  line-height: 1;
+}
+
+.back-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--slate-400);
+  text-decoration: none;
+  transition: color 0.2s ease;
+  margin-bottom: 1rem;
+}
+.back-link:hover { color: var(--slate-200); }
+.back-link svg { width: 14px; height: 14px; }
+
+@media (max-width: 540px) {
+  .title { font-size: 2rem; }
+  .subtitle { font-size: 0.95rem; }
+  .features { grid-template-columns: 1fr; }
+  .actions { flex-direction: column; width: 100%; }
+  .btn { width: 100%; justify-content: center; }
+  .error-code { font-size: 5rem; }
+  .services-grid { grid-template-columns: 1fr; }
+}

package/template/resources/js/Pages/Errors/404.tsx

@@ -0,0 +1,32 @@
+interface NotFoundProps {
+  url: string;
+}
+
+export default function NotFound({ url }: NotFoundProps) {
+  return (
+    <>
+      <div className="bg-gradient"></div>
+      <div className="orb orb-1"></div>
+      <div className="orb orb-2 orb-error"></div>
+      <div className="grid-pattern"></div>
+
+      <div className="main">
+        <div className="error-code">404</div>
+
+        <div className="header">
+          <h1 className="title">Page Not Found</h1>
+          <p className="subtitle">The page you're looking for doesn't exist or has been moved. Let's get you back on track.</p>
+        </div>
+
+        <a href="/" className="btn btn-secondary">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="2.5" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" /></svg>
+          Back to Home
+        </a>
+
+        <div className="footer">
+          <a href="https://github.com/glensonansin/lumina" target="_blank">Lumina</a> — Built with Express & Sequelize
+        </div>
+      </div>
+    </>
+  );
+}

package/template/resources/js/Pages/Maintenance.tsx

@@ -0,0 +1,34 @@
+interface MaintenanceProps {
+  message?: string;
+}
+
+export default function Maintenance({ message }: MaintenanceProps) {
+  return (
+    <>
+      <div className="bg-gradient"></div>
+      <div className="orb orb-1"></div>
+      <div className="orb orb-2 orb-error"></div>
+      <div className="grid-pattern"></div>
+
+      <div className="main">
+        <div className="error-code" style={{ fontSize: '5rem', marginBottom: '-1rem' }}>503</div>
+
+        <div className="header">
+          <h1 className="title">Maintenance Mode</h1>
+          <p className="subtitle">{message || "We're performing some scheduled maintenance. We'll be back online shortly!"}</p>
+        </div>
+
+        <div className="status-bar" style={{ animationDelay: '0s' }}>
+          <div className="status status-error">
+            <span className="status-dot error"></span>
+            System Offline
+          </div>
+        </div>
+
+        <div className="footer">
+          <a href="https://github.com/glensonansin/lumina" target="_blank">Lumina</a> — Built with Express & Sequelize
+        </div>
+      </div>
+    </>
+  );
+}