create-stackkit-app 0.4.2 → 0.4.3

package/templates/nextjs/app/page.tsx

@@ -4,59 +4,51 @@ 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">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
+        <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">
-            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{' '}
+            This template includes Next.js, Tailwind CSS, and Stackkit best practices. Check out 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"
+              href="https://github.com/tariqul420/stackkit"
+              className="font-medium text-zinc-950 dark:text-zinc-50 hover:underline"
+              target="_blank"
+              rel="noopener noreferrer"
             >
-              Learning
-            </a>{' '}
-            center.
+              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 gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+            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"
           >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
+            Documentation
           </a>
           <a
-            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"
+            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"
           >
-            Documentation
+            Stackkit GitHub
           </a>
         </div>
       </main>

package/templates/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/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/eslint.config.js

@@ -1,14 +1,14 @@
-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'
+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']),
+  globalIgnores(["dist"]),
   {
-    files: ['**/*.{ts,tsx}'],
+    files: ["**/*.{ts,tsx}"],
     extends: [
       js.configs.recommended,
       tseslint.configs.recommended,
@@ -20,4 +20,4 @@ export default defineConfig([
       globals: globals.browser,
     },
   },
-])
+]);

package/templates/react-vite/package.json

@@ -8,8 +8,7 @@
     "build": "tsc -b && vite build",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
-    "preview": "vite preview",
-    "type-check": "tsc --noEmit"
+    "preview": "vite preview"
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.1.18",

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

