create-butterfly-app-v2 1.0.1 → 1.1.0

package/cli.js

@@ -44,6 +44,20 @@ try {
   console.log("\n  Run 'npm install' in each folder manually if install failed.");
 }
 
-console.log(`\n  Done! Run these commands:\n`);
-console.log(`    cd ${projectName}`);
-console.log(`    npm run dev        # starts both backend & frontend\n`);
+console.log(`\n  Goodluck with your project! 🚀\n`);
+console.log(`  ─────────────────────────────`);
+console.log(`  cd ${projectName}`);
+console.log(`  npm run dev`);
+console.log(`  ─────────────────────────────\n`);
+console.log(`  1. Start XAMPP (Apache + MySQL)`);
+console.log(`  2. Create database "${projectName}" in phpMyAdmin`);
+console.log(`  3. Run this SQL to create tables:\n`);
+console.log(`     CREATE TABLE users (`);
+console.log(`       id INT AUTO_INCREMENT PRIMARY KEY,`);
+console.log(`       name VARCHAR(100) NOT NULL,`);
+console.log(`       email VARCHAR(100) NOT NULL UNIQUE,`);
+console.log(`       password VARCHAR(255) DEFAULT '',`);
+console.log(`       created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP`);
+console.log(`     );\n`);
+console.log(`  4. Open http://localhost:5173`);
+console.log(`  5. Register a new account and start using the app!\n`);

package/package.json

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

package/templates/fullstack/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/backend/package.json

@@ -5,9 +5,11 @@
     "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/fullstack/backend/routes/api.js

@@ -1,23 +1,71 @@
 const router = require("express").Router();
 const db = require("../config/db");
+const authenticate = require("../middleware/auth");
 
