create-modern-react 2.1.3 → 2.3.1

package/README.md

@@ -45,6 +45,7 @@
 │   ✗ No toast notifications                    ✓ react-hot-toast         │
 │   ✗ No error boundary                         ✓ Built-in                │
 │   ✗ Basic ESLint                              ✓ 25+ rules configured    │
+│   ✗ No form validation                        ✓ RHF + Zod (optional)    │
 │   ✗ No state management                       ✓ Redux (optional)        │
 │   ✗ ~2 hours setup                            ✓ 15 seconds              │
 │                                                                         │
@@ -106,6 +107,7 @@ Select during project creation:
 
 ```
 [ ] Redux Toolkit + Redux Persist ── State management with persistence
+[ ] React Hook Form + Zod ────────── Type-safe form validation
 [ ] Ant Design v5 ───────────────── Enterprise UI (replaces Shadcn/ui)
 [ ] Husky + lint-staged ─────────── Git hooks for code quality
 ```
@@ -147,6 +149,10 @@ my-app/
 │   │   └── layout/
 │   │       ├── root-layout.tsx
 │   │       └── error-boundary.tsx
+│   ├── forms/                    # (optional) React Hook Form + Zod
+│   │   ├── index.ts              # Barrel export
+│   │   ├── use-zod-form.ts       # Custom hook with onBlur validation
+│   │   └── types.ts              # Form TypeScript types
 │   ├── hooks/
 │   │   ├── use-loader.ts       # Loading state management
 │   │   ├── use-debounce.ts     # Value debouncing
@@ -242,6 +248,31 @@ const debouncedQuery = useDebounce(searchQuery, 300);
 const { cancelToken, cancel } = useCancelToken();
 ```
 
+### Type-Safe Form Validation (Optional)
+
+```tsx
+import { z } from 'zod';
+import { useZodForm } from '~/forms';
+
+const loginSchema = z.object({
+  email: z.string().email(),
+  password: z.string().min(8, 'Password must be 8+ characters'),
+});
+
+function LoginForm() {
+  const form = useZodForm({ schema: loginSchema });
+
+  return (
+    <form onSubmit={form.handleSubmit(onSubmit)}>
+      <input {...form.register('email')} />
+      {form.formState.errors.email?.message}
+    </form>
+  );
+}
+```
+
+*UI-agnostic • Works with Shadcn, Antd, or plain HTML • Validates onBlur*
+
 ### Path Aliases
 
 ```tsx

package/lib/prompts.js

@@ -94,6 +94,11 @@ async function createProject(projectName, options) {
           value: 'redux',
           checked: false
         },
