create-zhx-monorepo 0.1.0

package/README.md

@@ -0,0 +1,34 @@
+# create-zhx-monorepo
+
+A CLI package to quickly generate a **Monorepo Starter** monorepo for full-stack development with Next.js, NestJS, and shadcn/ui.
+
+---
+
+## Usage
+
+```bash
+# Install globally (optional)
+pnpm add -g create-zhx-monorepo
+
+# Create a new project
+pnpm create-zhx-monorepo my-new-project
+```
+
+This will generate a ready-to-use monorepo under `my-new-project` with:
+
+- `apps/web` – Next.js frontend
+- `server` – NestJS backend
+- `packages/ui` – Shared UI components
+- `packages/config` – ESLint & TypeScript configs
+
+---
+
+## Requirements
+
+- Node.js 24+
+- PNPM
+- Git
+
+---
+
+Made with ❤️ by **JZ Digital Labs**

package/bin/index.js

@@ -0,0 +1,65 @@
+#!/usr/bin/env node
+import fs from "fs-extra";
+import path from "path";
+import prompts from "prompts";
+import { fileURLToPath } from "url";
+import { green, cyan, red } from "kolorist";
+import { execSync } from "child_process";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+async function main() {
+  const targetDir = process.argv[2];
+
+  if (!targetDir) {
+    console.log(red("❌ Please provide a project name"));
+    console.log("Example:");
+    console.log("  pnpm create zhx-monorepo my-app");
+    process.exit(1);
+  }
+
+  const projectPath = path.resolve(process.cwd(), targetDir);
+
+  if (fs.existsSync(projectPath)) {
+    console.log(red("❌ Directory already exists"));
+    process.exit(1);
+  }
+
+  const { gitRemote } = await prompts({
+    type: "text",
+    name: "gitRemote",
+    message: "Git remote URL (optional):",
+  });
+
+  console.log(cyan("📦 Creating project..."));
+
+  // Copy template
+  const templateDir = path.join(__dirname, "../templates/monorepo-starter");
+  await fs.copy(templateDir, projectPath);
+
+  // Update package.json
+  const pkgPath = path.join(projectPath, "package.json");
+  const pkg = await fs.readJson(pkgPath);
+  pkg.name = targetDir;
+  await fs.writeJson(pkgPath, pkg, { spaces: 2 });
+
+  // Init git
+  process.chdir(projectPath);
+  execSync("git init", { stdio: "ignore" });
+  execSync("git add .", { stdio: "ignore" });
+  execSync('git commit -m "Initial commit"', { stdio: "ignore" });
+
+  if (gitRemote) {
+    execSync(`git remote add origin ${gitRemote}`, { stdio: "ignore" });
+  }
+
+  console.log(green("✅ Project ready!"));
+  console.log();
+  console.log("Next steps:");
+  console.log(`  cd ${targetDir}`);
+  console.log("  pnpm install");
+  console.log("  pnpm dev");
+}
+
+main();

package/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "create-zhx-monorepo",
+  "version": "0.1.0",
+  "description": "Create a ZHX monorepo with one command",
+  "bin": {
+    "create-zhx-monorepo": "bin/index.js"
+  },
+  "type": "module",
+  "license": "MIT",
+  "engines": {
+    "node": ">=18"
+  },
+  "dependencies": {
+    "fs-extra": "^11.3.3",
+    "prompts": "^2.4.2",
+    "kolorist": "^1.8.0"
+  }
+}

package/templates/monorepo-starter/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "tailwindCSS.experimental.configFile": "packages/ui/src/styles/globals.css"
+}

package/templates/monorepo-starter/README.md

@@ -0,0 +1,42 @@
+# Monorepo Starter Template
+
+This is a minimal, modern monorepo template based on shadcn/ui, customized for fast development and scalability.
+
+## Features
+
+- Modular structure for web, server, and shared packages
+- Customizable UI components (`packages/ui`)
+- Tailwind CSS and PostCSS preconfigured
+- TypeScript everywhere
+- Ready for Next.js and NestJS
+- ESLint, TurboRepo, and PNPM workspace setup
+
+## Structure
+
+- `apps/web` – Next.js frontend
+- `server` – NestJS backend
+- `packages/ui` – Shared UI components
+- `packages/config` – Shared configs (ESLint, TypeScript)
+
+## Getting Started
+
+```bash
+pnpm install
+pnpm dev # Start all apps
+```
+
+## Usage
+
+Import UI components in your app:
+
+```tsx
+import { Button } from "@workspace/ui/components/button";
+```
+
+## Customization
+
+Feel free to modify, extend, and organize the template to fit your workflow.
+
+---
+
+Made with ❤️ using shadcn/ui & Monorepo

