create-next-pro-stack 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Jahirul
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,123 @@
+# 🚀 BlitzStack CLI Tool
+
+**BlitzStack** is a powerful, professional-grade CLI tool designed to scaffold high-performance Next.js applications in seconds. It comes pre-configured with industry-standard patterns, a premium UI/UX structure, and a robust state-management architecture.
+
+Built by **[Jahirul](https://github.com/jahirul077)** for developers who value speed, consistency, and best practices.
+
+---
+
+## 🌟 Why BlitzStack?
+
+Staring at a blank `create-next-app` is time-consuming. **BlitzStack** bridges the gap between a raw installation and a production-ready application.
+
+- **Zero-Config Professional Routing:** Automatically sets up Route Groups (`(main)`, `auth`, `dashboard`).
+- **Premium UI Starter:** Includes a stunning Landing Page, Sidebar, and TopNavbar out of the box.
+- **Dynamic Secure Storage:** Automatically generates unique LocalStorage keys for each project to avoid token conflicts.
+- **Pre-baked Interceptors:** Axios is pre-configured with request/response interceptors for seamless API handling.
+- **Production Ready:** Pre-configured `.env`, `vercel.json` (rewrites), and `.gitignore`.
+
+---
+
+## 📦 Core Tech Stack & Packages
+
+BlitzStack automatically installs and configures the following professional packages:
+
+| Category               | Packages                                      |
+| :--------------------- | :-------------------------------------------- |
+| **Framework**          | Next.js (Latest), React 19                    |
+| **Styling**            | Tailwind CSS v4, Lucide React, Shadcn UI      |
+| **State Management**   | Redux Toolkit, React Redux                    |
+| **Data Fetching**      | @tanstack/react-query, Axios                  |
+| **Forms & Validation** | React Hook Form                               |
+| **UI Components**      | Shadcn UI (Button), Sonner (Toasts), Recharts |
+| **Utilities**          | clsx, tailwind-merge, localforage             |
+
+---
+
+## 🚀 Getting Started
+
+### 1. Local Installation
+
+First, clone this repository and link the CLI tool to your local machine:
+
+```bash
+# Clone the repository
+git clone <your-repo-link>
+
+# Navigate to the folder
+cd create-next-stack-CLI-Tools
+
+# Link the tool globally
+npm link
+```
+
+### 2. Creating a New Project
+
+Now you can create a new **BlitzStack** project from anywhere in your terminal:
+
+```bash
+create-next-pro-stack my-awesome-project
+```
+
+### 3. Development
+
+The tool will automatically:
+
+- Initialize the Next.js app.
+- Install all dependencies.
+- Apply the professional folder structure.
+- **Run the development server (`npm run dev`) automatically.**
+
+---
+
+## 📁 Folder Structure Overview
+
+```text
+src/
+├── app/
+│   ├── (main)/          # Landing & Public pages
+│   ├── auth/            # Login/Register flows
+│   └── dashboard/       # Protected dashboard routes
+├── components/          # Reusable UI components
+├── hooks/
+│   └── Axios/           # Pre-configured useAxiosPublic & useAxiosPrivate
+├── providers/           # Redux, React Query, and UI Providers
+├── redux/               # Store configuration and Slices
+├── shared/              # Shared Layout components (Sidebar, Navbar)
+└── utils/               # Helper functions (cn, localStorage, etc.)
+```
+
+---
+
+## 🛠️ Key Features Under the Hood
+
+### Professional Axios Interceptors
+
+Your project comes with two main API hooks:
+
+- `useAxiosPublic`: For open APIs with built-in network error handling.
+- `useAxiosPrivate`: For secure APIs. It automatically handles:
+  - Dynamic Authorization tokens.
+  - Automatic logout on 401 (Session Expired).
+  - Friendly `sonner` toasts for every error status (403, 404, 500+).
+
+### Vercel Ready
+
+Includes a `vercel.json` with a catch-all rewrite rule:
+
+```json
+{
+  "rewrites": [{ "source": "/(.*)", "destination": "/" }]
+}
+```
+
+---
+
+## 🤝 Contributing
+
+Contributions, issues, and feature requests are welcome! Feel free to check the [issues page](https://github.com/jahirul077).
+
+## 📝 License
+
+Copyright © 2026 [Jahirul Islam](https://github.com/jahirul077).
+This project is [MIT](https://opensource.org/licenses/MIT) licensed.

package/index.js

@@ -0,0 +1,140 @@
+#!/usr/bin/env node
+
+import { execSync } from "child_process";
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+import readline from "readline";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const run = (cmd) => execSync(cmd, { stdio: "inherit", shell: true });
+
+function askQuestion(query) {
+  const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout,
+  });
+  return new Promise((resolve) =>
+    rl.question(query, (answer) => {
+      rl.close();
+      resolve(answer);
+    }),
+  );
+}
+
+const projectName = process.argv[2];
+
+if (!projectName) {
+  console.log("❌ Please provide a project name. Example:");
+  console.log("  create-next-pro-stack my-next-app");
+  process.exit(1);
+}
+
+async function main() {
+  try {
+    if (fs.existsSync(projectName)) {
+      console.log(`\n⚠️  Folder "${projectName}" already exists!`);
+      process.exit(1);
+    }
+
+    console.log("\n🚀 Starting Next.js Stack Setup...\n");
+
+    const useTypeScript = await askQuestion(
+      "Do you want to use TypeScript? (y/n): ",
+    );
+    const isTypeScript =
+      useTypeScript.toLowerCase() === "y" ||
+      useTypeScript.toLowerCase() === "yes";
+
+    // 1. Create Next.js using official create-next-app (Latest)
+    console.log("\n📦 Initializing Next.js project...");
+    const tsFlag = isTypeScript ? "--ts" : "--js";
+    const craCommand = `npx create-next-app@latest ${projectName} ${tsFlag} --tailwind --eslint --app --src-dir --import-alias "@/*" --use-npm --no-git`;
+
+    run(craCommand);
+
+    // Explicitly remove .git folder if create-next-app initialized it
+    const gitDir = path.join(projectName, ".git");
+    if (fs.existsSync(gitDir)) {
+      fs.rmSync(gitDir, { recursive: true, force: true });
+    }
+
+    console.log("\n✅ Base Next.js created (and .git removed)!");
+
+    // 2. Install Core Stack Packages (Latest versions)
+    console.log("\nInstalling core stack packages...");
+
+    const dependencies = [
+      "axios",
+      "@reduxjs/toolkit",
+      "react-redux",
+      "@tanstack/react-query",
+      "@tanstack/react-query-devtools",
+      "@tanstack/react-table",
+      "react-hook-form",
+      "react-icons",
+      "react-hot-toast",
+      "sonner",
+      "recharts",
+      "lucide-react",
+      "react-router-dom",
+      "localforage",
+      "match-sorter",
+      "sort-by",
+      "clsx",
+      "tailwind-merge",
+      "tailwindcss",
+      "@tailwindcss/postcss",
+    ];
+
+    console.log("\nInstalling dependencies...");
+    run(`cd ${projectName} && npm install ${dependencies.join(" ")}`);
+
+    // 2.5 Initialize Shadcn UI (Default/Non-interactive)
+    console.log("\n🎨 Initializing Shadcn UI...");
+    run(`cd ${projectName} && npx shadcn@latest init -d`);
+
+    // Install common shadcn components
+    console.log("\n🧩 Installing Shadcn components (Button)...");
+    run(`cd ${projectName} && npx shadcn@latest add button -y`);
+
+    // 3. Run Custom Templates (Folder structure, setups)
+    console.log("\n📁 Applying custom folder structure and templates...");
+
+    const templatesDir = path.join(__dirname, "templates");
+    const setupModules = [
+      "folder-structure.js",
+      "utils-setup.js",
+      "dashboard-setup.js",
+      "axios-setup.js",
+      "redux-setup.js",
+      "react-query-setup.js",
+      "providers-setup.js",
+      "page-files.js",
+      "gitignore-setup.js",
+      "vercel-setup.js",
+      "env-setup.js",
+      "cleanup.js",
+    ];
+
+    for (const moduleName of setupModules) {
+      const modulePath = path.join(templatesDir, moduleName);
+      if (fs.existsSync(modulePath)) {
+        const module = await import(`file://${modulePath}`);
+        if (module.default) {
+          await module.default(projectName, isTypeScript);
+        }
+      }
+    }
+
+    console.log("\n✨ Setup complete! Starting development server... 🚀\n");
+    run(`cd ${projectName} && npm run dev`);
+  } catch (err) {
+    console.error("\n❌ Something went wrong:", err.message);
+    process.exit(1);
+  }
+}
+
+main();

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "create-next-pro-stack",
+  "version": "1.0.0",
+  "description": "A professional CLI tool to quickly scaffold Next.js projects with Redux, React Query, TailwindCSS, and premium UI.",
+  "type": "module",
+  "main": "index.js",
+  "bin": {
+    "create-next-pro-stack": "index.js"
+  },
+  "keywords": [
+    "nextjs",
+    "cli",
+    "scaffold",
+    "redux",
+    "react-query",
+    "tailwindcss",
+    "shadcn"
+  ],
+  "author": "Jahirul Islam",
+  "license": "MIT",
+  "dependencies": {}
+}

package/templates/axios-setup.js

@@ -0,0 +1,166 @@
+import fs from "fs";
+import path from "path";
+
+export default async function setup(projectName, isTypeScript) {
+  const ext = isTypeScript ? "tsx" : "jsx";
+  const axiosDir = path.join(projectName, "src", "hooks", "Axios");
+  if (!fs.existsSync(axiosDir)) fs.mkdirSync(axiosDir, { recursive: true });
+
+  const tokenKey = `${projectName.toUpperCase().replace(/[-\s]/g, "_")}_USER_ACCESS_TOKEN`;
+
+  // 1. Axios Public Logic (JSX/TSX Mode)
+  const publicHookContent = `import axios from "axios";
+
+const BASE_URL = \`\${process.env.NEXT_PUBLIC_BASE_URL}/api\`;
+
+if (!process.env.NEXT_PUBLIC_BASE_URL) {
+  console.warn("NEXT_PUBLIC_BASE_URL is not defined in .env file");
+}
+
+const axiosInstance = axios.create({
+  baseURL: BASE_URL,
+  timeout: 10000,
+  headers: {
+    "Content-Type": "application/json",
+    Accept: "application/json",
+  },
+  withCredentials: false,
+});
+
+export const useAxiosPublic = () => axiosInstance;
+
+axiosInstance.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    if (!error.response) {
+      return Promise.reject({
+        message: "Network error. Please check your connection.",
+        status: 0,
+      });
+    }
+
+    const { status, data } = error.response;
+
+    return Promise.reject({
+      status,
+      message: data?.message || "Something went wrong. Please try again.",
+      ...data,
+    });
+  }
+);
+
+export default useAxiosPublic;
+`;
+
+  // 2. Axios Private Logic (JSX/TSX Mode)
+  const privateHookContent = `import { getLocalStorage, removeLocalStorage } from "@/utils/localStorage";
+import {
+    getSessionStorage,
+    removeSessionStorage,
+} from "@/utils/sessionStorage";
+import axios from "axios";
+import { toast } from "sonner";
+
+const axiosInstance = axios.create({
+    baseURL: \`\${process.env.NEXT_PUBLIC_BASE_URL}/api\`,
+    headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+    },
+    timeout: 30000,
+});
+
+const useAxiosPrivate = () => axiosInstance;
+
+axiosInstance.interceptors.request.use(
+    (config) => {
+        const token =
+            getLocalStorage("${tokenKey}") ||
+            getSessionStorage("${tokenKey}");
+
+        if (token) {
+            config.headers.Authorization = \`Bearer \${token}\`;
+        }
+
+        return config;
+    },
+    (error) => Promise.reject(error)
+);
+
+// RESPONSE INTERCEPTOR
+axiosInstance.interceptors.response.use(
+    (response) => response,
+
+    async (error) => {
+        const { response } = error;
+
+        // Network Error
+        if (!response) {
+            toast.error("Network error — please check your connection.");
+            return Promise.reject(error);
+        }
+
+        const status = response.status;
+
+        // 401 Unauthorized
+        if (status === 401) {
+            toast.error("Session expired. Please log in again.");
+            removeLocalStorage("${tokenKey}");
+            removeSessionStorage("${tokenKey}");
+            if (typeof window !== "undefined" && window.location.pathname !== "/auth/login") {
+                window.location.href = "/auth/login";
+            }
+
+            return Promise.reject(error);
+        }
+
+        // 403 Forbidden
+        if (status === 403) {
+            toast.error("You don’t have permission to access this resource.");
+            return Promise.reject(error);
+        }
+
+        // 400 Bad Request
+        if (status === 400) {
+            toast.error(response.data?.message || "Invalid request.");
+            return Promise.reject(error);
+        }
+
+        // 404 Not Found
+        if (status === 404) {
+            toast.error("Requested resource not found.");
+            return Promise.reject(error);
+        }
+
+        // 429 Too Many Requests
+        if (status === 429) {
+            toast.error("Too many requests — please slow down.");
+            return Promise.reject(error);
+        }
+
+        // 500+ Server Error
+        if (status >= 500) {
+            toast.error("Server error — please try again later.");
+            return Promise.reject(error);
+        }
+
+        // Default
+        toast.error(response.data?.message || "Something went wrong.");
+        return Promise.reject(error);
+    }
+);
+
+export default useAxiosPrivate;
+`;
+
+  fs.writeFileSync(
+    path.join(axiosDir, `useAxiosPublic.${ext}`),
+    publicHookContent,
+  );
+  fs.writeFileSync(
+    path.join(axiosDir, `useAxiosPrivate.${ext}`),
+    privateHookContent,
+  );
+
+  console.log(`   ✅ Axios hooks created with dynamic token key: ${tokenKey}`);
+}

package/templates/cleanup.js

@@ -0,0 +1,23 @@
+import fs from "fs";
+import path from "path";
+
+export default function cleanupFiles(projectName) {
+  console.log("Cleaning up default Next.js files...");
+
+  const filesToRemove = [
+    "public/next.svg",
+    "public/vercel.svg",
+  ];
+
+  filesToRemove.forEach((file) => {
+    try {
+      const filePath = path.join(projectName, file);
+      if (fs.existsSync(filePath)) {
+        fs.unlinkSync(filePath);
+        console.log(`  ✓ Removed ${file}`);
+      }
+    } catch (err) {
+      // skipping
+    }
+  });
+}

package/templates/dashboard-setup.js

@@ -0,0 +1,113 @@
+import fs from "fs";
+import path from "path";
+
+export default async function setup(projectName, isTypeScript) {
+  const ext = isTypeScript ? "tsx" : "jsx";
+  const sharedDir = path.join(projectName, "src", "shared", "dashboardShared");
+
+  if (!fs.existsSync(sharedDir)) {
+    fs.mkdirSync(sharedDir, { recursive: true });
+  }
+
+  // 1. Sidebar Component (Your Professional Design)
+  const sidebarContent = `'use client';
+
+import React from 'react';
+import { LayoutDashboard, Settings, User, BookOpen, Bell, Search } from 'lucide-react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+const Sidebar = () => {
+    const pathname = usePathname();
+
+    const menuItems = [
+        { icon: <LayoutDashboard size={20} />, label: 'Dashboard', href: '/dashboard/overview' },
+        { icon: <BookOpen size={20} />, label: 'My Bookings', href: '/dashboard/my-bookings' },
+        { icon: <User size={20} />, label: 'Payments History', href: '/dashboard/payments-history' },
+        { icon: <Bell size={20} />, label: 'My Quote Requests', href: '/dashboard/my-quote-requests' },
+        { icon: <Settings size={20} />, label: 'Settings', href: '/dashboard/settings' },
+    ];
+
+    return (
+        <div className="h-full flex flex-col bg-white">
+            <Link href="/" className="p-6 flex items-center gap-2">
+                <div className="h-8 w-8 rounded-lg bg-primary flex items-center justify-center">
+                    <span className="text-primary-foreground font-bold text-xl leading-none">B</span>
+                </div>
+                <span className="text-xl font-bold tracking-tight text-primary">BlitzStack</span>
+            </Link>
+
+            <nav className="flex-1 px-4 space-y-2 overflow-y-auto">
+                {menuItems.map((item, index) => {
+                    const isActive = pathname === item.href;
+                    return (
+                        <Link
+                            key={index}
+                            href={item.href}
+                            className={\`flex items-center gap-3 px-4 py-3 rounded-xl cursor-pointer transition-all duration-300 border w-full
+                                \${isActive
+                                    ? 'bg-linear-to-br from-white/40 to-white/10 backdrop-blur-md border-white/30 text-primary shadow-[0_8px_32px_0_rgba(99,102,241,0.1)]'
+                                    : 'text-gray-500 hover:bg-white/40 border-transparent hover:border-white/20'
+                                }\`}
+                        >
+                            {item.icon}
+                            <span className="font-medium">{item.label}</span>
+                        </Link>
+                    )
+                })}
+            </nav>
+        </div>
+    );
+};
+
+export default Sidebar;
+`;
+
+  // 2. TopNavbar Component (Your Professional Design)
+  const navbarContent = `'use client';
+
+import React from 'react';
+import { Search, Bell, User } from 'lucide-react';
+import { Button } from "@/components/ui/button";
+
+const TopNavbar = () => {
+    return (
+        <div className="flex w-full items-center justify-between">
+            <div className="flex flex-col">
+                <h1 className="text-xl font-bold tracking-tight text-foreground">Overview</h1>
+                <p className="text-sm text-muted-foreground">Welcome back, Jahirul!</p>
+            </div>
+
+            <div className="flex items-center gap-4">
+                {/* Simple Search (Placeholder) */}
+                <div className="relative hidden md:block">
+                    <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                    <input
+                        type="text"
+                        placeholder="Search anything..."
+                        className="h-10 w-64 rounded-xl border bg-muted/30 pl-10 pr-4 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50 text-foreground shadow-sm"
+                    />
+                </div>
+
+                {/* Action Buttons */}
+                <Button variant="ghost" size="icon" className="rounded-xl">
+                    <Bell className="h-5 w-5" />
+                </Button>
+                <div className="h-10 w-10 rounded-xl bg-primary/10 p-2 flex items-center justify-center border border-primary/20">
+                    <User className="h-5 w-5 text-primary" />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default TopNavbar;
+`;
+
+  fs.writeFileSync(path.join(sharedDir, `Sidebar.${ext}`), sidebarContent);
+  fs.writeFileSync(path.join(sharedDir, `TopNavbar.${ext}`), navbarContent);
+
+  console.log(
+    "   ✅ Dashboard shared components (Professional Sidebar, TopNavbar) created.",
+  );
+}

package/templates/env-setup.js

@@ -0,0 +1,8 @@
+import fs from "fs";
+import path from "path";
+
+export default async function setup(projectName) {
+  // Create an empty .env file
+  fs.writeFileSync(path.join(projectName, ".env"), "");
+  console.log("   ✅ .env file created.");
+}

package/templates/folder-structure.js

@@ -0,0 +1,36 @@
+import fs from "fs";
+import path from "path";
+
+export default async function setup(projectName) {
+  const baseDir = path.join(projectName, "src");
+
+  const folders = [
+    "app/(main)",
+    "app/auth/login",
+    "app/dashboard/overview",
+    "assets/images",
+    "assets/videos",
+    "components/common",
+    "components/landingPageComponents",
+    "components/authPageComponents",
+    "components/dashboardPageComponents",
+    "hooks/Axios",
+    "providers",
+    "redux/slices",
+    "shared/landingShared",
+    "shared/authShared",
+    "shared/dashboardShared",
+    "utils",
+  ];
+
+  folders.forEach((folder) => {
+    const dir = path.join(baseDir, folder);
+    if (!fs.existsSync(dir)) {
+      fs.mkdirSync(dir, { recursive: true });
+    }
+  });
+
+  console.log(
+    "   ✅ Folder structure updated: (main), auth/login, and dashboard/overview.",
+  );
+}

package/templates/gitignore-setup.js

@@ -0,0 +1,43 @@
+import fs from "fs";
+import path from "path";
+
+export default async function setup(projectName) {
+  const gitignoreContent = `# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+.env
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+`;
+
+  fs.writeFileSync(path.join(projectName, ".gitignore"), gitignoreContent);
+  console.log("   ✅ .gitignore created/updated.");
+}

package/templates/page-files.js

@@ -0,0 +1,186 @@
+import fs from "fs";
+import path from "path";
+
+export default async function setup(projectName, isTypeScript) {
+  const ext = isTypeScript ? "tsx" : "jsx";
+  const appDir = path.join(projectName, "src", "app");
+
+  // 1. Remove default page.js or page.tsx
+  const defaultPageTypes = ["page.js", "page.tsx", "page.jsx"];
+  defaultPageTypes.forEach((file) => {
+    const filePath = path.join(appDir, file);
+    if (fs.existsSync(filePath)) fs.unlinkSync(filePath);
+  });
+
+  // Helper to create layout
+  const createLayoutFile = (dirPath, content) => {
+    const targetDir = path.join(appDir, dirPath);
+    if (!fs.existsSync(targetDir)) fs.mkdirSync(targetDir, { recursive: true });
+    fs.writeFileSync(path.join(targetDir, `layout.${ext}`), content);
+  };
+
+  // --- Main Layout ---
+  const mainLayoutContent = `export default function MainLayout({ children }${isTypeScript ? ": { children: React.ReactNode }" : ""}) {
+  return (
+    <div className="main-layout">
+      {children}
+    </div>
+  );
+}
+`;
+  createLayoutFile("(main)", mainLayoutContent);
+
+  // --- Dashboard Layout (Your Professional Design) ---
+  const dashboardLayoutContent = `import Sidebar from "@/shared/dashboardShared/Sidebar";
+import TopNavbar from "@/shared/dashboardShared/TopNavbar";
+import React from "react";
+
+const DashboardLayout = ({ children }${isTypeScript ? ": { children: React.ReactNode }" : ""}) => {
+  return (
+    <main className="w-full h-screen flex relative bg-background">
+      <div className="xl:w-[280px] h-screen xl:block hidden border-r shrink-0">
+        <Sidebar />
+      </div>
+
+      {/* Main Content */}
+      <div className="flex flex-col w-full xl:w-[calc(100%-280px)] h-screen overflow-hidden">
+        <div className="w-full h-auto xl:h-[80px] flex flex-col justify-center px-4 md:px-8 py-4 bg-white/50 backdrop-blur-md xl:bg-transparent border-b">
+          <TopNavbar />
+        </div>
+
+        <div className="w-full h-[calc(100%-80px)] overflow-auto custom-scrollbar p-10 relative">
+          <div className="relative z-10">
+            {children}
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+};
+
+export default DashboardLayout;
+`;
+  createLayoutFile("dashboard", dashboardLayoutContent);
+
+  // --- Auth Layout ---
+  const authLayoutContent = `export default function AuthLayout({ children }${isTypeScript ? ": { children: React.ReactNode }" : ""}) {
+  return (
+    <div className="auth-layout flex min-h-screen items-center justify-center bg-muted/50">
+      {children}
+    </div>
+  );
+}
+`;
+  createLayoutFile("auth", authLayoutContent);
+
+  // --- Create Pages ---
+
+  // 1. Landing Page (Keeping your professional design)
+  const landingPageContent = `import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { ExternalLink, LayoutDashboard, LogIn, Sparkles } from "lucide-react";
+
+export default function LandingPage() {
+  return (
+    <div className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-background px-6">
+      {/* Subtle Background Radial Gradient */}
+      <div className="absolute inset-x-0 top-0 -z-10 h-full w-full bg-[radial-gradient(circle_at_center,var(--color-primary)_0%,transparent_70%)] opacity-[0.03]" />
+
+      <div className="flex flex-col items-center text-center">
+        {/* Modern Icon/Badge */}
+        <div className="mb-8 flex h-16 w-16 items-center justify-center rounded-2xl bg-primary/10 text-primary">
+          <Sparkles className="h-8 w-8" />
+        </div>
+
+        {/* Main Heading */}
+        <h1 className="mb-4 text-5xl font-extrabold tracking-tight text-foreground sm:text-7xl">
+          <span className="text-primary tracking-tighter">Your Next.js</span> Project <br />
+          is <span className="bg-linear-to-r from-primary to-chart-1 bg-clip-text text-transparent">Ready</span>
+        </h1>
+
+        {/* Subtext */}
+        <p className="mb-10 max-w-lg text-lg text-muted-foreground sm:text-xl">
+          Everything is set up and configured. Now you can start building your amazing application.
+        </p>
+
+        {/* Navigation Buttons */}
+        <div className="flex flex-col gap-4 sm:flex-row">
+          <Link href="/auth/login">
+            <Button size="lg" className="h-12 gap-2 rounded-xl px-8 font-semibold shadow-lg shadow-primary/20 transition-all hover:scale-105 active:scale-95">
+              <LogIn className="h-4 w-4" />
+              Go to Login
+            </Button>
+          </Link>
+          <Link href="/dashboard/overview">
+            <Button variant="outline" size="lg" className="h-12 gap-2 rounded-xl px-8 font-semibold transition-all hover:scale-105 active:scale-95">
+              <LayoutDashboard className="h-4 w-4" />
+              Dashboard
+            </Button>
+          </Link>
+          <Link href="https://blitzstack.vercel.app/" target="_blank">
+            <Button variant="ghost" size="lg" className="h-12 gap-2 rounded-xl px-8 font-semibold transition-all hover:scale-105 active:scale-95 text-primary border border-primary/10 hover:bg-primary/5">
+              <ExternalLink className="h-4 w-4" />
+              Visit Website
+            </Button>
+          </Link>
+        </div>
+
+        {/* Footer Credit */}
+        <div className="mt-20 flex flex-col items-center gap-2">
+          <p className="text-sm font-medium text-muted-foreground">
+            Built by <Link href="https://github.com/jahirul077" target="_blank" className="text-primary hover:underline">Jahirul</Link>
+          </p>
+          <div className="flex h-1 w-12 rounded-full bg-primary/20" />
+        </div>
+      </div>
+    </div>
+  );
+}
+`;
+  const mainDir = path.join(appDir, "(main)");
+  if (!fs.existsSync(mainDir)) fs.mkdirSync(mainDir, { recursive: true });
+  fs.writeFileSync(path.join(mainDir, `page.${ext}`), landingPageContent);
+
+  // 2. Overview Page (Simplified as requested)
+  const dashboardOverviewDir = path.join(appDir, "dashboard/overview");
+  if (!fs.existsSync(dashboardOverviewDir))
+    fs.mkdirSync(dashboardOverviewDir, { recursive: true });
+  fs.writeFileSync(
+    path.join(dashboardOverviewDir, `page.${ext}`),
+    `import Link from "next/link";
+
+export default function OverviewPage() {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-[60vh] gap-4">
+      <h1 className="text-4xl font-bold tracking-tight">Overview Page </h1>
+      <Link href="/" className="text-primary hover:underline font-medium italic text-xl">
+        Go to Home
+      </Link>
+    </div>
+  );
+}`,
+  );
+
+  // 3. Login Page (Simplified as requested)
+  const loginDir = path.join(appDir, "auth/login");
+  if (!fs.existsSync(loginDir)) fs.mkdirSync(loginDir, { recursive: true });
+  fs.writeFileSync(
+    path.join(loginDir, `page.${ext}`),
+    `import Link from "next/link";
+
+export default function LoginPage() {
+  return (
+    <div className="flex flex-col items-center justify-center p-24 gap-4">
+      <h1 className="text-4xl font-bold tracking-tight">Login Page </h1>
+      <Link href="/" className="text-primary hover:underline font-medium italic text-xl">
+        Go to Home
+      </Link>
+    </div>
+  );
+}`,
+  );
+
+  console.log(
+    "   ✅ Routes updated: Login and Overview simplified as requested.",
+  );
+}

package/templates/providers-setup.js

@@ -0,0 +1,44 @@
+import fs from "fs";
+import path from "path";
+
+export default async function setup(projectName, isTypeScript) {
+  const ext = isTypeScript ? "tsx" : "jsx";
+  const appDir = path.join(projectName, "src", "app");
+  const layoutFilename = isTypeScript ? "layout.tsx" : "layout.js";
+  const layoutPath = path.join(appDir, layoutFilename);
+
+  const rootLayoutContent = `import "./globals.css";
+import ReduxProvider from "@/providers/ReduxProvider";
+import ReactQueryProvider from "@/providers/ReactQueryProvider";
+import { Toaster } from "sonner";
+
+export const metadata = {
+  title: "Professional Next.js Stack",
+  description: "Generated by Next.js Stack CLI",
+};
+
+export default function RootLayout({
+  children,
+}${isTypeScript ? ": { children: React.ReactNode }" : ""}) {
+  return (
+    <html lang="en">
+      <body className="antialiased">
+        <ReduxProvider>
+          <ReactQueryProvider>
+            {children}
+            <Toaster richColors position="top-right" />
+          </ReactQueryProvider>
+        </ReduxProvider>
+      </body>
+    </html>
+  );
+}
+`;
+
+  // Overwrite the root layout to remove custom fonts and use browser default
+  fs.writeFileSync(layoutPath, rootLayoutContent);
+
+  console.log(
+    `   ✅ Root Layout (${layoutFilename}) updated: Removed Google Fonts to use browser defaults.`,
+  );
+}

package/templates/radix-setup.js

@@ -0,0 +1,9 @@
+import { execSync } from "child_process";
+
+export default async function setup(projectName) {
+  // Optional: Install Radix UI primitives as needed
+  // run(`cd ${projectName} && npm install @radix-ui/react-navigation-menu @radix-ui/react-dropdown-menu`);
+  console.log(
+    "   ✅ Radix UI setup placeholder (Add your preferred primitives here).",
+  );
+}

package/templates/react-query-setup.js

@@ -0,0 +1,34 @@
+import fs from "fs";
+import path from "path";
+
+export default async function setup(projectName, isTypeScript) {
+  const ext = isTypeScript ? "tsx" : "jsx";
+  const providersDir = path.join(projectName, "src", "providers");
+  if (!fs.existsSync(providersDir))
+    fs.mkdirSync(providersDir, { recursive: true });
+
+  const queryProvider = `"use client";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { useState } from "react";
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+
+
+export default function ReactQueryProvider({ children }${isTypeScript ? ": { children: React.ReactNode }" : ""}) {
+    const [queryClient] = useState(() => new QueryClient());
+
+    return (
+        <QueryClientProvider client={queryClient}>
+            <ReactQueryDevtools initialIsOpen={false} />
+            {children}
+        </QueryClientProvider>
+    );
+}
+`;
+
+  fs.writeFileSync(
+    path.join(providersDir, `ReactQueryProvider.${ext}`),
+    queryProvider,
+  );
+  console.log("   ✅ ReactQueryProvider updated with Devtools.");
+}

package/templates/redux-setup.js

@@ -0,0 +1,79 @@
+import fs from "fs";
+import path from "path";
+
+export default async function setup(projectName, isTypeScript) {
+  const ext = isTypeScript ? "ts" : "js";
+  const jsxExt = isTypeScript ? "tsx" : "jsx";
+  const reduxDir = path.join(projectName, "src", "redux");
+  const providersDir = path.join(projectName, "src", "providers");
+  const slicesDir = path.join(reduxDir, "slices");
+
+  if (!fs.existsSync(slicesDir)) fs.mkdirSync(slicesDir, { recursive: true });
+  if (!fs.existsSync(providersDir))
+    fs.mkdirSync(providersDir, { recursive: true });
+
+  // 1. Create Counter Slice only
+  const counterSliceContent = `import { createSlice } from "@reduxjs/toolkit";
+
+const counterSlice = createSlice({
+  name: "counter",
+  initialState: { value: 0 },
+  reducers: {
+    increment: (state) => {
+      state.value += 1;
+    },
+    decrement: (state) => {
+      state.value -= 1;
+    },
+    incrementByAmount: (state, action) => {
+      state.value += action.payload;
+    },
+  },
+});
+
+export const { increment, decrement, incrementByAmount } = counterSlice.actions;
+export default counterSlice.reducer;
+`;
+
+  fs.writeFileSync(
+    path.join(slicesDir, `counterSlice.${ext}`),
+    counterSliceContent,
+  );
+
+  // 2. Store configuration
+  const storeConfig = `import { configureStore } from "@reduxjs/toolkit";
+import counterReducer from "./slices/counterSlice";
+
+export const store = configureStore({
+  reducer: {
+    counter: counterReducer,
+  },
+});
+
+${isTypeScript ? "export type RootState = ReturnType<typeof store.getState>;\nexport type AppDispatch = typeof store.dispatch;" : ""}
+`;
+
+  fs.writeFileSync(path.join(reduxDir, `store.${ext}`), storeConfig);
+
+  // 3. Redux Provider
+  const reduxProviderContent = `"use client";
+
+import { Provider } from "react-redux";
+import { store } from "@/redux/store";
+
+export default function ReduxProvider({ children }${isTypeScript ? ": { children: React.ReactNode }" : ""}) {
+    return (
+        <Provider store={store}>
+            {children}
+        </Provider>
+    );
+}
+`;
+
+  fs.writeFileSync(
+    path.join(providersDir, `ReduxProvider.${jsxExt}`),
+    reduxProviderContent,
+  );
+
+  console.log("   ✅ Redux setup updated with counterSlice only.");
+}

package/templates/utils-setup.js

@@ -0,0 +1,90 @@
+import fs from "fs";
+import path from "path";
+
+export default async function setup(projectName, isTypeScript) {
+  const ext = isTypeScript ? "ts" : "js";
+  const utilsDir = path.join(projectName, "src", "utils");
+
+  if (!fs.existsSync(utilsDir)) {
+    fs.mkdirSync(utilsDir, { recursive: true });
+  }
+
+  // 1. cn helper
+  const cnContent = `import { clsx ${isTypeScript ? ", type ClassValue" : ""} } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs${isTypeScript ? ": ClassValue[]" : ""}) {
+  return twMerge(clsx(inputs));
+}
+`;
+
+  // 2. localStorage helper
+  const localStoreContent = `export const setLocalStorage = (key${isTypeScript ? ": string" : ""}, value${isTypeScript ? ": any" : ""}) => {
+    if (typeof window !== "undefined") {
+        localStorage.setItem(key, JSON.stringify(value));
+    }
+};
+
+export const getLocalStorage = (key${isTypeScript ? ": string" : ""}) => {
+    if (typeof window !== "undefined") {
+        const data = localStorage.getItem(key);
+        if (data) {
+            try {
+                return JSON.parse(data);
+            } catch (err) {
+                return data;
+            }
+        }
+    }
+    return null;
+};
+
+export const removeLocalStorage = (key${isTypeScript ? ": string" : ""}) => {
+    if (typeof window !== "undefined") {
+        localStorage.removeItem(key);
+    }
+};
+`;
+
+  // 3. sessionStorage helper
+  const sessionStoreContent = `export const setSessionStorage = (key${isTypeScript ? ": string" : ""}, value${isTypeScript ? ": any" : ""}) => {
+    if (typeof window !== "undefined") {
+        sessionStorage.setItem(key, JSON.stringify(value));
+    }
+};
+
+export const getSessionStorage = (key${isTypeScript ? ": string" : ""}) => {
+    if (typeof window !== "undefined") {
+        const data = sessionStorage.getItem(key);
+        if (data) {
+            try {
+                return JSON.parse(data);
+            } catch (err) {
+                return data;
+            }
+        }
+    }
+    return null;
+};
+
+export const removeSessionStorage = (key${isTypeScript ? ": string" : ""}) => {
+    if (typeof window !== "undefined") {
+        sessionStorage.removeItem(key);
+    }
+};
+`;
+
+  fs.writeFileSync(path.join(utilsDir, `cn.${ext}`), cnContent);
+  fs.writeFileSync(
+    path.join(utilsDir, `localStorage.${ext}`),
+    localStoreContent,
+  );
+  fs.writeFileSync(
+    path.join(utilsDir, `sessionStorage.${ext}`),
+    sessionStoreContent,
+  );
+
+  console.log(
+    "   ✅ Utility helpers (cn, localStorage, sessionStorage) created in src/utils.",
+  );
+}

package/templates/vercel-setup.js

@@ -0,0 +1,11 @@
+import fs from "fs";
+import path from "path";
+
+export default async function setup(projectName) {
+  const vercelConfig = `{
+  "rewrites": [{ "source": "/(.*)", "destination": "/" }]
+}`;
+
+  fs.writeFileSync(path.join(projectName, "vercel.json"), vercelConfig);
+  console.log("   ✅ vercel.json created.");
+}

package/text.txt

@@ -0,0 +1 @@
+create-next-stack my-awesome-app