create-matwad-app 1.0.0

package/README.md

@@ -0,0 +1,51 @@
+# create-matwad-app
+
+A CLI tool to scaffold a modern full-stack web application.
+
+## Stack
+
+- **Server**: Express.js, Knex.js, PostgreSQL (w/ Supabase support)
+- **Client**: Vite, React, TailwindCSS v4, Shadcn/UI, React Router (Data API)
+
+## Usage
+
+```bash
+npx create-matwad-app <project-name>
+```
+
+Or globally:
+
+```bash
+npm install -g create-matwad-app
+create-matwad-app my-app
+```
+
+## Features
+
+- Interactive project generation.
+- Automated dependency installation for both server and client.
+- Automated `shadcn/ui` initialization.
+- Pre-configured TailwindCSS v4.
+- Ready-to-use directory structure.
+
+## Getting Started
+
+1.  Create your app:
+    ```bash
+    npx create-matwad-app my-awesome-app
+    ```
+2.  Start the development servers:
+
+    ```bash
+    # Terminal 1
+    cd my-awesome-app/server
+    npm run dev
+
+    # Terminal 2
+    cd my-awesome-app/client
+    npm run dev
+    ```
+
+## License
+
+ISC

package/bin/cli.js

@@ -0,0 +1,8 @@
+#!/usr/bin/env node
+
+import { run } from "../src/index.js";
+
+run().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "create-matwad-app",
+  "version": "1.0.0",
+  "description": "CLI to scaffold a full-stack app with Express, Knex, Vite, React, Tailwind, and Shadcn UI.",
+  "main": "src/index.js",
+  "bin": {
+    "create-matwad-app": "bin/cli.js"
+  },
+  "files": [
+    "bin",
+    "src",
+    "templates"
+  ],
+  "keywords": [
+    "create-app",
+    "scaffold",
+    "express",
+    "react",
+    "vite",
+    "knex",
+    "shadcn"
+  ],
+  "author": "xyberr",
+  "license": "ISC",
+  "type": "module",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "dependencies": {
+    "commander": "^13.0.0",
+    "fs-extra": "^11.3.0",
+    "kolorist": "^1.8.0",
+    "prompts": "^2.4.2"
+  }
+}

package/src/index.js

@@ -0,0 +1,161 @@
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import prompts from "prompts";
+import { red, green, bold, blue, cyan } from "kolorist";
+import { Command } from "commander";
+import fse from "fs-extra";
+import { spawn } from "node:child_process";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export async function run() {
+  const program = new Command();
+  let projectName;
+
+  program
+    .name("create-matwad-app")
+    .arguments("[project-name]")
+    .usage("[project-name] [options]")
+    .action((name) => {
+      projectName = name;
+    })
+    .parse(process.argv);
+
+  if (!projectName) {
+    const response = await prompts({
+      type: "text",
+      name: "projectName",
+      message: "Project name:",
+      initial: "matwad-app",
+    });
+    projectName = response.projectName;
+  }
+
+  if (!projectName) {
+    console.log(red("Operation cancelled"));
+    return;
+  }
+
+  const root = path.join(process.cwd(), projectName);
+
+  if (fs.existsSync(root)) {
+    const { overwrite } = await prompts({
+      type: "confirm",
+      name: "overwrite",
+      message: `Target directory "${projectName}" is not empty. Remove existing files and continue?`,
+    });
+
+    if (!overwrite) {
+      console.log(red("Operation cancelled"));
+      return;
+    }
+
+    await fse.emptyDir(root);
+  } else {
+    fs.mkdirSync(root, { recursive: true });
+  }
+
+  console.log(`Scaffolding project in ${bold(root)}...`);
+
+  const templateDir = path.resolve(__dirname, "../templates");
+  const serverTemplate = path.join(templateDir, "server");
+  const clientTemplate = path.join(templateDir, "client");
+
+  // 1. Scaffold Server
+  const serverDir = path.join(root, "server");
+  console.log(`\n${blue(bold("Setting up Server..."))}`);
+  await fse.copy(serverTemplate, serverDir);
+
+  // Update server package.json name
+  const serverPkgPath = path.join(serverDir, "package.json");
+  const serverPkg = await fse.readJson(serverPkgPath);
+  serverPkg.name = `${projectName}-server`;
+  await fse.writeJson(serverPkgPath, serverPkg, { spaces: 2 });
+
+  console.log(cyan("Installing server dependencies..."));
+  await runCommand("npm", ["install"], { cwd: serverDir });
+
+  // 2. Scaffold Client
+  const clientDir = path.join(root, "client");
+  console.log(`\n${blue(bold("Setting up Client..."))}`);
+
+  // Run create-vite
+  // We use --yes to skip confirmation if needed, and --template react for JS
+  console.log(cyan("Running create-vite..."));
+  await runCommand(
+    "npm",
+    [
+      "create",
+      "vite@latest",
+      "client",
+      "--",
+      "--template",
+      "react",
+      "--no-interactive",
+      "--no-rolldown",
+    ],
+    { cwd: root }
+  );
+
+  // Overwrite with Client Template
+  console.log(cyan("Applying generic template overrides..."));
+  await fse.copy(clientTemplate, clientDir, { overwrite: true });
+
+  // Update client package.json name
+  const clientPkgPath = path.join(clientDir, "package.json");
+  const clientPkg = await fse.readJson(clientPkgPath);
+  clientPkg.name = `${projectName}-client`;
+  await fse.writeJson(clientPkgPath, clientPkg, { spaces: 2 });
+
+  // Cleanup default Vite files
+  const appCssPath = path.join(clientDir, "src/App.css");
+  if (fse.existsSync(appCssPath)) {
+    await fse.remove(appCssPath);
+  }
+
+  // 3. Initialize Shadcn
+  console.log(`\n${blue(bold("Initializing Shadcn (Interactive)..."))}`);
+  console.log(cyan("Please follow the prompts to configure shadcn/ui:"));
+
+  console.log(cyan("Installing base client dependencies..."));
+  await runCommand("npm", ["install"], { cwd: clientDir });
+
+  // Run shadcn init
+  await runCommand("npx", ["shadcn@latest", "init"], {
+    cwd: clientDir,
+    stdio: "inherit",
+  });
+
+  console.log(`\n${green("Success!")} Created ${bold(projectName)} at ${root}`);
+  console.log("\nNext steps:");
+  console.log(`  cd ${projectName}`);
+  console.log("\n  To start the server:");
+  console.log(`    cd server`);
+  console.log(`    npm run dev`);
+  console.log("\n  To start the client:");
+  console.log(`    cd client`);
+  console.log(`    npm run dev`);
+}
+
+function runCommand(command, args, options = {}) {
+  return new Promise((resolve, reject) => {
+    const child = spawn(command, args, {
+      stdio: "inherit",
+      shell: true,
+      ...options,
+    });
+
+    child.on("close", (code) => {
+      if (code !== 0) {
+        reject(
+          new Error(
+            `Command ${command} ${args.join(" ")} failed with code ${code}`
+          )
+        );
+        return;
+      }
+      resolve();
+    });
+  });
+}

