create-numz-app 1.0.0

package/README.md

@@ -0,0 +1,176 @@
+# project-gen-ai
+
+Generate a full **Express backend + React frontend** CRUD project from a database name and SQL `CREATE TABLE` statements. One command → working app.
+
+## What it generates
+
+For every table in your SQL:
+
+| Input | Output |
+|---|---|
+| Table with plain columns | React page with typed inputs (text / number / date) |
+| Column with `FOREIGN KEY` | React `<select>` dropdown fetching from the referenced table |
+| All tables | Express route file with GET / GET:id / POST / PUT / DELETE |
+| DB name | `db.js` MySQL pool + `.env` template |
+
+---
+
+## Install
+
+```bash
+# From npm (once published)
+npm install -g project-gen-ai
+
+# Or run locally from this folder
+npm install
+npm link          # makes `project-gen` available globally
+```
+
+---
+
+## Usage
+
+```bash
+project-gen
+```
+
+The CLI will ask you:
+
+| Question | Example answer |
+|---|---|
+| Project name | `sims` |
+| MySQL database name | `simsdb` |
+| Output directory | *(leave blank = current folder)* |
+| Paste your SQL | *(paste all CREATE TABLE blocks, press Enter)* |
+
+### Example SQL input
+
+```sql
+CREATE TABLE Users (
+  UserID   INT PRIMARY KEY AUTO_INCREMENT,
+  Username VARCHAR(100) NOT NULL,
+  Password VARCHAR(255) NOT NULL,
+  Role     VARCHAR(50)  DEFAULT 'staff'
+);
+
+CREATE TABLE SpareParts (
+  PartID     INT PRIMARY KEY AUTO_INCREMENT,
+  Name       VARCHAR(100) NOT NULL,
+  Category   VARCHAR(50),
+  Quantity   INT          DEFAULT 0,
+  UnitPrice  DECIMAL(10,2),
+  TotalPrice DECIMAL(10,2)
+);
+
+CREATE TABLE StockIn (
+  StockInID       INT PRIMARY KEY AUTO_INCREMENT,
+  PartID          INT NOT NULL,
+  StockInQuantity INT NOT NULL,
+  StockInDate     DATE NOT NULL,
+  FOREIGN KEY (PartID) REFERENCES SpareParts(PartID)
+);
+
+CREATE TABLE StockOut (
+  StockOutID         INT PRIMARY KEY AUTO_INCREMENT,
+  PartID             INT NOT NULL,
+  UserID             INT NOT NULL,
+  StockOutQuantity   INT,
+  StockOutUnitPrice  DECIMAL(10,2),
+  StockOutTotalPrice DECIMAL(10,2),
+  StockOutDate       DATE,
+  FOREIGN KEY (PartID) REFERENCES SpareParts(PartID),
+  FOREIGN KEY (UserID) REFERENCES Users(UserID)
+);
+```
+
+---
+
+## Generated project structure
+
+```
+sims/
+├── backend/
+│   ├── package.json
+│   ├── server.js          ← Express app, registers all routers
+│   ├── db.js              ← mysql2 connection pool
+│   ├── .env               ← DB credentials template
+│   └── routes/
+│       ├── users.js
+│       ├── spareparts.js
+│       ├── stockin.js
+│       └── stockout.js
+└── frontend/
+    ├── package.json
+    ├── vite.config.js     ← proxies /api → localhost:5000
+    ├── index.html
+    └── src/
+        ├── main.jsx
+        ├── index.css
+        ├── App.jsx        ← react-router-dom routes
+        ├── Navbar.jsx
+        └── pages/
+            ├── Login.jsx
+            ├── Users.jsx
+            ├── SpareParts.jsx
+            ├── StockIn.jsx   ← PartID = dropdown ✓
+            └── StockOut.jsx  ← PartID + UserID = dropdowns ✓
+```
+
+---
+
+## After generation — next steps
+
+```bash
+# 1. Create the MySQL database and run your SQL schema
+mysql -u root -p -e "CREATE DATABASE simsdb;"
+mysql -u root -p simsdb < schema.sql
+
+# 2. Start the backend
+cd sims/backend
+npm install
+# Edit .env with your DB credentials
+npm run dev       # nodemon server.js on port 5000
+
+# 3. Start the frontend
+cd sims/frontend
+npm install
+npm run dev       # Vite on http://localhost:5173
+```
+
+---
+
+## How FK detection works
+
+The parser reads `FOREIGN KEY (col) REFERENCES table(col)` constraints.  
+When generating a React page, any column that is a FK becomes a `<select>` dropdown:
+
+```jsx
+<select name="PartID" value={form.PartID} onChange={handleChange} className="border p-2 rounded">
+  <option value="">Select SpareParts</option>
+  {sparePartsList.map((r) => (
+    <option key={r.PartID} value={r.PartID}>{r.Name}</option>
+  ))}
+</select>
+```
+
+The display label for each option is chosen automatically — it looks for a column named `Name`, `name`, `Title`, `Username`, etc. on the referenced table.
+
+---
+
+## SQL type → input type mapping
+
+| SQL type | HTML input type |
+|---|---|
+| INT, BIGINT, SMALLINT | `number` |
+| DECIMAL, FLOAT, DOUBLE | `number` |
+| DATE | `date` |
+| DATETIME, TIMESTAMP | `datetime-local` |
+| VARCHAR, CHAR, ENUM | `text` |
+| TEXT, LONGTEXT | `text` |
+
+---
+
+## Tech stack of generated project
+
+**Backend:** Node.js · Express · mysql2 · dotenv · cors  
+**Frontend:** React 18 · Vite · Tailwind CSS · Axios · React Router v6