package/templates/monorepo-starter/apps/web/components.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "../../packages/ui/src/styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "hooks": "@/hooks",
+    "lib": "@/lib",
+    "utils": "@workspace/ui/lib/utils",
+    "ui": "@workspace/ui/components"
+  }
+}

package/templates/monorepo-starter/apps/web/eslint.config.mjs

@@ -0,0 +1,4 @@
+import { config } from "@workspace/config/eslint/next";
+
+/** @type {import("eslint").Linter.Config} */
+export default config;

package/templates/monorepo-starter/apps/web/next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/templates/monorepo-starter/apps/web/next.config.mjs

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  transpilePackages: ["@workspace/ui"],
+}
+
+export default nextConfig

package/templates/monorepo-starter/apps/web/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "web",
+  "version": "0.0.1",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "postbuild": "next-sitemap --config sitemap.config.cjs",
+    "start": "next start",
+    "lint": "next lint",
+    "lint:fix": "next lint --fix",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@workspace/ui": "workspace:*",
+    "lucide-react": "^0.562.0",
+    "next": "^16.0.10",
+    "next-sitemap": "^4.2.3",
+    "next-themes": "^0.4.6",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3"
+  },
+  "devDependencies": {
+    "@types/node": "^25.0.3",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@workspace/config": "workspace:*",
+    "tailwindcss": "^4.1.18"
+  }
+}

package/templates/monorepo-starter/apps/web/postcss.config.mjs

@@ -0,0 +1 @@
+export { default } from "@workspace/ui/postcss.config";

package/templates/monorepo-starter/apps/web/sitemap.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  siteUrl: "https://www.yourdomian.com",
+  generateRobotsTxt: true,
+  changefreq: "weekly",
+  priority: 0.8,
+};

package/templates/monorepo-starter/apps/web/src/app/(auth)/layout.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const AuthLayout = ({ children }: LayoutProps) => {
+  return <div>{children}</div>;
+}
+
+export default AuthLayout;

package/templates/monorepo-starter/apps/web/src/app/(root)/layout.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
+
+const Layout = ({ children }: LayoutProps) => {
+  return (
+    <>
+      <Header />
+      <main>{children}</main>
+      <Footer />
+    </>
+  );
+}
+
+export default Layout;

package/templates/monorepo-starter/apps/web/src/app/(root)/page.tsx

@@ -0,0 +1,14 @@
+import { Button } from "@workspace/ui/components/button"
+
+const HomePage = () => {
+  return (
+    <div className="flex items-center justify-center min-h-svh">
+      <div className="flex flex-col items-center justify-center gap-4">
+        <h1 className="text-2xl font-bold">Hello World</h1>
+        <Button size="sm">Button</Button>
+      </div>
+    </div>
+  )
+}
+
+export default HomePage

package/templates/monorepo-starter/apps/web/src/app/globals.css

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

package/templates/monorepo-starter/apps/web/src/app/layout.tsx

@@ -0,0 +1,24 @@
+import { Inter } from "next/font/google";
+
+import "@workspace/ui/globals.css";
+import "./globals.css";
+import Provider from "@/providers";
+
+const primaryFont = Inter({
+  variable: "--font-primary",
+  subsets: ["latin"],
+});
+
+const RootLayout = ({ children }: LayoutProps) => {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body
+        className={`${primaryFont.variable} font-sans antialiased `}
+      >
+        <Provider>{children}</Provider>
+      </body>
+    </html>
+  );
+}
+
+export default RootLayout;

package/templates/monorepo-starter/apps/web/src/components/Footer.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function Footer() {
+  return (
+    <div>Footer</div>
+  )
+}
+
+export default Footer

package/templates/monorepo-starter/apps/web/src/components/Header.tsx

