create-stackkit-app 0.4.1 → 0.4.2

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

@@ -17,20 +17,20 @@ 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">
-            Looking for a starting point or more instructions? Head over to{" "}
+            Looking for a starting point or more instructions? Head over to{' '}
             <a
               href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
               className="font-medium text-zinc-950 dark:text-zinc-50"
             >
               Templates
-            </a>{" "}
-            or the{" "}
+            </a>{' '}
+            or the{' '}
             <a
               href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
               className="font-medium text-zinc-950 dark:text-zinc-50"
             >
               Learning
-            </a>{" "}
+            </a>{' '}
             center.
           </p>
         </div>
@@ -51,7 +51,7 @@ export default function Home() {
             Deploy Now
           </a>
           <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
+            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/8 px-5 transition-colors hover:border-transparent hover:bg-black/4 dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
             href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
             target="_blank"
             rel="noopener noreferrer"

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/{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,23 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "lint:fix": "eslint . --fix",
+    "preview": "vite preview",
+    "type-check": "tsc --noEmit"
   },
   "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 +31,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,26 @@
+import type { ApiResponse } from '../../types/api';
+import api from '../client';
+
+export interface User {
+  id: string;
+  name: string;
+  email: string;
+  avatar?: string;
+}
+
+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";

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

@@ -0,0 +1,12 @@
+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)
+      retry: 1,
+      refetchOnWindowFocus: false,
+    },
+  },
+});

package/templates/react-vite/src/main.tsx

@@ -0,0 +1,22 @@
+import { QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { Toaster } from 'react-hot-toast';
+import { RouterProvider } from 'react-router';
+import { SEOProvider } from './components/SEO';
+import './index.css';
+import { queryClient } from './lib/queryClient';
+import { router } from './router';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <SEOProvider>
+      <QueryClientProvider client={queryClient}>
+        <RouterProvider router={router} />
+        <Toaster position="top-right" />
+        <ReactQueryDevtools initialIsOpen={false} />
+      </QueryClientProvider>
+    </SEOProvider>
+  </StrictMode>
+);

package/templates/react-vite/src/pages/About.tsx

@@ -0,0 +1,74 @@
+import { SEO } from '../components/SEO';
+
+export default function About() {
+  return (
+    <>
+      <SEO title="About" description="About Stackkit - A production-ready React starter template" />
+
+      <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="text-2xl font-bold text-white">Stackkit</div>
+
+          <div className="flex flex-col gap-12 sm:text-left">
+            <div>
+              <h1 className="text-3xl font-semibold leading-10 tracking-tight text-zinc-50 mb-6">
+                About this template
+              </h1>
+              <p className="text-lg leading-8 text-zinc-400 mb-8">
+                Stackkit is a production-ready React starter template that includes all the
+                essential tools you need to build modern web applications.
+              </p>
+            </div>
+
+            <div>
+              <h2 className="text-xl font-semibold text-zinc-50 mb-4">What's included</h2>
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-zinc-400">
+                <div className="p-4 border border-zinc-800 rounded-lg">
+                  <div className="font-medium text-zinc-50 mb-1">React 19</div>
+                  <div className="text-sm">Latest React with TypeScript</div>
+                </div>
+                <div className="p-4 border border-zinc-800 rounded-lg">
+                  <div className="font-medium text-zinc-50 mb-1">Vite 7</div>
+                  <div className="text-sm">Fast build tool and dev server</div>
+                </div>
+                <div className="p-4 border border-zinc-800 rounded-lg">
+                  <div className="font-medium text-zinc-50 mb-1">React Router</div>
+                  <div className="text-sm">Client-side routing</div>
+                </div>
+                <div className="p-4 border border-zinc-800 rounded-lg">
+                  <div className="font-medium text-zinc-50 mb-1">TanStack Query</div>
+                  <div className="text-sm">Data fetching and caching</div>
+                </div>
+                <div className="p-4 border border-zinc-800 rounded-lg">
+                  <div className="font-medium text-zinc-50 mb-1">Axios</div>
+                  <div className="text-sm">HTTP client with interceptors</div>
+                </div>
+                <div className="p-4 border border-zinc-800 rounded-lg">
+                  <div className="font-medium text-zinc-50 mb-1">Tailwind CSS</div>
+                  <div className="text-sm">Utility-first CSS framework</div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-4 text-base font-medium sm:flex-row mt-8">
+            <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"
+              href="/"
+            >
+              Back to Home
+            </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"
+              href="https://stackkit.tariqul.dev"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Website
+            </a>
+          </div>
+        </main>
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,45 @@
+import { SEO } from '../components/SEO';
+
+export default function Home() {
+  return (
+    <>
+      <SEO title="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="text-2xl font-bold text-white">Stackkit</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-zinc-50">
+              To get started, edit the Home.tsx file.
+            </h1>
+            <p className="max-w-md text-lg leading-8 text-zinc-400">
+              This template includes React Router, TanStack Query, Axios, and Tailwind CSS. Check
+              out the{' '}
+              <a href="/about" className="font-medium text-zinc-50 hover:underline">
+                About
+              </a>{' '}
+              page to learn more about the included features.
+            </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-39.5"
+              href="https://react.dev"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              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"
+              href="/about"
+            >
+              Documentation
+            </a>
+          </div>
+        </main>
+      </div>
+    </>
+  );
+}

package/templates/react-vite/src/pages/NotFound.tsx

@@ -0,0 +1,24 @@
+import { Link } from 'react-router';
+import { SEO } from '../components/SEO';
+
+export default function NotFound() {
+  return (
+    <>
+      <SEO title="404 - Page Not Found" description="The page you're looking for doesn't exist" />
+
+      <div className="flex min-h-screen items-center justify-center bg-black">
+        <div className="text-center px-6">
+          <h1 className="text-8xl font-bold text-white mb-4">404</h1>
+          <h2 className="text-3xl font-semibold text-zinc-50 mb-4">Page Not Found</h2>
+          <p className="text-lg text-zinc-400 mb-8">The page you're looking for doesn't exist.</p>
+          <Link
+            to="/"
+            className="inline-flex h-12 items-center justify-center rounded-full bg-white text-black px-8 font-medium transition-colors hover:bg-zinc-200"
+          >
+            Go Home
+          </Link>
+        </div>
+      </div>
+    </>
+  );
+}