package/bin/cli.js

@@ -0,0 +1,75 @@
+#!/usr/bin/env node
+// bin/cli.js — interactive CLI
+
+import prompts from 'prompts';
+import chalk   from 'chalk';
+import ora     from 'ora';
+import path    from 'path';
+import { generateProject } from '../src/index.js';
+
+console.log('');
+console.log(chalk.bold.blue('╔══════════════════════════════════════╗'));
+console.log(chalk.bold.blue('║        numz  —  Full-Stack Builder    ║'));
+console.log(chalk.bold.blue('╚══════════════════════════════════════╝'));
+console.log(chalk.gray('  Paste SQL → get Express + React CRUD app\n'));
+
+const answers = await prompts([
+  {
+    type: 'text',
+    name: 'projectName',
+    message: 'Project name (folder to create):',
+    initial: 'my-app',
+    validate: (v) => /^[\w-]+$/.test(v.trim()) || 'Letters, numbers, hyphens only',
+  },
+  {
+    type: 'text',
+    name: 'dbName',
+    message: 'MySQL database name:',
+    validate: (v) => v.trim().length > 0 || 'Required',
+  },
+  {
+    type: 'text',
+    name: 'outputDir',
+    message: 'Output directory (blank = current folder):',
+    initial: '',
+  },
+  {
+    type: 'text',
+    name: 'sql',
+    message: chalk.yellow('Paste your SQL CREATE TABLE statements then press Enter:'),
+    validate: (v) =>
+      v.toLowerCase().includes('create table') || 'Must include at least one CREATE TABLE',
+  },
+], {
+  onCancel: () => { console.log(chalk.red('\nCancelled.')); process.exit(1); },
+});
+
+const outputDir = answers.outputDir.trim()
+  ? path.resolve(answers.outputDir.trim())
+  : process.cwd();
+
+console.log('');
+const spinner = ora('Generating project files…').start();
+
+try {
+  const { baseDir, files } = generateProject({
+    dbName:      answers.dbName.trim(),
+    sql:         answers.sql.trim(),
+    projectName: answers.projectName.trim(),
+    outputDir,
+  });
+
+  spinner.succeed(chalk.green(`Done! ${files.length} files written.\n`));
+
+  console.log(chalk.bold('📁 ' + baseDir));
+  for (const f of files) console.log(chalk.gray('   ├── ') + chalk.cyan(f));
+
+  console.log(chalk.bold.yellow('\n▶  Next steps:\n'));
+  console.log(`  cd ${answers.projectName}/backend  →  npm install  →  edit .env  →  npm run dev`);
+  console.log(`  cd ${answers.projectName}/frontend →  npm install  →  npm run dev`);
+  console.log(`\n  Then open ${chalk.bold('http://localhost:5173')}\n`);
+
+} catch (err) {
+  spinner.fail(chalk.red('Error: ' + err.message));
+  process.exit(1);
+}

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "create-numz-app",
+  "version": "1.0.0",
+  "description": "Generate a full Express + React CRUD project from a DB name and SQL CREATE TABLE statements.",
+  "type": "module",
+  "bin": {
+    "create-numz-app": "./bin/cli.js",
+    "numz": "./bin/cli.js"
+  },
+  "scripts": {
+    "start": "node bin/cli.js"
+  },
+  "dependencies": {
+    "chalk": "^5.3.0",
+    "ora": "^8.1.0",
+    "prompts": "^2.4.2"
+  },
+  "engines": { "node": ">=18.0.0" },
+  "license": "MIT"
+}

