stackkit 0.1.9 → 0.2.1

package/templates/nextjs/README.md

@@ -2,9 +2,21 @@
 
 Production-ready Next.js starter with TypeScript and App Router.
 
+## Requirements
+
+- Node.js 18+ (LTS recommended)
+- pnpm or npm
+
 ## Quick Start
 
+Install dependencies and start a development server:
+
 ```bash
+# using pnpm (recommended)
+pnpm install
+pnpm dev
+
+# or using npm
 npm install
 npm run dev
 ```
@@ -40,7 +52,7 @@ public/            # Static assets
 
 ## Environment Variables
 
-Create `.env.local` file for environment variables.
+Create a `.env.local` (Next.js) file for local environment variables. Keep secrets out of the repository.
 
 ## Deployment
 
@@ -50,3 +62,14 @@ npm run start
 ```
 
 Deploy to Vercel, Netlify, or any Node.js hosting service.
+
+---
+
+## Generated with StackKit
+
+This project was scaffolded using **StackKit** — a CLI toolkit for building production-ready applications.
+
+- Generated via: `npx stackkit@latest create`
+
+Learn more about StackKit:
+https://github.com/tariqul420/stackkit

package/templates/nextjs/app/page.tsx

@@ -5,7 +5,7 @@ export default function Home() {
     <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>
+          <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"
@@ -21,14 +21,14 @@ export default function Home() {
             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{" "}
+            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
+              StackKit repository
             </a>{" "}
             for more info.
           </p>

package/templates/nextjs/template.json

@@ -9,7 +9,9 @@
   },
   "files": [
     "app/",
+    "lib/",
     "public/",
+    ".env.example",
     ".gitignore",
     "eslint.config.mjs",
     "next-env.d.ts",

package/templates/react/README.md

@@ -2,11 +2,23 @@
 
 Production-ready React starter with TypeScript, Vite, and essential libraries.
 
+## Requirements
+
+- Node.js 18+ (LTS recommended)
+- pnpm (recommended) or npm
+
 ## Quick Start
 
+Install dependencies and run the dev server:
+
 ```bash
+# using pnpm (recommended)
 pnpm install
 pnpm dev
+
+# or using npm
+npm install
+npm run dev
 ```
 
 ## Features
@@ -27,7 +39,9 @@ pnpm dev
 
 ## Environment Variables
 
-Copy `.env.example` to `.env` and configure:
+Copy `.env.example` to `.env` and configure local values. Do not commit secrets.
+
+Example:
 
 ```env
 VITE_API_URL=http://localhost:3000/api
@@ -49,8 +63,27 @@ src/
 
 ## Deployment
 
+Build for production and serve or deploy the static output:
+
 ```bash
+# pnpm
 pnpm build
+pnpm preview
+
+# npm
+npm run build
+npm run preview
 ```
 
-Deploy the `dist` folder to Vercel, Netlify, or any static hosting service.
+Deploy the resulting `dist`/build output to your hosting platform (Vercel, Netlify, etc.).
+
+---
+
+## Generated with StackKit
+
+This project was scaffolded using **StackKit** — a CLI toolkit for building production-ready applications.
+
+- Generated via: `npx stackkit@latest create`
+
+Learn more about StackKit:
+https://github.com/tariqul420/stackkit

package/templates/react/src/lib/queryClient.ts

@@ -3,8 +3,8 @@ import { QueryClient } from "@tanstack/react-query";
 export const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
-      staleTime: 1000 * 60 * 5, // 5 minutes
-      gcTime: 1000 * 60 * 10, // 10 minutes (formerly cacheTime)
+      staleTime: 1000 * 60 * 5,
+      gcTime: 1000 * 60 * 10,
       retry: 1,
       refetchOnWindowFocus: false,
     },

package/templates/react/src/pages/Home.tsx

@@ -7,7 +7,7 @@ export default function Home() {
       <div className="flex min-h-screen items-center justify-center bg-black">
         <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-black sm:items-start">
           <div className="flex items-center gap-4 mb-8">
-            <div className="text-2xl font-bold text-white">Stackkit</div>
+            <div className="text-2xl font-bold text-white">StackKit</div>
             <span className="text-xl text-zinc-400">+</span>
             <img src="https://react.dev/favicon.ico" alt="React logo" width={32} height={32} />
           </div>
@@ -28,7 +28,7 @@ export default function Home() {
 
           <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-39.5"
+              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://react.dev"
               target="_blank"
               rel="noopener noreferrer"
@@ -36,7 +36,7 @@ export default function Home() {
               Get Started
             </a>
             <a
-              className="flex h-12 w-full items-center justify-center rounded-full px-5 transition-colors hover:border-transparent bg-zinc-900 md:w-39.5 dark:text-white text-black"
+              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="/about"
             >
               Documentation

package/templates/react/src/utils/utils.ts

@@ -0,0 +1,3 @@
+export function cn(...classes: (string | boolean | undefined | null)[]): string {
+  return classes.filter(Boolean).join(" ");
+}

package/templates/react/template.json

@@ -12,6 +12,8 @@
     "public/",
     ".env.example",
     ".gitignore",
+    ".prettierignore",
+    ".prettierrc",
     "eslint.config.js",
     "index.html",
     "package.json",

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

@@ -1,5 +0,0 @@
-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/src/hooks/index.ts

@@ -1,64 +0,0 @@
-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/src/utils/helpers.ts

@@ -1,51 +0,0 @@
-export function cn(...classes: (string | boolean | undefined | null)[]): string {
-  return classes.filter(Boolean).join(" ");
-}
-
-export function formatDate(date: Date | string): string {
-  const d = typeof date === "string" ? new Date(date) : date;
-  return d.toLocaleDateString("en-US", {
-    year: "numeric",
-    month: "long",
-    day: "numeric",
-  });
-}
-
-export function truncate(str: string, maxLength: number): string {
-  if (str.length <= maxLength) return str;
-  return str.slice(0, maxLength) + "...";
-}
-
-export function delay(ms: number): Promise<void> {
-  return new Promise((resolve) => setTimeout(resolve, ms));
-}
-
-export function debounce<T extends (...args: never[]) => unknown>(
-  func: T,
-  wait: number,
-): (...args: Parameters<T>) => void {
-  let timeout: ReturnType<typeof setTimeout> | null = null;
-
-  return function executedFunction(...args: Parameters<T>) {
-    const later = () => {
-      timeout = null;
-      func(...args);
-    };
-
-    if (timeout) clearTimeout(timeout);
-    timeout = setTimeout(later, wait);
-  };
-}
-
-export function capitalize(str: string): string {
-  return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
-}
-
-export function slugify(str: string): string {
-  return str
-    .toLowerCase()
-    .trim()
-    .replace(/[^\w\s-]/g, "")
-    .replace(/[\s_-]+/g, "-")
-    .replace(/^-+|-+$/g, "");
-}