create-corz 0.0.1

package/index.js

@@ -0,0 +1,232 @@
+#!/usr/bin/env node
+const path = require("path")
+const fs = require("fs")
+const cp = require("child_process")
+const prompts = require("@clack/prompts")
+const { EOL } = require("os")
+
+const GREEN = "\x1b[32m"
+const RED = "\x1b[31m"
+const BOLD = "\x1b[1m"
+const DIM = "\x1b[2m"
+const RESET = "\x1b[0m"
+
+function generateJwtSecret() {
+  const chars = "abcdefghijklmnopqrstuvwxyz0123456789"
+  let result = ""
+  for (let i = 0; i < 64; i++) {
+    result += chars[Math.floor(Math.random() * chars.length)]
+  }
+  return result
+}
+
+function copyDir(src, dest, replace) {
+  const entries = fs.readdirSync(src, { withFileTypes: true })
+  fs.mkdirSync(dest, { recursive: true })
+  for (const entry of entries) {
+    const srcPath = path.join(src, entry.name)
+    const destPath = path.join(dest, entry.name)
+    if (entry.isDirectory()) {
+      copyDir(srcPath, destPath, replace)
+    } else {
+      let content = fs.readFileSync(srcPath, "utf-8")
+      for (const [key, value] of Object.entries(replace)) {
+        content = content.split(key).join(value)
+      }
+      fs.writeFileSync(destPath, content, "utf-8")
+    }
+  }
+}
+
+function runAsync(cmd, opts) {
+  return new Promise((resolve, reject) => {
+    const child = cp.spawn(cmd, [], { shell: true, stdio: "ignore", ...opts })
+    child.on("error", reject)
+    child.on("exit", (code) => {
+      if (code === 0) resolve()
+      else reject(new Error("exit code " + code))
+    })
+  })
+}
+
+function getBar(elapsed, estimate) {
+  const w = 8
+  const pct = Math.min(Math.floor((elapsed / estimate) * 99), 99)
+  const fill = Math.round((pct / 100) * w)
+  return DIM + "[" + GREEN + "\u2588".repeat(fill) + " ".repeat(w - fill) + "]" + RESET + " " + String(pct).padStart(3) + "%"
+}
+
+async function main() {
+  process.stderr.write(EOL)
+  process.stderr.write("  create-corz " + DIM + "\u2014 fullstack app scaffolder" + RESET + EOL)
+  process.stderr.write(EOL)
+
+  const folderName = await prompts.text({
+    message: "Folder name",
+    validate: (x) => (x?.trim() ? undefined : "Folder name is required"),
+  })
+  if (prompts.isCancel(folderName)) process.exit(0)
+
+  const projectName = await prompts.text({
+    message: "Project name",
+    validate: (x) => (x?.trim() ? undefined : "Project name is required"),
+  })
+  if (prompts.isCancel(projectName)) process.exit(0)
+
+  const databaseName = await prompts.text({
+    message: "Database name",
+    validate: (x) => (x?.trim() ? undefined : "Database name is required"),
+  })
+  if (prompts.isCancel(databaseName)) process.exit(0)
+
+  const backendDir = "backend"
+  const frontendDir = "frontend"
+  const target = path.resolve(folderName.trim())
+  const templateDir = path.resolve(__dirname, "templates")
+
+  const jwtSecret = generateJwtSecret()
+  const port = "3001"
+  const replace = {
+    "{{projectName}}": projectName.trim(),
+    "{{databaseName}}": databaseName.trim(),
+    "{{backendFolder}}": backendDir.trim(),
+    "{{frontendFolder}}": frontendDir.trim(),
+    "{{port}}": port,
+    "{{jwtSecret}}": jwtSecret,
+  }
+
+  try {
+    fs.mkdirSync(target, { recursive: true })
+    copyDir(path.join(templateDir, "backend"), path.join(target, backendDir.trim()), replace)
+    copyDir(path.join(templateDir, "database"), path.join(target, "database"), replace)
+    copyDir(path.join(templateDir, "frontend"), path.join(target, frontendDir.trim()), replace)
+  } catch (err) {
+    process.stderr.write("  " + RED + "\u2716" + RESET + " Scaffolding failed" + EOL)
+    process.stderr.write("  " + RED + err.message + RESET + EOL)
+    process.exit(1)
+  }
+
+  process.stderr.write("  " + GREEN + "\u2714" + RESET + " Project files created" + EOL)
+  process.stderr.write(EOL)
+
+  const tasks = [
+    {
+      label: "Installing backend dependencies",
+      doneLabel: "Backend dependencies installed",
+      estimate: 120000,
+      run: () => runAsync("npm install", { cwd: path.join(target, backendDir.trim()), timeout: 120000 }),
+    },
+    {
+      label: "Installing frontend dependencies",
+      doneLabel: "Frontend dependencies installed",
+      estimate: 120000,
+      run: () => runAsync("npm install", { cwd: path.join(target, frontendDir.trim()), timeout: 120000 }),
+    },
+    {
+      label: "Installing corz CLI",
+      doneLabel: "corz CLI installed",
+      failedLabel: "corz CLI install skipped",
+      estimate: 60000,
+      run: () => runAsync("npm install -g corz", { timeout: 60000 }),
+    },
+  ]
+
+  const frames = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"]
+  const started = Date.now()
+  const state = tasks.map((t) => ({
+    ...t,
+    start: Date.now(),
+    endTime: 0,
+    done: false,
+    failed: false,
+  }))
+
+  for (const _ of state) {
+    process.stderr.write("  " + EOL)
+  }
+
+  const promises = state.map((s) =>
+    s
+      .run()
+      .then(
+        () => {
+          s.done = true
+          s.endTime = Date.now()
+        },
+        () => {
+          s.done = true
+          s.failed = true
+          s.endTime = Date.now()
+        },
+      ),
+  )
+
+  function renderLine(s) {
+    const now = s.done ? s.endTime : Date.now()
+    const elapsed = ((now - s.start) / 1000).toFixed(1) + "s"
+    if (s.done) {
+      const pct = 100
+      const sym = s.failed ? RED + "\u2716" + RESET : GREEN + "\u2714" + RESET
+      const label = s.failed ? (s.failedLabel || s.label) : (s.doneLabel || s.label)
+      const bar = DIM + "[" + GREEN + "\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588" + DIM + "]" + RESET + " " + pct + "%"
+      return "  " + sym + " " + label + "  " + DIM + elapsed + RESET + " " + bar + "\x1b[0K"
+    }
+    const bar = getBar(Date.now() - s.start, s.estimate)
+    return "  " + frames[fi % frames.length] + " " + s.label + "  " + DIM + elapsed + RESET + " " + bar + "\x1b[0K"
+  }
+
+  let fi = 0
+  let stopped = false
+  const interval = setInterval(() => {
+    if (stopped) return
+    fi++
+    process.stderr.write("\x1b[" + state.length + "A")
+    for (const s of state) {
+      process.stderr.write(renderLine(s) + EOL)
+    }
+    if (state.every((s) => s.done)) {
+      stopped = true
+      clearInterval(interval)
+    }
+  }, 150)
+
+  await Promise.allSettled(promises)
+  if (!stopped) {
+    stopped = true
+    clearInterval(interval)
+    process.stderr.write("\x1b[" + state.length + "A")
+    for (const s of state) {
+      process.stderr.write(renderLine(s) + EOL)
+    }
+  }
+
+  const totalTime = ((Date.now() - started) / 1000).toFixed(1)
+  process.stderr.write(EOL)
+  process.stderr.write(
+    "  " + GREEN + "\u2714" + RESET + " " + BOLD + 'Project "' + projectName.trim() + '" created!' + RESET + "  " + DIM + "completed in " + totalTime + "s" + RESET + EOL,
+  )
+  process.stderr.write(EOL)
+
+  process.stderr.write("  " + BOLD + "1. Start backend:" + RESET + EOL)
+  process.stderr.write("     cd " + folderName.trim() + "/" + backendDir.trim() + EOL)
+  process.stderr.write("     " + DIM + "Edit .env" + RESET + " with your MySQL credentials" + EOL)
+  process.stderr.write("     " + DIM + "npm run dev" + RESET + "        " + DIM + "\u2192 backend on :" + port + RESET + EOL)
+  process.stderr.write(EOL)
+  process.stderr.write("  " + BOLD + "2. Start frontend (new terminal):" + RESET + EOL)
+  process.stderr.write("     cd " + folderName.trim() + "/" + frontendDir.trim() + EOL)
+  process.stderr.write("     " + DIM + "npm run dev" + RESET + "        " + DIM + "\u2192 frontend on :5173" + RESET + EOL)
+  process.stderr.write(EOL)
+  process.stderr.write("  " + BOLD + "\u2501".repeat(45) + RESET + EOL)
+  process.stderr.write("  " + BOLD + "\u2726 Use corz ai to edit your current project." + RESET + EOL)
+  process.stderr.write("    " + DIM + "corz> \"add the employee page and backend\"" + RESET + EOL)
+  process.stderr.write("    " + DIM + "corz> \"change the design like white and green for buttons\"" + RESET + EOL)
+  process.stderr.write(EOL)
+  process.stderr.write("  " + DIM + "\u2192 Unlock corz ai with " + RESET + GREEN + BOLD + "corz activate" + RESET + EOL)
+  process.stderr.write("  " + BOLD + "\u2501".repeat(45) + RESET + EOL)
+  process.stderr.write(EOL)
+}
+
+main().catch((err) => {
+  process.stderr.write(RED + err.message + RESET + EOL)
+  process.exit(1)
+})

