create-modern-react 1.0.0 → 2.0.0

package/README.md

@@ -1,113 +1,311 @@
-# create-modern-react
+<p align="center">
+  <img src="https://raw.githubusercontent.com/facebook/react/main/fixtures/dom/public/react-logo.svg" width="80" alt="React Logo" />
+</p>
 
-Create a modern React application with Vite, TypeScript, and your choice of modern libraries.
+<h1 align="center">create-modern-react</h1>
+
+<p align="center">
+  <strong>Production-ready React + TypeScript + Tailwind in 30 seconds</strong>
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/create-modern-react"><img src="https://img.shields.io/npm/v/create-modern-react.svg?style=flat-square&color=00d8ff" alt="npm version" /></a>
+  <a href="https://www.npmjs.com/package/create-modern-react"><img src="https://img.shields.io/npm/dm/create-modern-react.svg?style=flat-square&color=00d8ff" alt="npm downloads" /></a>
+  <a href="https://github.com/AabhashRai13/create-modern-react/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/create-modern-react.svg?style=flat-square&color=00d8ff" alt="license" /></a>
+</p>
+
+<p align="center">
+  <code>npx create-modern-react my-app</code>
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/create-modern-react">
+    <img src="https://img.shields.io/badge/View%20on-npm-CB3837?style=for-the-badge&logo=npm&logoColor=white" alt="View on npm" />
+  </a>
+</p>
+
+---
+
+## Why?
+
+```
+┌─────────────────────────────────────────────────────────────────────────┐
+│                                                                         │
+│   npm create vite@latest              vs       npx create-modern-react  │
+│                                                                         │
+│   ✗ Empty src/ folder                         ✓ Complete project        │
+│   ✗ No styling solution                       ✓ Tailwind CSS ready      │
+│   ✗ No routing                                ✓ Wouter + lazy loading   │
+│   ✗ No API layer                              ✓ Axios + interceptors    │
+│   ✗ No UI components                          ✓ Shadcn/ui (5 components)│
+│   ✗ No icons                                  ✓ Lucide React            │
+│   ✗ No toast notifications                    ✓ react-hot-toast         │
+│   ✗ No error boundary                         ✓ Built-in                │
+│   ✗ Basic ESLint                              ✓ 25+ rules configured    │
+│   ✗ ~2 hours setup                            ✓ 30 seconds              │
+│                                                                         │
+└─────────────────────────────────────────────────────────────────────────┘
+```
+
+**Stop configuring. Start building.**
+
+---
 
 ## Quick Start
 
 ```bash
 npx create-modern-react my-app
 cd my-app
-npm run dev
+yarn dev
+```
+
+That's it. Your app is running at `http://localhost:3000`
+
+---
+
+## What's Included
+
+### Core Stack (Every Project)
+
+| Technology | Version | Purpose |
+|------------|---------|---------|
+| **React** | 18.3 | Latest features, concurrent rendering |
+| **TypeScript** | 5.5 | Strict mode, full type safety |
+| **Vite + SWC** | 5.4 | 20x faster than Babel |
+| **Tailwind CSS** | 3.4 | Dark mode, CSS variables |
+| **Shadcn/ui** | Latest | Button, Input, Card, Skeleton, Separator |
+| **Wouter** | 3.3 | 2KB router (vs 28KB React Router) |
+| **Axios** | 1.7 | Interceptors, cancel tokens |
+| **Lucide React** | Latest | Beautiful, consistent icons |
+
+### Build Optimizations
+
+```
+┌────────────────────┬────────────────────────────────────────┐
+│ SWC Compiler       │ 20x faster than Babel                  │
+├────────────────────┼────────────────────────────────────────┤
+│ Gzip Compression   │ Pre-compressed .gz files (1KB thresh.) │
+├────────────────────┼────────────────────────────────────────┤
+│ Chunk Splitting    │ Separate vendor + router bundles       │
+├────────────────────┼────────────────────────────────────────┤
+│ Tree Shaking       │ Dead code elimination                  │
+├────────────────────┼────────────────────────────────────────┤
+│ Console Removal    │ Auto-stripped in production            │
+├────────────────────┼────────────────────────────────────────┤
+│ SVG Components     │ Import SVGs as React components        │
+└────────────────────┴────────────────────────────────────────┘
+```
+
+### Optional Features
+
+Select during project creation:
+
+```
+[ ] Redux Toolkit + Redux Persist ── State management with persistence
+[ ] Ant Design v5 ───────────────── Enterprise UI (replaces Shadcn/ui)
+[ ] Husky + lint-staged ─────────── Git hooks for code quality
+```
+
+---
+
+## Generated Structure
+
+```
+my-app/
+├── src/
+│   ├── components/
+│   │   ├── ui/                 # Shadcn/ui components
+│   │   │   ├── button.tsx
+│   │   │   ├── input.tsx
+│   │   │   ├── card.tsx
+│   │   │   ├── skeleton.tsx
+│   │   │   └── separator.tsx
+│   │   └── layout/
+│   │       ├── root-layout.tsx
+│   │       └── error-boundary.tsx
+│   ├── hooks/
+│   │   ├── use-loader.ts       # Loading state management
+│   │   ├── use-debounce.ts     # Value debouncing
+│   │   └── use-cancel-token.ts # Axios request cancellation
+│   ├── routes/
+│   │   └── index.tsx           # Wouter + lazy loading
+│   ├── screens/
+│   │   ├── home/
+│   │   └── not-found/
+│   ├── services/
+│   │   ├── api/
+│   │   │   ├── axios-instance.ts
+│   │   │   └── api-helpers.ts  # getApi, postApi, patchApi...
+│   │   └── alertify-services.ts
+│   ├── providers/
+│   │   └── theme-provider.tsx
+│   ├── lib/
+│   │   └── utils.ts            # cn() utility
+│   └── types/
+├── vite.config.ts              # SWC + SVGR + Compression
+├── tailwind.config.js          # Dark mode + CSS variables
+├── tsconfig.json               # Strict mode + path aliases
+└── .eslintrc.cjs               # 25+ rules configured
 ```
 