-router.get("/users", async (req, res) => {
+router.get("/users", authenticate, async (req, res) => {
   try {
-    const [rows] = await db.query("SELECT * FROM users");
+    const [rows] = await db.query("SELECT id, name, email, created_at FROM users");
     res.json(rows);
   } catch (err) {
     res.status(500).json({ error: err.message });
   }
 });
 
-router.post("/users", async (req, res) => {
-  const { name, email } = req.body;
+router.get("/users/:id", authenticate, async (req, res) => {
+  try {
+    const [rows] = await db.query(
+      "SELECT id, name, email, created_at FROM users WHERE id = ?",
+      [req.params.id]
+    );
+    if (rows.length === 0) return res.status(404).json({ error: "User not found" });
+    res.json(rows[0]);
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+router.post("/users", authenticate, async (req, res) => {
+  const { name, email, password } = req.body;
+  if (!name || !email) return res.status(400).json({ error: "Name and email required" });
   try {
+    const bcrypt = require("bcryptjs");
+    const hashed = password ? await bcrypt.hash(password, 10) : "";
     const [result] = await db.query(
-      "INSERT INTO users (name, email) VALUES (?, ?)",
-      [name, email]
+      "INSERT INTO users (name, email, password) VALUES (?, ?, ?)",
+      [name, email, hashed]
     );
     res.status(201).json({ 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.put("/users/:id", authenticate, async (req, res) => {
+  const { name, email } = req.body;
+  try {
+    const [result] = await db.query(
+      "UPDATE users SET name = ?, email = ? WHERE id = ?",
+      [name, email, req.params.id]
+    );
+    if (result.affectedRows === 0) {
+      return res.status(404).json({ error: "User not found" });
+    }
+    res.json({ id: parseInt(req.params.id), name, email });
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+router.delete("/users/:id", authenticate, async (req, res) => {
+  try {
+    const [result] = await db.query("DELETE FROM users WHERE id = ?", [req.params.id]);
+    if (result.affectedRows === 0) {
+      return res.status(404).json({ error: "User not found" });
+    }
+    res.json({ message: "User deleted" });
   } catch (err) {
     res.status(500).json({ error: err.message });
   }

package/templates/fullstack/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/backend/server.js

@@ -13,6 +13,7 @@ app.get("/api/health", (req, res) => {
   res.json({ status: "ok", project: "__PROJECT_NAME__" });
 });
 
+app.use("/api/auth", require("./routes/auth"));
 app.use("/api", require("./routes/api"));
 
 db.query("SELECT 1")

package/templates/fullstack/frontend/package.json

@@ -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/fullstack/frontend/src/App.jsx

@@ -1,85 +1,33 @@
-import { useState, useEffect } from "react";
-
-function App() {
-  const [users, setUsers] = useState([]);
-  const [name, setName] = useState("");
-  const [email, setEmail] = useState("");
-  const [status, setStatus] = useState("");
-
-  useEffect(() => {
-    fetch("/api/health")
-      .then((r) => r.json())
-      .then((d) => setStatus(d.status))
-      .catch(() => setStatus("no connection"));
-  }, []);
-
-  useEffect(() => {
-    fetch("/api/users")
-      .then((r) => r.json())
-      .then(setUsers)
-      .catch(console.error);
-  }, []);
+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" />;
+}
 
-  const addUser = async (e) => {
-    e.preventDefault();
-    const res = await fetch("/api/users", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ name, email }),
-    });
-    if (res.ok) {
-      const user = await res.json();
-      setUsers((prev) => [...prev, user]);
-      setName("");
-      setEmail("");
-    }
-  };
+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;
+}
 
+function App() {
   return (
-    <div className="min-h-screen bg-gray-100 flex flex-col items-center p-6">
-      <h1 className="text-4xl font-bold text-blue-600 mb-2">__PROJECT_NAME__</h1>
-      <p className="text-gray-500 mb-6">Backend: {status}</p>
-
-      <form onSubmit={addUser} className="flex gap-2 mb-6">
-        <input
-          className="border rounded px-3 py-2"
-          placeholder="Name"
-          value={name}
-          onChange={(e) => setName(e.target.value)}
-          required
-        />
-        <input
-          className="border rounded px-3 py-2"
-          type="email"
-          placeholder="Email"
-          value={email}
-          onChange={(e) => setEmail(e.target.value)}
-          required
-        />
-        <button className="bg-blue-600 text-white rounded px-4 py-2 hover:bg-blue-700">
-          Add User
-        </button>
-      </form>
-
-      <table className="w-full max-w-lg bg-white rounded shadow">
-        <thead>
-          <tr className="border-b bg-gray-50">
-            <th className="p-2 text-left">ID</th>
-            <th className="p-2 text-left">Name</th>
-            <th className="p-2 text-left">Email</th>
-          </tr>
-        </thead>
-        <tbody>
-          {users.map((u) => (
-            <tr key={u.id} className="border-b">
-              <td className="p-2">{u.id}</td>
-              <td className="p-2">{u.name}</td>
-              <td className="p-2">{u.email}</td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
+    <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/fullstack/frontend/src/context/AuthContext.jsx

@@ -0,0 +1,45 @@
+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/fullstack/frontend/src/pages/Dashboard.jsx

@@ -0,0 +1,110 @@
+import { useState, useEffect } from "react";
+import { useAuth } from "../context/AuthContext";
+
+export default function Dashboard() {
+  const { user, logout } = useAuth();
+  const [users, setUsers] = useState([]);
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [editing, setEditing] = useState(null);
+  const [editName, setEditName] = useState("");
+  const [editEmail, setEditEmail] = useState("");
+
+  const token = localStorage.getItem("token");
+  const headers = { "Content-Type": "application/json", Authorization: `Bearer ${token}` };
+
+  const fetchUsers = () =>
+    fetch("/api/users", { headers })
+      .then((r) => r.json())
+      .then(setUsers)
+      .catch(console.error);
+
+  useEffect(() => { fetchUsers(); }, []);
+
+  const addUser = async (e) => {
+    e.preventDefault();
+    const res = await fetch("/api/users", {
+      method: "POST", headers,
+      body: JSON.stringify({ name, email }),
+    });
+    if (res.ok) {
+      setName(""); setEmail("");
+      fetchUsers();
+    }
+  };
+
+  const updateUser = async (id) => {
+    await fetch(`/api/users/${id}`, {
+      method: "PUT", headers,
+      body: JSON.stringify({ name: editName, email: editEmail }),
+    });
+    setEditing(null);
+    fetchUsers();
+  };
+
+  const deleteUser = async (id) => {
+    if (!confirm("Delete this user?")) return;
+    await fetch(`/api/users/${id}`, { method: "DELETE", headers });
+    fetchUsers();
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-100">
+      <nav className="bg-white shadow px-6 py-3 flex justify-between items-center">
+        <h1 className="text-xl font-bold text-blue-600">__PROJECT_NAME__</h1>
+        <div className="flex items-center gap-4">
+          <span className="text-gray-600">{user?.name}</span>
+          <button onClick={logout} className="bg-red-500 text-white px-3 py-1 rounded text-sm hover:bg-red-600">Logout</button>
+        </div>
+      </nav>
+
+      <div className="max-w-4xl mx-auto p-6">
+        <form onSubmit={addUser} className="flex gap-2 mb-6">
+          <input className="border rounded px-3 py-2 flex-1" placeholder="Name" value={name} onChange={(e) => setName(e.target.value)} required />
+          <input className="border rounded px-3 py-2 flex-1" placeholder="Email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} required />
+          <button className="bg-blue-600 text-white rounded px-4 py-2 hover:bg-blue-700">Add</button>
+        </form>
+
+        <div className="bg-white rounded shadow overflow-hidden">
+          <table className="w-full">
+            <thead>
+              <tr className="border-b bg-gray-50">
+                <th className="p-3 text-left">ID</th>
+                <th className="p-3 text-left">Name</th>
+                <th className="p-3 text-left">Email</th>
+                <th className="p-3 text-left">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {users.map((u) => (
+                <tr key={u.id} className="border-b hover:bg-gray-50">
+                  {editing === u.id ? (
+                    <>
+                      <td className="p-2">{u.id}</td>
+                      <td className="p-2"><input className="border rounded px-2 py-1 w-full" value={editName} onChange={(e) => setEditName(e.target.value)} /></td>
+                      <td className="p-2"><input className="border rounded px-2 py-1 w-full" value={editEmail} onChange={(e) => setEditEmail(e.target.value)} /></td>
+                      <td className="p-2 flex gap-1">
+                        <button onClick={() => updateUser(u.id)} className="bg-green-500 text-white px-2 py-1 rounded text-xs hover:bg-green-600">Save</button>
+                        <button onClick={() => setEditing(null)} className="bg-gray-500 text-white px-2 py-1 rounded text-xs hover:bg-gray-600">Cancel</button>
+                      </td>
+                    </>
+                  ) : (
+                    <>
+                      <td className="p-3">{u.id}</td>
+                      <td className="p-3">{u.name}</td>
+                      <td className="p-3">{u.email}</td>
+                      <td className="p-3 flex gap-1">
+                        <button onClick={() => { setEditing(u.id); setEditName(u.name); setEditEmail(u.email); }} className="bg-yellow-500 text-white px-2 py-1 rounded text-xs hover:bg-yellow-600">Edit</button>
+                        <button onClick={() => deleteUser(u.id)} className="bg-red-500 text-white px-2 py-1 rounded text-xs hover:bg-red-600">Delete</button>
+                      </td>
+                    </>
+                  )}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/fullstack/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/fullstack/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>
+  );
+}