package/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "create-corz",
+  "version": "0.0.1",
+  "description": "Scaffold a fullstack React + Express + MySQL app in seconds",
+  "bin": {
+    "create-corz": "./index.js"
+  },
+  "keywords": ["corz", "fullstack", "scaffold", "react", "express", "mysql"],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@clack/prompts": "^1.0.0"
+  }
+}

package/templates/backend/README.md

@@ -0,0 +1,35 @@
+# {{projectName}} Backend
+
+## Setup
+
+1. Create the database:
+   ```bash
+   mysql -u root < database/schema.sql
+   ```
+
+2. Configure environment:
+   ```bash
+   cp .env.example .env
+   ```
+   Edit `.env` with your MySQL credentials.
+
+3. Install dependencies:
+   ```bash
+   npm install
+   ```
+
+4. Start the server:
+   ```bash
+   npm run dev
+   ```
+
+## Default User
+
+- Username: `user`
+- Password: `user123`
+
+## API Endpoints
+
+| Method | Path | Description |
+|--------|------|-------------|
+| POST | `/api/login` | Login with username and password |

package/templates/backend/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "{{projectName}}-backend",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "nodemon src/server.js",
+    "start": "node src/server.js",
+    "dbupdate": "node src/scripts/dbupdate.js"
+  },
+  "dependencies": {
+    "cors": "^2.8.5",
+    "dotenv": "^16.4.7",
+    "express": "^4.21.2",
+    "bcrypt": "^5.1.1",
+    "jsonwebtoken": "^9.0.2",
+    "mysql2": "^3.12.0"
+  },
+  "devDependencies": {
+    "nodemon": "^3.1.9"
+  }
+}

