stackkit-cli 0.4.2 → 0.4.4

package/templates/express/eslint.config.cjs

@@ -0,0 +1,42 @@
+module.exports = [
+  // Global ignores
+  {
+    ignores: ['**/node_modules/**', '**/dist/**', '.env'],
+  },
+
+  // TypeScript files
+  {
+    files: ['**/*.ts', '**/*.tsx'],
+    languageOptions: {
+      parser: require('@typescript-eslint/parser'),
+      parserOptions: {
+        project: './tsconfig.json',
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+      },
+    },
+    plugins: {
+      '@typescript-eslint': require('@typescript-eslint/eslint-plugin'),
+    },
+    rules: {
+      'prefer-const': 'error',
+      'no-console': 'off',
+      eqeqeq: ['error', 'always'],
+      curly: ['error', 'multi-line'],
+      'no-implicit-coercion': ['warn', { allow: ['!!'] }],
+      '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^(?:_|next)$' }],
+      '@typescript-eslint/explicit-module-boundary-types': 'off',
+      '@typescript-eslint/no-explicit-any': 'off',
+    },
+  },
+
+  // JavaScript files
+  {
+    files: ['**/*.js'],
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+    },
+    rules: {},
+  },
+];

package/templates/express/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "my-express-app",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "tsx watch src/server.ts",
+    "build": "tsc",
+    "lint": "eslint src --ext .ts",
+    "lint:fix": "eslint src --ext .ts --fix",
+    "start": "node dist/server.js",
+    "start:prod": "cross-env NODE_ENV=production node dist/server.js"
+  },
+  "dependencies": {
+    "cors": "^2.8.5",
+    "dotenv": "^17.2.3",
+    "express": "^5.2.1",
+    "helmet": "^8.1.0",
+    "morgan": "^1.10.1"
+  },
+  "devDependencies": {
+    "@types/cors": "^2.8.19",
+    "@types/express": "^5.0.6",
+    "@types/morgan": "^1.9.10",
+    "@types/node": "^25.0.6",
+    "@typescript-eslint/eslint-plugin": "^8.52.0",
+    "@typescript-eslint/parser": "^8.52.0",
+    "cross-env": "^10.1.0",
+    "eslint": "^9.39.2",
+    "tsx": "^4.21.0",
+    "typescript": "^5.9.3"
+  }
+}

package/templates/express/src/app.ts

@@ -0,0 +1,51 @@
+import cors from "cors";
+import express, { Application, NextFunction, Request, Response } from "express";
+import helmet from "helmet";
+import morgan from "morgan";
+import { env } from "./config/env";
+import { authRoutes } from "./features/auth/auth.route";
+import { errorHandler } from "./middlewares/error.middleware";
+
+// app initialization
+const app: Application = express();
+app.use(express.json());
+
+// security headers
+app.use(helmet());
+
+// logging
+if (env.isProduction) {
+  app.use(morgan("combined"));
+} else {
+  app.use(morgan("dev"));
+}
+
+// cors configuration
+app.use(cors());
+
+// Home page route
+app.get("/", (_req: Request, res: Response) => {
+  res.status(200).json({
+    title: "Welcome to your Express app",
+    description:
+      "Built with StackKit - A production-ready Express template with TypeScript, security, and best practices.",
+    version: "1.0.0",
+    docs: "https://github.com/tariqul420/stackkit",
+  });
+});
+
+// routes
+app.use("/api/auth", authRoutes);
+
+// unhandled routes
+app.use((req: Request, _res: Response, next: NextFunction) => {
+  const error: any = new Error(`Can't find ${req.originalUrl} on this server!`);
+  error.status = 404;
+
+  next(error);
+});
+
+// Global error handler
+app.use(errorHandler);
+
+export default app;

package/templates/express/src/config/env.ts

@@ -0,0 +1,12 @@
+import dotenv from "dotenv";
+import path from "path";
+
+dotenv.config({ path: path.join(process.cwd(), ".env") });
+
+const env = {
+  port: Number(process.env.PORT) || 3000,
+  node_env: process.env.NODE_ENV || "development",
+  isProduction: (process.env.NODE_ENV || "development") === "production",
+};
+
+export { env };

package/templates/express/src/features/auth/auth.controller.ts

