create-batman 1.0.2

package/templates/mysql/client/src/layouts/DashboardLayout.jsx

@@ -0,0 +1,12 @@
+import Navbar from "../components/Navbar";
+
+export default function DashboardLayout({ children }) {
+  return (
+    <div className="min-h-screen bg-slate-50">
+      <Navbar />
+      <main className="mx-auto w-full max-w-6xl px-4 py-6 sm:px-6 sm:py-8 lg:px-8">
+        {children}
+      </main>
+    </div>
+  );
+}

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

@@ -0,0 +1,10 @@
+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>
+);

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

@@ -0,0 +1,44 @@
+import DashboardLayout from "../layouts/DashboardLayout";
+
+const stats = [
+  { label: "Users", value: "24", note: "Auth ready" },
+  { label: "Pages", value: "3", note: "Templates included" },
+  { label: "API", value: "OK", note: "Axios configured" }
+];
+
+export default function Dashboard() {
+  return (
+    <DashboardLayout>
+      <section className="grid gap-6">
+        <div className="rounded-[28px] border border-slate-200 bg-white p-6 shadow-sm sm:p-8">
+          <p className="text-sm font-black uppercase tracking-[0.18em]" style={{ color: "__THEME__" }}>
+            Ready to customize
+          </p>
+          <div className="mt-3 grid gap-3 lg:grid-cols-[1fr_auto] lg:items-end">
+            <div>
+              <h1 className="text-3xl font-black tracking-tight text-slate-950 sm:text-4xl">
+                Welcome Dashboard
+              </h1>
+              <p className="mt-3 max-w-2xl text-sm leading-6 text-slate-500 sm:text-base">
+                This is your protected homepage. Use Page 1 for forms, Page 2 for tables, and Page 3 for cards/layout sections.
+              </p>
+            </div>
+            <button className="w-full rounded-2xl bg-slate-950 px-5 py-3 text-sm font-black text-white sm:w-auto">
+              Start Building
+            </button>
+          </div>
+        </div>
+
+        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          {stats.map((stat) => (
+            <article key={stat.label} className="rounded-[24px] border border-slate-200 bg-white p-5 shadow-sm">
+              <p className="text-sm font-bold text-slate-500">{stat.label}</p>
+              <h2 className="mt-2 text-3xl font-black text-slate-950">{stat.value}</h2>
+              <p className="mt-2 text-sm text-slate-500">{stat.note}</p>
+            </article>
+          ))}
+        </div>
+      </section>
+    </DashboardLayout>
+  );
+}

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

@@ -0,0 +1,121 @@
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { api } from "../api/client";
+import { saveUser } from "../utils/auth";
+
+export default function Login() {
+  const navigate = useNavigate();
+  const [message, setMessage] = useState("");
+
+  const [form, setForm] = useState({
+    Username: "",
+    Password: ""
+  });
+
+  useEffect(() => {
+    if (localStorage.getItem("user")) {
+      navigate("/");
+    }
+  }, [navigate]);
+
+  const handleChange = (e) => {
+    setForm({ ...form, [e.target.name]: e.target.value });
+  };
+
+  const register = async () => {
+    try {
+      await api.post("/auth/register", form);
+      setMessage("Registered successfully. Now login.");
+    } catch (err) {
+      setMessage(err.response?.data?.message || "Registration failed");
+    }
+  };
+
+  const login = async () => {
+    try {
+      const res = await api.post("/auth/login", form);
+      saveUser(res.data);
+      navigate("/");
+    } catch (err) {
+      setMessage(err.response?.data?.message || "Login failed");
+    }
+  };
+
+  return (
+    <main className="flex min-h-screen items-center justify-center bg-slate-50 px-4 py-8">
+      <section className="grid w-full max-w-5xl overflow-hidden rounded-[28px] border border-slate-200 bg-white shadow-sm lg:grid-cols-[1fr_420px]">
+        <div className="hidden bg-slate-950 p-10 text-white lg:flex lg:flex-col lg:justify-between">
+          <div>
+            <p className="text-sm font-black uppercase tracking-[0.2em] text-white/50">Parachute</p>
+            <h1 className="mt-5 max-w-md text-4xl font-black tracking-tight">
+              Simple exam starter with auth already wired.
+            </h1>
+            <p className="mt-4 max-w-md text-sm leading-6 text-white/65">
+              Login, protected pages, layouts, forms, tables, and responsive Tailwind structure ready to customize.
+            </p>
+          </div>
+          <div className="rounded-2xl border border-white/10 bg-white/5 p-4 text-sm text-white/70">
+            Built for speed. Clean enough for real projects.
+          </div>
+        </div>
+
+        <div className="p-6 sm:p-8 lg:p-10">
+          <p className="text-sm font-black uppercase tracking-[0.18em]" style={{ color: "__THEME__" }}>
+            Welcome
+          </p>
+          <h2 className="mt-3 text-3xl font-black tracking-tight text-slate-950">Login or Register</h2>
+          <p className="mt-2 text-sm leading-6 text-slate-500">
+            Use a username and password. Passwords are handled in the backend.
+          </p>
+
+          <div className="mt-6 grid gap-4">
+            <label className="grid gap-2 text-sm font-bold text-slate-700">
+              Username
+              <input
+                name="Username"
+                placeholder="example: aime"
+                value={form.Username}
+                onChange={handleChange}
+                className="rounded-2xl border border-slate-200 bg-white px-4 py-3 outline-none transition focus:border-slate-400"
+              />
+            </label>
+
+            <label className="grid gap-2 text-sm font-bold text-slate-700">
+              Password
+              <input
+                name="Password"
+                type="password"
+                placeholder="••••••••"
+                value={form.Password}
+                onChange={handleChange}
+                className="rounded-2xl border border-slate-200 bg-white px-4 py-3 outline-none transition focus:border-slate-400"
+              />
+            </label>
+
+            {message && (
+              <p className="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm font-semibold text-slate-700">
+                {message}
+              </p>
+            )}
+
+            <div className="grid gap-3 sm:grid-cols-2">
+              <button
+                onClick={register}
+                className="rounded-2xl px-4 py-3 text-sm font-black text-white transition hover:opacity-90"
+                style={{ background: "__THEME__" }}
+              >
+                Register
+              </button>
+              <button
+                onClick={login}
+                className="rounded-2xl bg-slate-950 px-4 py-3 text-sm font-black text-white transition hover:bg-slate-800"
+              >
+                Login
+              </button>
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+  );
+}

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