package/templates/backend/src/config/db.js

@@ -0,0 +1,66 @@
+const mysql = require("mysql2/promise")
+const fs = require("fs")
+const path = require("path")
+const bcrypt = require("bcrypt")
+
+let pool = null
+const status = { ready: false, code: null }
+
+async function bootstrap() {
+  try {
+    const conn = await mysql.createConnection({
+      host: process.env.DB_HOST,
+      user: process.env.DB_USER,
+      password: process.env.DB_PASS,
+    })
+
+    await conn.query(`CREATE DATABASE IF NOT EXISTS \`${process.env.DB_NAME}\``)
+    await conn.query(`USE \`${process.env.DB_NAME}\``)
+
+    const schemaPath = path.resolve(__dirname, "../../../database/schema.sql")
+    const raw = fs.readFileSync(schemaPath, "utf8")
+    for (const stmt of raw.split(";").map(s => s.trim()).filter(Boolean)) {
+      await conn.query(stmt)
+    }
+
+    await conn.end()
+
+    pool = mysql.createPool({
+      host: process.env.DB_HOST,
+      user: process.env.DB_USER,
+      password: process.env.DB_PASS,
+      database: process.env.DB_NAME,
+      waitForConnections: true,
+      connectionLimit: 10,
+    })
+
+    const [rows] = await pool.query("SELECT COUNT(*) AS count FROM users")
+    if (rows[0].count === 0) {
+      const hash = await bcrypt.hash("user123", 10)
+      await pool.query("INSERT INTO users (username, password) VALUES (?, ?)", ["user", hash])
+    }
+
+    status.ready = true
+  } catch (err) {
+    if (err.code === "ECONNREFUSED" || err.code === "ENOTFOUND" || err.code === "ER_ACCESS_DENIED_ERROR") {
+      status.code = "...dbcon"
+    } else {
+      status.code = "...notexist"
+    }
+  }
+}
+
+function getPool() {
+  if (!status.ready) {
+    const err = new Error(status.code || "...dbcon")
+    err.code = status.code || "...dbcon"
+    throw err
+  }
+  return pool
+}
+
+function getStatus() {
+  return status
+}
+
+module.exports = { bootstrap, getPool, getStatus }