package/src/generator/backend.js

@@ -0,0 +1,132 @@
+// generator/backend.js — generates Express route files + server/db boilerplate
+
+export function generateRoute(table) {
+  const { tableName, columns, primaryKey } = table;
+
+  // Only non-PK, non-autoincrement columns go in INSERT/UPDATE
+  const writeCols = columns.filter((c) => !c.isPK && !c.isAutoIncrement);
+  const colNames  = writeCols.map((c) => c.name);
+
+  const destructure   = colNames.join(', ');
+  const insertCols    = colNames.join(', ');
+  const placeholders  = colNames.map(() => '?').join(', ');
+  const updateSet     = colNames.map((c) => `${c}=?`).join(', ');
+  const values        = colNames.join(', ');
+
+  return `import express from 'express';
+import db from '../db.js';
+
+const router = express.Router();
+
+// GET all
+router.get('/', (req, res) => {
+  const sql = 'SELECT * FROM ${tableName}';
+  db.query(sql, (err, results) => {
+    if (err) return res.status(500).json({ error: err.message });
+    res.json(results);
+  });
+});
+
+// GET one by ID
+router.get('/:id', (req, res) => {
+  const sql = 'SELECT * FROM ${tableName} WHERE ${primaryKey} = ?';
+  db.query(sql, [req.params.id], (err, results) => {
+    if (err) return res.status(500).json({ error: err.message });
+    if (!results.length) return res.status(404).json({ message: 'Not found' });
+    res.json(results[0]);
+  });
+});
+
+// POST — create
+router.post('/', (req, res) => {
+  const { ${destructure} } = req.body;
+  const sql = 'INSERT INTO ${tableName} (${insertCols}) VALUES (${placeholders})';
+  db.query(sql, [${values}], (err, result) => {
+    if (err) return res.status(500).json({ error: err.message });
+    res.status(201).json({ message: 'Added successfully', id: result.insertId });
+  });
+});
+
+// PUT — update
+router.put('/:id', (req, res) => {
+  const { ${destructure} } = req.body;
+  const sql = 'UPDATE ${tableName} SET ${updateSet} WHERE ${primaryKey} = ?';
+  db.query(sql, [${values}, req.params.id], (err) => {
+    if (err) return res.status(500).json({ error: err.message });
+    res.json({ message: 'Updated successfully' });
+  });
+});
+
+// DELETE
+router.delete('/:id', (req, res) => {
+  const sql = 'DELETE FROM ${tableName} WHERE ${primaryKey} = ?';
+  db.query(sql, [req.params.id], (err) => {
+    if (err) return res.status(500).json({ error: err.message });
+    res.json({ message: 'Deleted successfully' });
+  });
+});
+
+export default router;
+`;
+}
+
+export function generateServer(tables) {
+  const imports = tables
+    .map((t) => `import ${camel(t.tableName)}Router from './routes/${t.tableName.toLowerCase()}.js';`)
+    .join('\n');
+  const uses = tables
+    .map((t) => `app.use('/api/${t.tableName.toLowerCase()}', ${camel(t.tableName)}Router);`)
+    .join('\n');
+
+  return `import express from 'express';
+import cors from 'cors';
+import dotenv from 'dotenv';
+${imports}
+
+dotenv.config();
+const app = express();
+
+app.use(cors({ origin: 'http://localhost:5173', credentials: true }));
+app.use(express.json());
+
+${uses}
+
+const PORT = process.env.PORT || 5000;
+app.listen(PORT, () => console.log('Server running on port ' + PORT));
+`;
+}
+
+export function generateDb(dbName) {
+  return `import mysql from 'mysql2';
+import dotenv from 'dotenv';
+dotenv.config();
+
+const db = mysql.createPool({
+  host:     process.env.DB_HOST     || 'localhost',
+  user:     process.env.DB_USER     || 'root',
+  password: process.env.DB_PASSWORD || '',
+  database: process.env.DB_NAME     || '${dbName}',
+});
+
+export default db;
+`;
+}
+
+export function generateEnv(dbName) {
+  return `DB_HOST=localhost\nDB_USER=root\nDB_PASSWORD=your_password\nDB_NAME=${dbName}\nPORT=5000\n`;
+}
+
+export function generateBackendPackage(name) {
+  return JSON.stringify({
+    name: `${name}-backend`,
+    version: '1.0.0',
+    type: 'module',
+    scripts: { start: 'node server.js', dev: 'nodemon server.js' },
+    dependencies: { cors: '^2.8.5', dotenv: '^16.0.0', express: '^4.18.2', mysql2: '^3.6.0' },
+    devDependencies: { nodemon: '^3.0.0' },
+  }, null, 2);
+}
+
+function camel(str) {
+  return str.charAt(0).toLowerCase() + str.slice(1);
+}

