starter-structure-cli 0.2.1 → 0.2.2

package/templates/fullstack/react-vite-ts-tailwind-express-prisma-postgres/server/src/middleware/authenticate/index.ts

@@ -0,0 +1,33 @@
+import { NextFunction, Request, Response } from "express";
+import jwt from "jsonwebtoken";
+
+import prisma from "../config/prisma";
+import { errorResponse } from "../utils/api-response";
+import userSelect from "../utils/user-select";
+
+export default async function authenticate(req: Request, res: Response, next: NextFunction) {
+  try {
+    const authHeader = req.headers.authorization;
+
+    if (!authHeader || !authHeader.startsWith("Bearer ")) {
+      return errorResponse(res, "Unauthorized access.", 401);
+    }
+
+    const token = authHeader.split(" ")[1];
+    const decoded = jwt.verify(token, process.env.JWT_SECRET as string) as { id: number };
+
+    const user = await prisma.user.findUnique({
+      where: { id: decoded.id },
+      select: userSelect
+    });
+
+    if (!user) {
+      return errorResponse(res, "User not found.", 401);
+    }
+
+    req.user = user;
+    next();
+  } catch (_error) {
+    return errorResponse(res, "Invalid or expired token.", 401);
+  }
+}

package/templates/fullstack/react-vite-ts-tailwind-express-prisma-postgres/server/src/middleware/error-handler/index.ts

@@ -0,0 +1,21 @@
+import { NextFunction, Request, Response } from "express";
+
+import { errorResponse } from "../utils/api-response";
+
+export default function errorHandler(
+  error: Error & { statusCode?: number },
+  _req: Request,
+  res: Response,
+  _next: NextFunction
+) {
+  const statusCode = error.statusCode || 500;
+  const message = error.message || "Internal server error.";
+
+  if (process.env.NODE_ENV !== "test") {
+    console.error(error);
+  }
+
+  return errorResponse(res, message, statusCode, {
+    stack: process.env.NODE_ENV === "development" ? error.stack : undefined
+  });
+}

package/templates/fullstack/react-vite-ts-tailwind-express-prisma-postgres/server/src/middleware/not-found/index.ts

@@ -0,0 +1,7 @@
+import { Request, Response } from "express";
+
+import { errorResponse } from "../utils/api-response";
+
+export default function notFound(req: Request, res: Response) {
+  return errorResponse(res, `Route not found: ${req.originalUrl}`, 404);
+}

package/templates/fullstack/react-vite-ts-tailwind-express-prisma-postgres/server/src/routes/auth/index.ts

@@ -0,0 +1,12 @@
+import { Router } from "express";
+
+import { login, me, register } from "../../controllers/auth";
+import authenticate from "../../middleware/authenticate";
+
+const router = Router();
+
+router.post("/register", register);
+router.post("/login", login);
+router.get("/me", authenticate, me);
+
+export default router;

package/templates/fullstack/react-vite-ts-tailwind-express-prisma-postgres/server/src/routes/common/index.tsx

@@ -0,0 +1,23 @@
+export type ApiRouteDefinition = {
+  method: "GET" | "POST" | "PATCH" | "DELETE";
+  path: string;
+  handler: string;
+  protected?: boolean;
+};
+
+export const commonApiRoutes: ApiRouteDefinition[] = [
+  {
+    method: "GET",
+    path: "/common",
+    handler: "listCommon",
+    protected: true
+  },
+  {
+    method: "POST",
+    path: "/common",
+    handler: "createCommon",
+    protected: true
+  }
+];
+
+export default commonApiRoutes;

package/templates/fullstack/react-vite-ts-tailwind-express-prisma-postgres/server/src/routes/index.ts

@@ -0,0 +1,16 @@
+import { Router } from "express";
+
+import authRoutes from "./auth";
+
+const router = Router();
+
+router.get("/health", (_req, res) => {
+  res.json({
+    success: true,
+    message: "Server is healthy"
+  });
+});
+
+router.use("/auth", authRoutes);
+
+export default router;

package/templates/fullstack/react-vite-ts-tailwind-express-prisma-postgres/server/src/routes/reports/index.tsx

