create-modern-react 2.3.6 → 2.3.7

package/lib/setup.js

@@ -38,6 +38,8 @@ async function setupProject(config) {
     await fs.remove(path.join(projectPath, 'components.json'));
     await copyOptionalTemplate('antd', projectPath);
     await updateProvidersForAntd(projectPath);
+    // Replace components that use ~/components/ui with antd-compatible versions
+    await replaceComponentsForAntd(projectPath);
   }
 
   // Step 4: Copy optional feature templates
@@ -45,6 +47,10 @@ async function setupProject(config) {
     console.log(chalk.gray('  Adding Redux Toolkit + Redux Persist...'));
     await copyOptionalTemplate('redux', projectPath);
     await updateProvidersForRedux(projectPath, config.useAntd);
+    // If antd is selected, replace redux provider with antd-compatible version
+    if (config.useAntd) {
+      await replaceReduxProviderForAntd(projectPath);
+    }
   }
 
   if (config.useForms) {
@@ -210,6 +216,50 @@ export { ThemeProvider, useTheme } from './theme-provider';
   await fs.ensureDir(path.join(projectPath, 'src/styles'));
 }
 
+/**
+ * Replace components that import from ~/components/ui with antd-compatible versions
+ * These files use shadcn Button, Card, Skeleton which are removed when antd is selected
+ */
+async function replaceComponentsForAntd(projectPath) {
+  const replacementsPath = path.join(
+    __dirname,
+    '../templates/optional/antd-replacements'
+  );
+
+  // Files to replace: [source in antd-replacements, target in project]
+  const filesToReplace = [
+    ['components/layout/error-boundary.tsx', 'src/components/layout/error-boundary.tsx'],
+    ['routes/index.tsx', 'src/routes/index.tsx'],
+    ['screens/home/index.tsx', 'src/screens/home/index.tsx'],
+    ['screens/not-found/index.tsx', 'src/screens/not-found/index.tsx'],
+  ];
+
+  for (const [source, target] of filesToReplace) {
+    const sourcePath = path.join(replacementsPath, source);
+    const targetPath = path.join(projectPath, target);
+
+    if (await fs.pathExists(sourcePath)) {
+      await fs.copy(sourcePath, targetPath);
+    }
+  }
+}
+
+/**
+ * Replace Redux provider with antd-compatible version
+ * The base provider imports Skeleton from ~/components/ui which is removed for antd
+ */
+async function replaceReduxProviderForAntd(projectPath) {
+  const antdProviderPath = path.join(
+    __dirname,
+    '../templates/optional/antd-replacements/redux/provider.tsx'
+  );
+  const targetPath = path.join(projectPath, 'src/redux/provider.tsx');
+
+  if (await fs.pathExists(antdProviderPath)) {
+    await fs.copy(antdProviderPath, targetPath);
+  }
+}
+
 /**
  * Update providers/index.tsx to include Redux Provider
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-modern-react",
-  "version": "2.3.6",
+  "version": "2.3.7",
   "description": "Create production-ready React + TypeScript + Tailwind applications in seconds",
   "main": "bin/index.js",
   "bin": {

package/templates/optional/antd-replacements/components/layout/error-boundary.tsx

@@ -0,0 +1,63 @@
+import { Component, type ErrorInfo, type ReactNode } from 'react';
+import { AlertTriangle, RefreshCw } from 'lucide-react';
+import { Button } from 'antd';
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  public state: State = {
+    hasError: false,
+    error: null,
+  };
+
+  public static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error('ErrorBoundary caught an error:', error, errorInfo);
+  }
+
+  private handleRetry = () => {
+    this.setState({ hasError: false, error: null });
+  };
+
+  public render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      return (
+        <div className="flex min-h-[400px] flex-col items-center justify-center gap-4 p-8">
+          <div className="flex h-16 w-16 items-center justify-center rounded-full bg-red-50 dark:bg-red-950">
+            <AlertTriangle className="h-8 w-8 text-red-500" />
+          </div>
+          <div className="text-center">
+            <h2 className="text-xl font-semibold">Something went wrong</h2>
+            <p className="mt-2 text-sm text-gray-500 dark:text-gray-400">
+              {this.state.error?.message || 'An unexpected error occurred'}
+            </p>
+          </div>
+          <Button
+            onClick={this.handleRetry}
+            icon={<RefreshCw className="h-4 w-4" />}
+            className="mt-4"
+          >
+            Try again
+          </Button>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

package/templates/optional/antd-replacements/redux/provider.tsx

@@ -0,0 +1,33 @@
+import { Provider } from 'react-redux';
+import { PersistGate } from 'redux-persist/integration/react';
+import { store, persistor } from './store';
+import { Skeleton } from 'antd';
+
+interface ReduxProviderProps {
+  children: React.ReactNode;
+}
+
+function LoadingFallback() {
+  return (
+    <div className="flex min-h-screen items-center justify-center">
+      <div className="flex flex-col items-center gap-4">
+        <Skeleton.Avatar active size={48} shape="circle" />
+        <Skeleton.Input active size="small" style={{ width: 128 }} />
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Redux Provider with persistence
+ * Wraps the application with Redux store and persist gate
+ */
+export function ReduxProvider({ children }: ReduxProviderProps) {
+  return (
+    <Provider store={store}>
+      <PersistGate loading={<LoadingFallback />} persistor={persistor}>
+        {children}
+      </PersistGate>
+    </Provider>
+  );
+}

