@codabytez/create-next-template 0.1.0

package/dist/index.js

@@ -0,0 +1,407 @@
+#!/usr/bin/env node
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+// src/index.ts
+var p2 = __toESM(require("@clack/prompts"));
+var import_chalk2 = __toESM(require("chalk"));
+var import_path6 = __toESM(require("path"));
+
+// src/installer.ts
+var p = __toESM(require("@clack/prompts"));
+var import_chalk = __toESM(require("chalk"));
+var import_fs_extra5 = __toESM(require("fs-extra"));
+var import_path5 = __toESM(require("path"));
+
+// src/helpers/copy.ts
+var import_fs_extra = __toESM(require("fs-extra"));
+var import_path = __toESM(require("path"));
+var TEMPLATES_DIR = import_path.default.join(__dirname, "../../templates");
+async function copyTemplate(templateName, destPath) {
+  const templatePath = import_path.default.join(TEMPLATES_DIR, templateName);
+  if (!await import_fs_extra.default.pathExists(templatePath)) return;
+  await import_fs_extra.default.copy(templatePath, destPath, { overwrite: true });
+}
+
+// src/helpers/env.ts
+var import_fs_extra2 = __toESM(require("fs-extra"));
+var import_path2 = __toESM(require("path"));
+async function mergeEnvExamples(projectPath, features) {
+  const TEMPLATES_DIR2 = import_path2.default.join(__dirname, "../../templates");
+  const destEnv = import_path2.default.join(projectPath, ".env.example");
+  let combined = await import_fs_extra2.default.readFile(destEnv, "utf-8").catch(() => "");
+  const featureEnvDirs = {
+    auth: "auth",
+    prisma: "prisma",
+    convex: "convex",
+    appwrite: "appwrite"
+  };
+  for (const feature of features) {
+    const templateDir = featureEnvDirs[feature];
+    if (!templateDir) continue;
+    const src = import_path2.default.join(TEMPLATES_DIR2, templateDir, ".env.example");
+    if (!await import_fs_extra2.default.pathExists(src)) continue;
+    const content = await import_fs_extra2.default.readFile(src, "utf-8");
+    combined += `
+# ${feature}
+${content}`;
+  }
+  await import_fs_extra2.default.writeFile(destEnv, combined.trim() + "\n");
+}
+
+// src/helpers/packages.ts
+var import_fs_extra3 = __toESM(require("fs-extra"));
+var import_path3 = __toESM(require("path"));
+
+// src/helpers/run.ts
+var import_execa = require("execa");
+async function runCommand(command, args, cwd) {
+  await (0, import_execa.execa)(command, args, { cwd, stdio: "inherit" });
+}
+
+// src/helpers/packages.ts
+var BASE_DEPS = {
+  next: "^15.0.0",
+  react: "^18.3.0",
+  "react-dom": "^18.3.0",
+  clsx: "^2.1.1",
+  "tailwind-merge": "^2.4.0",
+  "class-variance-authority": "^0.7.0",
+  zod: "^3.23.0",
+  "date-fns": "^3.6.0",
+  "cookies-next": "^4.2.1",
+  "lucide-react": "^0.400.0"
+};
+var BASE_DEV_DEPS = {
+  typescript: "^5.5.0",
+  "@types/node": "^20.14.0",
+  "@types/react": "^18.3.0",
+  "@types/react-dom": "^18.3.0",
+  tailwindcss: "^4.0.0",
+  "@tailwindcss/postcss": "^4.0.0",
+  postcss: "^8.4.0",
+  // Code quality
+  "@eslint/eslintrc": "^3.2.0",
+  prettier: "^3.3.0",
+  "eslint-config-prettier": "^9.1.0",
+  "eslint-plugin-prettier": "^5.2.0",
+  // Git hooks
+  husky: "^9.1.0",
+  "lint-staged": "^15.2.0"
+};
+var FEATURE_DEPS = {
+  animations: {
+    "framer-motion": "^11.3.0"
+  },
+  dataFetching: {
+    "@tanstack/react-query": "^5.51.0",
+    axios: "^1.7.0"
+  },
+  forms: {
+    "react-hook-form": "^7.52.0",
+    "@hookform/resolvers": "^3.9.0"
+  },
+  extraIcons: {
+    "iconsax-reactjs": "^1.0.1"
+  },
+  auth: {
+    "@clerk/nextjs": "^5.2.0"
+  },
+  prisma: {
+    "@prisma/client": "^5.16.0"
+  },
+  convex: {
+    convex: "^1.13.0"
+  },
+  appwrite: {
+    appwrite: "^16.0.0"
+  }
+};
+var FEATURE_DEV_DEPS = {
+  prisma: {
+    prisma: "^5.16.0"
+  }
+};
+function buildPackageJson(projectName, features) {
+  const deps = { ...BASE_DEPS };
+  const devDeps = { ...BASE_DEV_DEPS };
+  for (const feature of features) {
+    Object.assign(deps, FEATURE_DEPS[feature] ?? {});
+    Object.assign(devDeps, FEATURE_DEV_DEPS[feature] ?? {});
+  }
+  return {
+    name: projectName,
+    version: "0.1.0",
+    private: true,
+    scripts: {
+      dev: "next dev",
+      build: "next build",
+      start: "next start",
+      lint: "next lint",
+      prepare: "husky",
+      format: "prettier --write .",
+      "check-format": "prettier --check .",
+      "check-types": "tsc --noEmit"
+    },
+    dependencies: deps,
+    devDependencies: devDeps,
+    "lint-staged": {
+      "*.{js,jsx,ts,tsx,mjs}": ["eslint --fix", "prettier --write"],
+      "*.{json,md,mdx,css}": ["prettier --write"]
+    }
+  };
+}
+async function writePackageJson(projectPath, projectName, features) {
+  const pkg = buildPackageJson(projectName, features);
+  await import_fs_extra3.default.writeJSON(import_path3.default.join(projectPath, "package.json"), pkg, {
+    spaces: 2
+  });
+}
+async function installDependencies(projectPath, packageManager) {
+  if (packageManager === "npm" || packageManager === "pnpm") {
+    await runCommand(packageManager, ["install"], projectPath);
+  } else {
+    await runCommand(packageManager, ["install"], projectPath);
+  }
+}
+
+// src/generators/layout.ts
+var import_fs_extra4 = __toESM(require("fs-extra"));
+var import_path4 = __toESM(require("path"));
+async function generateLayout(projectPath, features) {
+  const hasAuth = features.includes("auth");
+  const hasDataFetching = features.includes("dataFetching");
+  const hasConvex = features.includes("convex");
+  const imports = [`import type { Metadata } from "next"`, `import "./globals.css"`];
+  const wrappers = [];
+  if (hasAuth) {
+    imports.push(`import { ClerkProvider } from "@clerk/nextjs"`);
+    wrappers.push("ClerkProvider");
+  }
+  if (hasConvex) {
+    imports.push(`import { ConvexClientProvider } from "@/providers/convex-provider"`);
+    wrappers.push("ConvexClientProvider");
+  }
+  if (hasDataFetching) {
+    imports.push(`import { QueryProvider } from "@/providers/query-provider"`);
+    wrappers.push("QueryProvider");
+  }
+  const metadataBlock = `
+export const metadata: Metadata = {
+  title: "My App",
+  description: "Generated by create-next-template",
+};`;
+  function wrapChildren(wrappers2, content) {
+    if (wrappers2.length === 0) return content;
+    const [first, ...rest] = wrappers2;
+    const inner = wrapChildren(rest, content);
+    return `<${first}>
+        ${inner}
+      </${first}>`;
+  }
+  const body = wrapChildren(wrappers, "{children}");
+  const layoutContent = `${imports.join("\n")}
+${metadataBlock}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body>
+        ${body}
+      </body>
+    </html>
+  );
+}
+`;
+  const appDir = import_path4.default.join(projectPath, "app");
+  await import_fs_extra4.default.ensureDir(appDir);
+  await import_fs_extra4.default.writeFile(import_path4.default.join(appDir, "layout.tsx"), layoutContent);
+}
+
+// src/installer.ts
+var FEATURE_TEMPLATE_MAP = {
+  animations: "animations",
+  dataFetching: "data-fetching",
+  forms: "forms",
+  extraIcons: "extra-icons",
+  auth: "auth",
+  prisma: "prisma",
+  convex: "convex",
+  appwrite: "appwrite",
+  ui: "ui"
+};
+async function runInstaller({
+  projectName,
+  projectPath,
+  packageManager,
+  features
+}) {
+  const s = p.spinner();
+  if (await import_fs_extra5.default.pathExists(projectPath)) {
+    const overwrite = await p.confirm({
+      message: `Directory "${projectName}" already exists. Overwrite?`
+    });
+    if (!overwrite || p.isCancel(overwrite)) {
+      p.cancel("Operation cancelled");
+      process.exit(0);
+    }
+    await import_fs_extra5.default.remove(projectPath);
+  }
+  await import_fs_extra5.default.ensureDir(projectPath);
+  s.start("Scaffolding project structure");
+  await copyTemplate("base", projectPath);
+  for (const feature of features) {
+    const templateName = FEATURE_TEMPLATE_MAP[feature];
+    if (templateName) {
+      await copyTemplate(templateName, projectPath);
+    }
+  }
+  await generateLayout(projectPath, features);
+  await mergeEnvExamples(projectPath, features);
+  const huskyDir = import_path5.default.join(projectPath, ".husky");
+  for (const hook of ["pre-commit", "pre-push"]) {
+    const hookPath = import_path5.default.join(huskyDir, hook);
+    if (await import_fs_extra5.default.pathExists(hookPath)) {
+      await import_fs_extra5.default.chmod(hookPath, 493);
+    }
+  }
+  s.stop("Project structure scaffolded");
+  s.start("Writing package.json");
+  await writePackageJson(projectPath, projectName, features);
+  s.stop("package.json written");
+  s.start("Installing dependencies");
+  await installDependencies(projectPath, packageManager);
+  s.stop("Dependencies installed");
+  if (features.includes("prisma")) {
+    s.start("Running prisma generate");
+    await runCommand("npx", ["prisma", "generate"], projectPath);
+    s.stop("Prisma client generated");
+  }
+  s.start("Initializing git repository");
+  await runCommand("git", ["init"], projectPath);
+  await runCommand("git", ["add", "-A"], projectPath);
+  await runCommand(
+    "git",
+    ["commit", "-m", "chore: initial commit from create-next-template"],
+    projectPath
+  );
+  s.stop("Git repository initialized");
+  const hasShadcn = features.includes("ui");
+  const hasPrisma = features.includes("prisma");
+  const hasConvex = features.includes("convex");
+  const hasAppwrite = features.includes("appwrite");
+  console.log();
+  p.outro(
+    import_chalk.default.green("\u2714 Project created successfully!\n\n") + `  ${import_chalk.default.cyan("cd")} ${projectName}
+` + (hasShadcn ? `  ${import_chalk.default.cyan("npx shadcn@latest init")}   ${import_chalk.default.gray("# set up shadcn/ui")}
+` : "") + (hasPrisma ? `  ${import_chalk.default.gray("# update DATABASE_URL in .env, then:")}
+  ${import_chalk.default.cyan("npx prisma migrate dev")}
+` : "") + (hasConvex ? `  ${import_chalk.default.cyan("npx convex dev")}             ${import_chalk.default.gray("# start Convex backend")}
+` : "") + (hasAppwrite ? `  ${import_chalk.default.gray("# fill in NEXT_PUBLIC_APPWRITE_* vars in .env")}
+` : "") + `  ${import_chalk.default.cyan(`${packageManager} run dev`)}`
+  );
+}
+
+// src/index.ts
+async function main() {
+  console.log();
+  p2.intro(import_chalk2.default.bgCyan(import_chalk2.default.black(" create-next-template ")));
+  const projectName = await p2.text({
+    message: "What is your project name?",
+    placeholder: "my-next-app",
+    validate(value) {
+      if (!value) return "Project name is required";
+      if (!/^[a-z0-9-_]+$/.test(value))
+        return "Only lowercase letters, numbers, hyphens, and underscores";
+    }
+  });
+  if (p2.isCancel(projectName)) {
+    p2.cancel("Operation cancelled");
+    process.exit(0);
+  }
+  const packageManager = await p2.select({
+    message: "Which package manager?",
+    options: [
+      { value: "npm", label: "npm" },
+      { value: "pnpm", label: "pnpm" },
+      { value: "yarn", label: "yarn" },
+      { value: "bun", label: "bun" }
+    ]
+  });
+  if (p2.isCancel(packageManager)) {
+    p2.cancel("Operation cancelled");
+    process.exit(0);
+  }
+  const features = await p2.multiselect({
+    message: "Which features do you want? (space to select)",
+    options: [
+      { value: "animations", label: "Animations", hint: "framer-motion" },
+      {
+        value: "dataFetching",
+        label: "Data Fetching",
+        hint: "TanStack Query + Axios"
+      },
+      {
+        value: "forms",
+        label: "Forms",
+        hint: "React Hook Form + Zod resolver"
+      },
+      { value: "extraIcons", label: "Extra Icons", hint: "iconsax-reactjs" },
+      { value: "auth", label: "Auth", hint: "Clerk" },
+      { value: "prisma", label: "Database \u2014 Prisma", hint: "Prisma + PostgreSQL" },
+      { value: "convex", label: "Database \u2014 Convex", hint: "Convex real-time backend" },
+      { value: "appwrite", label: "Database \u2014 Appwrite", hint: "Appwrite BaaS" },
+      { value: "ui", label: "UI Components", hint: "shadcn/ui" }
+    ],
+    required: false
+  });
+  if (p2.isCancel(features)) {
+    p2.cancel("Operation cancelled");
+    process.exit(0);
+  }
+  const selectedFeatures = features ?? [];
+  const dbChoices = ["prisma", "convex", "appwrite"].filter(
+    (db) => selectedFeatures.includes(db)
+  );
+  if (dbChoices.length > 1) {
+    p2.log.warn(
+      `You selected multiple databases (${dbChoices.join(", ")}). This is supported but may require manual configuration.`
+    );
+  }
+  const projectPath = import_path6.default.resolve(process.cwd(), projectName);
+  await runInstaller({
+    projectName,
+    projectPath,
+    packageManager,
+    features: selectedFeatures
+  });
+}
+main().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@codabytez/create-next-template",
+  "version": "0.1.0",
+  "description": "CLI to scaffold Next.js projects with your preferred stack",
+  "bin": {
+    "create-next-template": "./dist/index.js"
+  },
+  "files": [
+    "dist",
+    "templates"
+  ],
+  "dependencies": {
+    "@clack/prompts": "^0.7.0",
+    "chalk": "^5.3.0",
+    "execa": "^8.0.1",
+    "fs-extra": "^11.2.0",
+    "picocolors": "^1.1.0"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^11.0.4",
+    "@types/node": "^20.0.0",
+    "tsup": "^8.0.0",
+    "tsx": "^4.7.0",
+    "typescript": "^5.4.0"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs --clean",
+    "dev": "tsx src/index.ts",
+    "lint": "tsc --noEmit"
+  }
+}