+---
+
 ## Features
 
-🚀 **Modern Stack**: Vite + React 18 + TypeScript
-📦 **Interactive Setup**: Choose your preferred libraries
-🎨 **UI Libraries**: Ant Design, Material-UI, Chakra UI support
-🎯 **State Management**: Redux Toolkit, Zustand, Jotai options
-🛣️ **Routing**: React Router or Wouter
-🔧 **Development Tools**: ESLint, Prettier, Storybook, Testing
-🎨 **Styling**: Tailwind CSS, CSS Modules, Styled Components
-📱 **PWA Ready**: Optional Progressive Web App support
+### SVG as React Components
 
-## Usage
+```tsx
+import Logo from './logo.svg?react';
 
-### Basic Usage
+<Logo className="h-8 w-8 text-primary" />
+```
 
-```bash
-npx create-modern-react my-project
+### Type-Safe API Layer
+
+```tsx
+import { getApi, postApi } from '~/services/api';
+
+const users = await getApi<User[]>('/users');
+const newUser = await postApi<User>('/users', { name: 'John' });
 ```
 
-### With Options
+### Toast Notifications
 
-```bash
-npx create-modern-react my-project --skip-install --skip-git
+```tsx
+import { Alertify } from '~/services/alertify-services';
+
+Alertify.success('Saved successfully');
+Alertify.error('Something went wrong');
+Alertify.loading('Processing...');
 ```
 
-## Interactive Prompts
+### Custom Hooks
 