@@ -1,18 +1,18 @@
-import type { AxiosResponse } from 'axios';
-import axios, { AxiosError } from 'axios';
-import toast from 'react-hot-toast';
+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',
+  baseURL: import.meta.env.VITE_API_URL || "http://localhost:3000/api",
   timeout: 10000,
   headers: {
-    'Content-Type': 'application/json',
+    "Content-Type": "application/json",
   },
 });
 
 api.interceptors.request.use(
   (config) => {
-    const token = localStorage.getItem('auth_token');
+    const token = localStorage.getItem("auth_token");
     if (token) {
       config.headers.Authorization = `Bearer ${token}`;
     }
@@ -20,28 +20,28 @@ api.interceptors.request.use(
   },
   (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.');
+      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.');
+      toast.error("You do not have permission to perform this action.");
     } else if (error.response?.status === 404) {
-      toast.error('Resource not found.');
+      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.');
+      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.');
+      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

@@ -1,12 +1,4 @@
-import type { ApiResponse } from '../../types/api';
-import api from '../client';
-
-export interface User {
-  id: string;
-  name: string;
-  email: string;
-  avatar?: string;
-}
+import api from "../client";
 
 export const userService = {
   getUser: async (id: string): Promise<User> => {
@@ -15,7 +7,7 @@ export const userService = {
   },
 
   getCurrentUser: async (): Promise<User> => {
-    const response = await api.get<ApiResponse<User>>('/users/me');
+    const response = await api.get<ApiResponse<User>>("/users/me");
     return response.data.data;
   },
 

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

@@ -1,5 +1,5 @@
-import type { ErrorInfo, ReactNode } from 'react';
-import { Component } from 'react';
+import type { ErrorInfo, ReactNode } from "react";
+import { Component } from "react";
 
 interface Props {
   children?: ReactNode;
@@ -22,7 +22,7 @@ export class ErrorBoundary extends Component<Props, State> {
   }
 
   componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-    console.error('ErrorBoundary caught an error:', error, errorInfo);
+    console.error("ErrorBoundary caught an error:", error, errorInfo);
   }
 
   render() {
@@ -34,7 +34,7 @@ export class ErrorBoundary extends Component<Props, State> {
         <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'}
+            {this.state.error?.message || "An unexpected error occurred"}
           </p>
           <button
             onClick={() => this.setState({ hasError: false, error: undefined })}

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

@@ -1,4 +1,4 @@
-import { Outlet } from 'react-router';
+import { Outlet } from "react-router";
 
 export function Layout() {
   return (

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

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

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

@@ -1,4 +1,4 @@
-import { Helmet, HelmetProvider } from 'react-helmet-async';
+import { Helmet, HelmetProvider } from "react-helmet-async";
 
 interface SEOProps {
   title?: string;
@@ -9,10 +9,10 @@ interface SEOProps {
 }
 
 const defaultSEO = {
-  title: 'React App',
-  description: 'A modern React application built with Vite',
-  keywords: 'react, vite, typescript, spa',
-  image: '/og-image.png',
+  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 }) {

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

@@ -1,5 +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 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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState } from "react";
 
 export function useDebounce<T>(value: T, delay: number): T {
   const [debouncedValue, setDebouncedValue] = useState<T>(value);
@@ -18,7 +18,7 @@ export function useDebounce<T>(value: T, delay: number): T {
 
 export function useLocalStorage<T>(
   key: string,
-  initialValue: T
+  initialValue: T,
 ): [T, (value: T | ((val: T) => T)) => void] {
   const [storedValue, setStoredValue] = useState<T>(() => {
     try {
@@ -45,7 +45,7 @@ export function useLocalStorage<T>(
 
 export function useMediaQuery(query: string): boolean {
   const [matches, setMatches] = useState(() => {
-    if (typeof window !== 'undefined') {
+    if (typeof window !== "undefined") {
       return window.matchMedia(query).matches;
     }
     return false;
@@ -55,9 +55,9 @@ export function useMediaQuery(query: string): boolean {
     const media = window.matchMedia(query);
 
     const listener = () => setMatches(media.matches);
-    media.addEventListener('change', listener);
+    media.addEventListener("change", listener);
 
-    return () => media.removeEventListener('change', listener);
+    return () => media.removeEventListener("change", listener);
   }, [query]);
 
   return matches;

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

@@ -1,4 +1,4 @@
-import { QueryClient } from '@tanstack/react-query';
+import { QueryClient } from "@tanstack/react-query";
 
 export const queryClient = new QueryClient({
   defaultOptions: {
@@ -9,4 +9,4 @@ export const queryClient = new QueryClient({
       refetchOnWindowFocus: false,
     },
   },
-});
+});

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

@@ -1,15 +1,15 @@
-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';
+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(
+createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <SEOProvider>
       <QueryClientProvider client={queryClient}>
@@ -18,5 +18,5 @@ createRoot(document.getElementById('root')!).render(
         <ReactQueryDevtools initialIsOpen={false} />
       </QueryClientProvider>
     </SEOProvider>
-  </StrictMode>
+  </StrictMode>,
 );

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

@@ -1,4 +1,4 @@
-import { SEO } from '../components/SEO';
+import { SEO } from "../components/SEO";
 
 export default function About() {
   return (
@@ -7,7 +7,11 @@ export default function About() {
 
       <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 items-center gap-4 mb-8">
+            <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>
 
           <div className="flex flex-col gap-12 sm:text-left">
             <div>

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

@@ -1,4 +1,4 @@
-import { SEO } from '../components/SEO';
+import { SEO } from "../components/SEO";
 
 export default function Home() {
   return (
@@ -6,7 +6,11 @@ export default function Home() {
       <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 items-center gap-4 mb-8">
+            <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>
 
           <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">
@@ -14,10 +18,10 @@ export default function Home() {
             </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{' '}
+              out the{" "}
               <a href="/about" className="font-medium text-zinc-50 hover:underline">
                 About
-              </a>{' '}
+              </a>{" "}
               page to learn more about the included features.
             </p>
           </div>

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

@@ -1,5 +1,5 @@
-import { Link } from 'react-router';
-import { SEO } from '../components/SEO';
+import { Link } from "react-router";
+import { SEO } from "../components/SEO";
 
 export default function NotFound() {
   return (

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

@@ -1,6 +1,6 @@
-import { useQuery } from '@tanstack/react-query';
-import { useLoaderData, useParams } from 'react-router';
-import { userService } from '../api/services/user.service';
+import { useQuery } from "@tanstack/react-query";
+import { useLoaderData, useParams } from "react-router";
+import { userService } from "../api/services/user.service";
 
 type User = { id?: string; name?: string; email?: string; avatar?: string; [key: string]: any };
 
@@ -9,9 +9,9 @@ export default function UserProfile() {
   const { userId } = useParams();
 
   const { data: user = loaderUser ?? {} } = useQuery({
-    queryKey: ['user', userId],
+    queryKey: ["user", userId],
     queryFn: async () => {
-      if (!userId) throw new Error('Missing user id');
+      if (!userId) throw new Error("Missing user id");
       return await userService.getUser(userId);
     },
     initialData: loaderUser,
@@ -26,7 +26,7 @@ export default function UserProfile() {
             <img src={user.avatar} alt={user.name} className="w-16 h-16 rounded-full" />
           ) : (
             <div className="w-16 h-16 rounded-full bg-zinc-700 flex items-center justify-center text-xl">
-              {user.name?.[0] ?? 'U'}
+              {user.name?.[0] ?? "U"}
             </div>
           )}
           <div>

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

@@ -1,31 +1,31 @@
-import { createBrowserRouter } from 'react-router';
-import { userService } from './api/services/user.service';
-import { ErrorBoundary } from './components/ErrorBoundary';
-import Layout from './components/Layout';
-import About from './pages/About';
-import Home from './pages/Home';
-import NotFound from './pages/NotFound';
-import UserProfile from './pages/UserProfile';
+import { createBrowserRouter } from "react-router";
+import { userService } from "./api/services/user.service";
+import { ErrorBoundary } from "./components/ErrorBoundary";
+import Layout from "./components/Layout";
+import About from "./pages/About";
+import Home from "./pages/Home";
+import NotFound from "./pages/NotFound";
+import UserProfile from "./pages/UserProfile";
 
 export const router = createBrowserRouter([
   {
-    path: '/',
+    path: "/",
     Component: Layout,
     errorElement: <ErrorBoundary />,
     children: [
       { index: true, Component: Home },
-      { path: 'about', Component: About },
+      { path: "about", Component: About },
       {
-        path: 'users/:userId',
+        path: "users/:userId",
         loader: async ({ params }) => {
           const id = params.userId;
-          if (!id) throw new Response('Missing user id', { status: 400 });
+          if (!id) throw new Response("Missing user id", { status: 400 });
           const user = await userService.getUser(id);
           return user;
         },
         Component: UserProfile,
       },
-      { path: '*', Component: NotFound },
+      { path: "*", Component: NotFound },
     ],
   },
 ]);

package/templates/react-vite/src/types/{api.ts → api.d.ts}

@@ -1,20 +1,20 @@
-export interface ApiResponse<T = unknown> {
+type ApiResponse<T = unknown> = {
   data: T;
   message?: string;
   status: number;
-}
+};
 
-export interface PaginatedResponse<T> {
+type PaginatedResponse<T> = {
   data: T[];
   total: number;
   page: number;
   pageSize: number;
   totalPages: number;
-}
+};
 
-export interface ApiError {
+type ApiError = {
   message: string;
   code?: string;
   status?: number;
   errors?: Record<string, string[]>;
-}
+};

package/templates/react-vite/src/types/user.d.ts

@@ -0,0 +1,6 @@
+type User = {
+  id: string;
+  name: string;
+  email: string;
+  avatar?: string;
+};

package/templates/react-vite/src/utils/helpers.ts

@@ -1,19 +1,19 @@
 export function cn(...classes: (string | boolean | undefined | null)[]): string {
-  return classes.filter(Boolean).join(' ');
+  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',
+  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) + '...';
+  return str.slice(0, maxLength) + "...";
 }
 
 export function delay(ms: number): Promise<void> {
@@ -22,7 +22,7 @@ export function delay(ms: number): Promise<void> {
 
 export function debounce<T extends (...args: never[]) => unknown>(
   func: T,
-  wait: number
+  wait: number,
 ): (...args: Parameters<T>) => void {
   let timeout: ReturnType<typeof setTimeout> | null = null;
 
@@ -45,7 +45,7 @@ export function slugify(str: string): string {
   return str
     .toLowerCase()
     .trim()
-    .replace(/[^\w\s-]/g, '')
-    .replace(/[\s_-]+/g, '-')
-    .replace(/^-+|-+$/g, '');
+    .replace(/[^\w\s-]/g, "")
+    .replace(/[\s_-]+/g, "-")
+    .replace(/^-+|-+$/g, "");
 }