create-stackkit-app 0.4.1 → 0.4.3

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

@@ -0,0 +1,23 @@
+import dotenv from "dotenv";
+import path from "path";
+
+dotenv.config({ path: path.join(process.cwd(), ".env") });
+
+const env = {
+  app: {
+    port: Number(process.env.PORT) || 3000,
+    url: process.env.APP_URL || "http://localhost:3000",
+    site_url: process.env.SITE_URL || "http://localhost:5173",
+    trust_proxy: (process.env.TRUST_PROXY || "false") === "true",
+    rateLimit: {
+      max: Number(process.env.RATE_LIMIT_MAX) || 100,
+      windowMs: Number(process.env.RATE_LIMIT_WINDOW_MS) || 15 * 60 * 1000,
+    },
+  },
+  node: {
+    env: process.env.NODE_ENV || "development",
+    isProduction: (process.env.NODE_ENV || "development") === "production",
+  },
+};
+
+export { env };

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, next: NextFunction) => {
+  const statusCode = err.status || 500;
+  const errorMessage = err?.message || "Internal server error!";
+
+  const payload: any = {
+    success: false,
+    message: errorMessage,
+  };
+
+  if (!env.node.isProduction) {
+    payload.errors = err?.stack || err;
+  }
+
+  res.status(statusCode).json(payload);
+};

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

@@ -1,5 +1,5 @@
-import app from './app';
-import { env } from './config/env';
+import app from "./app";
+import { env } from "./config/env";
 
 const port = env.app.port;
 

package/templates/express/template.json

@@ -0,0 +1,44 @@
+{
+  "name": "express-base",
+  "displayName": "Express.js",
+  "framework": "express",
+  "description": "Express.js REST API with TypeScript",
+  "files": ["src/", ".env.example", ".gitignore", "package.json", "tsconfig.json"],
+  "scripts": {
+    "dev": "tsx watch src/server.ts",
+    "clean": "rimraf dist",
+    "prebuild": "npm run clean",
+    "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",
+    "clean": "rimraf dist",
+    "prebuild": "npm run clean",
+    "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,31 @@
+{
+  "compilerOptions": {
+    "rootDir": "./src",
+    "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;
+  },
+};

package/templates/react-vite/src/components/ErrorBoundary.tsx

@@ -0,0 +1,51 @@
+import type { ErrorInfo, ReactNode } from "react";
+import { Component } from "react";
+
+interface Props {
+  children?: ReactNode;
+  fallback?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error?: Error;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error("ErrorBoundary caught an error:", error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+      return (
+        <div className="p-8 text-center">
+          <h2 className="text-2xl font-semibold">Something went wrong</h2>
+          <p className="mt-2 text-gray-600">
+            {this.state.error?.message || "An unexpected error occurred"}
+          </p>
+          <button
+            onClick={() => this.setState({ hasError: false, error: undefined })}
+            className="mt-4 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-39.5"
+          >
+            Try again
+          </button>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

package/templates/react-vite/src/components/Layout.tsx

@@ -0,0 +1,13 @@
+import { Outlet } from "react-router";
+
+export function Layout() {
+  return (
+    <div className="min-h-screen flex flex-col bg-black">
+      <main className="flex-1 max-w-7xl w-full mx-auto p-4">
+        <Outlet />
+      </main>
+    </div>
+  );
+}
+
+export default Layout;

package/templates/react-vite/src/components/Loading.tsx

@@ -0,0 +1,8 @@
+export default function Loading({ message = "Loading..." }: { message?: string }) {
+  return (
+    <div className="loading-container">
+      <div className="loading-spinner"></div>
+      <p>{message}</p>
+    </div>
+  );
+}

package/templates/react-vite/src/components/SEO.tsx

@@ -0,0 +1,49 @@
+import { Helmet, HelmetProvider } from "react-helmet-async";
+
+interface SEOProps {
+  title?: string;
+  description?: string;
+  keywords?: string;
+  image?: string;
+  url?: string;
+}
+
+const defaultSEO = {
+  title: "React App",
+  description: "A modern React application built with Vite",
+  keywords: "react, vite, typescript, spa",
+  image: "/og-image.png",
+};
+
+export function SEOProvider({ children }: { children: React.ReactNode }) {
+  return <HelmetProvider>{children}</HelmetProvider>;
+}
+
+export function SEO({ title, description, keywords, image, url }: SEOProps) {
+  const siteTitle = title ? `${title} | ${defaultSEO.title}` : defaultSEO.title;
+  const siteDescription = description || defaultSEO.description;
+  const siteKeywords = keywords || defaultSEO.keywords;
+  const siteImage = image || defaultSEO.image;
+  const siteUrl = url || window.location.href;
+
+  return (
+    <Helmet>
+      <title>{siteTitle}</title>
+      <meta name="description" content={siteDescription} />
+      <meta name="keywords" content={siteKeywords} />
+
+      <meta property="og:type" content="website" />
+      <meta property="og:title" content={siteTitle} />
+      <meta property="og:description" content={siteDescription} />
+      <meta property="og:image" content={siteImage} />
+      <meta property="og:url" content={siteUrl} />
+
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta name="twitter:title" content={siteTitle} />
+      <meta name="twitter:description" content={siteDescription} />
+      <meta name="twitter:image" content={siteImage} />
+
+      <link rel="canonical" href={siteUrl} />
+    </Helmet>
+  );
+}

package/templates/react-vite/src/config/constants.ts

@@ -0,0 +1,5 @@
+export const APP_NAME = import.meta.env.VITE_APP_NAME || "React App";
+export const APP_VERSION = import.meta.env.VITE_APP_VERSION || "1.0.0";
+export const API_URL = import.meta.env.VITE_API_URL || "http://localhost:3000/api";
+export const IS_DEV = import.meta.env.DEV;
+export const IS_PROD = import.meta.env.PROD;

package/templates/react-vite/src/hooks/index.ts

@@ -0,0 +1,64 @@
+import { useEffect, useState } from "react";
+
+export function useDebounce<T>(value: T, delay: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}
+
+export function useLocalStorage<T>(
+  key: string,
+  initialValue: T,
+): [T, (value: T | ((val: T) => T)) => void] {
+  const [storedValue, setStoredValue] = useState<T>(() => {
+    try {
+      const item = window.localStorage.getItem(key);
+      return item ? JSON.parse(item) : initialValue;
+    } catch (error) {
+      console.error(error);
+      return initialValue;
+    }
+  });
+
+  const setValue = (value: T | ((val: T) => T)) => {
+    try {
+      const valueToStore = value instanceof Function ? value(storedValue) : value;
+      setStoredValue(valueToStore);
+      window.localStorage.setItem(key, JSON.stringify(valueToStore));
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  return [storedValue, setValue];
+}
+
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(() => {
+    if (typeof window !== "undefined") {
+      return window.matchMedia(query).matches;
+    }
+    return false;
+  });
+
+  useEffect(() => {
+    const media = window.matchMedia(query);
+
+    const listener = () => setMatches(media.matches);
+    media.addEventListener("change", listener);
+
+    return () => media.removeEventListener("change", listener);
+  }, [query]);
+
+  return matches;
+}

package/templates/react-vite/src/index.css

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