-The CLI will guide you through selecting:
+```tsx
+// Loading state
+const [isLoading, startLoader, endLoader] = useLoader();
 
-- **Project Name**: Your project directory name
-- **Package Manager**: npm, yarn, or pnpm
-- **UI Library**: Ant Design, Material-UI, Chakra UI, or none
-- **CSS Framework**: Tailwind CSS, CSS Modules, Styled Components, or plain CSS
-- **State Management**: Redux Toolkit, Zustand, Jotai, or React state only
-- **Data Fetching**: React Query, SWR, Apollo Client, or Fetch API
-- **Routing**: React Router, Wouter, or none
-- **Development Tools**: Storybook, ESLint/Prettier, Husky, Testing
-- **Icons**: Lucide React, React Icons, Heroicons, or none
-- **PWA**: Progressive Web App features
-- **Git**: Initialize Git repository
+const fetchData = async () => {
+  startLoader();
+  try {
+    await getApi('/users');
+  } finally {
+    endLoader();
+  }
+};
 
-## Template Combinations
+// Debounced search
+const debouncedQuery = useDebounce(searchQuery, 300);
 
-### Minimal Setup
+// Cancel requests on unmount
+const { cancelToken, cancel } = useCancelToken();
+```
 
-- Vite + React + TypeScript + Tailwind CSS
+### Path Aliases
 
-### Enterprise Ready
+```tsx
+// ❌ Instead of this:
+import { Button } from '../../../components/ui/button';
 
-- Vite + React + TypeScript + Ant Design + Redux Toolkit + React Query + React Router
+// ✅ Write this:
+import { Button } from '~/components/ui';
+```
+
+---
+
+## Scripts
+
+| Command | Description |
+|---------|-------------|
+| `yarn dev` | Start dev server (port 3000) |
+| `yarn build` | Production build with gzip |
+| `yarn preview` | Preview production build |
+| `yarn lint` | Run ESLint |
+| `yarn lint:fix` | Fix ESLint issues |
+| `yarn format` | Format with Prettier |
+
+---
+
+## Build Output
+
+```
+dist/
+├── assets/
+│   ├── index-[hash].js         # Main bundle
+│   ├── index-[hash].js.gz      # Gzipped (~70% smaller)
+│   ├── vendor-[hash].js        # React + ReactDOM (cached)
+│   ├── router-[hash].js        # Wouter (cached)
+│   └── index-[hash].css.gz
+└── index.html
+```
 
-### Modern Stack
+---
 
-- Vite + React + TypeScript + Tailwind + Zustand + React Query + Wouter
+## Comparison
 
-### Full Featured
+| Feature | Vite | CRA | **create-modern-react** |
+|---------|:----:|:---:|:-----------------------:|
+| Build Speed | Fast | Slow | **Fastest (SWC)** |
+| TypeScript | ✅ | ✅ | ✅ Strict |
+| Tailwind CSS | ❌ | ❌ | ✅ |
+| UI Components | ❌ | ❌ | ✅ |
+| Routing | ❌ | ❌ | ✅ |
+| API Layer | ❌ | ❌ | ✅ |
+| Toast System | ❌ | ❌ | ✅ |
+| Error Boundary | ❌ | ❌ | ✅ |
+| Gzip Build | ❌ | ❌ | ✅ |
+| SVG Components | ❌ | ✅ | ✅ |
+| Dark Mode | ❌ | ❌ | ✅ |
+| Path Aliases | ❌ | ❌ | ✅ |
+| **Setup Time** | ~1hr | ~2hr | **30 sec** |
 