package/src/generator/frontend.js

@@ -0,0 +1,331 @@
+// generator/frontend.js — generates React pages, FK columns become <select> dropdowns
+
+export function generatePage(table, allTables) {
+  const { tableName, columns, primaryKey, foreignKeys } = table;
+
+  // Form columns = everything except PK / autoincrement
+  const formCols = columns.filter((c) => !c.isPK && !c.isAutoIncrement);
+
+  // Quick FK lookup by column name
+  const fkMap = {};
+  for (const fk of foreignKeys) fkMap[fk.column] = fk;
+
+  // For each FK, determine the state var name + display column
+  const fkInfos = foreignKeys.map((fk) => {
+    const refTable   = allTables.find((t) => t.tableName.toLowerCase() === fk.refTable.toLowerCase());
+    const displayCol = pickDisplayCol(refTable);
+    const stateVar   = camel(fk.refTable) + 'List';
+    const setter     = 'set' + pascal(fk.refTable) + 'List';
+    return { ...fk, displayCol, stateVar, setter };
+  });
+
+  // Initial form state: { ColA: '', ColB: '', ... }
+  const formInit = formCols.map((c) => `${c.name}: ''`).join(', ');
+
+  // FK state declarations
+  const fkStateLines = fkInfos
+    .map((f) => `  const [${f.stateVar}, ${f.setter}] = useState([]);`)
+    .join('\n');
+
+  // Inside fetchData: fetch each FK table
+  const fkFetchLines = fkInfos
+    .map((f) => `    const _${f.stateVar} = await axios.get('/api/${f.refTable.toLowerCase()}');\n    ${f.setter}(_${f.stateVar}.data);`)
+    .join('\n');
+
+  // Form fields: FK → <select>, others → <input>
+  const formFields = formCols.map((col) => {
+    const fk = fkMap[col.name];
+    if (fk) {
+      const info = fkInfos.find((f) => f.column === col.name);
+      return (
+        `          <select name="${col.name}" value={form.${col.name}} onChange={handleChange} className="border p-2 rounded">\n` +
+        `            <option value="">Select ${fk.refTable}</option>\n` +
+        `            {${info.stateVar}.map((r) => (\n` +
+        `              <option key={r.${fk.refColumn}} value={r.${fk.refColumn}}>{r.${info.displayCol}}</option>\n` +
+        `            ))}\n` +
+        `          </select>`
+      );
+    }
+    const inputType = toInputType(col.type);
+    return `          <input name="${col.name}" type="${inputType}" placeholder="${col.name}" value={form.${col.name}} onChange={handleChange} className="border p-2 rounded" />`;
+  }).join('\n');
+
+  // Table headers
+  const ths = columns.map((c) => `                <th className="p-2 border">${c.name}</th>`).join('\n');
+
+  // Table body cells
+  const tds = columns.map((c) => `                <td className="p-2 border">{r.${c.name}}</td>`).join('\n');
+
+  // setForm on edit
+  const editFields = formCols.map((c) => `${c.name}: r.${c.name}`).join(', ');
+
+  const name = pascal(tableName);
+  const api  = tableName.toLowerCase();
+
+  return `import { useState, useEffect } from 'react';
+import axios from 'axios';
+import Navbar from '../Navbar';
+
+function ${name}() {
+  const [form, setForm]       = useState({ ${formInit} });
+  const [records, setRecords] = useState([]);
+  const [editID, setEditID]   = useState(null);
+  const [msg, setMsg]         = useState('');
+${fkStateLines}
+
+  const fetchData = async () => {
+    const res = await axios.get('/api/${api}');
+    setRecords(res.data);
+${fkFetchLines}
+  };
+
+  useEffect(() => { fetchData(); }, []);
+
+  const handleChange = (e) => setForm({ ...form, [e.target.name]: e.target.value });
+
+  const handleSubmit = async () => {
+    if (editID) {
+      await axios.put(\`/api/${api}/\${editID}\`, form);
+      setMsg('Updated successfully');
+      setEditID(null);
+    } else {
+      await axios.post('/api/${api}', form);
+      setMsg('Added successfully');
+    }
+    setForm({ ${formInit} });
+    fetchData();
+  };
+
+  const handleEdit = (r) => {
+    setForm({ ${editFields} });
+    setEditID(r.${primaryKey});
+  };
+
+  const handleDelete = async (id) => {
+    if (!window.confirm('Delete this record?')) return;
+    await axios.delete(\`/api/${api}/\${id}\`);
+    setMsg('Deleted successfully');
+    fetchData();
+  };
+
+  return (
+    <div>
+      <Navbar />
+      <div className="p-6">
+        <h2 className="text-xl font-bold mb-4 text-blue-700">${name}</h2>
+
+        <div className="grid grid-cols-2 gap-3 mb-4">
+${formFields}
+        </div>
+
+        <button onClick={handleSubmit} className="bg-blue-700 text-white px-4 py-2 rounded hover:bg-blue-800">
+          {editID ? 'Update' : 'Add ${name}'}
+        </button>
+        {editID && (
+          <button onClick={() => { setEditID(null); setForm({ ${formInit} }); }}
+            className="ml-2 bg-gray-400 text-white px-4 py-2 rounded hover:bg-gray-500">
+            Cancel
+          </button>
+        )}
+        {msg && <p className="text-green-600 mt-2 text-sm">{msg}</p>}
+
+        <h3 className="text-lg font-bold mt-6 mb-2">${name} Records</h3>
+        <div className="overflow-x-auto">
+          <table className="w-full border text-sm">
+            <thead className="bg-blue-700 text-white">
+              <tr>
+${ths}
+                <th className="p-2 border">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {records.map((r) => (
+                <tr key={r.${primaryKey}} className="hover:bg-gray-50">
+${tds}
+                  <td className="p-2 border whitespace-nowrap">
+                    <button onClick={() => handleEdit(r)} className="bg-yellow-400 px-2 py-1 rounded mr-1 text-xs">Edit</button>
+                    <button onClick={() => handleDelete(r.${primaryKey})} className="bg-red-500 text-white px-2 py-1 rounded text-xs">Delete</button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ${name};
+`;
+}
+
+export function generateApp(tables) {
+  const imports = tables.map((t) => `import ${pascal(t.tableName)} from './pages/${pascal(t.tableName)}';`).join('\n');
+  const routes  = tables.map((t) => `        <Route path="/${t.tableName.toLowerCase()}" element={<${pascal(t.tableName)} />} />`).join('\n');
+  const first   = tables[0]?.tableName.toLowerCase() ?? 'home';
+  return `import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import Login from './pages/Login';
+${imports}
+
+function App() {
+  return (
+    <Router>
+      <Routes>
+        <Route path="/" element={<Navigate to="/login" />} />
+        <Route path="/login" element={<Login />} />
+${routes}
+      </Routes>
+    </Router>
+  );
+}
+
+export default App;
+`;
+}
+
+export function generateNavbar(tables) {
+  const links = tables
+    .map((t) => `        <Link to="/${t.tableName.toLowerCase()}" className="hover:text-blue-300 font-medium">${pascal(t.tableName)}</Link>`)
+    .join('\n');
+  return `import { Link } from 'react-router-dom';
+
+function Navbar() {
+  return (
+    <nav className="bg-blue-700 text-white px-6 py-3 flex gap-6 items-center shadow">
+      <span className="font-bold text-lg mr-4">SIMS</span>
+${links}
+    </nav>
+  );
+}
+
+export default Navbar;
+`;
+}
+
+export function generateLogin(firstPage) {
+  return `import { useState } from 'react';
+import axios from 'axios';
+import { useNavigate } from 'react-router-dom';
+
+function Login() {
+  const [Username, setUsername] = useState('');
+  const [Password, setPassword] = useState('');
+  const [msg, setMsg]           = useState('');
+  const navigate                = useNavigate();
+
+  const handleLogin = async () => {
+    try {
+      const res = await axios.post('/api/users/login', { Username, Password }, { withCredentials: true });
+      localStorage.setItem('user', JSON.stringify(res.data.user));
+      if (res.data.message === 'Login successful') {
+        navigate('/${firstPage}');
+      } else {
+        setMsg(res.data.message);
+      }
+    } catch {
+      setMsg('Connection error — is the backend running?');
+    }
+  };
+
+  return (
+    <div className="flex justify-center items-center h-screen bg-gray-100">
+      <div className="bg-white p-8 rounded shadow-md w-80">
+        <h2 className="text-2xl font-bold mb-6 text-center text-blue-700">Login</h2>
+        <input type="text" placeholder="Username" value={Username}
+          onChange={(e) => setUsername(e.target.value)}
+          className="w-full border p-2 rounded mb-3 focus:outline-none focus:border-blue-500" />
+        <input type="password" placeholder="Password" value={Password}
+          onChange={(e) => setPassword(e.target.value)}
+          className="w-full border p-2 rounded mb-4 focus:outline-none focus:border-blue-500" />
+        <button onClick={handleLogin}
+          className="w-full bg-blue-700 text-white py-2 rounded hover:bg-blue-800">
+          Login
+        </button>
+        {msg && <p className="text-red-500 mt-3 text-center text-sm">{msg}</p>}
+      </div>
+    </div>
+  );
+}
+
+export default Login;
+`;
+}
+
+export function generateFrontendPackage(name) {
+  return JSON.stringify({
+    name: `${name}-frontend`,
+    version: '1.0.0',
+    type: 'module',
+    scripts: { dev: 'vite', build: 'vite build', preview: 'vite preview' },
+    dependencies: { axios: '^1.6.0', react: '^18.2.0', 'react-dom': '^18.2.0', 'react-router-dom': '^6.20.0' },
+    devDependencies: { '@vitejs/plugin-react': '^4.2.0', autoprefixer: '^10.4.16', postcss: '^8.4.31', tailwindcss: '^3.3.5', vite: '^5.0.0' },
+  }, null, 2);
+}
+
+export function generateViteConfig() {
+  return `import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  server: { proxy: { '/api': 'http://localhost:5000' } },
+});
+`;
+}
+
+export function generateMain() {
+  return `import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode><App /></React.StrictMode>
+);
+`;
+}
+
+export function generateCSS() {
+  return `@tailwind base;\n@tailwind components;\n@tailwind utilities;\n`;
+}
+
+export function generateHTML(title) {
+  return `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${title}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
+`;
+}
+
+// ── helpers ────────────────────────────────────────────────────────────────
+
+function pascal(str) { return str.charAt(0).toUpperCase() + str.slice(1); }
+function camel(str)  { return str.charAt(0).toLowerCase() + str.slice(1); }
+
+function toInputType(type) {
+  if (type === 'date') return 'date';
+  if (type === 'datetime') return 'datetime-local';
+  if (type === 'number' || type === 'decimal') return 'number';
+  return 'text';
+}
+
+// Pick the best display column for a FK dropdown label
+function pickDisplayCol(refTable) {
+  if (!refTable) return 'id';
+  const preferred = ['name', 'title', 'username', 'label', 'description'];
+  for (const col of refTable.columns) {
+    if (preferred.includes(col.name.toLowerCase())) return col.name;
+  }
+  // fallback: first non-PK column
+  const nonPK = refTable.columns.filter((c) => !c.isPK);
+  return nonPK[0]?.name ?? refTable.columns[0]?.name ?? 'id';
+}