package/templates/client/jsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

package/templates/client/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "client",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^5.2.2",
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@tailwindcss/vite": "^4.1.18",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.562.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-router-dom": "^7.11.0",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss": "^4.1.18"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "tw-animate-css": "^1.4.0",
+    "vite": "^7.2.4"
+  }
+}

package/templates/client/src/App.jsx

@@ -0,0 +1,4 @@
+// This file is overwritten by create-matwad-app to be independent of the default Vite template
+export default function App() {
+  return null;
+}

package/templates/client/src/index.css

@@ -0,0 +1 @@
+@import "tailwindcss";

package/templates/client/src/main.jsx

@@ -0,0 +1,11 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import { RouterProvider } from "react-router-dom";
+import { router } from "./routes";
+
+createRoot(document.getElementById("root")).render(
+  <StrictMode>
+    <RouterProvider router={router} />
+  </StrictMode>
+);

package/templates/client/src/routes.jsx

@@ -0,0 +1,9 @@
+import { createBrowserRouter } from "react-router-dom";
+// import App from "./App"; // Optional, or use a layout
+
+export const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <div>Hello World</div>,
+  },
+]);

package/templates/client/vite.config.js

@@ -0,0 +1,23 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+import path from "path";
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+  server: {
+    proxy: {
+      "/api": {
+        target: "http://localhost:3000/api",
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, ""),
+      },
+    },
+  },
+});

package/templates/server/.env.local

@@ -0,0 +1,2 @@
+SUPABASE_DB_URL=your_supabase_connection_string_here
+PORT=3000

package/templates/server/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "server",
+  "version": "1.0.0",
+  "description": "",
+  "main": "src/server.js",
+  "type": "module",
+  "scripts": {
+    "dev": "nodemon -e js,env --exec node --env-file .env.local src/server.js",
+    "start": "node --env-file .env.local src/server.js"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "express": "^4.21.1",
+    "knex": "^3.1.0",
+    "pg": "^8.13.1"
+  },
+  "devDependencies": {
+    "nodemon": "^3.1.7"
+  }
+}

package/templates/server/src/app.js

@@ -0,0 +1,15 @@
+import express from "express";
+
+const app = express();
+
+app.use(express.json());
+
+app.get("/", (req, res) => {
+  res.send("Hello from Express Server!");
+});
+
+app.get("/api/health", (req, res) => {
+  res.json({ status: "ok" });
+});
+
+export default app;

package/templates/server/src/db/connection.js

@@ -0,0 +1,7 @@
+import knex from "knex";
+import * as config from "./knexfile.js";
+
+const environment = process.env.NODE_ENV || "development";
+const connection = knex(config[environment]);
+
+export default connection;

package/templates/server/src/db/knexfile.js

@@ -0,0 +1,67 @@
+// Load environment variables
+try {
+  process.loadEnvFile(".env.local");
+} catch (err) {}
+
+export const development = {
+  client: "pg",
+  connection: {
+    connectionString: process.env.SUPABASE_DB_URL,
+    // just in case
+    ssl: {
+      rejectUnauthorized: false,
+    },
+  },
+  pool: {
+    min: 0,
+    max: 10,
+  },
+  migrations: {
+    tableName: "knex_migrations",
+  },
+  seeds: {
+    directory: "./seeds",
+  },
+};
+
+export const staging = {
+  client: "pg",
+  connection: {
+    connectionString: process.env.SUPABASE_DB_URL,
+    // just in case
+    ssl: {
+      rejectUnauthorized: false,
+    },
+  },
+  pool: {
+    min: 0,
+    max: 10,
+  },
+  migrations: {
+    tableName: "knex_migrations",
+  },
+  seeds: {
+    directory: "./seeds",
+  },
+};
+
+export const production = {
+  client: "pg",
+  connection: {
+    connectionString: process.env.SUPABASE_DB_URL,
+    // just in case
+    ssl: {
+      rejectUnauthorized: false,
+    },
+  },
+  pool: {
+    min: 0,
+    max: 10,
+  },
+  migrations: {
+    tableName: "knex_migrations",
+  },
+  seeds: {
+    directory: "./seeds",
+  },
+};

package/templates/server/src/server.js

@@ -0,0 +1,7 @@
+import app from "./app.js";
+
+const PORT = process.env.PORT || 3000;
+
+app.listen(PORT, () => {
+  console.log(`Server running on http://localhost:${PORT}`);
+});