tss-stack 1.1.2 → 1.2.0

package/README.md

@@ -115,13 +115,32 @@ SmartPark/
 - **`routes/auth.js`** — Register, login, logout endpoints (if auth selected)
 - **`.env.example`** — Template for your database credentials
 
-### Frontend (`frontend-project/`)
-
-- **`src/api/axios.js`** — Pre-configured Axios instance pointed at your backend, `withCredentials` enabled
-- **`src/pages/*.jsx`** — One page per table with form, table display, and only the action buttons matching your selected operations
-- **`src/pages/Login.jsx`** — Login form wired to `/auth/login` (if auth selected)
+## Frontend (`frontend-project/`)
+
+- **`vite.config.js`** — Vite configuration with React plugin
+- **`tailwind.config.js`** — Tailwind CSS configuration
+- **`postcss.config.js`** — PostCSS plugins (Tailwind + Autoprefixer)
+- **`index.html`** — Entry HTML file (required by Vite)
+- **`.env.local.example`** — Environment template for API URL
+- **`.gitignore`** — Git ignore rules for frontend
+- **`src/api/axios.js`** — Pre-configured Axios instance with environment-based URL
+- **`src/pages/*.jsx`** — One page per table with:
+  - Error handling and error messages
+  - Loading states on form submission
+  - Success notifications
+  - Automatic data fetching on page load
+  - Complete CRUD operations (only those selected)
+- **`src/pages/Home.jsx`** — Landing page
+- **`src/pages/Login.jsx`** — Login/Register page with toggle (if auth selected)
 - **`src/pages/Reports.jsx`** — Reports page scaffold (if selected)
-- **`src/App.jsx`** — React Router setup with Navbar and all routes configured
+- **`src/components/PrivateRoute.jsx`** — Route protection component (if auth selected)
+- **`src/context/AuthContext.jsx`** — Auth provider with session checking (if auth selected)
+- **`src/App.jsx`** — React Router setup with:
+  - Protected routes (if auth selected)
+  - Navbar with conditional logout button
+  - Auth context provider wrapping app
+- **`src/main.jsx`** — React entry point
+- **`src/index.css`** — Tailwind CSS imports
 
 ---
 
@@ -133,7 +152,7 @@ SmartPark/
 mysql -u root -p < my-app/backend-project/config/database.sql
 ```
 
-### 2. Configure environment
+### 2. Configure backend environment
 
 ```bash
 cd my-app/backend-project
@@ -148,31 +167,101 @@ DB_USER=root
 DB_PASSWORD=your_password
 DB_NAME=smartpark_db
 PORT=5000
-SESSION_SECRET=any_random_string_here
+SESSION_SECRET=your_random_secret_string_here
+CLIENT_URL=http://localhost:5173
+NODE_ENV=development
+```
+
+### 3. Configure frontend environment (optional)
+
+```bash
+cd ../frontend-project
+cp .env.local.example .env.local
+```
+
+By default, the frontend connects to `http://localhost:5000`. Override in `.env.local` if needed:
+
+```env
+VITE_API_URL=http://your-api-url:5000
 ```
 
-### 3. Start the backend
+### 4. Start the backend
 
 ```bash
+cd my-app/backend-project
+npm install
 npm run dev
 ```
 
-### 4. Start the frontend
+Server runs on `http://localhost:5000`
+
+### 5. Start the frontend
 
 ```bash
 cd ../frontend-project
+npm install
 npm run dev
 ```
 
-### 5. Open the app
+Frontend runs on `http://localhost:5173`
 
-```
-http://localhost:5173
-```
+### 6. Open in browser
+
+Visit `http://localhost:5173`
+
+If auth is enabled, register or login first. Then access your data tables.
+
+---
+
+## Features
+
+✅ **Authentication** (optional)
+- Login/Register with bcrypt hashing
+- Session management
+- Route protection
+- Auto session check on load
+- Logout functionality
+
+✅ **Full CRUD Interface**
+- Form validation
+- Error handling with messages
+- Success notifications
+- Loading states
+- Auto data refresh
+
+✅ **Frontend Stack**
+- React 18 + Vite
+- React Router v6
+- Tailwind CSS
+- Axios with credentials
+
+✅ **Backend Stack**
+- Express.js
+- MySQL connection pooling
+- CORS & security headers
+- Rate limiting
+- Session management
+
+✅ **Database**
+- Auto table creation
+- Timestamps (created_at, updated_at)
+- Proper SQL types
+- Auto-increment IDs
 
 ---
 