package/src/index.js

@@ -0,0 +1,45 @@
+// src/index.js — orchestrator: parse SQL → generate all files → write to disk
+import path from 'path';
+import { parseSQL } from './parser.js';
+import { generateRoute, generateServer, generateDb, generateEnv, generateBackendPackage } from './generator/backend.js';
+import { generatePage, generateApp, generateNavbar, generateLogin, generateFrontendPackage, generateViteConfig, generateMain, generateCSS, generateHTML } from './generator/frontend.js';
+import { writeFiles } from './writer.js';
+
+export function generateProject({ dbName, sql, projectName, outputDir }) {
+  const outDir = outputDir || process.cwd();
+
+  // 1. Parse SQL
+  const tables = parseSQL(sql);
+  if (!tables.length) throw new Error('No CREATE TABLE statements found.');
+
+  const baseDir = path.join(outDir, projectName);
+  const files   = {};
+
+  // 2. Backend files
+  files['backend/package.json'] = generateBackendPackage(projectName);
+  files['backend/server.js']    = generateServer(tables);
+  files['backend/db.js']        = generateDb(dbName);
+  files['backend/.env']         = generateEnv(dbName);
+  for (const t of tables) {
+    files[`backend/routes/${t.tableName.toLowerCase()}.js`] = generateRoute(t);
+  }
+
+  // 3. Frontend files
+  files['frontend/package.json']        = generateFrontendPackage(projectName);
+  files['frontend/vite.config.js']      = generateViteConfig();
+  files['frontend/index.html']          = generateHTML(projectName);
+  files['frontend/src/main.jsx']        = generateMain();
+  files['frontend/src/index.css']       = generateCSS();
+  files['frontend/src/App.jsx']         = generateApp(tables);
+  files['frontend/src/Navbar.jsx']      = generateNavbar(tables);
+  files['frontend/src/pages/Login.jsx'] = generateLogin(tables[0].tableName.toLowerCase());
+  for (const t of tables) {
+    files[`frontend/src/pages/${pascal(t.tableName)}.jsx`] = generatePage(t, tables);
+  }
+
+  // 4. Write everything
+  const written = writeFiles(baseDir, files);
+  return { baseDir, files: written };
+}
+
+function pascal(str) { return str.charAt(0).toUpperCase() + str.slice(1); }

