Skip to content

Add state management setup options for Zustand, Redux Toolkit, and Jotai #42

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Add state management setup options for Zustand, Redux Toolkit, and Jotai #42

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4ebeb8f
Add state management setup options for Zustand, Redux Toolkit, and Jotai
SangramGhadage Sep 18, 2025
726f5ce
Merge branch 'master' into state_option
SangramGhadage Sep 18, 2025
cd181f7
Solved conflict issue
SangramGhadage Sep 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
350 changes: 199 additions & 151 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,170 +1,218 @@
#!/usr/bin/env node
import { input, select, confirm, checkbox } from "@inquirer/prompts"
import { select as selectPro } from 'inquirer-select-pro';
import { input, select, confirm, checkbox } from "@inquirer/prompts";
import { select as selectPro } from "inquirer-select-pro";
import path from "path";
import { run, createFolder, deleteFile } from './lib/utils.js';
import { initializePWA } from './lib/pwa.js';
import { setupCSSFramework } from './lib/css-frameworks.js';
import { createAxiosSetup, createAppComponent, createPWAReadme } from './lib/templates.js';
import { run, createFolder, deleteFile } from "./lib/utils.js";
import { initializePWA } from "./lib/pwa.js";
import { setupCSSFramework } from "./lib/css-frameworks.js";
import { setupStateManagement } from "./lib/store.js";
import { createAxiosSetup, createAppComponent, createPWAReadme } from "./lib/templates.js";
import { setupRoutingFramework } from "./lib/router-setup.js";
import { initializeGit } from "./lib/setup-git.js";

const getExtraPackages = async (input) => {
if (!input) return []; //if no input, return empty array
if (!input) return [];

const res = await fetch(
`https://registry.npmjs.org/-/v1/search?text=${encodeURIComponent(input)}`
);
const res = await fetch(
`https://registry.npmjs.org/-/v1/search?text=${encodeURIComponent(input)}`
);

const data = await res.json();
if (!data.objects) return []; //if no results, return empty array
const data = await res.json();
if (!data.objects) return [];

return data.objects.map((pkg) => ({
name: `${pkg.package.name} \x1b[2m${pkg.package.description || ''}\x1b[0m`, //x1b[2m makes text dim, \x1b[0m resets it]
value: pkg.package.name,
}))
return data.objects.map((pkg) => ({
name: `${pkg.package.name} \x1b[2m${pkg.package.description || ""}\x1b[0m`,
value: pkg.package.name,
}));
};

const GITHUB_REPO_URL = "https://github.com/harshgupta20/quickstart-react/issues";
const GITHUB_REPO_URL =
"https://github.com/harshgupta20/quickstart-react/issues";