@@ -0,0 +1,23 @@
+export type ApiRouteDefinition = {
+  method: "GET" | "POST" | "PATCH" | "DELETE";
+  path: string;
+  handler: string;
+  protected?: boolean;
+};
+
+export const reportsApiRoutes: ApiRouteDefinition[] = [
+  {
+    method: "GET",
+    path: "/reports",
+    handler: "listReports",
+    protected: true
+  },
+  {
+    method: "POST",
+    path: "/reports",
+    handler: "createReports",
+    protected: true
+  }
+];
+
+export default reportsApiRoutes;

package/templates/fullstack/react-vite-ts-tailwind-express-prisma-postgres/server/src/services/index.tsx

@@ -0,0 +1,16 @@
+export const servicesService = {
+  summarize(items: Array<Record<string, unknown>>) {
+    return {
+      count: items.length,
+      updatedAt: new Date().toISOString()
+    };
+  },
+  emptyState() {
+    return {
+      title: "Services service",
+      description: "Replace this starter service with your real business logic."
+    };
+  }
+};
+
+export default servicesService;

package/templates/fullstack/react-vite-ts-tailwind-express-prisma-postgres/server/src/types/express/index.d.ts

@@ -0,0 +1,20 @@
+import { Prisma } from "@prisma/client";
+
+declare global {
+  namespace Express {
+    interface Request {
+      user?: Prisma.UserGetPayload<{
+        select: {
+          id: true;
+          name: true;
+          email: true;
+          role: true;
+          createdAt: true;
+          updatedAt: true;
+        };
+      }>;
+    }
+  }
+}
+
+export {};

package/templates/fullstack/react-vite-ts-tailwind-express-prisma-postgres/server/src/utils/api-response/index.ts

@@ -0,0 +1,27 @@
+import { Response } from "express";
+
+export function successResponse(
+  res: Response,
+  data: unknown = null,
+  message = "Success",
+  statusCode = 200
+) {
+  return res.status(statusCode).json({
+    success: true,
+    message,
+    data
+  });
+}
+
+export function errorResponse(
+  res: Response,
+  message = "Something went wrong",
+  statusCode = 500,
+  errors: unknown = null
+) {
+  return res.status(statusCode).json({
+    success: false,
+    message,
+    errors
+  });
+}

package/templates/fullstack/react-vite-ts-tailwind-express-prisma-postgres/server/src/utils/generate-token/index.ts

@@ -0,0 +1,9 @@
+import jwt from "jsonwebtoken";
+
+export default function generateToken(userId: number) {
+  const expiresIn = (process.env.JWT_EXPIRES_IN || "7d") as jwt.SignOptions["expiresIn"];
+
+  return jwt.sign({ id: userId }, process.env.JWT_SECRET as string, {
+    expiresIn
+  });
+}

package/templates/fullstack/react-vite-ts-tailwind-express-prisma-postgres/server/src/utils/user-select/index.ts

@@ -0,0 +1,10 @@
+const userSelect = {
+  id: true,
+  name: true,
+  email: true,
+  role: true,
+  createdAt: true,
+  updatedAt: true
+} as const;
+
+export default userSelect;

package/templates/fullstack/react-vite-ts-tailwind-express-prisma-postgres/server/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "CommonJS",
+    "moduleResolution": "Node",
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true
+  },
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
+}

package/templates/fullstack/react-vite-ts-tailwind-express-sequelize-mysql/.env.example

@@ -0,0 +1,10 @@
+# client
+VITE_APP_NAME=__APP_NAME__
+VITE_API_URL=http://localhost:5000/api
+
+# server
+PORT=5000
+CLIENT_URL=http://localhost:5173
+JWT_SECRET=replace-me
+DATABASE_URL=mysql://root:password@localhost:3306/__APP_NAME__
+MONGODB_URI=mongodb://127.0.0.1:27017/__APP_NAME__

package/templates/fullstack/react-vite-ts-tailwind-express-sequelize-mysql/README.md