package/templates/backend/src/controllers/auth.js

@@ -0,0 +1,19 @@
+const jwt = require("jsonwebtoken")
+const bcrypt = require("bcrypt")
+
+async function login(db, { username, password }) {
+  if (!username || !password) throw new Error("Username and password are required")
+
+  const [rows] = await db.query("SELECT * FROM users WHERE username = ?", [username])
+  if (rows.length === 0) throw new Error("Invalid username or password")
+
+  const user = rows[0]
+  const match = await bcrypt.compare(password, user.password)
+  if (!match) throw new Error("Invalid username or password")
+
+  const token = jwt.sign({ id: user.id, username: user.username }, process.env.JWT_SECRET, { expiresIn: "7d" })
+
+  return { token, user: { id: user.id, username: user.username } }
+}
+
+module.exports = { login }

package/templates/backend/src/middleware/auth.js

@@ -0,0 +1,18 @@
+const jwt = require("jsonwebtoken")
+
+function auth(req, res, next) {
+  const header = req.headers.authorization
+  if (!header || !header.startsWith("Bearer ")) {
+    return res.status(401).json({ error: "No token provided" })
+  }
+
+  try {
+    const decoded = jwt.verify(header.split(" ")[1], process.env.JWT_SECRET)
+    req.user = decoded
+    next()
+  } catch {
+    res.status(401).json({ error: "Invalid token" })
+  }
+}
+
+module.exports = auth

package/templates/backend/src/routes/auth.js

@@ -0,0 +1,19 @@
+const express = require("express")
+const router = express.Router()
+const { getPool, getStatus } = require("../config/db")
+const { login } = require("../controllers/auth")
+
+router.post("/login", async (req, res) => {
+  const st = getStatus()
+  if (!st.ready) {
+    return res.status(503).json({ error: st.code || "...dbcon" })
+  }
+  try {
+    const result = await login(getPool(), req.body)
+    res.json(result)
+  } catch (err) {
+    res.status(400).json({ error: err.message })
+  }
+})
+
+module.exports = router

package/templates/backend/src/scripts/dbupdate.js