(async () => {
// 1. Collect user inputs
const projectName = await input({ message: "Enter project name:", required: true });
const language = await select({
message: "Choose project language:",
choices: ["TypeScript", "JavaScript"]
})
const cssFramework = await select({
message: "Choose a CSS framework:",
choices: ["Tailwind", "Bootstrap (CDN)", "React Bootstrap", "MUI"]
});
const routingFramework = await select({
message: "Choose a routing framework:",
choices: ["React Router", "Tanstack Router",]
})
const isPWA = await confirm({ message: "Do you want to make this a Progressive Web App (PWA)?", default: false });

const packages = await checkbox({
message: "Select optional packages:",
choices: [
{ name: "Axios", value: "axios" },
{ name: "React Icons", value: "react-icons" },
{ name: "React Hook Form", value: "react-hook-form" },
{ name: "Yup", value: "yup" },
{ name: "Formik", value: "formik" },
{ name: "Moment.js", value: "moment" }
]
});

const extraPackages = await selectPro({
message: 'Search extra packages to add',
multiple: true,
clearInputWhenSelected: true,
pageSize: 10,
options: getExtraPackages,
theme: {
style: {
renderSelectedOptions: (selectedOptions) => {
return selectedOptions.map(option => option.value).join(', ');
}
}
}
});

let selectedExtraPackages = [];
if (extraPackages.length > 0) {
selectedExtraPackages = await checkbox({
message: "These extra packages will be installed:",
choices: extraPackages.map(pkg => ({
name: pkg,
value: pkg,
checked: true,
})),
})
}

const projectPath = path.join(process.cwd(), projectName);
const isTS = language == "TypeScript";

console.log(`\n🚀 Creating ${projectName}${isPWA ? ' with PWA capabilities' : ''}...`);

// 2. Create Vite project
run(`npm create vite@latest ${projectName} -- --template ${isTS ? "react-ts" : "react"}`);

// 3. Create all necessary folder structure first
const folders = ["components", "pages", "hooks", "store", "utils", "assets"];

// Create the routes folder (for tanstack router) and the necessary packages for Router setup
const routingConfig = {
"Tanstack Router": {
folders: ["routes"],
packages: ["@tanstack/react-router", "@tanstack/react-router-devtools"],
devPackages: ["@tanstack/router-plugin"]
// 1. Collect user inputs
const projectName = await input({
message: "Enter project name:",
required: true,
});

const language = await select({
message: "Choose project language:",
choices: ["TypeScript", "JavaScript"],
});

const cssFramework = await select({
message: "Choose a CSS framework:",
choices: ["Tailwind", "Bootstrap (CDN)", "React Bootstrap", "MUI"],
});

const routingFramework = await select({
message: "Choose a routing framework:",
choices: ["React Router", "Tanstack Router"],
});

const stateManagement = await select({
message: "Choose a state management library:",
choices: ["None", "Zustand", "Redux Toolkit", "Jotai"],
});

const isPWA = await confirm({
message: "Do you want to make this a Progressive Web App (PWA)?",
default: false,
});

const packages = await checkbox({
message: "Select optional packages:",
choices: [
{ name: "Axios", value: "axios" },
{ name: "React Icons", value: "react-icons" },
{ name: "React Hook Form", value: "react-hook-form" },
{ name: "Yup", value: "yup" },
{ name: "Formik", value: "formik" },
{ name: "Moment.js", value: "moment" },
],
});

const extraPackages = await selectPro({
message: "Search extra packages to add",
multiple: true,
clearInputWhenSelected: true,
pageSize: 10,
options: getExtraPackages,
theme: {
style: {
renderSelectedOptions: (selectedOptions) => {
return selectedOptions.map((option) => option.value).join(", ");
},
"React Router": {
folders: [],
packages: ["react-router"],
devPackages: []
}
};

const config = routingConfig[routingFramework] || { folders: [], packages: [], devPackages: [] };
folders.push(...config.folders);
const routingPackages = config.packages;
folders.forEach((folder) => {
createFolder(path.join(projectPath, "src", folder));
},
},
});

let selectedExtraPackages = [];
if (extraPackages.length > 0) {
selectedExtraPackages = await checkbox({
message: "These extra packages will be installed:",
choices: extraPackages.map((pkg) => ({
name: pkg,
value: pkg,
checked: true,
})),
});

// 4. Install packages
const allPackages = [...routingPackages, ...packages, ...selectedExtraPackages];
if (allPackages.length > 0) {
run(`npm install ${allPackages.join(" ")}`, projectPath);
if (config.devPackages.length > 0) {
run(`npm i -D ${config.devPackages.join(" ")}`, projectPath);
}
}

const projectPath = path.join(process.cwd(), projectName);
const isTS = language === "TypeScript";

console.log(
`\n🚀 Creating ${projectName}${isPWA ? " with PWA capabilities" : ""}...`
);

// 2. Create Vite project
run(
`npm create vite@latest ${projectName} -- --template ${
isTS ? "react-ts" : "react"
}`
);

// 3. Create all necessary folder structure
const folders = ["components", "pages", "hooks", "utils", "assets"];

// Routing config
const routingConfig = {
"Tanstack Router": {
folders: ["routes"],
packages: [
"@tanstack/react-router",
"@tanstack/react-router-devtools",
],
devPackages: ["@tanstack/router-plugin"],
},
"React Router": {
folders: [],
packages: ["react-router-dom"],
devPackages: [],
},
};

const config =
routingConfig[routingFramework] || { folders: [], packages: [], devPackages: [] };
folders.push(...config.folders);
const routingPackages = config.packages;

folders.forEach((folder) => {
createFolder(path.join(projectPath, "src", folder));
});

// 4. Install packages
const defaultPackages = [];
if (stateManagement === "Zustand") defaultPackages.push("zustand");
if (stateManagement === "Redux Toolkit") defaultPackages.push("@reduxjs/toolkit", "react-redux");
if (stateManagement === "Jotai") defaultPackages.push("jotai");

const allPackages = [
...routingPackages,
...defaultPackages,
...packages,
...selectedExtraPackages,
];

if (allPackages.length > 0) {
run(`npm install ${allPackages.join(" ")}`, projectPath);
if (config.devPackages.length > 0) {
run(`npm i -D ${config.devPackages.join(" ")}`, projectPath);
}
}

// 5. Setup PWA if selected
if (isPWA) {
initializePWA(projectPath, projectName, isTS);
}

// 6. Setup CSS framework
setupCSSFramework(cssFramework, projectPath, isTS);

// 7. Setup Axios if selected
if (packages.includes("axios")) {
createAxiosSetup(projectPath, isTS);
}

// 8. Clean up default boilerplate files
deleteFile(path.join(projectPath, "src", "App.css"));
if (cssFramework !== "Tailwind") {
deleteFile(path.join(projectPath, "src", "index.css"));
}

// 9. Generate clean templates
createAppComponent(projectPath, projectName, isPWA, isTS);
setupRoutingFramework(projectPath, routingFramework, cssFramework, isTS);

// 10. Setup state management
setupStateManagement(stateManagement, projectPath, isTS);

// 11. Create comprehensive README
createPWAReadme(projectPath, projectName, cssFramework, packages, isPWA, isTS);

// 12. Initialize Git repository
initializeGit(projectPath);

// 13. Success message
console.log("\n✅ Setup complete!");
if (isPWA) {
console.log("📱 PWA features enabled - your app can be installed on mobile devices!");
console.log(
"⚠️ Important: Replace placeholder SVG icons with proper PNG icons for production"
);
}
console.log(`\nNext steps:\n cd ${projectName}\n npm install\n npm run dev`);

// 5. Setup PWA if selected (after folder structure is created)
if (isPWA) {
initializePWA(projectPath, projectName, isTS);
}

// 6. Setup CSS framework
setupCSSFramework(cssFramework, projectPath, isTS);

// 7. Setup Axios if selected
if (packages.includes("axios")) {
createAxiosSetup(projectPath, isTS);
}

// 8. Clean up default boilerplate files
deleteFile(path.join(projectPath, "src", "App.css"));
if (cssFramework !== "Tailwind") {
deleteFile(path.join(projectPath, "src", "index.css"));
}

// 9. Generate clean templates
createAppComponent(projectPath, projectName, isPWA, isTS);
setupRoutingFramework(projectPath, routingFramework, cssFramework, isTS);

// 10. Create comprehensive README
createPWAReadme(projectPath, projectName, cssFramework, packages, isPWA, isTS);

// 11. Initialize Git repository
initializeGit(projectPath);

// 12. Success message
console.log("\n✅ Setup complete!");
if (isPWA) {
console.log("📱 PWA features enabled - your app can be installed on mobile devices!");
console.log("⚠️ Important: Replace placeholder SVG icons with proper PNG icons for production");
}
console.log(`\nNext steps:\n cd ${projectName}\n npm install\n npm run dev`);
if (isPWA) {
console.log(
`\n📱 To test PWA:\n npm run build\n npm run preview\n Open http://localhost:5173 and test install/offline features`
);
}

if (isPWA) {
console.log(`\n📱 To test PWA:\n npm run build\n npm run preview\n Open http://localhost:5173 and test install/offline features`);
}

console.log(`\n🙌 Found a bug or want to improve this project?\nSubmit a PR or open an issue here: ${GITHUB_REPO_URL}\n`);
console.log("\nHappy coding! 🎉");
console.log(
`\n🙌 Found a bug or want to improve this project?\nSubmit a PR or open an issue here: ${GITHUB_REPO_URL}\n`
);
console.log("\nHappy coding! 🎉");
})();
Loading