@@ -0,0 +1,48 @@
+import { NextFunction, Request, Response } from "express";
+import { authServices } from "./auth.service";
+
+const signup = async (req: Request, res: Response, next: NextFunction) => {
+  try {
+    const result = await authServices.signup(req.body);
+
+    res.status(201).json({
+      success: true,
+      message: "User registered successfully",
+      data: result,
+    });
+  } catch (error) {
+    next(error);
+  }
+};
+
+const signin = async (req: Request, res: Response, next: NextFunction) => {
+  try {
+    const { email, password } = req.body;
+
+    const result = await authServices.signin(email, password);
+
+    if (!result) {
+      res.status(401).json({
+        success: false,
+        message: "Invalid email or password",
+      });
+      return;
+    }
+
+    res.status(200).json({
+      success: true,
+      message: "Login successful",
+      data: {
+        token: result.token,
+        user: result.user,
+      },
+    });
+  } catch (error) {
+    next(error);
+  }
+};
+
+export const authController = {
+  signup,
+  signin,
+};

package/templates/express/src/features/auth/auth.route.ts

@@ -0,0 +1,10 @@
+import { Router } from "express";
+import { authController } from "./auth.controller";
+
+const router = Router();
+
+// routes
+router.post("/signup", authController.signup);
+router.post("/signin", authController.signin);
+
+export const authRoutes = router;

package/templates/express/src/features/auth/auth.service.ts

@@ -0,0 +1,21 @@
+// @ts-nocheck
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
+const signup = async (payload: Record<string, unknown>) => {
+  // your logic here
+};
+
+const signin = async (
+  email: string,
+  password: string,
+): Promise<{ token: string; user: any } | null> => {
+  // your logic here
+  return null;
+};
+
+export const authServices = {
+  signup,
+  signin,
+};
+
+export type { User };

package/templates/express/src/middlewares/error.middleware.ts

@@ -0,0 +1,18 @@
+import { NextFunction, Request, Response } from "express";
+import { env } from "../config/env";
+
+export const errorHandler = (err: any, _req: Request, res: Response, _: NextFunction) => {
+  const statusCode = err.status || 500;
+  const errorMessage = err?.message || "Internal server error!";
+
+  const payload: any = {
+    success: false,
+    message: errorMessage,
+  };
+
+  if (!env.isProduction) {
+    payload.errors = err?.stack || err;
+  }
+
+  res.status(statusCode).json(payload);
+};

package/templates/{bases/express-base → express}/src/server.ts

@@ -1,7 +1,7 @@
-import app from './app';
-import { env } from './config/env';
+import app from "./app";
+import { env } from "./config/env";
 
-const port = env.app.port;
+const port = env.port;
 
 app.listen(port, () => {
   console.log(`Server is running on http://localhost:${port}`);

package/templates/express/template.json

@@ -0,0 +1,40 @@
+{
+  "name": "express-base",
+  "displayName": "Express.js",
+  "framework": "express",
+  "description": "Express.js REST API with TypeScript",
+  "files": ["src/", ".gitignore", "package.json", "tsconfig.json", ".env.example"],
+  "scripts": {
+    "dev": "tsx watch src/server.ts",
+    "build": "tsc",
+    "lint": "eslint src --ext .ts",
+    "lint:fix": "eslint src --ext .ts --fix",
+    "start": "node dist/server.js",
+    "start:prod": "cross-env NODE_ENV=production node dist/server.js"
+  },
+  "jsScripts": {
+    "dev": "tsx --watch src/server.js",
+    "build": "echo 'No build step for JavaScript'",
+    "lint": "eslint src --ext .js",
+    "lint:fix": "eslint src --ext .js --fix",
+    "start": "node src/server.js",
+    "start:prod": "cross-env NODE_ENV=production node src/server.js"
+  },
+  "fileReplacements": [
+    {
+      "file": "src/server.js",
+      "from": "import app from './app'",
+      "to": "import app from './app.js'"
+    },
+    {
+      "file": "src/app.js",
+      "from": "import { env } from './config/env'",
+      "to": "import { env } from './config/env.js'"
+    },
+    {
+      "file": "src/app.js",
+      "from": "import { errorHandler } from './middlewares/error.middleware'",
+      "to": "import { errorHandler } from './middlewares/error.middleware.js'"
+    }
+  ]
+}

package/templates/express/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "strict": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "sourceMap": true,
+    "declaration": false,
+    "declarationMap": false,
+    "removeComments": false,
+    "noImplicitAny": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "exactOptionalPropertyTypes": true,
+    "noEmitOnError": true,
+    "incremental": false,
+    "ignoreDeprecations": "5.0"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}

package/templates/{bases/nextjs-base → nextjs}/app/layout.tsx

@@ -24,11 +24,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        {children}
-      </body>
+      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>{children}</body>
     </html>
   );
 }

