create-vite-redux 1.0.0

package/README.md

@@ -0,0 +1,98 @@
+# create-vite-redux
+
+> Scaffold a production-ready React app in seconds.
+
+```bash
+npm create vite-redux my-app
+```
+
+## What you get
+
+| Tool | Role |
+|------|------|
+| React 19 + Vite 6 | UI & bundler |
+| TypeScript 5 | Static types |
+| Redux Toolkit 2 | Global state |
+| RTK Query | Data fetching & caching |
+| React Router v7 | Client-side routing |
+| Tailwind CSS v4 | Utility-first styling |
+| shadcn/ui (new-york) | Pre-built accessible components |
+| Zod 3 | Runtime validation + type inference |
+| React Hook Form 7 | Form state management |
+| ESLint v9 + Prettier | Linting & formatting |
+
+## Usage
+
+```bash
+# npm
+npm create vite-redux my-app
+
+# pnpm
+pnpm create vite-redux my-app
+
+# yarn
+yarn create vite-redux my-app
+```
+
+You'll be prompted for one option:
+
+```
+✔ Include example auth feature?  › Yes / No
+```
+
+Everything else — TypeScript, Redux, RTK Query, Tailwind, shadcn, Zod, React Router, ESLint, Prettier — is always included.
+
+## Get started
+
+```bash
+cd my-app
+npm install
+npm run dev
+```
+
+## Project structure
+
+```
+src/
+├── components/
+│   ├── ui/           ← pre-baked shadcn components
+│   └── layout/       ← Header, Footer
+├── features/
+│   ├── counter/      ← Redux slice demo
+│   └── auth/         ← optional (LoginForm + Zod + RTK Query)
+├── hooks/
+│   └── redux.ts      ← useAppDispatch, useAppSelector
+├── router/
+│   └── index.tsx     ← React Router config
+├── services/
+│   └── api.ts        ← RTK Query base API
+├── store/
+│   └── index.ts      ← Redux store
+├── lib/
+│   └── utils.ts      ← cn() utility
+├── App.tsx
+├── main.tsx
+└── index.css         ← Tailwind v4 + shadcn OKLCH tokens
+```
+
+## Environment variables
+
+Copy `.env.example` to `.env` and set your API URL:
+
+```
+VITE_API_URL=http://localhost:3000/api
+```
+
+## Scripts
+
+| Script | Description |
+|--------|-------------|
+| `npm run dev` | Start dev server |
+| `npm run build` | Production build |
+| `npm run lint` | Run ESLint |
+| `npm run format` | Run Prettier |
+| `npm run preview` | Preview production build |
+
+## License
+
+MIT

package/index.js