package/src/parser.js

@@ -0,0 +1,99 @@
+// parser.js — converts raw SQL into structured table objects
+
+export function parseSQL(sql) {
+  const tables = [];
+
+  // Match every CREATE TABLE block
+  const blocks = [...sql.matchAll(
+    /CREATE\s+TABLE\s+(?:IF\s+NOT\s+EXISTS\s+)?[`"']?(\w+)[`"']?\s*\(([^;]+)\)\s*;?/gis
+  )];
+
+  for (const [, tableName, body] of blocks) {
+    const columns = [];
+    const foreignKeys = [];
+    let primaryKey = null;
+
+    // Split on commas that are NOT inside parentheses
+    const lines = splitOnComma(body);
+
+    for (const rawLine of lines) {
+      const line = rawLine.trim();
+      if (!line) continue;
+      const up = line.toUpperCase();
+
+      // FOREIGN KEY line
+      const fkMatch = line.match(
+        /(?:CONSTRAINT\s+\w+\s+)?FOREIGN\s+KEY\s*\(\s*[`"']?(\w+)[`"']?\s*\)\s*REFERENCES\s+[`"']?(\w+)[`"']?\s*\(\s*[`"']?(\w+)[`"']?\s*\)/i
+      );
+      if (fkMatch) {
+        foreignKeys.push({ column: fkMatch[1], refTable: fkMatch[2], refColumn: fkMatch[3] });
+        continue;
+      }
+
+      // Standalone PRIMARY KEY line
+      const pkLine = line.match(/^PRIMARY\s+KEY\s*\(\s*[`"']?(\w+)[`"']?\s*\)/i);
+      if (pkLine) { primaryKey = pkLine[1]; continue; }
+
+      // Skip index / unique / check / key lines
+      if (up.match(/^(UNIQUE|INDEX|KEY|CHECK|CONSTRAINT)\b/)) continue;
+
+      // Parse as column
+      const col = parseColumn(line);
+      if (col) {
+        if (col.isPK) primaryKey = col.name;
+        columns.push(col);
+      }
+    }
+
+    tables.push({ tableName: tableName.trim(), columns, primaryKey, foreignKeys });
+  }
+
+  return tables;
+}
+
+// Split a string on commas that are not inside ()
+function splitOnComma(str) {
+  const parts = [];
+  let depth = 0;
+  let cur = '';
+  for (const ch of str) {
+    if (ch === '(') depth++;
+    else if (ch === ')') depth--;
+    if (ch === ',' && depth === 0) { parts.push(cur); cur = ''; }
+    else cur += ch;
+  }
+  if (cur.trim()) parts.push(cur);
+  return parts;
+}
+
+// Parse one column definition line
+function parseColumn(line) {
+  // Column name is the first word (strip backticks/quotes)
+  const nameMatch = line.match(/^[`"']?(\w+)[`"']?\s+(\w+)/);
+  if (!nameMatch) return null;
+
+  const name = nameMatch[1];
+  const rawType = nameMatch[2].toUpperCase();
+  const up = line.toUpperCase();
+
+  const isPK = up.includes('PRIMARY KEY');
+  const isAutoIncrement = up.includes('AUTO_INCREMENT');
+  const notNull = up.includes('NOT NULL');
+
+  const defMatch = line.match(/DEFAULT\s+['"]?([^,'")\s]+)['"]?/i);
+  const defaultValue = defMatch ? defMatch[1] : null;
+
+  const type = resolveType(rawType);
+  return { name, rawType, type, isPK, isAutoIncrement, notNull, defaultValue };
+}
+
+// Map SQL type → simple category for the frontend generator
+function resolveType(t) {
+  if (['INT','INTEGER','BIGINT','SMALLINT','TINYINT','MEDIUMINT'].includes(t)) return 'number';
+  if (['DECIMAL','FLOAT','DOUBLE','NUMERIC','REAL'].includes(t)) return 'decimal';
+  if (t === 'DATE') return 'date';
+  if (['DATETIME','TIMESTAMP'].includes(t)) return 'datetime';
+  if (['BOOLEAN','BOOL','BIT'].includes(t)) return 'boolean';
+  if (['TEXT','LONGTEXT','MEDIUMTEXT','TINYTEXT'].includes(t)) return 'textarea';
+  return 'text';
+}

package/src/writer.js

@@ -0,0 +1,14 @@
+// writer.js — writes a { 'relative/path': 'content' } map to disk
+import fs   from 'fs';
+import path from 'path';
+
+export function writeFiles(baseDir, fileMap) {
+  const written = [];
+  for (const [rel, content] of Object.entries(fileMap)) {
+    const full = path.join(baseDir, rel);
+    fs.mkdirSync(path.dirname(full), { recursive: true });
+    fs.writeFileSync(full, content, 'utf8');
+    written.push(rel);
+  }
+  return written;
+}