-## Requirements
+## Stack Summary
+
+| Layer | Technology |
+|---|---|
+| Runtime | Node.js |
+| Backend | Express.js |
+| Database | MySQL (mysql2) |
+| Auth | express-session + bcryptjs |
+| Frontend | React 18 + Vite |
+| CSS | Tailwind CSS |
+| HTTP | Axios |
+| Routing | React Router v6 |
 
 - Node.js 16 or higher
 - npm 7 or higher

package/bin/cli.js

@@ -1,4 +1,4 @@
-#!/usr/bin/env node
+#!/usr/bin/env node
 "use strict";
 
 const ora = require("ora");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tss-stack",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "Interactive full-stack Node.js + React + MySQL project generator",
   "bin": {
     "tss-stack": "bin/cli.js"

package/src/generators/backend.js

@@ -53,12 +53,25 @@ DB_USER=root
 DB_PASSWORD=your_password_here
 DB_NAME=${dbName}
 PORT=${port}
-SESSION_SECRET=change_me
+SESSION_SECRET=change_me_to_random_string
 CLIENT_URL=http://localhost:5173
 NODE_ENV=development
 `
     );
 
+    await fs.outputFile(
+        path.join(root, ".gitignore"),
+        `node_modules/
+.env
+.env.local
+*.log
+npm-debug.log*
+.DS_Store
+.idea/
+.vscode/
+`
+    );
+
     await fs.outputFile(
         path.join(root, "config", "db.js"),
         `const mysql = require("mysql2");
@@ -104,15 +117,14 @@ const bcrypt = require("bcryptjs");
 const rateLimit = require("express-rate-limit");
 const router = express.Router();
 const db = require("../config/db");
+const isAuthenticated = require("../middleware/auth");
 
 const authLimiter = rateLimit({
   windowMs: 15 * 60 * 1000,
   max: 50,
 });
 
-router.use(authLimiter);
-
-router.post("/register", async (req, res) => {
+router.post("/register", authLimiter, async (req, res) => {
   try {
     const { username, password } = req.body;
 
@@ -126,29 +138,40 @@ router.post("/register", async (req, res) => {
 
     const hash = await bcrypt.hash(password, 10);
 
-    await db.query("INSERT INTO users (username, password) VALUES (?, ?)", [username, hash]);
-
-    res.json({ message: "User registered successfully" });
+    try {
+      await db.query("INSERT INTO users (username, password) VALUES (?, ?)", [username, hash]);
+      res.json({ message: "User registered successfully" });
+    } catch (err) {
+      if (err.code === "ER_DUP_ENTRY") {
+        return res.status(400).json({ message: "Username already exists" });
+      }
+      throw err;
+    }
   } catch (err) {
     res.status(500).json({ error: err.message });
   }
 });
 
-router.post("/login", async (req, res) => {
+router.post("/login", authLimiter, async (req, res) => {
   try {
     const { username, password } = req.body;
 
-    const [results] = await db.query("SELECT * FROM users WHERE username = ?", [username]);
+    if (!username || !password) {
+      return res.status(400).json({ message: "Username and password required" });
+    }
+
+    const [results] = await db.query("SELECT id, username FROM users WHERE username = ? LIMIT 1", [username]);
 
     if (results.length === 0) {
-      return res.status(401).json({ message: "User not found" });
+      return res.status(401).json({ message: "Invalid credentials" });
     }
 
     const user = results[0];
-    const passwordMatch = await bcrypt.compare(password, user.password);
+    const [userWithPassword] = await db.query("SELECT password FROM users WHERE id = ?", [user.id]);
+    const passwordMatch = await bcrypt.compare(password, userWithPassword[0].password);
 
     if (!passwordMatch) {
-      return res.status(401).json({ message: "Wrong password" });
+      return res.status(401).json({ message: "Invalid credentials" });
     }
 
     req.session.user = {
@@ -165,8 +188,13 @@ router.post("/login", async (req, res) => {
   }
 });
 
+router.get("/me", isAuthenticated, (req, res) => {
+  res.json(req.session.user);
+});
+
 router.post("/logout", (req, res) => {
-  req.session.destroy(() => {
+  req.session.destroy((err) => {
+    if (err) return res.status(500).json({ error: "Logout failed" });
     res.json({ message: "Logged out" });
   });
 });

package/src/generators/database.js

@@ -38,7 +38,8 @@ CREATE TABLE IF NOT EXISTS ${escapeSqlIdentifier(table.name)} (
 `;
         }
 
-        sql += `  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+        sql += `  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
 );
 
 `;

package/src/generators/frontend.js

@@ -32,12 +32,89 @@ function generateFrontend(config) {
         )
     );
 
+    fs.outputFileSync(
+        path.join(root, "vite.config.js"),
+        `import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 5173,
+    strictPort: false,
+  },
+});
+`
+    );
+
+    fs.outputFileSync(
+        path.join(root, "tailwind.config.js"),
+        `export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,jsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
+`
+    );
+
+    fs.outputFileSync(
+        path.join(root, "postcss.config.js"),
+        `export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+`
+    );
+
+    fs.outputFileSync(
+        path.join(root, "index.html"),
+        `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${projectName}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"><\/script>
+  </body>
+</html>
+`
+    );
+
+    fs.outputFileSync(
+        path.join(root, ".env.local.example"),
+        `VITE_API_URL=http://localhost:5000
+`
+    );
+
+    fs.outputFileSync(
+        path.join(root, ".gitignore"),
+        `node_modules/
+dist/
+.env
+.env.local
+*.log
+.DS_Store
+.idea/
+.vscode/
+`
+    );
+
     fs.outputFileSync(
         path.join(root, "src", "api", "axios.js"),
         `import axios from "axios";
 
 const API = axios.create({
-  baseURL: "http://localhost:5000",
+  baseURL: import.meta.env.VITE_API_URL || "http://localhost:5000",
   withCredentials: true,
 });
 
@@ -65,6 +142,74 @@ ReactDOM.createRoot(document.getElementById("root")).render(
         `@tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+body {
+  font-family: system-ui, -apple-system, sans-serif;
+}
+`
+    );
+
+    if (needsAuth) {
+        fs.outputFileSync(
+            path.join(root, "src", "context", "AuthContext.jsx"),
+            `import React, { createContext, useState, useEffect } from "react";
+import API from "../api/axios";
+
+export const AuthContext = createContext();
+
+export function AuthProvider({ children }) {
+  const [user, setUser] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const checkAuth = async () => {
+      try {
+        const res = await API.get("/auth/me");
+        setUser(res.data);
+      } catch {
+        setUser(null);
+      } finally {
+        setLoading(false);
+      }
+    };
+    checkAuth();
+  }, []);
+
+  return (
+    <AuthContext.Provider value={{ user, setUser, loading }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+`
+        );
+
+        fs.outputFileSync(
+            path.join(root, "src", "components", "PrivateRoute.jsx"),
+            `import { Navigate } from "react-router-dom";
+import { useContext } from "react";
+import { AuthContext } from "../context/AuthContext";
+
+export default function PrivateRoute({ children }) {
+  const { user, loading } = useContext(AuthContext);
+
+  if (loading) return <div className="p-6">Loading...</div>;
+  return user ? children : <Navigate to="/login" />;
+}
+`
+        );
+    }
+
+    fs.outputFileSync(
+        path.join(root, "src", "pages", "Home.jsx"),
+        `export default function Home() {
+  return (
+    <div className="p-6 max-w-2xl">
+      <h1 className="text-3xl font-bold mb-4">Welcome</h1>
+      <p className="text-gray-600">Select an option from the navigation above to get started.</p>
+    </div>
+  );
+}
 `
     );
 
@@ -85,6 +230,7 @@ ReactDOM.createRoot(document.getElementById("root")).render(
           value={form.${f}}
           onChange={(e) => setForm({ ...form, ${f}: e.target.value })}
           className="border p-2 rounded w-full"
+          required
         />`
             )
             .join("\n");
@@ -106,10 +252,18 @@ export default function ${name}() {
 ${stateFields}
   });
 ${ops.includes("update") ? "  const [editId, setEditId] = useState(null);" : ""}
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [success, setSuccess] = useState("");
 
   const fetchAll = async () => {
-    const res = await API.get("/${route}");
-    setItems(res.data);
+    try {
+      setError("");
+      const res = await API.get("/${route}");
+      setItems(res.data);
+    } catch (err) {
+      setError(err.response?.data?.error || "Failed to load data");
+    }
   };
 
   useEffect(() => {
@@ -121,14 +275,26 @@ ${ops.includes("update") ? "  const [editId, setEditId] = useState(null);" : ""}
         if (ops.includes("insert")) {
             page += `  const handleSubmit = async (e) => {
     e.preventDefault();
-${ops.includes("update") ? `    if (editId) {
-      await API.put(\`/${route}/\${editId}\`, form);
-      setEditId(null);
-    } else {
-      await API.post("/${route}", form);
-    }` : `    await API.post("/${route}", form);`}
-    setForm({ ${formReset} });
-    fetchAll();
+    setLoading(true);
+    setError("");
+    setSuccess("");
+    try {
+${ops.includes("update") ? `      if (editId) {
+        await API.put(\`/${route}/\${editId}\`, form);
+        setSuccess("Updated successfully");
+        setEditId(null);
+      } else {
+        await API.post("/${route}", form);
+        setSuccess("Created successfully");
+      }` : `      await API.post("/${route}", form);
+      setSuccess("Created successfully");`}
+      setForm({ ${formReset} });
+      fetchAll();
+    } catch (err) {
+      setError(err.response?.data?.error || "Operation failed");
+    } finally {
+      setLoading(false);
+    }
   };
 
 `;
@@ -136,9 +302,18 @@ ${ops.includes("update") ? `    if (editId) {
 
         if (ops.includes("delete")) {
             page += `  const handleDelete = async (id) => {
-    if (!window.confirm("Are you sure you want to delete this?")) return;
-    await API.delete(\`/${route}/\${id}\`);
-    fetchAll();
+    if (!window.confirm("Are you sure?")) return;
+    setLoading(true);
+    setError("");
+    try {
+      await API.delete(\`/${route}/\${id}\`);
+      setSuccess("Deleted successfully");
+      fetchAll();
+    } catch (err) {
+      setError(err.response?.data?.error || "Delete failed");
+    } finally {
+      setLoading(false);
+    }
   };
 
 `;
@@ -150,6 +325,11 @@ ${ops.includes("update") ? `    if (editId) {
     setForm({ ${editSet} });
   };
 
+  const handleCancel = () => {
+    setEditId(null);
+    setForm({ ${formReset} });
+  };
+
 `;
         }
 
@@ -157,27 +337,33 @@ ${ops.includes("update") ? `    if (editId) {
     <div className="p-6">
       <h1 className="text-2xl font-bold mb-4">${name}</h1>
 
-      <form onSubmit={handleSubmit} className="flex flex-col gap-3 mb-6 max-w-md">
+      {error && <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-2 rounded mb-4">{error}</div>}
+      {success && <div className="bg-green-100 border border-green-400 text-green-700 px-4 py-2 rounded mb-4">{success}</div>}
+
+${ops.includes("insert") ? `      <form onSubmit={handleSubmit} className="flex flex-col gap-3 mb-6 max-w-md">
 ${inputs}
-        <button type="submit" className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
-          ${ops.includes("update") ? 'editId ? "Update" : "Add"' : '"Add"'}
-        </button>
-      </form>
+        <div className="flex gap-2">
+          <button type="submit" disabled={loading} className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 disabled:opacity-50">
+            {loading ? "Processing..." : (${ops.includes("update") ? 'editId ? "Update" : "Add"' : '"Add"'})}
+          </button>
+${ops.includes("update") ? '          {editId && <button type="button" onClick={handleCancel} className="bg-gray-400 text-white px-4 py-2 rounded hover:bg-gray-500">Cancel</button>}' : ""}
+        </div>
+      </form>` : ""}
 
       <table className="w-full border-collapse text-sm">
         <thead className="bg-gray-100">
           <tr>
 ${tableHeaders}
-${ops.includes("update") || ops.includes("delete") ? '          <th className="border px-4 py-2">Actions</th>' : ""}
+${(ops.includes("update") || ops.includes("delete")) ? '          <th className="border px-4 py-2">Actions</th>' : ""}
           </tr>
         </thead>
         <tbody>
           {items.map((item) => (
             <tr key={item.id} className="hover:bg-gray-50">
 ${tableRow}
-${ops.includes("update") || ops.includes("delete") ? `          <td className="border px-4 py-2 space-x-2">
+${(ops.includes("update") || ops.includes("delete")) ? `          <td className="border px-4 py-2 space-x-2">
 ${ops.includes("update") ? '            <button onClick={() => handleEdit(item)} className="text-blue-600 hover:underline">Edit</button>' : ""}
-${ops.includes("delete") ? '            <button onClick={() => handleDelete(item.id)} className="text-red-600 hover:underline">Delete</button>' : ""}
+${ops.includes("delete") ? '            <button onClick={() => handleDelete(item.id)} disabled={loading} className="text-red-600 hover:underline disabled:opacity-50">Delete</button>' : ""}
           </td>` : ""}
             </tr>
           ))}
@@ -195,46 +381,68 @@ ${ops.includes("delete") ? '            <button onClick={() => handleDelete(item
     if (needsAuth) {
         fs.outputFileSync(
             path.join(root, "src", "pages", "Login.jsx"),
-            `import { useState } from "react";
+            `import { useState, useContext } from "react";
 import { useNavigate } from "react-router-dom";
+import { AuthContext } from "../context/AuthContext";
 import API from "../api/axios";
 
 export default function Login() {
   const navigate = useNavigate();
+  const { setUser } = useContext(AuthContext);
   const [form, setForm] = useState({ username: "", password: "" });
   const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [isRegistering, setIsRegistering] = useState(false);
 
-  const handleLogin = async (e) => {
+  const handleSubmit = async (e) => {
     e.preventDefault();
     setError("");
+    setLoading(true);
     try {
-      await API.post("/auth/login", form);
+      const endpoint = isRegistering ? "/auth/register" : "/auth/login";
+      const res = await API.post(endpoint, form);
+      setUser(res.data.user);
       navigate("/");
     } catch (err) {
-      setError(err.response?.data?.message || "Login failed");
+      setError(err.response?.data?.message || (isRegistering ? "Registration failed" : "Login failed"));
+    } finally {
+      setLoading(false);
     }
   };
 
   return (
-    <div className="p-6 max-w-md">
-      <h1 className="text-2xl font-bold mb-4">Login</h1>
-      <form onSubmit={handleLogin} className="flex flex-col gap-3">
-        <input
-          className="border p-2 rounded"
-          placeholder="Username"
-          value={form.username}
-          onChange={(e) => setForm({ ...form, username: e.target.value })}
-        />
-        <input
-          className="border p-2 rounded"
-          type="password"
-          placeholder="Password"
-          value={form.password}
-          onChange={(e) => setForm({ ...form, password: e.target.value })}
-        />
-        {error ? <p className="text-red-600">{error}</p> : null}
-        <button className="bg-blue-600 text-white px-4 py-2 rounded">Login</button>
-      </form>
+    <div className="flex items-center justify-center min-h-screen bg-gray-100">
+      <div className="bg-white p-8 rounded shadow-md max-w-md w-full">
+        <h1 className="text-2xl font-bold mb-4">{isRegistering ? "Register" : "Login"}</h1>
+        {error && <p className="text-red-600 mb-3">{error}</p>}
+        <form onSubmit={handleSubmit} className="flex flex-col gap-3">
+          <input
+            className="border p-2 rounded"
+            placeholder="Username"
+            value={form.username}
+            onChange={(e) => setForm({ ...form, username: e.target.value })}
+            required
+          />
+          <input
+            className="border p-2 rounded"
+            type="password"
+            placeholder="Password"
+            value={form.password}
+            onChange={(e) => setForm({ ...form, password: e.target.value })}
+            required
+          />
+          <button type="submit" disabled={loading} className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 disabled:opacity-50">
+            {loading ? "Processing..." : isRegistering ? "Register" : "Login"}
+          </button>
+        </form>
+        <button
+          type="button"
+          onClick={() => setIsRegistering(!isRegistering)}
+          className="text-blue-600 hover:underline mt-3 w-full text-sm"
+        >
+          {isRegistering ? "Have an account? Login" : "Need an account? Register"}
+        </button>
+      </div>
     </div>
   );
 }
@@ -249,7 +457,7 @@ export default function Login() {
   return (
     <div className="p-6">
       <h1 className="text-2xl font-bold mb-4">Reports</h1>
-      <p>Build your reports dashboard here.</p>
+      <p className="text-gray-600">Build your reports dashboard here. Add charts, analytics, and visualizations.</p>
     </div>
   );
 }
@@ -262,47 +470,66 @@ export default function Login() {
         .join("\n");
 
     const routes = tables
-        .map((t) => `          <Route path="/${toRoute(t.name)}" element={<${toPascal(t.name)} />} />`)
+        .map((t) => {
+            const route = `<Route path="/${toRoute(t.name)}" element={<${toPascal(t.name)} />} />`;
+            return needsAuth
+                ? `          <Route path="/${toRoute(t.name)}" element={<PrivateRoute><${toPascal(t.name)} /></PrivateRoute>} />`
+                : `          ${route}`;
+        })
         .join("\n");
 
     const navLinks = tables
         .map((t) => `          <Link to="/${toRoute(t.name)}" className="hover:underline">${toPascal(t.name)}</Link>`)
         .join("\n");
 
-    const app = `import { BrowserRouter, Routes, Route, Link, useNavigate } from "react-router-dom";
+    let app = `import { BrowserRouter, Routes, Route, Link, useNavigate } from "react-router-dom";
 ${imports}
-${needsAuth ? 'import Login from "./pages/Login";' : ""}
+${needsAuth ? 'import Login from "./pages/Login";\nimport PrivateRoute from "./components/PrivateRoute";\nimport { AuthContext, AuthProvider } from "./context/AuthContext";\nimport { useContext } from "react";' : ""}
 ${needsReports ? 'import Reports from "./pages/Reports";' : ""}
+import Home from "./pages/Home";
 import API from "./api/axios";
 
 function Navbar() {
   const navigate = useNavigate();
+${needsAuth ? '  const { user } = useContext(AuthContext);' : ""}
 
   const logout = async () => {
-    await API.post("/auth/logout");
-    navigate("/login");
+    try {
+      await API.post("/auth/logout");
+      navigate("/login");
+      window.location.reload();
+    } catch (err) {
+      console.error("Logout failed:", err);
+    }
   };
 
   return (
     <nav className="bg-blue-700 text-white px-6 py-3 flex gap-6 items-center">
-      <span className="font-bold text-lg">${projectName}</span>
+      <span className="font-bold text-lg"><Link to="/" className="hover:opacity-80">${projectName}</Link></span>
 ${navLinks}
 ${needsReports ? '      <Link to="/reports" className="hover:underline">Reports</Link>' : ""}
-${needsAuth ? '      <button onClick={logout} className="ml-auto hover:underline">Logout</button>' : ""}
+${needsAuth ? '      {user && <button onClick={logout} className="ml-auto hover:underline">Logout ({user.username})</button>}' : ""}
     </nav>
   );
 }
 
-export default function App() {
+function AppRoutes() {
   return (
-    <BrowserRouter>
+    <>
       <Navbar />
       <Routes>
 ${needsAuth ? '        <Route path="/login" element={<Login />} />' : ""}
+        <Route path="/" element={<Home />} />
 ${routes}
-${needsReports ? '        <Route path="/reports" element={<Reports />} />' : ""}
+${needsReports ? (needsAuth ? '        <Route path="/reports" element={<PrivateRoute><Reports /></PrivateRoute>} />' : '        <Route path="/reports" element={<Reports />} />') : ""}
       </Routes>
-    </BrowserRouter>
+    </>
+  );
+}
+
+export default function App() {
+  return (
+${needsAuth ? '    <AuthProvider>\n      <BrowserRouter>\n        <AppRoutes />\n      </BrowserRouter>\n    </AuthProvider>' : '    <BrowserRouter>\n      <AppRoutes />\n    </BrowserRouter>'}
   );
 }
 `;