React Form Builder

A modern, type-safe form builder application built with React, TypeScript, and best practices.

Features

• Dynamic Form Generation: Create forms dynamically from JSON configuration
• Type Safety: Full TypeScript support with discriminated unions
• Form Validation: Zod-based validation with custom validators
• State Management: Redux Toolkit for global state management
• Form Handling: React Hook Form for efficient form state management
• Local Storage: Persist form configurations locally
• Accessibility: ARIA attributes and keyboard navigation support
• Modern UI: TailwindCSS styling with responsive design

Tech Stack

• React 18 - UI library
• TypeScript - Type safety
• Vite - Build tool
• Redux Toolkit - State management
• React Hook Form - Form handling
• Zod - Schema validation
• TailwindCSS - Styling
• React Query - Server state management
• React Toastify - Notifications

Project Structure

src/
├── components/
│   ├── common/        # Shared components
│   ├── config/        # Configuration tab components
│   ├── result/        # Form result tab components
│   └── ui/            # Base UI components
├── hooks/             # Custom React hooks
├── pages/             # Page components
├── store/             # Redux store configuration
│   └── slices/        # Redux slices
├── styles/            # CSS files
└── utils/             # Utility functions and types
    ├── constants.ts   # Application constants
    ├── types.ts       # TypeScript type definitions
    └── validation.ts  # Zod validation schemas

Getting Started

Prerequisites

• Node.js 16+
• npm or yarn

Installation

1. Clone the repository:

git clone <repository-url>
cd react-form-builder

2. Install dependencies:

npm install
# or
yarn install

3. Start the development server:

npm run dev
# or
yarn dev

4. Open http://localhost:5173 in your browser

Usage

Form Configuration

The form builder accepts a JSON configuration with the following structure:

{
  "title": "Sample Form",
  "description": "Optional form description",
  "buttons": ["Cancel", "Save"],
  "items": [
    {
      "label": "Name",
      "type": "string",
      "required": true,
      "placeholder": "Enter your name",
      "minLength": 2,
      "maxLength": 50
    },
    {
      "label": "Age",
      "type": "number",
      "min": 0,
      "max": 120,
      "step": 1
    },
    {
      "label": "Bio",
      "type": "multi-line",
      "rows": 4,
      "maxLength": 500
    },
    {
      "label": "Active",
      "type": "boolean",
      "defaultValue": true
    },
    {
      "label": "Birth Date",
      "type": "date",
      "min": "1900-01-01",
      "max": "2023-12-31"
    },
    {
      "label": "Category",
      "type": "enum",
      "options": ["Option 1", "Option 2", "Option 3"],
      "defaultValue": "Option 1"
    }
  ]
}

Field Types

• string: Single-line text input
• number: Numeric input with optional min/max/step
• multi-line: Textarea for longer text
• boolean: Checkbox input
• date: Date picker
• enum: Radio button group

Field Properties

Common properties for all field types:

• label (required): Field label
• type (required): Field type
• required: Whether the field is required
• placeholder: Placeholder text
• disabled: Disable the field

Type-specific properties are documented in the TypeScript interfaces.

Development

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run lint - Run ESLint
• npm run preview - Preview production build

Code Quality

The project uses:

• ESLint for code linting
• TypeScript for type checking
• Strict mode enabled
• No unused locals/parameters allowed

State Management

The application uses Redux Toolkit with two main slices:

1. formConfigSlice: Manages form configuration

   • Stores the current form configuration
   • Validates configuration with Zod
   • Tracks validation state

2. formDataSlice: Manages form data

   • Stores form field values
   • Tracks form dirty state
   • Handles form submission

Custom Hooks

• useFormConfig: Form configuration management
• useFormData: Form data management
• useLocalStorage: Local storage persistence

Best Practices Implemented

1. Type Safety

   • Discriminated unions for form items
   • Type guards for runtime checks
   • Strict TypeScript configuration

2. Performance

   • React.memo for pure components
   • useCallback/useMemo for optimization
   • Efficient re-renders with Redux

3. Accessibility

   • ARIA labels and descriptions
   • Keyboard navigation support
   • Error announcements

4. Code Organization

   • Feature-based folder structure
   • Separation of concerns
   • Reusable components

5. Error Handling

   • Comprehensive error boundaries
   • Validation error display
   • User-friendly error messages