package/templates/animations/components/motion/fade-in.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+interface FadeInProps {
+  children: React.ReactNode;
+  delay?: number;
+  duration?: number;
+  className?: string;
+}
+
+export function FadeIn({
+  children,
+  delay = 0,
+  duration = 0.4,
+  className,
+}: FadeInProps) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 10 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration, delay, ease: "easeOut" }}
+      className={className}
+    >
+      {children}
+    </motion.div>
+  );
+}

package/templates/appwrite/.env.example

@@ -0,0 +1,3 @@
+NEXT_PUBLIC_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
+NEXT_PUBLIC_APPWRITE_PROJECT_ID=your-project-id
+NEXT_PUBLIC_APPWRITE_DATABASE_ID=your-database-id

package/templates/appwrite/lib/appwrite.ts

@@ -0,0 +1,11 @@
+import { Client, Account, Databases, Storage } from "appwrite";
+
+const client = new Client()
+  .setEndpoint(process.env.NEXT_PUBLIC_APPWRITE_ENDPOINT as string)
+  .setProject(process.env.NEXT_PUBLIC_APPWRITE_PROJECT_ID as string);
+
+export const account = new Account(client);
+export const databases = new Databases(client);
+export const storage = new Storage(client);
+
+export { client };

package/templates/auth/.env.example

@@ -0,0 +1,6 @@
+NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_...
+CLERK_SECRET_KEY=sk_test_...
+NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
+NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
+NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
+NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/

package/templates/auth/app/(auth)/sign-in/[[...sign-in]]/page.tsx

@@ -0,0 +1,9 @@
+import { SignIn } from "@clerk/nextjs";
+
+export default function SignInPage() {
+  return (
+    <div className="flex min-h-screen items-center justify-center">
+      <SignIn />
+    </div>
+  );
+}

package/templates/auth/app/(auth)/sign-up/[[...sign-up]]/page.tsx

@@ -0,0 +1,9 @@
+import { SignUp } from "@clerk/nextjs";
+
+export default function SignUpPage() {
+  return (
+    <div className="flex min-h-screen items-center justify-center">
+      <SignUp />
+    </div>
+  );
+}

package/templates/auth/middleware.ts

@@ -0,0 +1,17 @@
+import { clerkMiddleware, createRouteMatcher } from "@clerk/nextjs/server";
+
+const isPublicRoute = createRouteMatcher([
+  "/",
+  "/sign-in(.*)",
+  "/sign-up(.*)",
+]);
+
+export default clerkMiddleware(async (auth, request) => {
+  if (!isPublicRoute(request)) {
+    await auth.protect();
+  }
+});
+
+export const config = {
+  matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
+};

package/templates/base/.env.example

@@ -0,0 +1 @@
+NODE_ENV=development

package/templates/base/.husky/pre-commit

@@ -0,0 +1,19 @@
+echo '🏗️👷 Running checks on your code before committing 🔍🧐'
+
+echo '🎨✨ Checking formatting...'
+pnpm run check-format ||
+(
+    echo '🤢🤮 Your formatting is off. Running Prettier...'
+    pnpm run format
+    git add .
+    echo '✨ Formatting fixed and changes staged.'
+)
+
+echo '🔍 Running lint-staged...'
+pnpm exec lint-staged ||
+(
+    echo '😤 ESLint or type errors found. Fix the issues above and try again.'
+    false
+)
+
+echo '✅ All checks passed! Committing...'

package/templates/base/.husky/pre-push

@@ -0,0 +1,11 @@
+echo '🚀🔍 Running final checks before pushing...'
+
+echo '📦 Building the project...'
+pnpm run build ||
+(
+    echo '❌🔥 Build failed! Fix the errors above before pushing.'
+    false
+)
+
+echo '✅ Build passed! Pushing to remote...'
+echo '🎉 Great work!'

package/templates/base/.prettierignore

@@ -0,0 +1,8 @@
+node_modules
+.next
+out
+build
+dist
+*.lock
+package-lock.json
+pnpm-lock.yaml

package/templates/base/.prettierrc.json

@@ -0,0 +1,9 @@
+{
+  "semi": true,
+  "trailingComma": "es5",
+  "singleQuote": false,
+  "tabWidth": 2,
+  "useTabs": false,
+  "printWidth": 80,
+  "arrowParens": "always"
+}