@@ -0,0 +1,169 @@
+#!/usr/bin/env node
+
+import fs from 'fs-extra'
+import path from 'path'
+import { fileURLToPath } from 'url'
+import prompts from 'prompts'
+import pc from 'picocolors'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function toValidPackageName(name) {
+  return name
+    .trim()
+    .toLowerCase()
+    .replace(/\s+/g, '-')
+    .replace(/[^a-z0-9-]/g, '')
+}
+
+function replaceInFile(filePath, replacements) {
+  if (!fs.existsSync(filePath)) return
+  let content = fs.readFileSync(filePath, 'utf-8')
+  for (const [from, to] of replacements) {
+    content = content.replaceAll(from, to)
+  }
+  fs.writeFileSync(filePath, content, 'utf-8')
+}
+
+// Remove lines that contain a specific string (used to strip auth imports/reducers)
+function removeLinesContaining(filePath, ...patterns) {
+  if (!fs.existsSync(filePath)) return
+  const lines = fs.readFileSync(filePath, 'utf-8').split('\n')
+  const filtered = lines.filter((line) => !patterns.some((p) => line.includes(p)))
+  fs.writeFileSync(filePath, filtered.join('\n'), 'utf-8')
+}
+
+// ─── Banner ───────────────────────────────────────────────────────────────────
+
+console.log()
+console.log(pc.bold(pc.cyan('┌─────────────────────────────────────┐')))
+console.log(pc.bold(pc.cyan('│') + pc.bold('      create-vite-redux  v1.0.0      ') + pc.bold(pc.cyan('│'))))
+console.log(pc.bold(pc.cyan('└─────────────────────────────────────┘')))
+console.log()
+
+// ─── Get project name from argv or prompt ─────────────────────────────────────
+
+let targetDir = process.argv[2]
+
+const response = await prompts(
+  [
+    {
+      type: targetDir ? null : 'text',
+      name: 'projectName',
+      message: 'Project name:',
+      initial: 'my-app',
+      validate: (v) => (v.trim().length > 0 ? true : 'Project name cannot be empty'),
+    },
+    {
+      type: 'confirm',
+      name: 'includeAuth',
+      message: 'Include example auth feature? (LoginForm + Zod + RTK Query)',
+      initial: true,
+    },
+  ],
+  {
+    onCancel() {
+      console.log(pc.red('\n✖ Cancelled'))
+      process.exit(1)
+    },
+  }
+)
+
+const projectName = targetDir ?? response.projectName
+const packageName = toValidPackageName(projectName)
+const { includeAuth } = response
+
+// ─── Resolve paths ────────────────────────────────────────────────────────────
+
+const cwd = process.cwd()
+const dest = path.resolve(cwd, projectName)
+const templateDir = path.resolve(__dirname, 'templates', 'react-redux-tw')
+
+// ─── Safety check ─────────────────────────────────────────────────────────────
+
+if (fs.existsSync(dest)) {
+  const { overwrite } = await prompts({
+    type: 'confirm',
+    name: 'overwrite',
+    message: `Target directory ${pc.yellow(projectName)} already exists. Overwrite?`,
+    initial: false,
+  })
+  if (!overwrite) {
+    console.log(pc.red('\n✖ Aborted'))
+    process.exit(1)
+  }
+  fs.removeSync(dest)
+}
+
+// ─── Copy template ────────────────────────────────────────────────────────────
+
+console.log()
+console.log(pc.dim('  Setting up project…'))
+
+await fs.copy(templateDir, dest, {
+  // preserve dotfiles (.gitignore, .env.example, etc.)
+  filter: () => true,
+})
+
+// ─── Rename _package.json → package.json ─────────────────────────────────────
+
+const pkgSrc = path.join(dest, '_package.json')
+const pkgDest = path.join(dest, 'package.json')
+fs.moveSync(pkgSrc, pkgDest)
+
+// ─── Rename _gitignore → .gitignore ──────────────────────────────────────────
+// npm strips .gitignore from tarballs, so it's stored as _gitignore in the template
+
+const gitignoreSrc = path.join(dest, '_gitignore')
+const gitignoreDest = path.join(dest, '.gitignore')
+if (fs.existsSync(gitignoreSrc)) {
+  fs.moveSync(gitignoreSrc, gitignoreDest)
+}
+
+// ─── Inject project name ──────────────────────────────────────────────────────
+
+const nameReplacements = [['{{PROJECT_NAME}}', projectName]]
+
+replaceInFile(pkgDest, [['{{PROJECT_NAME}}', packageName]])
+replaceInFile(path.join(dest, 'index.html'), nameReplacements)
+replaceInFile(path.join(dest, 'README.md'), nameReplacements)
+replaceInFile(path.join(dest, 'src', 'router', 'index.tsx'), nameReplacements)
+replaceInFile(path.join(dest, 'src', 'components', 'layout', 'Header.tsx'), nameReplacements)
+
+// ─── Remove auth feature if not included ──────────────────────────────────────
+
+if (!includeAuth) {
+  fs.removeSync(path.join(dest, 'src', 'features', 'auth'))
+
+  // Remove auth import and reducer from store/index.ts
+  removeLinesContaining(
+    path.join(dest, 'src', 'store', 'index.ts'),
+    "import authReducer from '@/features/auth/authSlice'",
+    'auth: authReducer,'
+  )
+}
+
+// ─── Done ─────────────────────────────────────────────────────────────────────
+
+console.log()
+console.log('  ' + pc.green('✔') + pc.bold(' Done! Your project is ready.'))
+console.log()
+console.log('  ' + pc.dim('Included:'))
+console.log('  ' + pc.dim('  ·') + ' React 19 + Vite 6 + TypeScript')
+console.log('  ' + pc.dim('  ·') + ' Redux Toolkit + RTK Query')
+console.log('  ' + pc.dim('  ·') + ' React Router v7')
+console.log('  ' + pc.dim('  ·') + ' Tailwind CSS v4 + shadcn/ui (new-york)')
+console.log('  ' + pc.dim('  ·') + ' Zod + React Hook Form')
+console.log('  ' + pc.dim('  ·') + ' ESLint v9 + Prettier')
+if (includeAuth) {
+  console.log('  ' + pc.dim('  ·') + ' Auth feature (LoginForm + authSlice + authApi)')
+}
+console.log()
+console.log('  ' + pc.bold('Get started:'))
+console.log()
+console.log('  ' + pc.cyan(`cd ${projectName}`))
+console.log('  ' + pc.cyan('npm install'))
+console.log('  ' + pc.cyan('npm run dev'))
+console.log()

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "create-vite-redux",
+  "version": "1.0.0",
+  "description": "Scaffold a React 19 + Vite 6 + TypeScript + Redux Toolkit + RTK Query + Tailwind v4 + shadcn/ui + Zod + RHF project",
+  "type": "module",
+  "bin": {
+    "create-vite-redux": "index.js"
+  },
+  "files": [
+    "index.js",
+    "templates"
+  ],
+  "keywords": [
+    "react",
+    "vite",
+    "redux",
+    "tailwind",
+    "shadcn",
+    "template",
+    "starter",
+    "scaffold"
+  ],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "fs-extra": "^11",
+    "picocolors": "^1",
+    "prompts": "^2"
+  }
+}

