create-parachute 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,474 @@
+#!/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=parachute_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
+
+This project uses simple CSS for maximum beginner-friendliness, but this file helps you style fast if you add Tailwind later.
+
+## 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.white("\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. You can 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. You can run npm install manually inside client."));
+  }
+}
+
+console.log(chalk.white("Next steps:"));
+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`));

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "create-parachute",
+  "version": "1.0.2",
+  "description": "Student-friendly fullstack exam starter generator",
+  "type": "module",
+  "bin": {
+    "create-parachute": "./bin/index.js"
+  },
+  "scripts": {
+    "start": "node bin/index.js"
+  },
+  "keywords": [
+    "cli",
+    "student",
+    "exam",
+    "react",
+    "vite",
+    "express",
+    "mysql",
+    "sequelize"
+  ],
+  "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,18 @@
+{
+  "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",
+    "vite": "^5.3.4"
+  }
+}

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,57 @@
+import { Link, useNavigate } from "react-router-dom";
+import { api } from "../api/client";
+import { clearUser, getUser } from "../utils/auth";
+
+export default function Navbar() {
+  const navigate = useNavigate();
+  const user = getUser();
+
+  const logout = async () => {
+    try {
+      await api.post("/auth/logout");
+    } catch {}
+
+    clearUser();
+    navigate("/login");
+  };
+
+  return (
+    <nav style={{
+      background: "white",
+      borderBottom: "1px solid #e5e7eb",
+      padding: "18px 32px",
+      display: "flex",
+      gap: "24px",
+      alignItems: "center"
+    }}>
+      <strong style={{ marginRight: "12px" }}>Parachute</strong>
+
+      <Link to="/">Dashboard</Link>
+      <Link to="/page1">Page 1</Link>
+      <Link to="/page2">Page 2</Link>
+      <Link to="/page3">Page 3</Link>
+
+      <span style={{
+        marginLeft: "auto",
+        color: "#6b7280",
+        fontSize: "14px"
+      }}>
+        {user?.Username}
+      </span>
+
+      <button
+        onClick={logout}
+        style={{
+          background: "__THEME__",
+          color: "white",
+          border: "none",
+          padding: "10px 16px",
+          borderRadius: "10px",
+          cursor: "pointer"
+        }}
+      >
+        Logout
+      </button>
+    </nav>
+  );
+}

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/layouts/DashboardLayout.jsx

@@ -0,0 +1,21 @@
+import Navbar from "../components/Navbar";
+
+export default function DashboardLayout({ children }) {
+  return (
+    <div style={{
+      minHeight: "100vh",
+      background: "#f8fafc",
+      fontFamily: "Arial, sans-serif"
+    }}>
+      <Navbar />
+
+      <main style={{
+        padding: "40px",
+        maxWidth: "1100px",
+        margin: "0 auto"
+      }}>
+        {children}
+      </main>
+    </div>
+  );
+}

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

@@ -0,0 +1,9 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+
+ReactDOM.createRoot(document.getElementById("root")).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

package/templates/mysql/client/src/pages/Dashboard.jsx

@@ -0,0 +1,38 @@
+import DashboardLayout from "../layouts/DashboardLayout";
+
+export default function Dashboard() {
+  return (
+    <DashboardLayout>
+      <section style={{
+        background: "white",
+        padding: "32px",
+        borderRadius: "18px",
+        border: "1px solid #e5e7eb",
+        boxShadow: "0 1px 3px rgba(0,0,0,0.06)"
+      }}>
+        <p style={{
+          color: "__THEME__",
+          fontWeight: "700",
+          marginBottom: "8px"
+        }}>
+          Ready to customize
+        </p>
+
+        <h1 style={{
+          fontSize: "32px",
+          marginBottom: "12px"
+        }}>
+          Welcome Dashboard
+        </h1>
+
+        <p style={{
+          color: "#4b5563",
+          lineHeight: "1.7"
+        }}>
+          Start building your own features from this page. Add your forms,
+          tables, buttons, and API calls here.
+        </p>
+      </section>
+    </DashboardLayout>
+  );
+}