+        {
+          name: 'React Hook Form + Zod (form validation)',
+          value: 'forms',
+          checked: false
+        },
         {
           name: 'Ant Design v5 (replaces Shadcn/ui)',
           value: 'antd',
@@ -153,6 +158,7 @@ async function createProject(projectName, options) {
     packageManager,
     // Optional features
     useRedux: optionalFeatures.includes('redux'),
+    useForms: optionalFeatures.includes('forms'),
     useAntd: optionalFeatures.includes('antd'),
     useHusky: optionalFeatures.includes('husky'),
     // Flags
@@ -176,6 +182,7 @@ async function createProject(projectName, options) {
   console.log(chalk.cyan('├─────────────────────────────────────────────┤'));
   console.log(chalk.cyan('│') + chalk.white(' Optional Features:                         ') + chalk.cyan('│'));
   console.log(chalk.cyan('│') + `   Redux Toolkit:  ${config.useRedux ? chalk.green('✓') : chalk.gray('✗')}                        ` + chalk.cyan('│'));
+  console.log(chalk.cyan('│') + `   RHF + Zod:      ${config.useForms ? chalk.green('✓') : chalk.gray('✗')}                        ` + chalk.cyan('│'));
   console.log(chalk.cyan('│') + `   Ant Design v5:  ${config.useAntd ? chalk.green('✓') : chalk.gray('✗')}                        ` + chalk.cyan('│'));
   console.log(chalk.cyan('│') + `   Husky hooks:    ${config.useHusky ? chalk.green('✓') : chalk.gray('✗')}                        ` + chalk.cyan('│'));
   console.log(chalk.cyan('└─────────────────────────────────────────────┘\n'));

package/lib/setup.js

@@ -38,6 +38,11 @@ async function setupProject(config) {
     await updateProvidersForRedux(projectPath, config.useAntd);
   }
 
+  if (config.useForms) {
+    console.log(chalk.gray('  Adding React Hook Form + Zod...'));
+    await copyOptionalTemplate('forms', projectPath);
+  }
+
   if (config.useHusky) {
     console.log(chalk.gray('  Adding Husky + lint-staged...'));
     await copyOptionalTemplate('husky', projectPath);
@@ -81,6 +86,13 @@ async function updatePackageJson(config) {
     dependencies['redux-persist'] = '^6.0.0';
   }
 
+  // React Hook Form + Zod dependencies
+  if (config.useForms) {
+    dependencies['react-hook-form'] = '^7.54.0';
+    dependencies['zod'] = '^3.24.0';
+    dependencies['@hookform/resolvers'] = '^3.9.0';
+  }
+
   // Ant Design dependencies (replaces Shadcn)
   if (config.useAntd) {
     dependencies['antd'] = '^5.20.0';
@@ -116,9 +128,11 @@ async function copyOptionalTemplate(templateName, projectPath) {
   );
 
   if (await fs.pathExists(optionalTemplatePath)) {
-    // For redux and antd, copy to src directory
+    // For redux, antd, and forms, copy to src directory
     if (templateName === 'redux') {
       await fs.copy(optionalTemplatePath, path.join(projectPath, 'src/redux'));
+    } else if (templateName === 'forms') {
+      await fs.copy(optionalTemplatePath, path.join(projectPath, 'src/forms'));
     } else if (templateName === 'antd') {
       await fs.copy(optionalTemplatePath, path.join(projectPath, 'src/antd'));
       // Also copy the styles file to src/styles

package/package.json

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

package/templates/base/src/screens/home/index.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Moon, Sun, Github, Zap, Bot } from 'lucide-react';
+import { Moon, Sun, Github, Zap, Bot, ExternalLink } from 'lucide-react';
 import { Button, Card, CardContent, CardHeader, CardTitle } from '~/components/ui';
 import { useTheme } from '~/providers';
 
@@ -16,17 +16,33 @@ export default function Home() {
       <div className="w-full max-w-2xl space-y-8">
         {/* Header */}
         <div className="text-center">
-          <div className="mb-4 flex justify-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 variant="outline" asChild>
+              <a
+                href="https://github.com/abhay-rana/create-modern-react"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <Github className="mr-2 h-4 w-4" />
+                View CLI on GitHub
+              </a>
+            </Button>
           </div>
           <h1 className="text-4xl font-bold tracking-tight">
             create-modern-react
           </h1>
           <p className="mt-2 text-muted-foreground">
-            AI-first React + TypeScript + Tailwind in seconds
+            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 */}
@@ -107,18 +123,29 @@ export default function Home() {
           </div>
         </div>
 
-        {/* Footer */}
-        <div className="flex justify-center">
-          <Button variant="outline" asChild>
-            <a
-              href="https://github.com"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <Github className="mr-2 h-4 w-4" />
-              View on GitHub
-            </a>
-          </Button>
+        {/* 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="/screenshots/resumefreepro.png"
+            />
+            <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="/screenshots/healthmug.png"
+            />
+          </div>
         </div>
 
         <p className="text-center text-xs text-muted-foreground">
@@ -143,3 +170,62 @@ function FeatureCard({
     </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 className="overflow-hidden transition-all hover:-translate-y-1 hover:shadow-lg">
+        {/* Preview Area */}
+        <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>
+
+        <CardContent className="space-y-3 p-4">
+          {/* 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>
+        </CardContent>
+      </Card>
+    </a>
+  );
+}

package/templates/optional/forms/index.ts

@@ -0,0 +1,2 @@
+export { useZodForm, getFieldError } from './use-zod-form';
+export type { UseZodFormProps, UseZodFormReturn, FormFieldProps } from './types';

package/templates/optional/forms/types.ts

@@ -0,0 +1,39 @@
+import {
+  type UseFormReturn,
+  type FieldValues,
+  type UseFormProps,
+} from 'react-hook-form';
+import { type ZodType } from 'zod';
+
+export interface UseZodFormProps<T extends FieldValues>
+  extends Omit<UseFormProps<T>, 'resolver'> {
+  schema: ZodType<T>;
+}
+
+export type UseZodFormReturn<T extends FieldValues> = UseFormReturn<T>;
+
+/**
+ * Common form field props for building reusable form components
+ *
+ * @example
+ * interface TextFieldProps extends FormFieldProps {
+ *   type?: 'text' | 'email' | 'password';
+ * }
+ *
+ * function TextField({ label, error, required, ...props }: TextFieldProps) {
+ *   return (
+ *     <div>
+ *       {label && <label>{label}{required && '*'}</label>}
+ *       <input {...props} />
+ *       {error && <span className="text-red-500">{error}</span>}
+ *     </div>
+ *   );
+ * }
+ */
+export interface FormFieldProps {
+  label?: string;
+  error?: string;
+  required?: boolean;
+  disabled?: boolean;
+  className?: string;
+}

package/templates/optional/forms/use-zod-form.ts

@@ -0,0 +1,59 @@
+import {
+  useForm,
+  type UseFormProps,
+  type FieldValues,
+  type Path,
+  type FieldErrors,
+} from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { type ZodType } from 'zod';
+
+interface UseZodFormProps<T extends FieldValues>
+  extends Omit<UseFormProps<T>, 'resolver'> {
+  schema: ZodType<T>;
+}
+
+/**
+ * Custom hook that wraps React Hook Form with Zod validation
+ *
+ * @example
+ * const schema = z.object({
+ *   email: z.string().email(),
+ *   password: z.string().min(8),
+ * });
+ *
+ * const form = useZodForm({ schema });
+ *
+ * <form onSubmit={form.handleSubmit(onSubmit)}>
+ *   <input {...form.register('email')} />
+ *   {form.formState.errors.email && <span>{form.formState.errors.email.message}</span>}
+ * </form>
+ */
+export function useZodForm<T extends FieldValues>({
+  schema,
+  mode = 'onBlur',
+  ...formProps
+}: UseZodFormProps<T>) {
+  return useForm<T>({
+    resolver: zodResolver(schema),
+    mode,
+    ...formProps,
+  });
+}
+
+/**
+ * Helper to get error message for a field
+ *
+ * @example
+ * const error = getFieldError(form.formState.errors, 'email');
+ * if (error) {
+ *   console.log(error); // "Invalid email address"
+ * }
+ */
+export function getFieldError<T extends FieldValues>(
+  errors: FieldErrors<T>,
+  name: Path<T>
+): string | undefined {
+  const error = errors[name];
+  return error?.message as string | undefined;
+}