@@ -0,0 +1,101 @@
+import { useState } from "react";
+import DashboardLayout from "../layouts/DashboardLayout";
+
+export default function Page1() {
+  const [form, setForm] = useState({
+    fullName: "",
+    email: "",
+    role: "student",
+    level: "",
+    date: "",
+    amount: "",
+    description: "",
+    active: true
+  });
+
+  const handleChange = (e) => {
+    const { name, value, type, checked } = e.target;
+    setForm({ ...form, [name]: type === "checkbox" ? checked : value });
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    alert("Form submitted. Connect this to your API.");
+  };
+
+  return (
+    <DashboardLayout>
+      <section className="grid gap-6">
+        <div className="rounded-[28px] border border-slate-200 bg-white p-6 shadow-sm sm:p-8">
+          <p className="text-sm font-black uppercase tracking-[0.18em]" style={{ color: "__THEME__" }}>
+            Page 1
+          </p>
+          <h1 className="mt-3 text-3xl font-black tracking-tight text-slate-950">Form Template</h1>
+          <p className="mt-2 max-w-2xl text-sm leading-6 text-slate-500">
+            Copy this page for create/update screens. It includes text, email, select, number, date, textarea, and checkbox inputs.
+          </p>
+        </div>
+
+        <form onSubmit={handleSubmit} className="rounded-[28px] border border-slate-200 bg-white p-5 shadow-sm sm:p-6 lg:p-8">
+          <div className="grid gap-5 md:grid-cols-2">
+            <label className="grid gap-2 text-sm font-bold text-slate-700">
+              Full name
+              <input name="fullName" value={form.fullName} onChange={handleChange} placeholder="Enter full name" className="rounded-2xl border border-slate-200 px-4 py-3 outline-none focus:border-slate-400" />
+            </label>
+
+            <label className="grid gap-2 text-sm font-bold text-slate-700">
+              Email
+              <input name="email" type="email" value={form.email} onChange={handleChange} placeholder="name@example.com" className="rounded-2xl border border-slate-200 px-4 py-3 outline-none focus:border-slate-400" />
+            </label>
+
+            <label className="grid gap-2 text-sm font-bold text-slate-700">
+              Role
+              <select name="role" value={form.role} onChange={handleChange} className="rounded-2xl border border-slate-200 px-4 py-3 outline-none focus:border-slate-400">
+                <option value="student">Student</option>
+                <option value="admin">Admin</option>
+                <option value="manager">Manager</option>
+                <option value="staff">Staff</option>
+              </select>
+            </label>
+
+            <label className="grid gap-2 text-sm font-bold text-slate-700">
+              Level
+              <select name="level" value={form.level} onChange={handleChange} className="rounded-2xl border border-slate-200 px-4 py-3 outline-none focus:border-slate-400">
+                <option value="">Select level</option>
+                <option value="low">Low</option>
+                <option value="medium">Medium</option>
+                <option value="high">High</option>
+              </select>
+            </label>
+
+            <label className="grid gap-2 text-sm font-bold text-slate-700">
+              Date
+              <input name="date" type="date" value={form.date} onChange={handleChange} className="rounded-2xl border border-slate-200 px-4 py-3 outline-none focus:border-slate-400" />
+            </label>
+
+            <label className="grid gap-2 text-sm font-bold text-slate-700">
+              Amount
+              <input name="amount" type="number" value={form.amount} onChange={handleChange} placeholder="0" className="rounded-2xl border border-slate-200 px-4 py-3 outline-none focus:border-slate-400" />
+            </label>
+
+            <label className="grid gap-2 text-sm font-bold text-slate-700 md:col-span-2">
+              Description
+              <textarea name="description" value={form.description} onChange={handleChange} rows="4" placeholder="Write extra details here..." className="resize-none rounded-2xl border border-slate-200 px-4 py-3 outline-none focus:border-slate-400" />
+            </label>
+          </div>
+
+          <div className="mt-6 flex flex-col gap-4 border-t border-slate-100 pt-6 sm:flex-row sm:items-center sm:justify-between">
+            <label className="flex items-center gap-3 text-sm font-bold text-slate-700">
+              <input name="active" type="checkbox" checked={form.active} onChange={handleChange} className="h-4 w-4 rounded" />
+              Mark record as active
+            </label>
+
+            <button type="submit" className="rounded-2xl px-6 py-3 text-sm font-black text-white" style={{ background: "__THEME__" }}>
+              Save Record
+            </button>
+          </div>
+        </form>
+      </section>
+    </DashboardLayout>
+  );
+}

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