package/templates/react-redux-tw/.env.example

@@ -0,0 +1 @@
+VITE_API_URL=http://localhost:3000/api

package/templates/react-redux-tw/.prettierignore

@@ -0,0 +1,2 @@
+dist/
+node_modules/

package/templates/react-redux-tw/.prettierrc

@@ -0,0 +1,8 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 100,
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

package/templates/react-redux-tw/README.md

@@ -0,0 +1,81 @@
+# {{PROJECT_NAME}}
+
+A React 19 app scaffolded with [create-vite-redux](https://www.npmjs.com/package/create-vite-redux).
+
+## Stack
+
+| Tool | Role |
+|------|------|
+| React 19 + Vite 6 | UI & bundler |
+| TypeScript 5 | Static types |
+| Redux Toolkit 2 + RTK Query | State & data fetching |
+| React Router v7 | Routing |
+| Tailwind CSS v4 + shadcn/ui | Styling & components |
+| Zod + React Hook Form | Validation & forms |
+
+## Getting started
+
+```bash
+npm install
+npm run dev
+```
+
+## Project structure
+
+```
+src/
+├── components/
+│   ├── ui/           ← shadcn/ui components (button, card, form, dialog, sonner…)
+│   └── layout/       ← Header, Footer
+├── features/
+│   ├── counter/      ← Redux slice demo — start here
+│   └── auth/         ← Auth feature (if included at scaffold time)
+├── hooks/
+│   └── redux.ts      ← useAppDispatch, useAppSelector
+├── router/
+│   └── index.tsx     ← Add new routes here
+├── services/
+│   └── api.ts        ← RTK Query base API — inject endpoints into this
+├── store/
+│   └── index.ts      ← Redux store
+├── lib/
+│   └── utils.ts      ← cn() helper
+├── App.tsx           ← Root layout (Header + Footer + <Outlet />)
+├── main.tsx          ← Entry point
+└── index.css         ← Tailwind v4 + OKLCH design tokens
+```
+
+## Environment variables
+
+```bash
+cp .env.example .env
+```
+
+| Variable | Description |
+|----------|-------------|
+| `VITE_API_URL` | Base URL for RTK Query (`/api` by default) |
+
+## Adding a new feature
+
+1. Create `src/features/my-feature/mySlice.ts` — define your slice
+2. Register the reducer in `src/store/index.ts`
+3. Create `src/features/my-feature/myApi.ts` — inject RTK Query endpoints into `api`
+4. Add a route in `src/router/index.tsx`
+
+## Adding shadcn components
+
+Although components are pre-baked, you can add more via the shadcn CLI:
+
+```bash
+npx shadcn@latest add <component>
+```
+
+## Scripts
+
+| Script | Description |
+|--------|-------------|
+| `npm run dev` | Start dev server |
+| `npm run build` | Production build |
+| `npm run lint` | Run ESLint |
+| `npm run format` | Run Prettier |
+| `npm run preview` | Preview production build |

package/templates/react-redux-tw/_gitignore

@@ -0,0 +1,31 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Environment files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local

package/templates/react-redux-tw/_package.json

@@ -0,0 +1,49 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "format": "prettier --write .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.0.0",
+    "@reduxjs/toolkit": "^2.0.0",
+    "react-redux": "^9.0.0",
+    "react-hook-form": "^7.0.0",
+    "@hookform/resolvers": "^3.0.0",
+    "zod": "^3.0.0",
+    "clsx": "^2.0.0",
+    "tailwind-merge": "^2.0.0",
+    "class-variance-authority": "^0.7.0",
+    "lucide-react": "latest",
+    "sonner": "^1.0.0",
+    "@radix-ui/react-label": "^2.0.0",
+    "@radix-ui/react-slot": "^1.0.0",
+    "@radix-ui/react-dialog": "^1.0.0"
+  },
+  "devDependencies": {
+    "vite": "^6.0.0",
+    "@vitejs/plugin-react": "^4.0.0",
+    "@tailwindcss/vite": "^4.0.0",
+    "tailwindcss": "^4.0.0",
+    "tw-animate-css": "^1.0.0",
+    "typescript": "^5.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "eslint": "^9.0.0",
+    "@eslint/js": "^9.0.0",
+    "globals": "^15.0.0",
+    "typescript-eslint": "^8.0.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.0",
+    "prettier": "^3.0.0",
+    "prettier-plugin-tailwindcss": "^0.6.0"
+  }
+}