@@ -0,0 +1,36 @@
+require("dotenv").config()
+const mysql = require("mysql2/promise")
+const fs = require("fs")
+const path = require("path")
+const bcrypt = require("bcrypt")
+
+async function main() {
+  const conn = await mysql.createConnection({
+    host: process.env.DB_HOST,
+    user: process.env.DB_USER,
+    password: process.env.DB_PASS,
+  })
+
+  await conn.query(`CREATE DATABASE IF NOT EXISTS \`${process.env.DB_NAME}\``)
+  await conn.query(`USE \`${process.env.DB_NAME}\``)
+
+  const schemaPath = path.resolve(__dirname, "../../../database/schema.sql")
+  const raw = fs.readFileSync(schemaPath, "utf8")
+  for (const stmt of raw.split(";").map(s => s.trim()).filter(Boolean)) {
+    await conn.query(stmt)
+  }
+
+  const [rows] = await conn.query("SELECT COUNT(*) AS count FROM users")
+  if (rows[0].count === 0) {
+    const hash = await bcrypt.hash("user123", 10)
+    await conn.query("INSERT INTO users (username, password) VALUES (?, ?)", ["user", hash])
+  }
+
+  await conn.end()
+  console.log("Database updated successfully")
+}
+
+main().catch((err) => {
+  console.error("Database update failed:", err.message)
+  process.exit(1)
+})

package/templates/backend/src/server.js

@@ -0,0 +1,16 @@
+const express = require("express")
+const cors = require("cors")
+require("dotenv").config()
+const { bootstrap } = require("./config/db")
+const authRoutes = require("./routes/auth")
+
+const app = express()
+app.use(cors())
+app.use(express.json())
+app.use("/api", authRoutes)
+
+const PORT = process.env.PORT || {{port}}
+
+bootstrap().then(() => {
+  app.listen(PORT)
+})

package/templates/backend/src/utilities/helpers.js

@@ -0,0 +1,5 @@
+function formatDate(date) {
+  return new Date(date).toISOString().slice(0, 19).replace("T", " ")
+}
+
+module.exports = { formatDate }

package/templates/database/schema.sql

@@ -0,0 +1,5 @@
+CREATE TABLE IF NOT EXISTS users (
+  id INT AUTO_INCREMENT PRIMARY KEY,
+  username VARCHAR(100) NOT NULL UNIQUE,
+  password VARCHAR(255) NOT NULL
+);

package/templates/frontend/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{projectName}}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

package/templates/frontend/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "{{projectName}}-frontend",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.7.9",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.28.1"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.17",
+    "vite": "^5.4.11"
+  }
+}

package/templates/frontend/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/templates/frontend/src/App.jsx

@@ -0,0 +1,37 @@
+import { useState } from "react"
+import Login from "./pages/Login"
+
+function App() {
+  const [token, setToken] = useState(localStorage.getItem("token"))
+
+  function handleLogin(newToken) {
+    localStorage.setItem("token", newToken)
+    setToken(newToken)
+  }
+
+  function handleLogout() {
+    localStorage.removeItem("token")
+    setToken(null)
+  }
+
+  if (token) {
+    return (
+      <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
+        <div className="text-center">
+          <h1 className="text-3xl font-bold text-gray-900 mb-2">Welcome!</h1>
+          <p className="text-gray-500 mb-6">You are now signed in.</p>
+          <button
+            onClick={handleLogout}
+            className="px-6 py-2 bg-black text-white rounded-lg hover:bg-gray-800 text-sm font-medium"
+          >
+            Sign Out
+          </button>
+        </div>
+      </div>
+    )
+  }
+
+  return <Login onLogin={handleLogin} />
+}
+
+export default App

package/templates/frontend/src/api/auth.js

@@ -0,0 +1,6 @@
+import client from "./client"
+
+export async function login(username, password) {
+  const { data } = await client.post("/login", { username, password })
+  return data
+}

package/templates/frontend/src/api/client.js

@@ -0,0 +1,15 @@
+import axios from "axios"
+
+const client = axios.create({
+  baseURL: "/api",
+})
+
+client.interceptors.request.use((config) => {
+  const token = localStorage.getItem("token")
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`
+  }
+  return config
+})
+
+export default client

package/templates/frontend/src/components/ui/Button.jsx

@@ -0,0 +1,10 @@
+export default function Button({ children, ...props }) {
+  return (
+    <button
+      className="w-full bg-black text-white rounded-lg py-2.5 font-medium hover:bg-gray-800 disabled:opacity-50"
+      {...props}
+    >
+      {children}
+    </button>
+  )
+}

package/templates/frontend/src/components/ui/Input.jsx

@@ -0,0 +1,8 @@
+export default function Input(props) {
+  return (
+    <input
+      className="w-full border border-gray-300 rounded-lg px-3 py-2.5 focus:outline-none focus:ring-2 focus:ring-black"
+      {...props}
+    />
+  )
+}

package/templates/frontend/src/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/templates/frontend/src/main.jsx

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

package/templates/frontend/src/pages/Login.jsx

@@ -0,0 +1,86 @@
+import { useState } from "react"
+import { login as loginApi } from "../api/auth"
+
+export default function Login({ onLogin }) {
+  const [username, setUsername] = useState("")
+  const [password, setPassword] = useState("")
+  const [error, setError] = useState("")
+  const [loading, setLoading] = useState(false)
+
+  async function handleSubmit(e) {
+    e.preventDefault()
+    setError("")
+    setLoading(true)
+    try {
+      const data = await loginApi(username, password)
+      onLogin(data.token)
+    } catch (err) {
+      setError(err.response?.data?.error || "Invalid username or password")
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-[#f5f0eb] flex items-center justify-center p-4 sm:p-6">
+      <div className="w-full max-w-sm mx-auto">
+        <div className="text-center mb-8 sm:mb-10">
+          <h1 className="text-[22px] sm:text-2xl font-bold text-[#1e3a5f] tracking-tight">{{projectName}}</h1>
+          <p className="text-gray-500 text-sm sm:text-[15px] mt-1">Sign in to your account</p>
+        </div>
+
+        <div className="bg-white rounded-2xl sm:rounded-3xl shadow-[0_4px_24px_rgba(0,0,0,0.06)] p-6 sm:p-8">
+          <form onSubmit={handleSubmit} className="space-y-4 sm:space-y-5">
+            <div>
+              <label className="block text-[13px] sm:text-sm font-medium text-gray-700 mb-1.5">Username</label>
+              <input
+                type="text"
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+                className="w-full border border-gray-200 bg-gray-50/50 rounded-xl px-4 py-[10px] sm:py-2.5 text-sm sm:text-[15px] focus:outline-none focus:ring-2 focus:ring-[#1e3a5f]/20 focus:border-[#1e3a5f] focus:bg-white transition-all duration-200 placeholder:text-gray-400"
+                placeholder="Enter your username"
+                required
+              />
+            </div>
+
+            <div>
+              <label className="block text-[13px] sm:text-sm font-medium text-gray-700 mb-1.5">Password</label>
+              <input
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="w-full border border-gray-200 bg-gray-50/50 rounded-xl px-4 py-[10px] sm:py-2.5 text-sm sm:text-[15px] focus:outline-none focus:ring-2 focus:ring-[#1e3a5f]/20 focus:border-[#1e3a5f] focus:bg-white transition-all duration-200 placeholder:text-gray-400"
+                placeholder="Enter your password"
+                required
+              />
+            </div>
+
+            {error && (
+              <div className="bg-red-50 border border-red-100 rounded-xl px-3 py-2.5 sm:px-4">
+                <p className="text-red-500 text-[13px] sm:text-sm text-center font-medium">{error}</p>
+              </div>
+            )}
+
+            <button
+              type="submit"
+              disabled={loading}
+              className="w-full bg-[#1e3a5f] text-white rounded-xl py-[10px] sm:py-2.5 text-sm sm:text-[15px] font-semibold hover:bg-[#162d4a] active:bg-[#0f2238] disabled:opacity-50 transition-all duration-200 shadow-[0_1px_2px_rgba(0,0,0,0.05)]"
+            >
+              {loading ? (
+                <span className="inline-flex items-center justify-center gap-2">
+                  <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24" fill="none">
+                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+                  </svg>
+                  Signing in...
+                </span>
+              ) : (
+                "Sign In"
+              )}
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  )
+}

package/templates/frontend/tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

package/templates/frontend/vite.config.js

@@ -0,0 +1,11 @@
+import { defineConfig } from "vite"
+import react from "@vitejs/plugin-react"
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    proxy: {
+      "/api": "http://localhost:{{port}}",
+    },
+  },
+})