@@ -0,0 +1,82 @@
+import DashboardLayout from "../layouts/DashboardLayout";
+
+const records = [
+  { id: 1, name: "Amoxicillin", category: "Antibiotic", status: "Available", amount: "12,000 RWF" },
+  { id: 2, name: "Paracetamol", category: "Pain relief", status: "Low stock", amount: "4,500 RWF" },
+  { id: 3, name: "Cetirizine", category: "Allergy", status: "Available", amount: "6,800 RWF" },
+  { id: 4, name: "Ibuprofen", category: "Pain relief", status: "Unavailable", amount: "7,200 RWF" }
+];
+
+const badgeClass = {
+  Available: "bg-emerald-50 text-emerald-700 ring-emerald-200",
+  "Low stock": "bg-amber-50 text-amber-700 ring-amber-200",
+  Unavailable: "bg-rose-50 text-rose-700 ring-rose-200"
+};
+
+export default function Page2() {
+  return (
+    <DashboardLayout>
+      <section className="grid gap-6">
+        <div className="rounded-[28px] border border-slate-200 bg-white p-6 shadow-sm sm:p-8">
+          <p className="text-sm font-black uppercase tracking-[0.18em]" style={{ color: "__THEME__" }}>
+            Page 2
+          </p>
+          <div className="mt-3 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
+            <div>
+              <h1 className="text-3xl font-black tracking-tight text-slate-950">Table Template</h1>
+              <p className="mt-2 max-w-2xl text-sm leading-6 text-slate-500">
+                Use this for list/read screens. It stays clean on phones and tablets with horizontal overflow.
+              </p>
+            </div>
+            <button className="rounded-2xl bg-slate-950 px-5 py-3 text-sm font-black text-white">Add New</button>
+          </div>
+        </div>
+
+        <div className="overflow-hidden rounded-[28px] border border-slate-200 bg-white shadow-sm">
+          <div className="border-b border-slate-100 p-4 sm:p-5">
+            <input
+              placeholder="Search records..."
+              className="w-full rounded-2xl border border-slate-200 px-4 py-3 text-sm outline-none focus:border-slate-400"
+            />
+          </div>
+
+          <div className="overflow-x-auto">
+            <table className="min-w-[760px] w-full text-left text-sm">
+              <thead className="bg-slate-50 text-xs uppercase tracking-wide text-slate-500">
+                <tr>
+                  <th className="px-5 py-4 font-black">ID</th>
+                  <th className="px-5 py-4 font-black">Name</th>
+                  <th className="px-5 py-4 font-black">Category</th>
+                  <th className="px-5 py-4 font-black">Status</th>
+                  <th className="px-5 py-4 font-black">Amount</th>
+                  <th className="px-5 py-4 text-right font-black">Actions</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-slate-100">
+                {records.map((record) => (
+                  <tr key={record.id} className="hover:bg-slate-50/70">
+                    <td className="px-5 py-4 font-bold text-slate-500">#{record.id}</td>
+                    <td className="px-5 py-4 font-black text-slate-950">{record.name}</td>
+                    <td className="px-5 py-4 text-slate-600">{record.category}</td>
+                    <td className="px-5 py-4">
+                      <span className={`inline-flex rounded-full px-3 py-1 text-xs font-black ring-1 ${badgeClass[record.status]}`}>
+                        {record.status}
+                      </span>
+                    </td>
+                    <td className="px-5 py-4 font-bold text-slate-700">{record.amount}</td>
+                    <td className="px-5 py-4">
+                      <div className="flex justify-end gap-2">
+                        <button className="rounded-xl border border-slate-200 px-3 py-2 text-xs font-black text-slate-700 hover:bg-slate-50">Edit</button>
+                        <button className="rounded-xl border border-rose-200 px-3 py-2 text-xs font-black text-rose-600 hover:bg-rose-50">Delete</button>
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </section>
+    </DashboardLayout>
+  );
+}

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

@@ -0,0 +1,49 @@
+import DashboardLayout from "../layouts/DashboardLayout";
+
+const cards = [
+  { title: "Simple card", body: "Use this for summaries, quick actions, or small modules." },
+  { title: "Responsive grid", body: "On mobile it stacks. On tablets and laptops it becomes a clean grid." },
+  { title: "Action section", body: "Good for dashboard shortcuts and small system features." }
+];
+
+export default function Page3() {
+  return (
+    <DashboardLayout>
+      <section className="grid gap-6">
+        <div className="rounded-[28px] border border-slate-200 bg-white p-6 shadow-sm sm:p-8">
+          <p className="text-sm font-black uppercase tracking-[0.18em]" style={{ color: "__THEME__" }}>
+            Page 3
+          </p>
+          <h1 className="mt-3 text-3xl font-black tracking-tight text-slate-950">Cards Template</h1>
+          <p className="mt-2 max-w-2xl text-sm leading-6 text-slate-500">
+            Use this for dashboard sections, action panels, feature cards, or simple report blocks.
+          </p>
+        </div>
+
+        <div className="grid gap-4 md:grid-cols-3">
+          {cards.map((card, index) => (
+            <article key={card.title} className="rounded-[24px] border border-slate-200 bg-white p-5 shadow-sm">
+              <div className="flex h-11 w-11 items-center justify-center rounded-2xl text-sm font-black text-white" style={{ background: index === 0 ? "__THEME__" : "#0f172a" }}>
+                {index + 1}
+              </div>
+              <h2 className="mt-5 text-xl font-black text-slate-950">{card.title}</h2>
+              <p className="mt-2 text-sm leading-6 text-slate-500">{card.body}</p>
+            </article>
+          ))}
+        </div>
+
+        <div className="rounded-[28px] border border-slate-200 bg-slate-950 p-6 text-white shadow-sm sm:p-8">
+          <div className="grid gap-5 lg:grid-cols-[1fr_auto] lg:items-center">
+            <div>
+              <h2 className="text-2xl font-black tracking-tight">Ready for your real feature</h2>
+              <p className="mt-2 max-w-2xl text-sm leading-6 text-white/60">
+                Replace this with reports, profile settings, sales summaries, admin tools, or any exam requirement.
+              </p>
+            </div>
+            <button className="rounded-2xl bg-white px-5 py-3 text-sm font-black text-slate-950">Customize</button>
+          </div>
+        </div>
+      </section>
+    </DashboardLayout>
+  );
+}

package/templates/mysql/client/src/router/index.jsx

@@ -0,0 +1,43 @@
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+
+import ProtectedRoute from "../components/ProtectedRoute";
+
+import Login from "../pages/Login";
+import Dashboard from "../pages/Dashboard";
+import Page1 from "../pages/Page1";
+import Page2 from "../pages/Page2";
+import Page3 from "../pages/Page3";
+
+export default function Router() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/login" element={<Login />} />
+
+        <Route path="/" element={
+          <ProtectedRoute>
+            <Dashboard />
+          </ProtectedRoute>
+        } />
+
+        <Route path="/page1" element={
+          <ProtectedRoute>
+            <Page1 />
+          </ProtectedRoute>
+        } />
+
+        <Route path="/page2" element={
+          <ProtectedRoute>
+            <Page2 />
+          </ProtectedRoute>
+        } />
+
+        <Route path="/page3" element={
+          <ProtectedRoute>
+            <Page3 />
+          </ProtectedRoute>
+        } />
+      </Routes>
+    </BrowserRouter>
+  );
+}

package/templates/mysql/client/src/utils/auth.js

@@ -0,0 +1,16 @@
+export const isAuthenticated = () => {
+  return !!localStorage.getItem("user");
+};
+
+export const getUser = () => {
+  const user = localStorage.getItem("user");
+  return user ? JSON.parse(user) : null;
+};
+
+export const saveUser = (user) => {
+  localStorage.setItem("user", JSON.stringify(user));
+};
+
+export const clearUser = () => {
+  localStorage.removeItem("user");
+};

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

@@ -0,0 +1,15 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,jsx}"
+  ],
+  theme: {
+    extend: {
+      colors: {
+        brand: "__THEME__"
+      }
+    }
+  },
+  plugins: []
+};

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