package/templates/react-redux-tw/eslint.config.js

@@ -0,0 +1,25 @@
+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'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+    },
+  }
+)

package/templates/react-redux-tw/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <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" />
+    <title>{{PROJECT_NAME}}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/react-redux-tw/src/App.tsx

@@ -0,0 +1,15 @@
+import { Outlet } from 'react-router-dom'
+import { Header } from '@/components/layout/Header'
+import { Footer } from '@/components/layout/Footer'
+
+export default function App() {
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Header />
+      <main className="flex-1 flex flex-col items-center justify-center gap-8 p-8">
+        <Outlet />
+      </main>
+      <Footer />
+    </div>
+  )
+}

package/templates/react-redux-tw/src/components/layout/Footer.tsx

@@ -0,0 +1,11 @@
+export function Footer() {
+  return (
+    <footer className="border-t border-border mt-auto">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-14 flex items-center justify-center">
+        <p className="text-sm text-muted-foreground">
+          Built with create-my-stack
+        </p>
+      </div>
+    </footer>
+  )
+}

package/templates/react-redux-tw/src/components/layout/Header.tsx

@@ -0,0 +1,16 @@
+import { Link } from 'react-router-dom'
+
+export function Header() {
+  return (
+    <header className="border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 sticky top-0 z-50">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-14 flex items-center justify-between">
+        <Link to="/" className="font-semibold text-foreground hover:text-foreground/80 transition-colors">
+          {{PROJECT_NAME}}
+        </Link>
+        <nav className="flex items-center gap-4 text-sm text-muted-foreground">
+          <Link to="/" className="hover:text-foreground transition-colors">Home</Link>
+        </nav>
+      </div>
+    </header>
+  )
+}

package/templates/react-redux-tw/src/components/ui/button.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*=size-])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 aria-invalid:border-destructive cursor-pointer',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20',
+        outline:
+          'border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground',
+        secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+        icon: 'size-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'button'> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : 'button'
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }