create-butterfly-app-v2 1.0.1 → 2.0.0

package/cli.js

@@ -2,48 +2,189 @@
 const fs = require("fs");
 const path = require("path");
 const { execSync } = require("child_process");
+const readline = require("readline");
 
-const projectName = process.argv[2] || "my-fullstack-app";
-const targetDir = path.resolve(process.cwd(), projectName);
-const templateDir = path.join(__dirname, "templates", "fullstack");
+const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
+const ask = (q) => new Promise((r) => rl.question(q, r));
 
-if (fs.existsSync(targetDir)) {
-  console.error(`Error: Directory "${projectName}" already exists.`);
-  process.exit(1);
+const C = {
+  reset: "\x1b[0m",
+  blue: "\x1b[34m",
+  cyan: "\x1b[36m",
+  green: "\x1b[32m",
+  yellow: "\x1b[33m",
+  red: "\x1b[31m",
+  magenta: "\x1b[35m",
+  bold: "\x1b[1m",
+  dim: "\x1b[2m",
+};
+
+function c(color, text) {
+  return `${C[color] || ""}${text}${C.reset}`;
+}
+
+function showBanner() {
+  console.log(`
+${c("cyan", "  ╔══════════════════════════════════════════╗")}
+${c("cyan", "  ║")}          ${c("bold", "CREATE BUTTERFLY APP")}          ${c("cyan", "║")}
+${c("cyan", "  ║")}     ${c("dim", "Full-Stack Project Generator")}     ${c("cyan", "║")}
+${c("cyan", "  ╠══════════════════════════════════════════╣")}
+${c("cyan", "  ║")}                                          ${c("cyan", "║")}
+${c("cyan", "  ║")}    ${c("blue", "  ,,_")}                            ${c("cyan", "║")}
+${c("cyan", "  ║")}    ${c("blue", "  \\\\\'-.")}                           ${c("cyan", "║")}
+${c("cyan", "  ║")}    ${c("blue", "   )  -'\\")}    ${c("green", "Node.js")}  ${c("blue", "+")}  ${c("green", "React")}   ${c("blue", "   +")}    ${c("cyan", "║")}
+${c("cyan", "  ║")}    ${c("blue", "  /_/|_\\\\")}   ${c("green", "Tailwind")} ${c("blue", "+")} ${c("green", "MySQL")}      ${c("cyan", "║")}
+${c("cyan", "  ║")}    ${c("blue", "  \\\\__/")}                           ${c("cyan", "║")}
+${c("cyan", "  ║")}                                          ${c("cyan", "║")}
+${c("cyan", "  ╚══════════════════════════════════════════╝${c("reset", "")}
+`));
+}
+
+const PROJECT_TYPES = [
+  { id: "hotel", name: "Hotel Reservation", emoji: "🏨" },
+  { id: "parking", name: "Car Parking", emoji: "🅿️" },
+  { id: "student", name: "Student Management", emoji: "🎓" },
+];
+
+async function selectProjectType() {
+  console.log(`  ${c("bold", "Select your project type:")}\n`);
+  for (let i = 0; i < PROJECT_TYPES.length; i++) {
+    const t = PROJECT_TYPES[i];
+    console.log(`    ${c("yellow", `[${i + 1}]`)} ${t.emoji} ${c("bold", t.name)}`);
+  }
+  console.log(`    ${c("yellow", "[r]")} 🎲 ${c("bold", "Random")} - Surprise me!\n`);
+
+  let choice;
+  while (true) {
+    const input = await ask(`  ${c("cyan", "?>")} Enter number or ${c("yellow", "r")} for random: `);
+    if (input.toLowerCase() === "r") {
+      const rand = Math.floor(Math.random() * PROJECT_TYPES.length);
+      choice = PROJECT_TYPES[rand];
+      console.log(`  ${c("green", "✓")} Randomly selected: ${choice.emoji} ${c("bold", choice.name)}\n`);
+      break;
+    }
+    const num = parseInt(input);
+    if (num >= 1 && num <= PROJECT_TYPES.length) {
+      choice = PROJECT_TYPES[num - 1];
+      break;
+    }
+    console.log(`  ${c("red", "✗")} Invalid choice, try again\n`);
+  }
+  return choice;
 }
 