@@ -0,0 +1,6 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()]
+});

package/templates/mysql/server/config/db.js

@@ -0,0 +1,13 @@
+import dotenv from "dotenv";
+import mysql from "mysql2";
+
+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
+});
+
+export default db;

package/templates/mysql/server/controllers/authController.js

@@ -0,0 +1,66 @@
+import bcrypt from "bcrypt";
+import db from "../config/db.js";
+
+export const register = async (req, res) => {
+  const { Username, Password } = req.body;
+
+  if (!Username || !Password) {
+    return res.status(400).json({ message: "Username and Password are required" });
+  }
+
+  const hashedPassword = await bcrypt.hash(Password, 10);
+
+  db.query(
+    "INSERT INTO Users (Username, Password) VALUES (?, ?)",
+    [Username, hashedPassword],
+    (err) => {
+      if (err) {
+        if (err.code === "ER_DUP_ENTRY") {
+          return res.status(409).json({ message: "Username already exists" });
+        }
+
+        return res.status(500).json({ message: "Registration failed", error: err.message });
+      }
+
+      res.status(201).json({ message: "Registered successfully" });
+    }
+  );
+};
+
+export const login = (req, res) => {
+  const { Username, Password } = req.body;
+
+  db.query(
+    "SELECT * FROM Users WHERE Username = ?",
+    [Username],
+    async (err, data) => {
+      if (err) {
+        return res.status(500).json({ message: "Login failed", error: err.message });
+      }
+
+      if (data.length === 0) {
+        return res.status(404).json({ message: "User not found" });
+      }
+
+      const user = data[0];
+      const validPassword = await bcrypt.compare(Password, user.Password);
+
+      if (!validPassword) {
+        return res.status(401).json({ message: "Invalid credentials" });
+      }
+
+      req.session.user = {
+        UserID: user.UserID,
+        Username: user.Username
+      };
+
+      res.json(req.session.user);
+    }
+  );
+};
+
+export const logout = (req, res) => {
+  req.session.destroy(() => {
+    res.json({ message: "Logged out" });
+  });
+};