-- All libraries with Storybook, testing, and PWA support
+---
+
+## Built With This Boilerplate
+
+<p align="center">
+  <a href="https://resumefreepro.com">
+    <strong>ResumeFreePro.com</strong>
+  </a>
+  <br />
+  <em>Free AI-powered resume builder — built entirely with create-modern-react</em>
+</p>
+
+> Want to showcase your project? [Open an issue](https://github.com/AabhashRai13/create-modern-react/issues) to get featured!
+
+---
 
 ## CLI Options
 
-- `--skip-install`: Skip automatic dependency installation
-- `--skip-git`: Skip Git repository initialization
-- `--template <name>`: Use a specific template (future feature)
+```bash
+npx create-modern-react my-app              # Interactive mode
+npx create-modern-react my-app --skip-install  # Skip npm install
+npx create-modern-react my-app --skip-git      # Skip git init
+```
+
+---
 
 ## Requirements
 
-- Node.js 16.0.0 or higher
+- Node.js **18+**
 - npm, yarn, or pnpm
 
-## Generated Project Structure
-
-```
-my-app/
-├── public/
-├── src/
-│   ├── components/
-│   ├── hooks/
-│   ├── utils/
-│   ├── types/
-│   ├── styles/
-│   ├── App.tsx
-│   ├── main.tsx
-│   └── index.css
-├── package.json
-├── vite.config.ts
-├── tsconfig.json
-└── README.md
-```
-
-## Contributing
-
-1. Fork the repository
-2. Create your feature branch
-3. Commit your changes
-4. Push to the branch
-5. Create a Pull Request
+---
 
 ## License
 
-MIT © [Your Name]
+MIT © [Aabhash Rai](https://github.com/AabhashRai13)
+
+---
+
+<p align="center">
+  <strong>From <code>npx</code> to production-ready in 30 seconds.</strong>
+</p>
+
+<p align="center">
+  <a href="https://github.com/AabhashRai13/create-modern-react">⭐ Star on GitHub</a>
+  &nbsp;·&nbsp;
+  <a href="https://github.com/AabhashRai13/create-modern-react/issues">Report Bug</a>
+  &nbsp;·&nbsp;
+  <a href="https://github.com/AabhashRai13/create-modern-react/issues">Request Feature</a>
+</p>

package/bin/index.js

@@ -1,26 +1,26 @@
 #!/usr/bin/env node
 
-const { program } = require("commander");
-const chalk = require("chalk");
-const { createProject } = require("../lib/prompts");
+const { program } = require('commander');
+const chalk = require('chalk');
+const { createProject } = require('../lib/prompts');
 
 program
-  .name("create-modern-react")
+  .name('create-modern-react')
   .description(
-    "Create a modern React application with Vite, TypeScript, and your choice of modern libraries",
+    'Create production-ready React + TypeScript + Tailwind applications in seconds'
   )
-  .version("1.0.0")
-  .argument("[project-name]", "name of the project")
-  .option("-t, --template <template>", "use a specific template")
-  .option("--skip-install", "skip dependency installation")
-  .option("--skip-git", "skip git initialization")
+  .version('2.0.0')
+  .argument('[project-name]', 'name of the project')
+  .option('--skip-install', 'skip dependency installation')
+  .option('--skip-git', 'skip git initialization')
   .action(async (projectName, options) => {
-    console.log(chalk.blue.bold("\n🚀 Welcome to create-modern-react!\n"));
-
     try {
       await createProject(projectName, options);
     } catch (error) {
-      console.error(chalk.red("❌ Error creating project:"), error.message);
+      console.error(chalk.red('\n❌ Error creating project:'), error.message);
+      if (process.env.DEBUG) {
+        console.error(error.stack);
+      }
       process.exit(1);
     }
   });

package/lib/install.js

@@ -1,15 +1,15 @@
-const { spawn } = require("child_process");
-const chalk = require("chalk");
+const { spawn } = require('child_process');
+const chalk = require('chalk');
 
 function runCommand(command, args, cwd) {
   return new Promise((resolve, reject) => {
     const child = spawn(command, args, {
       cwd,
-      stdio: "inherit",
-      shell: true,
+      stdio: 'inherit',
+      shell: true
     });
 
-    child.on("close", (code) => {
+    child.on('close', (code) => {
       if (code === 0) {
         resolve();
       } else {
@@ -17,43 +17,114 @@ function runCommand(command, args, cwd) {
       }
     });
 
-    child.on("error", (error) => {
+    child.on('error', (error) => {
       reject(error);
     });
   });
 }
 
+// Check if a command is available
+function isCommandAvailable(command) {
+  return new Promise((resolve) => {
+    const child = spawn(command, ['--version'], {
+      stdio: 'ignore',
+      shell: true
+    });
+
+    child.on('close', (code) => {
+      resolve(code === 0);
+    });
+
+    child.on('error', () => {
+      resolve(false);
+    });
+  });
+}
+
+// Get the best available package manager with fallback
+async function getAvailablePackageManager(preferredManager) {
+  console.log(chalk.blue(`🔍 Checking for ${preferredManager}...`));
+
+  // Check if preferred package manager is available
+  if (await isCommandAvailable(preferredManager)) {
+    console.log(chalk.green(`✅ ${preferredManager} is available`));
+    return preferredManager;
+  }
+
+  // Fallback logic
+  console.log(chalk.yellow(`⚠️  ${preferredManager} is not installed`));
+
+  if (preferredManager !== 'npm') {
+    console.log(chalk.blue('🔄 Falling back to npm...'));
+
+    if (await isCommandAvailable('npm')) {
+      console.log(chalk.green('✅ npm is available, using npm instead'));
+      return 'npm';
+    } else {
+      throw new Error('Neither ' + preferredManager + ' nor npm is available');
+    }
+  } else {
+    throw new Error('npm is not available');
+  }
+}
+
+// Get install command and args for package manager
+function getInstallCommand(packageManager) {
+  switch (packageManager) {
+    case 'yarn':
+      return { command: 'yarn', args: ['install'] };
+    case 'pnpm':
+      return { command: 'pnpm', args: ['install'] };
+    case 'npm':
+    default:
+      return { command: 'npm', args: ['install'] };
+  }
+}
+
 async function installDependencies(config) {
-  const { projectPath, packageManager } = config;
+  const { projectPath, packageManager: preferredManager, projectName } = config;
 
-  console.log(chalk.blue("\n📦 Installing dependencies..."));
+  console.log(chalk.blue('\n📦 Installing dependencies...'));
 
   try {
-    const installCommand =
-      packageManager === "yarn"
-        ? "yarn"
-        : packageManager === "pnpm"
-          ? "pnpm"
-          : "npm";
-    const installArgs =
-      packageManager === "npm"
-        ? ["install"]
-        : packageManager === "pnpm"
-          ? ["install"]
-          : [];
-
-    await runCommand(installCommand, installArgs, projectPath);
-
-    console.log(chalk.green("✅ Dependencies installed successfully!"));
+    // Get the best available package manager
+    const availableManager = await getAvailablePackageManager(preferredManager);
+    const { command, args } = getInstallCommand(availableManager);
+
+    // Update config with actual package manager used
+    config.actualPackageManager = availableManager;
+
+    console.log(chalk.blue(`📥 Running: ${command} ${args.join(' ')}`));
+    await runCommand(command, args, projectPath);
+
+    console.log(chalk.green('✅ Dependencies installed successfully!'));
+
+    // Show different message if fallback was used
+    if (availableManager !== preferredManager) {
+      console.log(chalk.yellow(`ℹ️  Note: Used ${availableManager} instead of ${preferredManager}`));
+    }
+
   } catch (error) {
-    console.error(
-      chalk.red("❌ Failed to install dependencies:"),
-      error.message,
-    );
-    console.log(chalk.yellow("You can install them manually by running:"));
-    console.log(chalk.gray(`  cd ${config.projectName}`));
-    console.log(chalk.gray(`  ${packageManager} install`));
+    console.error(chalk.red('❌ Failed to install dependencies:'), error.message);
+    console.log(chalk.yellow('\n🔧 You can install them manually by running:'));
+    console.log(chalk.gray(`  cd ${projectName}`));
+
+    // Show command for the originally preferred package manager
+    if (preferredManager === 'yarn') {
+      console.log(chalk.gray(`  yarn install`));
+    } else if (preferredManager === 'pnpm') {
+      console.log(chalk.gray(`  pnpm install`));
+    } else {
+      console.log(chalk.gray(`  npm install`));
+    }
+
+    console.log(chalk.yellow('\n💡 Make sure you have the package manager installed:'));
+    if (preferredManager === 'yarn') {
+      console.log(chalk.gray(`  npm install -g yarn`));
+    } else if (preferredManager === 'pnpm') {
+      console.log(chalk.gray(`  npm install -g pnpm`));
+    }
   }
 }
 
-module.exports = { installDependencies, runCommand };
+module.exports = { installDependencies, runCommand };