@@ -0,0 +1,11 @@
+
+
+import React from 'react'
+
+function Header() {
+  return (
+    <div>Header</div>
+  )
+}
+
+export default Header

package/templates/monorepo-starter/apps/web/src/components/ThemeSwitch.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import * as React from "react";
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+import { Button, type ButtonProps } from "@workspace/ui/components/button";
+
+function ThemeSwitch(props: ButtonProps) {
+  const { setTheme, theme, systemTheme } = useTheme();
+
+  const currentTheme = theme === "system" ? systemTheme : theme;
+
+  const toggleTheme = () =>
+    setTheme(currentTheme === "dark" ? "light" : "dark");
+
+  return (
+    <Button
+      variant="outline"
+      size="icon"
+      className="rounded-full"
+      {...props}
+      onClick={toggleTheme}
+    >
+      {currentTheme === "dark" ? (
+        <Moon className="text-white" />
+      ) : (
+        <Sun className="text-black" />
+      )}
+      <span className="sr-only">Toggle theme</span>
+    </Button>
+  );
+}
+
+export default ThemeSwitch;

package/templates/monorepo-starter/apps/web/src/providers/index.tsx

@@ -0,0 +1,10 @@
+"use client";
+
+import React from "react";
+import ThemeProvider from "./theme";
+
+function Provider({ children }: { children: React.ReactNode }) {
+  return <ThemeProvider>{children}</ThemeProvider>;
+}
+
+export default Provider;

package/templates/monorepo-starter/apps/web/src/providers/theme.tsx

@@ -0,0 +1,19 @@
+ 
+import  React from "react"
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+
+  function ThemeProvider({ children }: { children: React.ReactNode }) {
+  return (
+    <NextThemesProvider
+      attribute="class"
+      defaultTheme="system"
+      enableSystem
+      disableTransitionOnChange
+      enableColorScheme
+    >
+      {children}
+    </NextThemesProvider>
+  )
+}
+
+export default ThemeProvider;

package/templates/monorepo-starter/apps/web/src/types/index.d.ts

@@ -0,0 +1,16 @@
+
+
+ interface SegmentParams {
+    [key: string]: string;
+  }
+
+  type TSearchParams = Record<string, string | string[] | undefined>;
+
+  interface PageProps {
+    params: Promise<SegmentParams>;
+    searchParams: Promise<TSearchParams>;
+   }
+
+  interface LayoutProps extends PageProps {
+    children?: React.ReactNode;
+  }

package/templates/monorepo-starter/apps/web/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "extends": "@workspace/config/typescript/next",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "outDir": "dist",
+    "paths": {
+      "@/*": ["src/*"],
+      "@workspace/ui/*": ["../../packages/ui/src/*"]
+    },
+    "plugins": [{ "name": "next" }]
+  },
+  "include": [
+    "next-env.d.ts",
+    "next.config.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": ["node_modules"]
+}

package/templates/monorepo-starter/eslint.config.mjs

@@ -0,0 +1,12 @@
+// This configuration only applies to the package manager root.
+/** @type {import("eslint").Linter.Config} */
+const config = {
+  ignorePatterns: ["apps/**", "packages/**", "server/**"],
+  extends: ["@workspace/config/eslint/base"],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: true,
+  },
+};
+
+export default config;

package/templates/monorepo-starter/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "zhx-monorepo",
+  "version": "0.0.1",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "build": "turbo build",
+    "dev": "turbo dev",
+    "lint": "turbo lint",
+    "format": "turbo format",
+    "update:deps": "pnpm update -r --latest"
+  },
+  "devDependencies": {
+    "@workspace/config": "workspace:*",
+    "prettier": "^3.7.4",
+    "turbo": "^2.6.3",
+    "typescript": "5.9.3"
+  },
+  "packageManager": "pnpm@10.26.0",
+  "engines": {
+    "node": ">=24"
+  }
+}

package/templates/monorepo-starter/packages/config/eslint/base.js

@@ -0,0 +1,31 @@
+import js from "@eslint/js";
+import eslintConfigPrettier from "eslint-config-prettier";
+import turboPlugin from "eslint-plugin-turbo";
+import tseslint from "typescript-eslint";
+
+/** @type {import("eslint").Linter.Config} */
+export const config = [
+  js.configs.recommended,
+  eslintConfigPrettier,
+  ...tseslint.configs.recommended,
+  {
+    plugins: { turbo: turboPlugin },
+    rules: {
+      "turbo/no-undeclared-env-vars": "error",
+    },
+  },
+  {
+    ignores: [
+      "dist/**",
+      "build/**",
+      "coverage/**",
+      "node_modules/**",
+      ".next/**",
+    ],
+  },
+  {
+    languageOptions: {
+      sourceType: "module",
+    },
+  },
+];

package/templates/monorepo-starter/packages/config/eslint/nest.js

@@ -0,0 +1,26 @@
+import tseslint from "typescript-eslint";
+import globals from "globals";
+import { config as baseConfig } from "./base.js";
+
+/** @type {import("eslint").Linter.Config} */
+export const config = [
+  ...baseConfig,
+  {
+    languageOptions: {
+      globals: {
+        ...globals.node,
+      },
+      sourceType: "module",
+    },
+  },
+  {
+    rules: {
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-floating-promises": "error",
+      "@typescript-eslint/no-unsafe-argument": "error",
+    },
+  },
+  {
+    ignores: ["test/**"],
+  },
+];

package/templates/monorepo-starter/packages/config/eslint/next.js

@@ -0,0 +1,39 @@
+import pluginReact from "eslint-plugin-react";
+import pluginReactHooks from "eslint-plugin-react-hooks";
+import pluginNext from "@next/eslint-plugin-next";
+import globals from "globals";
+import { config as baseConfig } from "./base.js";
+
+/** @type {import("eslint").Linter.Config} */
+export const config = [
+  ...baseConfig,
+  pluginReact.configs.flat.recommended,
+  {
+    languageOptions: {
+      ...pluginReact.configs.flat.recommended.languageOptions,
+      globals: {
+        ...globals.browser,
+        ...globals.serviceworker,
+      },
+    },
+    settings: {
+      react: { version: "detect" },
+    },
+  },
+  {
+    plugins: {
+      "@next/next": pluginNext,
+      "react-hooks": pluginReactHooks,
+    },
+    rules: {
+      ...pluginNext.configs.recommended.rules,
+      ...pluginNext.configs["core-web-vitals"].rules,
+      ...pluginReactHooks.configs.recommended.rules,
+      "react/react-in-jsx-scope": "off",
+      "react/prop-types": "off",
+    },
+  },
+  {
+    ignores: [".next/**"],
+  },
+];

package/templates/monorepo-starter/packages/config/eslint/react.js

@@ -0,0 +1,30 @@
+import pluginReact from "eslint-plugin-react";
+import pluginReactHooks from "eslint-plugin-react-hooks";
+import globals from "globals";
+import { config as baseConfig } from "./base.js";
+
+/** @type {import("eslint").Linter.Config} */
+export const config = [
+  ...baseConfig,
+  pluginReact.configs.flat.recommended,
+  {
+    languageOptions: {
+      ...pluginReact.configs.flat.recommended.languageOptions,
+      globals: {
+        ...globals.serviceworker,
+        ...globals.browser,
+      },
+    },
+    settings: {
+      react: { version: "detect" },
+    },
+  },
+  {
+    plugins: { "react-hooks": pluginReactHooks },
+    rules: {
+      ...pluginReactHooks.configs.recommended.rules,
+      "react/react-in-jsx-scope": "off",
+      "react/prop-types": "off",
+    },
+  },
+];

package/templates/monorepo-starter/packages/config/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@workspace/config",
+  "version": "0.1.0",
+  "type": "module",
+  "private": true,
+  "license": "ISC",
+  "exports": {
+    "./eslint/*": "./eslint/*.js",
+    "./typescript/*": "./typescript/*.json"
+  },
+  "scripts": {
+    "lint": "eslint . --max-warnings 0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.2",
+    "@next/eslint-plugin-next": "^16.0.10",
+    "@types/jest": "^30.0.0",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-only-warn": "^1.1.0",
+    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-turbo": "^2.6.3",
+    "globals": "^16.5.0",
+    "jest": "^30.2.0",
+    "prettier-plugin-tailwindcss": "^0.7.2",
+    "ts-jest": "^29.4.6",
+    "turbo": "^2.6.3",
+    "typescript-eslint": "^8.50.0"
+  }
+}