@@ -0,0 +1,19 @@
+# __APP_NAME__
+
+Fullstack starter with separate `client/` and `server/` apps.
+
+## Structure
+
+- `client/`: frontend app
+- `server/`: API app
+
+## Getting started
+
+```bash
+npm run setup
+cp .env.example .env
+npm run dev:server
+npm run dev:client
+```
+
+Set the database values in `server/.env` or copy the root values into that app before running migrations or connecting the API.

package/templates/fullstack/react-vite-ts-tailwind-express-sequelize-mysql/client/.env.example

@@ -0,0 +1 @@
+VITE_APP_NAME=__APP_NAME__

package/templates/fullstack/react-vite-ts-tailwind-express-sequelize-mysql/client/README.md

@@ -0,0 +1,18 @@
+# __APP_NAME__
+
+React + Vite + Tailwind starter in TypeScript.
+
+## Included
+
+- React powered by Vite
+- Tailwind CSS v4 with the Vite plugin
+- A polished single-page starter layout
+- Ready-to-edit sections and shared styles
+
+## Getting started
+
+```bash
+npm install
+npm run dev
+```
+

package/templates/fullstack/react-vite-ts-tailwind-express-sequelize-mysql/client/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="Starter project for __APP_NAME__ powered by React, Vite, and Tailwind."
+    />
+    <title>__APP_NAME__</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/fullstack/react-vite-ts-tailwind-express-sequelize-mysql/client/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "__APP_NAME__",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.0",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "@vitejs/plugin-react": "^4.3.4",
+    "tailwindcss": "^4.1.0",
+    "typescript": "^5.8.2",
+    "vite": "^6.2.0"
+
+  }
+}

package/templates/fullstack/react-vite-ts-tailwind-express-sequelize-mysql/client/public/index.tsx

@@ -0,0 +1,16 @@
+export const publicManifest = [
+  {
+    key: "public-hero",
+    label: "Public hero",
+    path: "/public/hero-placeholder"
+  },
+  {
+    key: "public-cover",
+    label: "Public cover",
+    path: "/public/cover-placeholder"
+  }
+];
+
+export const publicSource = "fullstack-enterprise-structure/shared/client/public/index.tsx";
+
+export default publicManifest;

package/templates/fullstack/react-vite-ts-tailwind-express-sequelize-mysql/client/src/App.tsx

@@ -0,0 +1,77 @@
+import FeatureGrid from "./components/feature-grid";
+
+const launchTracks = [
+  "Landing page sections with clear content hierarchy",
+  "Tailwind v4 styling with a warm editorial visual language",
+  "Simple component structure that is easy to extend"
+] as const;
+
+const checklist = [
+  { label: "Brand system", value: "Colors, voice, layout" },
+  { label: "Core pages", value: "Home, feature, CTA blocks" },
+  { label: "Launch speed", value: "Fast local edits with Vite" }
+] as const;
+
+export default function App() {
+  const appName = import.meta.env.VITE_APP_NAME || "__APP_NAME__";
+
+  return (
+    <main className="px-6 py-8 md:px-10 lg:px-12">
+      <section className="mx-auto grid min-h-[calc(100vh-4rem)] max-w-6xl gap-10 rounded-[2rem] border border-[var(--line)] bg-[var(--panel)] p-8 shadow-[0_30px_120px_rgba(15,23,42,0.08)] backdrop-blur md:grid-cols-[1.2fr_0.8fr] md:p-12">
+        <div className="flex flex-col justify-between gap-8">
+          <div className="space-y-6">
+            <span className="inline-flex w-fit rounded-full border border-amber-300 bg-amber-50 px-4 py-2 text-sm font-medium text-amber-900">
+              React + Vite + Tailwind starter
+            </span>
+            <div className="space-y-4">
+              <h1 className="max-w-3xl text-5xl font-semibold tracking-tight text-slate-900 md:text-6xl">
+                {appName} ships with a clean marketing shell, not a blank page.
+              </h1>
+              <p className="max-w-2xl text-lg leading-8 text-[var(--muted)]">
+                Start from a deliberate layout with strong spacing, textured color, and clear sections
+                instead of rebuilding the same landing page structure on every project.
+              </p>
+            </div>
+          </div>
+
+          <div className="grid gap-4 sm:grid-cols-3">
+            {launchTracks.map((item) => (
+              <article
+                key={item}
+                className="rounded-3xl border border-white/70 bg-white/75 p-5 text-sm leading-7 text-slate-700 shadow-sm"
+              >
+                {item}
+              </article>
+            ))}
+          </div>
+        </div>
+
+        <aside className="flex flex-col justify-between rounded-[1.75rem] bg-slate-950 p-6 text-slate-50 shadow-[0_20px_80px_rgba(15,23,42,0.3)]">
+          <div className="space-y-4">
+            <p className="text-sm uppercase tracking-[0.24em] text-slate-400">Launch checklist</p>
+            <div className="space-y-3">
+              {checklist.map((item) => (
+                <div
+                  key={item.label}
+                  className="rounded-2xl border border-white/10 bg-white/5 p-4"
+                >
+                  <p className="text-sm text-slate-400">{item.label}</p>
+                  <p className="mt-1 text-base font-medium text-white">{item.value}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div className="mt-8 rounded-3xl bg-linear-to-br from-orange-400 via-amber-300 to-lime-200 p-[1px]">
+            <div className="rounded-[calc(1.5rem-1px)] bg-slate-950/95 p-5">
+              <p className="text-sm text-slate-400">Ready for the next template layer?</p>
+              <p className="mt-2 text-lg font-medium">Add auth, CMS, or dashboard modules on top of this shell.</p>
+            </div>
+          </div>
+        </aside>
+      </section>
+
+      <FeatureGrid />
+    </main>
+  );
+}

package/templates/fullstack/react-vite-ts-tailwind-express-sequelize-mysql/client/src/assets/index.tsx

@@ -0,0 +1,16 @@
+export const assetsManifest = [
+  {
+    key: "assets-hero",
+    label: "Assets hero",
+    path: "/assets/hero-placeholder"
+  },
+  {
+    key: "assets-cover",
+    label: "Assets cover",
+    path: "/assets/cover-placeholder"
+  }
+];
+
+export const assetsSource = "fullstack-enterprise-structure/shared/client/src/assets/index.tsx";
+
+export default assetsManifest;

package/templates/fullstack/react-vite-ts-tailwind-express-sequelize-mysql/client/src/components/charts/index.tsx

@@ -0,0 +1,37 @@
+type ChartsPanelProps = {
+  title?: string;
+  description?: string;
+  items?: string[];
+};
+
+const defaultItems = [
+  "Wire up real API calls",
+  "Replace placeholder copy",
+  "Connect this module to your route tree"
+];
+
+export default function ChartsPanel({
+  title = "Charts",
+  description = "Starter implementation for the charts module.",
+  items = defaultItems
+}: ChartsPanelProps) {
+  return (
+    <section className="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
+      <div className="space-y-2">
+        <p className="text-xs font-semibold uppercase tracking-[0.24em] text-slate-500">
+          Charts
+        </p>
+        <h2 className="text-2xl font-semibold text-slate-900">{title}</h2>
+        <p className="text-sm leading-6 text-slate-600">{description}</p>
+      </div>
+
+      <div className="mt-5 grid gap-3 sm:grid-cols-3">
+        {items.map((item) => (
+          <article key={item} className="rounded-2xl bg-slate-50 px-4 py-3 text-sm text-slate-700">
+            {item}
+          </article>
+        ))}
+      </div>
+    </section>
+  );
+}

package/templates/fullstack/react-vite-ts-tailwind-express-sequelize-mysql/client/src/components/common/banner/index.tsx

@@ -0,0 +1,37 @@
+type BannerSectionProps = {
+  title?: string;
+  description?: string;
+  items?: string[];
+};
+
+const defaultItems = [
+  "Wire up real API calls",
+  "Replace placeholder copy",
+  "Connect this module to your route tree"
+];
+
+export default function BannerSection({
+  title = "Banner",
+  description = "Starter implementation for the banner module.",
+  items = defaultItems
+}: BannerSectionProps) {
+  return (
+    <section className="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
+      <div className="space-y-2">
+        <p className="text-xs font-semibold uppercase tracking-[0.24em] text-slate-500">
+          Banner
+        </p>
+        <h2 className="text-2xl font-semibold text-slate-900">{title}</h2>
+        <p className="text-sm leading-6 text-slate-600">{description}</p>
+      </div>
+
+      <div className="mt-5 grid gap-3 sm:grid-cols-3">
+        {items.map((item) => (
+          <article key={item} className="rounded-2xl bg-slate-50 px-4 py-3 text-sm text-slate-700">
+            {item}
+          </article>
+        ))}
+      </div>
+    </section>
+  );
+}

package/templates/fullstack/react-vite-ts-tailwind-express-sequelize-mysql/client/src/components/common/header/index.tsx

@@ -0,0 +1,37 @@
+type HeaderBarProps = {
+  title?: string;
+  description?: string;
+  items?: string[];
+};
+
+const defaultItems = [
+  "Wire up real API calls",
+  "Replace placeholder copy",
+  "Connect this module to your route tree"
+];
+
+export default function HeaderBar({
+  title = "Header",
+  description = "Starter implementation for the header module.",
+  items = defaultItems
+}: HeaderBarProps) {
+  return (
+    <section className="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
+      <div className="space-y-2">
+        <p className="text-xs font-semibold uppercase tracking-[0.24em] text-slate-500">
+          Header
+        </p>
+        <h2 className="text-2xl font-semibold text-slate-900">{title}</h2>
+        <p className="text-sm leading-6 text-slate-600">{description}</p>
+      </div>
+
+      <div className="mt-5 grid gap-3 sm:grid-cols-3">
+        {items.map((item) => (
+          <article key={item} className="rounded-2xl bg-slate-50 px-4 py-3 text-sm text-slate-700">
+            {item}
+          </article>
+        ))}
+      </div>
+    </section>
+  );
+}

package/templates/fullstack/react-vite-ts-tailwind-express-sequelize-mysql/client/src/components/feature-grid/index.tsx

@@ -0,0 +1,32 @@
+const cards = [
+  {
+    title: "Intentional look",
+    body: "Warm neutrals, sharp typography, and layered surfaces give the starter a point of view immediately."
+  },
+  {
+    title: "Fast edits",
+    body: "Sections are plain React components, so changing copy and layout stays straightforward."
+  },
+  {
+    title: "Portable setup",
+    body: "You can turn this into a SaaS page, agency site, waitlist, or docs front page without redoing the base."
+  }
+] as const;
+
+export default function FeatureGrid() {
+  return (
+    <section className="mx-auto mt-10 max-w-6xl">
+      <div className="grid gap-4 md:grid-cols-3">
+        {cards.map((card) => (
+          <article
+            key={card.title}
+            className="rounded-[1.75rem] border border-[var(--line)] bg-white/70 p-6 shadow-sm"
+          >
+            <p className="text-lg font-semibold text-slate-900">{card.title}</p>
+            <p className="mt-3 text-sm leading-7 text-slate-600">{card.body}</p>
+          </article>
+        ))}
+      </div>
+    </section>
+  );
+}

package/templates/fullstack/react-vite-ts-tailwind-express-sequelize-mysql/client/src/components/form/index.tsx

@@ -0,0 +1,37 @@
+type FormProps = {
+  title?: string;
+  description?: string;
+  items?: string[];
+};
+
+const defaultItems = [
+  "Wire up real API calls",
+  "Replace placeholder copy",
+  "Connect this module to your route tree"
+];
+
+export default function Form({
+  title = "Form",
+  description = "Starter implementation for the form module.",
+  items = defaultItems
+}: FormProps) {
+  return (
+    <section className="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
+      <div className="space-y-2">
+        <p className="text-xs font-semibold uppercase tracking-[0.24em] text-slate-500">
+          Form
+        </p>
+        <h2 className="text-2xl font-semibold text-slate-900">{title}</h2>
+        <p className="text-sm leading-6 text-slate-600">{description}</p>
+      </div>
+
+      <div className="mt-5 grid gap-3 sm:grid-cols-3">
+        {items.map((item) => (
+          <article key={item} className="rounded-2xl bg-slate-50 px-4 py-3 text-sm text-slate-700">
+            {item}
+          </article>
+        ))}
+      </div>
+    </section>
+  );
+}