package/templates/nextjs/app/page.tsx

@@ -0,0 +1,57 @@
+import Image from "next/image";
+
+export default function Home() {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
+      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
+        <div className="flex items-center gap-4 mb-8">
+          <div className="text-2xl font-bold text-black dark:text-white">Stackkit</div>
+          <span className="text-xl text-zinc-400">+</span>
+          <Image
+            className="dark:invert"
+            src="/next.svg"
+            alt="Next.js logo"
+            width={100}
+            height={20}
+            priority
+          />
+        </div>
+        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
+          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
+            To get started, edit the page.tsx file.
+          </h1>
+          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
+            This template includes Next.js, Tailwind CSS, and Stackkit best practices. Check out the{" "}
+            <a
+              href="https://github.com/tariqul420/stackkit"
+              className="font-medium text-zinc-950 dark:text-zinc-50 hover:underline"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Stackkit repository
+            </a>{" "}
+            for more info.
+          </p>
+        </div>
+        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
+          <a
+            className="flex h-12 w-full items-center justify-center rounded-full bg-white text-black px-5 transition-colors hover:bg-zinc-200 md:w-40"
+            href="https://nextjs.org/docs"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Documentation
+          </a>
+          <a
+            className="flex h-12 w-full items-center justify-center rounded-full bg-black text-white px-5 transition-colors hover:bg-zinc-900 md:w-40"
+            href="https://github.com/tariqul420/stackkit"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Stackkit GitHub
+          </a>
+        </div>
+      </main>
+    </div>
+  );
+}

package/templates/{bases/nextjs-base → nextjs}/package.json

@@ -2,6 +2,7 @@
   "name": "my-app",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "next dev",
     "build": "next build",
@@ -23,4 +24,4 @@
     "tailwindcss": "^4",
     "typescript": "^5"
   }
-}
+}

package/templates/{bases/nextjs-base → nextjs}/template.json

@@ -14,5 +14,17 @@
     "postcss.config.mjs",
     "README.md",
     "tsconfig.json"
-  ]
+  ],
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "jsScripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint"
+  }
 }

package/templates/react-vite/.env.example

@@ -0,0 +1,2 @@
+# API Configuration
+VITE_API_URL=http://localhost:3000

package/templates/react-vite/README.md

@@ -0,0 +1,85 @@
+# React + Vite Template
+
+A production-ready React starter template with TypeScript, Vite, and essential libraries pre-configured.
+
+## Features
+
+- **React 19** with TypeScript
+- **Vite 7** for fast development
+- **React Router v7** for client-side routing
+- **TanStack Query v5** for data fetching and caching
+- **Axios** with interceptors
+- **Tailwind CSS** for styling
+- **React Hot Toast** for notifications
+- **SEO Ready** with React Helmet Async
+- **Error Boundaries** for graceful error handling
+- **ESLint** for code quality
+- **Custom Hooks** included
+
+## Quick Start
+
+```bash
+# Install dependencies
+pnpm install
+
+# Start development server
+pnpm dev
+
+# Build for production
+pnpm build
+
+# Preview production build
+pnpm preview
+```
+
+## Project Structure
+
+```
+src/
+├── api/          # API client & interceptors
+├── components/   # Reusable UI components
+├── config/       # App configuration
+├── hooks/        # Custom React hooks
+├── lib/          # Library configurations
+├── pages/        # Route pages
+├── types/        # TypeScript types
+├── utils/        # Helper functions
+├── App.tsx       # Main app component
+├── main.tsx      # Entry point
+└── index.css     # Global styles
+```
+
+## Environment Variables
+
+Create a `.env` file:
+
+```env
+VITE_API_URL=http://localhost:3000/api
+VITE_APP_NAME=My App
+```
+
+## Production Build
+
+- Code splitting with vendor chunks
+- Tree shaking to remove unused code
+- Minified and compressed output
+- TypeScript strict mode enabled
+- ESLint configured for code quality
+
+## Deployment
+
+```bash
+pnpm build
+```
+
+Deploy the `dist` folder to Vercel, Netlify, or any static hosting service.
+
+## Tech Stack
+
+- React 19 - UI library
+- Vite 7 - Build tool
+- TypeScript - Type safety
+- React Router v7 - Routing
+- TanStack Query v5 - Data fetching
+- Axios - HTTP client
+- Tailwind CSS - Styling

