create-batman 1.0.2

package/README.md

@@ -0,0 +1,27 @@
+
+# Create Parachute
+
+A clean fullstack starter generator for students.
+
+## Usage
+
+```bash
+npx create-parachute my-project
+```
+
+The generator creates:
+
+- Express backend
+- React + Vite frontend
+- Raw MySQL or Sequelize option
+- Session authentication
+- Username login
+- Hashed passwords
+- React Router navigation
+- Protected routes
+- Dashboard + 3 pages
+- `schema.sql`
+- `instructions.md`
+- `tailwind.md`
+- `sql.md`
+- Optional dependency installation

package/bin/index.js

@@ -0,0 +1,485 @@
+#!/usr/bin/env node
+
+import fs from "fs-extra";
+import path from "path";
+import inquirer from "inquirer";
+import chalk from "chalk";
+import { spawnSync } from "child_process";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+let projectName = process.argv[2];
+
+if (!projectName) {
+  const projectAnswer = await inquirer.prompt([
+    {
+      type: "input",
+      name: "projectName",
+      message: "Project name:",
+      validate: (input) => {
+        if (!input.trim()) {
+          return "Project name is required.";
+        }
+
+        if (!/^[a-zA-Z0-9-_]+$/.test(input)) {
+          return "Only letters, numbers, hyphens, and underscores are allowed.";
+        }
+
+        return true;
+      },
+      filter: (input) => input.trim()
+    }
+  ]);
+
+  projectName = projectAnswer.projectName;
+}
+
+const answers = await inquirer.prompt([
+  {
+    type: "input",
+    name: "dbName",
+    message: "Database name:",
+    default: `${projectName.replace(/-/g, "_")}_db`
+  },
+  {
+    type: "input",
+    name: "serverPort",
+    message: "Backend port:",
+    default: "5000"
+  },
+  {
+    type: "input",
+    name: "clientPort",
+    message: "Frontend port:",
+    default: "5173"
+  },
+  {
+    type: "list",
+    name: "database",
+    message: "Choose database style:",
+    choices: [
+      { name: "Raw MySQL", value: "mysql" },
+      { name: "Sequelize", value: "sequelize" }
+    ]
+  },
+  {
+    type: "list",
+    name: "theme",
+    message: "Choose theme:",
+    choices: [
+      { name: chalk.blue("Blue"), value: "#2563EB" },
+      { name: chalk.green("Green"), value: "#16A34A" },
+      { name: chalk.red("Red"), value: "#DC2626" },
+      { name: chalk.magenta("Purple"), value: "#9333EA" },
+      { name: chalk.yellow("Yellow"), value: "#CA8A04" },
+      { name: chalk.cyan("Cyan"), value: "#0891B2" },
+      { name: chalk.hex("#800000")("Maroon"), value: "#800000" }
+    ]
+  },
+  {
+    type: "confirm",
+    name: "installDeps",
+    message: "Install backend and frontend dependencies now?",
+    default: true
+  }
+]);
+
+const template = path.join(__dirname, "..", "templates", answers.database);
+const target = path.join(process.cwd(), projectName);
+
+if (fs.existsSync(target)) {
+  console.log(chalk.red("Folder already exists. Choose another project name."));
+  process.exit(1);
+}
+
+await fs.copy(template, target);
+
+const env = `PORT=${answers.serverPort}
+DB_HOST=localhost
+DB_USER=root
+DB_PASSWORD=
+DB_NAME=${answers.dbName}
+CLIENT_URL=http://localhost:${answers.clientPort}
+SESSION_SECRET=batman_secret`;
+
+await fs.writeFile(path.join(target, "server/.env"), env);
+
+const schema = `CREATE DATABASE IF NOT EXISTS ${answers.dbName};
+USE ${answers.dbName};
+
+CREATE TABLE Users(
+  UserID INT AUTO_INCREMENT PRIMARY KEY,
+  Username VARCHAR(255) UNIQUE NOT NULL,
+  Password VARCHAR(255) NOT NULL
+);`;
+
+await fs.writeFile(path.join(target, "schema.sql"), schema);
+
+const instructions = `# ${projectName}
+
+## 1. Run the database file
+
+Open MySQL and run schema.sql.
+
+Example:
+
+SOURCE /full/path/to/${projectName}/schema.sql;
+
+## 2. Start backend
+
+cd server
+npm run dev
+
+## 3. Start frontend
+
+cd client
+npm run dev
+
+## Notes
+
+- Backend runs on port ${answers.serverPort}
+- Frontend runs on port ${answers.clientPort}
+- Auth uses Username and hashed Password
+- Add your own backend features inside controllers and routes
+- Add your own frontend screens inside client/src/pages
+`;
+
+await fs.writeFile(path.join(target, "instructions.md"), instructions);
+
+const tailwindCheat = `# Tailwind Cheat Sheet
+
+## Layout
+
+flex
+grid
+block
+hidden
+relative
+absolute
+fixed
+sticky
+
+## Flexbox
+
+flex
+flex-col
+flex-row
+items-center
+items-start
+items-end
+justify-center
+justify-between
+justify-end
+gap-2
+gap-4
+gap-6
+
+## Grid
+
+grid
+grid-cols-1
+grid-cols-2
+grid-cols-3
+md:grid-cols-2
+lg:grid-cols-3
+
+## Spacing
+
+p-2
+p-4
+p-6
+p-8
+px-4
+px-6
+py-2
+py-3
+py-4
+m-2
+m-4
+mt-4
+mb-4
+mx-auto
+
+## Width and Height
+
+w-full
+w-screen
+max-w-md
+max-w-xl
+max-w-6xl
+min-h-screen
+h-screen
+
+## Typography
+
+text-sm
+text-base
+text-lg
+text-xl
+text-2xl
+font-medium
+font-semibold
+font-bold
+text-center
+
+## Colors
+
+bg-white
+bg-black
+bg-gray-50
+bg-gray-100
+text-black
+text-white
+text-gray-500
+text-gray-700
+
+## Borders and Radius
+
+border
+border-gray-200
+rounded
+rounded-lg
+rounded-xl
+rounded-2xl
+
+## Shadows
+
+shadow
+shadow-md
+shadow-lg
+
+## Buttons
+
+bg-black text-white px-4 py-2 rounded-lg
+bg-blue-600 text-white px-4 py-2 rounded-lg
+
+## Forms
+
+border rounded-lg px-4 py-2 w-full
+focus:outline-none focus:ring-2 focus:ring-blue-500
+
+## Responsive Examples
+
+<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+</div>
+
+<div className="p-4 md:p-8">
+</div>
+`;
+
+await fs.writeFile(path.join(target, "tailwind.md"), tailwindCheat);
+
+const sqlCheat = `# SQL Cheat Sheet
+
+## Create Database
+
+CREATE DATABASE school_db;
+USE school_db;
+
+## Create Table
+
+CREATE TABLE Students(
+  StudentID INT AUTO_INCREMENT PRIMARY KEY,
+  StudentName VARCHAR(100) NOT NULL,
+  Age INT
+);
+
+## Insert
+
+INSERT INTO Students (StudentName, Age)
+VALUES ('Aime', 20);
+
+## Select All
+
+SELECT * FROM Students;
+
+## Select Specific Columns
+
+SELECT StudentName, Age FROM Students;
+
+## Filter with WHERE
+
+SELECT * FROM Students
+WHERE Age > 18;
+
+## Search with LIKE
+
+SELECT * FROM Students
+WHERE StudentName LIKE '%ai%';
+
+## Sort
+
+SELECT * FROM Students
+ORDER BY StudentName ASC;
+
+SELECT * FROM Students
+ORDER BY Age DESC;
+
+## Limit
+
+SELECT * FROM Students
+LIMIT 5;
+
+## Update
+
+UPDATE Students
+SET Age = 21
+WHERE StudentID = 1;
+
+## Delete
+
+DELETE FROM Students
+WHERE StudentID = 1;
+
+## Count
+
+SELECT COUNT(*) AS TotalStudents
+FROM Students;
+
+## Sum
+
+SELECT SUM(Amount) AS TotalAmount
+FROM Payments;
+
+## Average
+
+SELECT AVG(Marks) AS AverageMarks
+FROM Results;
+
+## Group By
+
+SELECT ClassID, COUNT(*) AS TotalStudents
+FROM Students
+GROUP BY ClassID;
+
+## Having
+
+SELECT ClassID, COUNT(*) AS TotalStudents
+FROM Students
+GROUP BY ClassID
+HAVING COUNT(*) > 5;
+
+## Inner Join
+
+SELECT Students.StudentName, Classes.ClassName
+FROM Students
+INNER JOIN Classes
+ON Students.ClassID = Classes.ClassID;
+
+## Left Join
+
+SELECT Students.StudentName, Payments.Amount
+FROM Students
+LEFT JOIN Payments
+ON Students.StudentID = Payments.StudentID;
+
+## Multiple Joins
+
+SELECT Students.StudentName, Classes.ClassName, Payments.Amount
+FROM Students
+JOIN Classes ON Students.ClassID = Classes.ClassID
+JOIN Payments ON Students.StudentID = Payments.StudentID;
+
+## Subquery
+
+SELECT * FROM Students
+WHERE ClassID IN (
+  SELECT ClassID FROM Classes WHERE ClassName = 'S6'
+);
+
+## Between
+
+SELECT * FROM Payments
+WHERE Amount BETWEEN 1000 AND 5000;
+
+## Dates
+
+SELECT * FROM Orders
+WHERE DATE(CreatedAt) = CURDATE();
+
+## Beginner Exam CRUD Pattern
+
+GET all:
+SELECT * FROM TableName;
+
+GET one:
+SELECT * FROM TableName WHERE ID = ?;
+
+CREATE:
+INSERT INTO TableName (Column1, Column2) VALUES (?, ?);
+
+UPDATE:
+UPDATE TableName SET Column1 = ?, Column2 = ? WHERE ID = ?;
+
+DELETE:
+DELETE FROM TableName WHERE ID = ?;
+`;
+
+await fs.writeFile(path.join(target, "sql.md"), sqlCheat);
+
+async function inject(dir) {
+  const files = await fs.readdir(dir);
+
+  for (const file of files) {
+    const full = path.join(dir, file);
+    const stat = await fs.stat(full);
+
+    if (stat.isDirectory()) {
+      await inject(full);
+    } else {
+      try {
+        let content = await fs.readFile(full, "utf8");
+
+        content = content.replaceAll("__THEME__", answers.theme);
+        content = content.replaceAll("__PORT__", answers.serverPort);
+
+        await fs.writeFile(full, content);
+      } catch {}
+    }
+  }
+}
+
+await inject(target);
+
+console.log(chalk.green("\nProject created successfully.\n"));
+
+if (answers.installDeps) {
+  console.log(chalk.white("Installing backend dependencies..."));
+
+  const serverInstall = spawnSync("npm", ["install"], {
+    cwd: path.join(target, "server"),
+    stdio: "inherit",
+    shell: true
+  });
+
+  if (serverInstall.status !== 0) {
+    console.log(
+      chalk.red(
+        "Backend dependency installation failed. Run npm install manually inside server."
+      )
+    );
+  }
+
+  console.log(chalk.white("Installing frontend dependencies..."));
+
+  const clientInstall = spawnSync("npm", ["install"], {
+    cwd: path.join(target, "client"),
+    stdio: "inherit",
+    shell: true
+  });
+
+  if (clientInstall.status !== 0) {
+    console.log(
+      chalk.red(
+        "Frontend dependency installation failed. Run npm install manually inside client."
+      )
+    );
+  }
+}
+
+console.log(chalk.cyan("\nNext steps:\n"));
+console.log(chalk.gray(`1. Run schema.sql in MySQL`));
+console.log(chalk.gray(`2. cd ${projectName}/server && npm run dev`));
+console.log(chalk.gray(`3. cd ${projectName}/client && npm run dev\n`));

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "create-batman",
+  "version": "1.0.2",
+  "description": "Student-friendly fullstack exam starter generator",
+  "type": "module",
+  "bin": {
+    "create-batman": "bin/index.js"
+  },
+  "scripts": {
+    "start": "node bin/index.js"
+  },
+  "keywords": [
+    "cli",
+    "student",
+    "exam",
+    "react",
+    "vite",
+    "express",
+    "mysql",
+    "sequelize",
+    "batman"
+  ],
+  "author": "Aime",
+  "license": "MIT",
+  "dependencies": {
+    "chalk": "^5.3.0",
+    "fs-extra": "^11.2.0",
+    "inquirer": "^9.2.23"
+  }
+}

package/templates/mysql/client/index.html

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

package/templates/mysql/client/package.json

@@ -0,0 +1,21 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.7.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.30.1"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.41",
+    "tailwindcss": "^3.4.10",
+    "vite": "^5.3.4"
+  }
+}

package/templates/mysql/client/postcss.config.js

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

package/templates/mysql/client/src/App.jsx

@@ -0,0 +1,5 @@
+import Router from "./router";
+
+export default function App() {
+  return <Router />;
+}

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

@@ -0,0 +1,6 @@
+import axios from "axios";
+
+export const api = axios.create({
+  baseURL: "http://localhost:__PORT__",
+  withCredentials: true
+});

package/templates/mysql/client/src/components/Navbar.jsx

@@ -0,0 +1,75 @@
+import { NavLink, useNavigate } from "react-router-dom";
+import { api } from "../api/client";
+import { clearUser, getUser } from "../utils/auth";
+
+const links = [
+  { to: "/", label: "Dashboard" },
+  { to: "/page1", label: "Form" },
+  { to: "/page2", label: "Table" },
+  { to: "/page3", label: "Cards" }
+];
+
+export default function Navbar() {
+  const navigate = useNavigate();
+  const user = getUser();
+
+  const logout = async () => {
+    try {
+      await api.post("/auth/logout");
+    } catch {}
+
+    clearUser();
+    navigate("/login");
+  };
+
+  return (
+    <header className="sticky top-0 z-50 border-b border-slate-200 bg-white/95 backdrop-blur">
+      <div className="mx-auto flex max-w-6xl flex-col gap-4 px-4 py-4 sm:px-6 lg:flex-row lg:items-center lg:justify-between lg:px-8">
+        <div className="flex items-center justify-between gap-4">
+          <div>
+            <p className="text-lg font-black tracking-tight text-slate-950">Parachute</p>
+            <p className="text-xs text-slate-500">Full-stack starter</p>
+          </div>
+
+          <button
+            onClick={logout}
+            className="rounded-xl bg-slate-950 px-4 py-2 text-sm font-bold text-white lg:hidden"
+          >
+            Logout
+          </button>
+        </div>
+
+        <nav className="flex gap-2 overflow-x-auto rounded-2xl border border-slate-200 bg-slate-50 p-1">
+          {links.map((link) => (
+            <NavLink
+              key={link.to}
+              to={link.to}
+              end={link.to === "/"}
+              className={({ isActive }) =>
+                `whitespace-nowrap rounded-xl px-4 py-2 text-sm font-bold transition ${
+                  isActive
+                    ? "bg-white text-slate-950 shadow-sm"
+                    : "text-slate-500 hover:bg-white hover:text-slate-900"
+                }`
+              }
+            >
+              {link.label}
+            </NavLink>
+          ))}
+        </nav>
+
+        <div className="hidden items-center gap-3 lg:flex">
+          <span className="max-w-[180px] truncate text-sm font-semibold text-slate-500">
+            {user?.Username || "User"}
+          </span>
+          <button
+            onClick={logout}
+            className="rounded-xl bg-slate-950 px-4 py-2 text-sm font-bold text-white transition hover:bg-slate-800"
+          >
+            Logout
+          </button>
+        </div>
+      </div>
+    </header>
+  );
+}

package/templates/mysql/client/src/components/ProtectedRoute.jsx

@@ -0,0 +1,10 @@
+import { Navigate } from "react-router-dom";
+import { isAuthenticated } from "../utils/auth";
+
+export default function ProtectedRoute({ children }) {
+  if (!isAuthenticated()) {
+    return <Navigate to="/login" />;
+  }
+
+  return children;
+}

package/templates/mysql/client/src/index.css

@@ -0,0 +1,24 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  background: #f8fafc;
+  color: #111827;
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+input, select, textarea, button {
+  font: inherit;
+}