package/templates/mysql/server/index.js

@@ -0,0 +1,39 @@
+import express from "express";
+import cors from "cors";
+import dotenv from "dotenv";
+import session from "express-session";
+import authRoutes from "./routes/authRoutes.js";
+
+
+dotenv.config();
+
+const app = express();
+
+app.use(cors({
+  origin: process.env.CLIENT_URL,
+  credentials: true
+}));
+
+app.use(express.json());
+
+app.use(session({
+  secret: process.env.SESSION_SECRET,
+  resave: false,
+  saveUninitialized: false,
+  cookie: {
+    httpOnly: true,
+    secure: false
+  }
+}));
+
+app.use("/auth", authRoutes);
+
+app.get("/", (req, res) => {
+  res.json({ message: "Parachute backend running" });
+});
+
+
+
+app.listen(process.env.PORT, () => {
+  console.log(`Server running on port ${process.env.PORT}`);
+});

package/templates/mysql/server/middleware/authMiddleware.js

@@ -0,0 +1,7 @@
+export const protect = (req, res, next) => {
+  if (!req.session.user) {
+    return res.status(401).json({ message: "Unauthorized" });
+  }
+
+  next();
+};

package/templates/mysql/server/package.json

@@ -0,0 +1,18 @@
+{
+  "type": "module",
+  "scripts": {
+    "dev": "nodemon index.js",
+    "start": "node index.js"
+  },
+  "dependencies": {
+    "bcrypt": "^5.1.1",
+    "cors": "^2.8.5",
+    "dotenv": "^16.4.5",
+    "express": "^4.19.2",
+    "express-session": "^1.18.0",
+    "mysql2": "^3.10.3"
+  },
+  "devDependencies": {
+    "nodemon": "^3.1.4"
+  }
+}