package/templates/react-vite/eslint.config.js

@@ -0,0 +1,23 @@
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
+import { defineConfig, globalIgnores } from "eslint/config";
+
+export default defineConfig([
+  globalIgnores(["dist"]),
+  {
+    files: ["**/*.{ts,tsx}"],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+]);

package/templates/{bases/react-vite-base → react-vite}/index.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link href="/src/index.css" rel="stylesheet">
     <title>react-vite-base</title>
   </head>
   <body>

package/templates/{bases/react-vite-base → react-vite}/package.json

@@ -7,11 +7,22 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tailwindcss/vite": "^4.1.18",
+    "@tanstack/react-query": "^5.62.0",
+    "@tanstack/react-query-devtools": "^5.62.0",
+    "axios": "^1.7.7",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "react": "^19.2.0",
-    "react-dom": "^19.2.0"
+    "react-dom": "^19.2.0",
+    "react-helmet-async": "^2.0.5",
+    "react-hot-toast": "^2.4.1",
+    "react-router": "^7.12.0",
+    "tailwind-merge": "^3.4.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
@@ -19,12 +30,15 @@
     "@types/react": "^19.2.5",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.1",
+    "autoprefixer": "^10.4.23",
     "eslint": "^9.39.1",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
     "globals": "^16.5.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.18",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.46.4",
     "vite": "^7.2.4"
   }
-}
+}

package/templates/react-vite/src/api/client.ts

@@ -0,0 +1,47 @@
+import type { AxiosResponse } from "axios";
+import axios, { AxiosError } from "axios";
+import toast from "react-hot-toast";
+
+const api = axios.create({
+  baseURL: import.meta.env.VITE_API_URL || "http://localhost:3000/api",
+  timeout: 10000,
+  headers: {
+    "Content-Type": "application/json",
+  },
+});
+
+api.interceptors.request.use(
+  (config) => {
+    const token = localStorage.getItem("auth_token");
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+    return config;
+  },
+  (error: AxiosError) => {
+    return Promise.reject(error);
+  },
+);
+
+api.interceptors.response.use(
+  (response: AxiosResponse) => response,
+  (error: AxiosError) => {
+    if (error.response?.status === 401) {
+      localStorage.removeItem("auth_token");
+      toast.error("Session expired. Please login again.");
+    } else if (error.response?.status === 403) {
+      toast.error("You do not have permission to perform this action.");
+    } else if (error.response?.status === 404) {
+      toast.error("Resource not found.");
+    } else if (error.response?.status === 500) {
+      toast.error("Server error. Please try again later.");
+    } else if (error.code === "ECONNABORTED") {
+      toast.error("Request timeout. Please try again.");
+    } else if (!error.response) {
+      toast.error("Network error. Please check your connection.");
+    }
+    return Promise.reject(error);
+  },
+);
+
+export default api;

package/templates/react-vite/src/api/services/user.service.ts

@@ -0,0 +1,18 @@
+import api from "../client";
+
+export const userService = {
+  getUser: async (id: string): Promise<User> => {
+    const response = await api.get<ApiResponse<User>>(`/users/${id}`);
+    return response.data.data;
+  },
+
+  getCurrentUser: async (): Promise<User> => {
+    const response = await api.get<ApiResponse<User>>("/users/me");
+    return response.data.data;
+  },
+
+  updateUser: async (id: string, data: Partial<User>): Promise<User> => {
+    const response = await api.patch<ApiResponse<User>>(`/users/${id}`, data);
+    return response.data.data;
+  },
+};