-console.log(`\n  Creating ${projectName}...\n`);
-
-function copyRecursive(src, dest) {
-  fs.mkdirSync(dest, { recursive: true });
-  const entries = fs.readdirSync(src, { withFileTypes: true });
-  for (const entry of entries) {
-    const srcPath = path.join(src, entry.name);
-    const destPath = path.join(dest, entry.name);
-    if (entry.isDirectory()) {
-      copyRecursive(srcPath, destPath);
-    } else {
-      let content = fs.readFileSync(srcPath, "utf-8");
-      content = content.replace(/__PROJECT_NAME__/g, projectName);
-      fs.writeFileSync(destPath, content);
+async function askProjectName() {
+  console.log(`  ${c("bold", "Name your project:")}\n`);
+  while (true) {
+    const name = await ask(`  ${c("cyan", "?>")} Project name (e.g. my-hotel-app): `);
+    if (name && name.trim()) {
+      return name.trim();
     }
+    console.log(`  ${c("red", "✗")} Name cannot be empty\n`);
   }
 }
 
-copyRecursive(templateDir, targetDir);
-console.log(`  Created project at: ${targetDir}\n`);
-
-try {
-  console.log("  Installing backend dependencies...");
-  execSync("npm install", { cwd: path.join(targetDir, "backend"), stdio: "inherit" });
-  console.log("  Installing frontend dependencies...");
-  execSync("npm install", { cwd: path.join(targetDir, "frontend"), stdio: "inherit" });
-  console.log("  Installing root dependencies...");
-  execSync("npm install", { cwd: targetDir, stdio: "inherit" });
-} catch {
-  console.log("\n  Run 'npm install' in each folder manually if install failed.");
+function showProgress(msg) {
+  process.stdout.write(`  ${c("yellow", "→")} ${msg}...`);
+}
+
+function done() {
+  console.log(` ${c("green", "✓")}`);
+}
+
+async function main() {
+  showBanner();
+
+  const projectType = await selectProjectType();
+  const projectName = await askProjectName();
+  const targetDir = path.resolve(process.cwd(), projectName);
+  const baseDir = path.join(__dirname, "templates", "base");
+  const typeDir = path.join(__dirname, "templates", "types", projectType.id);
+
+  if (fs.existsSync(targetDir)) {
+    console.log(`\n  ${c("red", "✗")} Error: Directory "${projectName}" already exists.\n`);
+    rl.close();
+    process.exit(1);
+  }
+
+  console.log(`\n  ${c("bold", "Creating project...")}\n  ${c("dim", "━━━━━━━━━━━━━━━━━━━━━━━━━━━━")}\n`);
+
+  function copyRecursive(src, dest, type) {
+    if (!fs.existsSync(src)) return;
+    fs.mkdirSync(dest, { recursive: true });
+    const entries = fs.readdirSync(src, { withFileTypes: true });
+    for (const entry of entries) {
+      const srcPath = path.join(src, entry.name);
+      const destPath = path.join(dest, entry.name);
+      if (entry.isDirectory()) {
+        copyRecursive(srcPath, destPath, type);
+      } else {
+        let content = fs.readFileSync(srcPath, "utf-8");
+        content = content.replace(/__PROJECT_NAME__/g, projectName);
+        content = content.replace(/__PROJECT_TYPE__/g, type);
+        fs.writeFileSync(destPath, content);
+      }
+    }
+  }
+
+  showProgress("Scaffolding project files");
+  copyRecursive(baseDir, targetDir, projectType.id);
+  copyRecursive(typeDir, targetDir, projectType.id);
+  done();
+
+  showProgress("Installing backend dependencies");
+  try {
+    execSync("npm install", { cwd: path.join(targetDir, "backend"), stdio: "pipe" });
+    done();
+  } catch {
+    console.log(` ${c("red", "✗")}`);
+  }
+
+  showProgress("Installing frontend dependencies");
+  try {
+    execSync("npm install", { cwd: path.join(targetDir, "frontend"), stdio: "pipe" });
+    done();
+  } catch {
+    console.log(` ${c("red", "✗")}`);
+  }
+
+  showProgress("Installing root dependencies");
+  try {
+    execSync("npm install", { cwd: targetDir, stdio: "pipe" });
+    done();
+  } catch {
+    console.log(` ${c("red", "✗")}`);
+  }
+
+  console.log(`
+  ${c("bold", c("green", "✔ Project created successfully!"))}
+  ${c("dim", "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━")}
+
+  ${c("bold", "Next steps:")}
+
+  ${c("cyan", "  1.")} Start XAMPP (Apache + MySQL)
+  ${c("cyan", "  2.")} Open phpMyAdmin and create database: ${c("yellow", projectName)}
+  ${c("cyan", "  3.")} Run these commands:
+
+  ${c("bold", "    cd " + projectName)}
+  ${c("bold", "    npm run dev")}
+
+  ${c("cyan", "  4.")} Open ${c("green", "http://localhost:5173")}
+  ${c("cyan", "  5.")} Register a new account
+
+  ${c("dim", "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━")}
+
+  ${c("bold", c("magenta", "  🦋 Goodluck with your " + projectType.name + " project! 🦋"))}
+
+  ${c("dim", "(Tables are auto-created on server start - no manual SQL needed)")}
+  ${c("dim", "Sample data is seeded automatically for you!")}
+
+`);
+  rl.close();
 }
 
-console.log(`\n  Done! Run these commands:\n`);
-console.log(`    cd ${projectName}`);
-console.log(`    npm run dev        # starts both backend & frontend\n`);
+main().catch((err) => {
+  console.error(err);
+  rl.close();
+  process.exit(1);
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-butterfly-app-v2",
-  "version": "1.0.1",
+  "version": "2.0.0",
   "description": "Scaffold a full-stack Node.js + React + Tailwind + MySQL project",
   "bin": {
     "create-butterfly-app-v2": "cli.js"

package/templates/base/backend/db/init.js

@@ -0,0 +1,14 @@
+const db = require("../config/db");
+
+module.exports = async function init() {
+  await db.query(`
+    CREATE TABLE IF NOT EXISTS users (
+      id INT AUTO_INCREMENT PRIMARY KEY,
+      name VARCHAR(100) NOT NULL,
+      email VARCHAR(100) NOT NULL UNIQUE,
+      password VARCHAR(255) DEFAULT '',
+      created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+    )
+  `);
+  console.log("Tables initialized");
+};

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

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

package/templates/{fullstack → base}/backend/package.json

@@ -1,13 +1,15 @@
 {
-  "name": "__PROJECT_NAME__-backend",
+  "name": "__PROJECT_TYPE__-backend",
   "private": true,
   "scripts": {
     "dev": "nodemon server.js"
   },
   "dependencies": {
+    "bcryptjs": "^2.4.3",
     "cors": "^2.8.5",
     "dotenv": "^16.4.7",
     "express": "^4.21.1",
+    "jsonwebtoken": "^9.0.2",
     "mysql2": "^3.11.5"
   },
   "devDependencies": {

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

@@ -0,0 +1,76 @@
+const router = require("express").Router();
+const bcrypt = require("bcryptjs");
+const jwt = require("jsonwebtoken");
+const db = require("../config/db");
+
+router.post("/register", async (req, res) => {
+  const { name, email, password } = req.body;
+  if (!name || !email || !password) {
+    return res.status(400).json({ error: "All fields required" });
+  }
+  try {
+    const hashed = await bcrypt.hash(password, 10);
+    const [result] = await db.query(
+      "INSERT INTO users (name, email, password) VALUES (?, ?, ?)",
+      [name, email, hashed]
+    );
+    const token = jwt.sign(
+      { id: result.insertId, name, email },
+      process.env.JWT_SECRET,
+      { expiresIn: process.env.JWT_EXPIRES_IN || "7d" }
+    );
+    res.status(201).json({ token, user: { id: result.insertId, name, email } });
+  } catch (err) {
+    if (err.code === "ER_DUP_ENTRY") {
+      return res.status(409).json({ error: "Email already exists" });
+    }
+    res.status(500).json({ error: err.message });
+  }
+});
+
+router.post("/login", async (req, res) => {
+  const { email, password } = req.body;
+  if (!email || !password) {
+    return res.status(400).json({ error: "Email and password required" });
+  }
+  try {
+    const [rows] = await db.query("SELECT * FROM users WHERE email = ?", [email]);
+    if (rows.length === 0) {
+      return res.status(401).json({ error: "Invalid credentials" });
+    }
+    const user = rows[0];
+    const match = await bcrypt.compare(password, user.password);
+    if (!match) {
+      return res.status(401).json({ error: "Invalid credentials" });
+    }
+    const token = jwt.sign(
+      { id: user.id, name: user.name, email: user.email },
+      process.env.JWT_SECRET,
+      { expiresIn: process.env.JWT_EXPIRES_IN || "7d" }
+    );
+    res.json({ token, user: { id: user.id, name: user.name, email: user.email } });
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+router.get("/me", async (req, res) => {
+  const header = req.headers.authorization;
+  if (!header || !header.startsWith("Bearer ")) {
+    return res.status(401).json({ error: "No token" });
+  }
+  try {
+    const token = header.split(" ")[1];
+    const decoded = jwt.verify(token, process.env.JWT_SECRET);
+    const [rows] = await db.query(
+      "SELECT id, name, email FROM users WHERE id = ?",
+      [decoded.id]
+    );
+    if (rows.length === 0) return res.status(404).json({ error: "User not found" });
+    res.json(rows[0]);
+  } catch {
+    res.status(401).json({ error: "Invalid token" });
+  }
+});
+
+module.exports = router;

package/templates/{fullstack → base}/backend/server.js

@@ -10,17 +10,22 @@ app.use(cors());
 app.use(express.json());
 
 app.get("/api/health", (req, res) => {
-  res.json({ status: "ok", project: "__PROJECT_NAME__" });
+  res.json({ status: "ok", project: "__PROJECT_NAME__", type: "__PROJECT_TYPE__" });
 });
 
+app.use("/api/auth", require("./routes/auth"));
 app.use("/api", require("./routes/api"));
 
-db.query("SELECT 1")
-  .then(() => {
+async function start() {
+  try {
+    await db.query("SELECT 1");
     console.log("MySQL connected");
+    await require("./db/init")();
     app.listen(PORT, () => console.log(`Backend on http://localhost:${PORT}`));
-  })
-  .catch((err) => {
-    console.error("MySQL connection failed:", err.message);
+  } catch (err) {
+    console.error("Startup failed:", err.message);
     process.exit(1);
-  });
+  }
+}
+
+start();

package/templates/{fullstack → base}/frontend/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "__PROJECT_NAME__-frontend",
+  "name": "__PROJECT_TYPE__-frontend",
   "private": true,
   "type": "module",
   "scripts": {
@@ -9,7 +9,8 @@
   },
   "dependencies": {
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.1.1"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4.3.4",

package/templates/base/frontend/src/App.jsx

@@ -0,0 +1,32 @@
+import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
+import { AuthProvider, useAuth } from "./context/AuthContext";
+import Login from "./pages/Login";
+import Register from "./pages/Register";
+import Dashboard from "./pages/Dashboard";
+
+function Protected({ children }) {
+  const { user, loading } = useAuth();
+  if (loading) return <div className="min-h-screen flex items-center justify-center text-gray-500">Loading...</div>;
+  return user ? children : <Navigate to="/login" />;
+}
+
+function Guest({ children }) {
+  const { user, loading } = useAuth();
+  if (loading) return <div className="min-h-screen flex items-center justify-center text-gray-500">Loading...</div>;
+  return user ? <Navigate to="/dashboard" /> : children;
+}
+
+export default function App() {
+  return (
+    <BrowserRouter>
+      <AuthProvider>
+        <Routes>
+          <Route path="/login" element={<Guest><Login /></Guest>} />
+          <Route path="/register" element={<Guest><Register /></Guest>} />
+          <Route path="/dashboard" element={<Protected><Dashboard /></Protected>} />
+          <Route path="*" element={<Navigate to="/login" />} />
+        </Routes>
+      </AuthProvider>
+    </BrowserRouter>
+  );
+}

package/templates/base/frontend/src/context/AuthContext.jsx

@@ -0,0 +1,33 @@
+import { createContext, useContext, useState, useEffect } from "react";
+
+const AuthContext = createContext(null);
+
+export function AuthProvider({ children }) {
+  const [user, setUser] = useState(null);
+  const [token, setToken] = useState(localStorage.getItem("token"));
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (!token) { setLoading(false); return; }
+    fetch("/api/auth/me", {
+      headers: { Authorization: `Bearer ${token}` },
+    })
+      .then((r) => (r.ok ? r.json() : null))
+      .then((u) => {
+        if (u) setUser(u);
+        else { setToken(null); localStorage.removeItem("token"); }
+      })
+      .finally(() => setLoading(false));
+  }, [token]);
+
+  const login = (t, u) => { localStorage.setItem("token", t); setToken(t); setUser(u); };
+  const logout = () => { localStorage.removeItem("token"); setToken(null); setUser(null); };
+
+  return (
+    <AuthContext.Provider value={{ user, token, loading, login, logout }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export const useAuth = () => useContext(AuthContext);

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

@@ -0,0 +1,40 @@
+import { useState } from "react";
+import { useNavigate, Link } from "react-router-dom";
+import { useAuth } from "../context/AuthContext";
+
+export default function Login() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const { login } = useAuth();
+  const navigate = useNavigate();
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError("");
+    const res = await fetch("/api/auth/login", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ email, password }),
+    });
+    const data = await res.json();
+    if (!res.ok) return setError(data.error);
+    login(data.token, data.user);
+    navigate("/dashboard");
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-100">
+      <form onSubmit={handleSubmit} className="bg-white p-8 rounded shadow w-96">
+        <h1 className="text-2xl font-bold mb-6 text-center">Login</h1>
+        {error && <p className="text-red-500 mb-4 text-sm">{error}</p>}
+        <input className="border rounded w-full px-3 py-2 mb-4" placeholder="Email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} required />
+        <input className="border rounded w-full px-3 py-2 mb-4" placeholder="Password" type="password" value={password} onChange={(e) => setPassword(e.target.value)} required />
+        <button className="bg-blue-600 text-white rounded w-full py-2 hover:bg-blue-700">Login</button>
+        <p className="text-center text-sm mt-4">
+          No account? <Link to="/register" className="text-blue-600">Register</Link>
+        </p>
+      </form>
+    </div>
+  );
+}

package/templates/base/frontend/src/pages/Register.jsx

@@ -0,0 +1,42 @@
+import { useState } from "react";
+import { useNavigate, Link } from "react-router-dom";
+import { useAuth } from "../context/AuthContext";
+
+export default function Register() {
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const { login } = useAuth();
+  const navigate = useNavigate();
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError("");
+    const res = await fetch("/api/auth/register", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ name, email, password }),
+    });
+    const data = await res.json();
+    if (!res.ok) return setError(data.error);
+    login(data.token, data.user);
+    navigate("/dashboard");
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-100">
+      <form onSubmit={handleSubmit} className="bg-white p-8 rounded shadow w-96">
+        <h1 className="text-2xl font-bold mb-6 text-center">Register</h1>
+        {error && <p className="text-red-500 mb-4 text-sm">{error}</p>}
+        <input className="border rounded w-full px-3 py-2 mb-4" placeholder="Name" value={name} onChange={(e) => setName(e.target.value)} required />
+        <input className="border rounded w-full px-3 py-2 mb-4" placeholder="Email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} required />
+        <input className="border rounded w-full px-3 py-2 mb-4" placeholder="Password" type="password" value={password} onChange={(e) => setPassword(e.target.value)} required />
+        <button className="bg-blue-600 text-white rounded w-full py-2 hover:bg-blue-700">Register</button>
+        <p className="text-center text-sm mt-4">
+          Already have an account? <Link to="/login" className="text-blue-600">Login</Link>
+        </p>
+      </form>
+    </div>
+  );
+}

package/templates/types/hotel/backend/db/init.js

@@ -0,0 +1,44 @@
+const db = require("../config/db");
+
+module.exports = async function init() {
+  await db.query(`
+    CREATE TABLE IF NOT EXISTS users (
+      id INT AUTO_INCREMENT PRIMARY KEY,
+      name VARCHAR(100) NOT NULL,
+      email VARCHAR(100) NOT NULL UNIQUE,
+      password VARCHAR(255) DEFAULT '',
+      created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+    )
+  `);
+  await db.query(`
+    CREATE TABLE IF NOT EXISTS rooms (
+      id INT AUTO_INCREMENT PRIMARY KEY,
+      number VARCHAR(10) NOT NULL UNIQUE,
+      type VARCHAR(50) NOT NULL DEFAULT 'standard',
+      price DECIMAL(10,2) NOT NULL DEFAULT 0,
+      capacity INT NOT NULL DEFAULT 2,
+      status VARCHAR(20) NOT NULL DEFAULT 'available',
+      created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+    )
+  `);
+  await db.query(`
+    CREATE TABLE IF NOT EXISTS reservations (
+      id INT AUTO_INCREMENT PRIMARY KEY,
+      guest_name VARCHAR(100) NOT NULL,
+      guest_email VARCHAR(100) NOT NULL,
+      guest_phone VARCHAR(20) DEFAULT '',
+      room_id INT NOT NULL,
+      check_in DATE NOT NULL,
+      check_out DATE NOT NULL,
+      status VARCHAR(20) NOT NULL DEFAULT 'confirmed',
+      created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+      FOREIGN KEY (room_id) REFERENCES rooms(id) ON DELETE CASCADE
+    )
+  `);
+  const [rows] = await db.query("SELECT COUNT(*) as c FROM rooms");
+  if (rows[0].c === 0) {
+    await db.query("INSERT INTO rooms (number, type, price, capacity) VALUES ('101', 'standard', 80, 2), ('102', 'standard', 80, 2), ('201', 'deluxe', 150, 3), ('202', 'deluxe', 150, 3), ('301', 'suite', 250, 4)");
+    console.log("Sample rooms created");
+  }
+  console.log("Hotel tables initialized");
+};