package/templates/optional/antd-replacements/routes/index.tsx

@@ -0,0 +1,40 @@
+import { Suspense } from 'react';
+import { Route, Switch } from 'wouter';
+import { routes } from './routes';
+import { Skeleton } from 'antd';
+
+/**
+ * Loading fallback component
+ */
+function RouteLoading() {
+  return (
+    <div className="flex min-h-screen items-center justify-center">
+      <div className="flex flex-col items-center gap-4">
+        <Skeleton.Avatar active size={48} shape="circle" />
+        <Skeleton.Input active size="small" style={{ width: 128 }} />
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Application router using Wouter
+ * - Lightweight (2KB) alternative to React Router
+ * - Supports lazy loading with React.Suspense
+ * - Simple API with <Route> and <Switch>
+ */
+export function AppRouter() {
+  return (
+    <Suspense fallback={<RouteLoading />}>
+      <Switch>
+        {routes.map(({ path, component: Component }) => (
+          <Route key={path} path={path}>
+            <Component />
+          </Route>
+        ))}
+      </Switch>
+    </Suspense>
+  );
+}
+
+export { routes } from './routes';

package/templates/optional/antd-replacements/screens/home/index.tsx

@@ -0,0 +1,227 @@
+import { useState } from 'react';
+import { Moon, Sun, Github, Zap, Bot, ExternalLink } from 'lucide-react';
+import { Button, Card } from 'antd';
+import { useTheme } from '~/providers';
+
+export default function Home() {
+  const { theme, setTheme, resolvedTheme } = useTheme();
+  const [count, setCount] = useState(0);
+
+  const toggleTheme = () => {
+    setTheme(resolvedTheme === 'dark' ? 'light' : 'dark');
+  };
+
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center p-8">
+      <div className="w-full max-w-2xl space-y-8">
+        {/* Header */}
+        <div className="text-center">
+          <div className="mb-4 flex items-center justify-between">
+            <div className="w-40" />
+            <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-primary text-primary-foreground">
+              <Zap className="h-8 w-8" />
+            </div>
+            <Button
+              type="default"
+              href="https://github.com/abhay-rana/create-modern-react"
+              target="_blank"
+              rel="noopener noreferrer"
+              icon={<Github className="h-4 w-4" />}
+            >
+              View CLI on GitHub
+            </Button>
+          </div>
+          <h1 className="text-4xl font-bold tracking-tight">
+            create-modern-react
+          </h1>
+          <p className="mt-2 text-muted-foreground">
+            Production-ready React + TypeScript + Tailwind in seconds
+          </p>
+          <div className="mt-4">
+            <code className="rounded-md bg-muted px-3 py-1.5 font-mono text-sm">
+              npx create-modern-react my-app
+            </code>
+          </div>
+        </div>
+
+        {/* Counter Card */}
+        <Card
+          title={
+            <div className="flex items-center justify-between">
+              <span>Interactive Counter</span>
+              <Button
+                type="text"
+                shape="circle"
+                onClick={toggleTheme}
+                aria-label="Toggle theme"
+                icon={
+                  resolvedTheme === 'dark' ? (
+                    <Sun className="h-5 w-5" />
+                  ) : (
+                    <Moon className="h-5 w-5" />
+                  )
+                }
+              />
+            </div>
+          }
+        >
+          <div className="space-y-4">
+            <div className="flex items-center justify-center gap-4">
+              <Button size="large" onClick={() => setCount((c) => c - 1)}>
+                -
+              </Button>
+              <span className="min-w-[4rem] text-center text-4xl font-bold tabular-nums">
+                {count}
+              </span>
+              <Button size="large" onClick={() => setCount((c) => c + 1)}>
+                +
+              </Button>
+            </div>
+            <p className="text-center text-sm text-muted-foreground">
+              Click the buttons to update the count
+            </p>
+          </div>
+        </Card>
+
+        {/* Features */}
+        <div className="grid gap-4 sm:grid-cols-2">
+          <FeatureCard
+            title="Vite + SWC"
+            description="Lightning fast builds with Hot Module Replacement"
+          />
+          <FeatureCard
+            title="TypeScript"
+            description="Full type safety with strict mode enabled"
+          />
+          <FeatureCard
+            title="Tailwind CSS"
+            description="Utility-first CSS with dark mode support"
+          />
+          <FeatureCard
+            title="Ant Design"
+            description="Enterprise-class UI components"
+          />
+        </div>
+
+        {/* AI Skills Highlight */}
+        <div className="rounded-lg border bg-gradient-to-r from-primary/5 to-primary/10 p-4">
+          <div className="flex items-start gap-3">
+            <Bot className="h-5 w-5 text-primary mt-0.5" />
+            <div>
+              <h3 className="font-semibold">Claude Code AI Skills</h3>
+              <p className="mt-1 text-sm text-muted-foreground">
+                8 pre-configured skills for React best practices, UI/UX design, browser testing, and spec refinement
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Projects Showcase */}
+        <div className="space-y-4">
+          <h2 className="text-center text-2xl font-bold">
+            Production Projects created using this boilerplate
+          </h2>
+          <div className="grid gap-6 sm:grid-cols-2">
+            <ProjectCard
+              category="AI/Career"
+              title="ResumeFreePro"
+              description="AI-Powered Resume Builder"
+              designStyle="Modern + Glassmorphism"
+              url="https://resumefreepro.com?utm_source=starter-template&utm_medium=landing-page&utm_campaign=create-modern-react-demo"
+              previewUrl="https://storage.resumefreepro.com/media-files/resumefreepro.webp"
+            />
+            <ProjectCard
+              category="E-Pharmacy"
+              title="HealthMug"
+              description="Online Pharmacy Platform"
+              designStyle="Clean + Professional"
+              url="https://healthmug.com?utm_source=starter-template&utm_medium=landing-page&utm_campaign=create-modern-react-demo"
+              previewUrl="https://storage.resumefreepro.com/media-files/healthmug.webp"
+            />
+          </div>
+        </div>
+
+        <p className="text-center text-xs text-muted-foreground">
+          Current theme: {theme} (resolved: {resolvedTheme})
+        </p>
+      </div>
+    </div>
+  );
+}
+
+function FeatureCard({
+  title,
+  description,
+}: {
+  title: string;
+  description: string;
+}) {
+  return (
+    <div className="rounded-lg border bg-card p-4 text-card-foreground">
+      <h3 className="font-semibold">{title}</h3>
+      <p className="mt-1 text-sm text-muted-foreground">{description}</p>
+    </div>
+  );
+}
+
+function ProjectCard({
+  category,
+  title,
+  description,
+  designStyle,
+  url,
+  previewUrl,
+}: {
+  category: string;
+  title: string;
+  description: string;
+  designStyle: string;
+  url: string;
+  previewUrl: string;
+}) {
+  return (
+    <a
+      href={url}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="group block"
+    >
+      <Card
+        hoverable
+        className="overflow-hidden"
+        cover={
+          <div className="relative h-48 overflow-hidden bg-muted">
+            <img
+              src={previewUrl}
+              alt={`${title} preview`}
+              className="h-full w-full object-cover object-top transition-transform duration-300 group-hover:scale-105"
+            />
+            {/* Overlay on hover */}
+            <div className="absolute inset-0 flex items-center justify-center bg-black/60 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+              <div className="text-center text-white">
+                <ExternalLink className="mx-auto h-8 w-8" />
+                <p className="mt-2 text-sm font-medium">View Demo</p>
+              </div>
+            </div>
+          </div>
+        }
+      >
+        <div className="space-y-3">
+          {/* Category Badge */}
+          <span className="inline-block rounded-md bg-primary/10 px-2 py-1 text-xs font-medium text-primary">
+            {category}
+          </span>
+
+          {/* Title & Description */}
+          <div>
+            <h3 className="font-bold">{title}</h3>
+            <p className="mt-1 text-sm text-muted-foreground">{description}</p>
+          </div>
+
+          {/* Design Style */}
+          <p className="text-xs text-muted-foreground">{designStyle}</p>
+        </div>
+      </Card>
+    </a>
+  );
+}

package/templates/optional/antd-replacements/screens/not-found/index.tsx

@@ -0,0 +1,30 @@
+import { Link } from 'wouter';
+import { Home, ArrowLeft } from 'lucide-react';
+import { Button } from 'antd';
+
+export default function NotFound() {
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center p-8">
+      <div className="text-center">
+        <h1 className="text-9xl font-bold text-muted-foreground/20">404</h1>
+        <h2 className="mt-4 text-2xl font-semibold">Page not found</h2>
+        <p className="mt-2 text-muted-foreground">
+          Sorry, we couldn't find the page you're looking for.
+        </p>
+        <div className="mt-8 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
+          <Link href="/">
+            <Button type="primary" icon={<Home className="h-4 w-4" />}>
+              Go home
+            </Button>
+          </Link>
+          <Button
+            icon={<ArrowLeft className="h-4 w-4" />}
+            onClick={() => window.history.back()}
+          >
+            Go back
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}