🎨 Dynamic Form Builder

A powerful, visual form builder that lets non-engineers create complex forms without writing a single line of code. Built with Next.js, React, Redux, and Tailwind CSS.

✨ Features

Core Functionality

• Visual Form Building: Drag and drop interface for creating forms
• 7 Field Types: Text, Email, Number, Date, Checkbox, Radio Group, Dropdown
• Field Configuration:
  • Custom labels and placeholders
  • Required field validation
  • Min/Max length validation
  • Regex pattern validation
  • Custom error messages
  • Age Validation (for date fields): Set minimum/maximum age requirements with automatic age calculation from date of birth
• Drag & Drop Reordering: Rearrange fields with smooth animations using dnd-kit
• Conditional Logic: Show/hide fields based on other field values
• Live Preview: Real-time form preview with instant updates
• Persistence: Auto-save to localStorage every 5 seconds
• Import/Export: Download and upload form schemas as JSON

Bonus Features

• Dark Mode: Toggle between light and dark themes
• Auto-save: Automatic saving every 5 seconds
• Fully Responsive: Optimized for desktop, tablet, iPad, and mobile devices
• Toast Notifications: Beautiful toast messages instead of browser alerts
• Clean UI: Modern, intuitive interface inspired by professional design systems

🚀 Tech Stack

• Framework: Next.js 15 (App Router)
• State Management: Redux Toolkit
• Styling: Tailwind CSS
• Drag & Drop: @dnd-kit
• Icons: Lucide React
• Notifications: React Toastify
• Storage: localStorage

📦 Installation

# Clone the repository
git clone <your-repo-url>
cd dynamic-form-builder

# Install dependencies
npm install

# Run development server
npm run dev

Open http://localhost:3000 to see the app.

🎯 Usage

Adding Fields

1. Click on any field type button in the left panel (Text, Email, Number, etc.)
2. The field will be added to the form and automatically selected

Configuring Fields

1. Click on a field in the "Form Fields" list
2. Configure in the middle panel:
   • Set label and placeholder
   • Mark as required
   • Add validation rules (min/max length, regex pattern)
   • Set custom error messages
   • For radio/dropdown: add/edit options

Drag & Drop

• Click and hold the grip icon (⋮⋮) on any field
• Drag to reorder fields
• Drop in the desired position

Conditional Logic

Field Rules

1. Select a field
2. Scroll to "Conditional Logic" section
3. Click "+ Add Rule"
4. Configure:
   • Action: Show/Hide/Enable/Disable this field
   • When: Select source field
   • Operator: equals, not equals, contains, greater than, less than
   • Value: Enter comparison value

Submit Button Rules

1. Scroll to "Submit Button Rules" section (below field configuration)
2. Click "+ Add Rule"
3. Configure:
   • Action: Enable/Disable submit button
   • When: Select source field
   • Operator: equals, not equals, contains, greater than, less than
   • Value: Enter comparison value (e.g., 18 for age validation)

Examples:

• "Show email field only if newsletter checkbox is checked"
• "Disable submit button when age < 18"
• "Hide payment field when payment method equals 'Free'"
• "Enable discount field when order total > 100"

Age Validation (Date of Birth)

For date fields, you can set age requirements:

1. Select a date field
2. In the "Validation" section, find "Age Validation (Date of Birth)"
3. Set minimum age (e.g., 18 for adult-only forms)
4. Set maximum age (e.g., 65 for age-restricted services)
5. The preview will:
   • Calculate age automatically from the selected date
   • Show current age in real-time
   • Prevent form submission if age requirements aren't met
   • Display helpful error messages

Example: Set Min Age to 18 for a date field labeled "Date of Birth" - users under 18 cannot submit the form.

Save & Export

• Save: Click "Save" button (or auto-saves every 5 seconds)
• Export: Download form schema as JSON file
• Import: Upload a previously exported JSON file
• Reset: Clear all fields and start fresh

Live Preview

• Right panel shows real-time preview
• Test conditional logic
• Submit form to see console output

🏗️ Architecture

State Management

Redux Toolkit manages the entire application state:

• formSlice.ts: All form-related actions and reducers
• types.ts: TypeScript interfaces for type safety
• store.ts: Redux store configuration
• hooks.ts: Typed Redux hooks

Component Structure

components/
├── FormBuilder.tsx          # Main container component
├── FieldTypeButton.tsx      # Field type selector buttons
├── FormFieldItem.tsx        # Draggable field list item
├── FieldConfiguration.tsx   # Field settings panel
└── FormPreview.tsx          # Live form preview

Key Features Implementation

Drag & Drop: Uses @dnd-kit with sortable preset for smooth reordering Conditional Logic: Evaluates rules on every form data change Auto-save: useEffect with setInterval for periodic saves Dark Mode: Redux state + Tailwind dark mode classes

📝 Environment Variables

No .env required — life's already hard enough. 😊

🌐 Deployment

Deploy to Vercel with one click:

Or manually:

npm run build
npm start

🎨 Design Decisions

Why Redux?

• Centralized state management for complex form logic
• Time-travel debugging capabilities
• Easy to test and maintain

Why dnd-kit?

• Modern, performant drag & drop
• Excellent TypeScript support
• Accessibility built-in

Why localStorage?

• No backend required
• Instant persistence
• Works offline

🔮 Future Enhancements

• Multi-page forms
• Field groups/sections
• More field types (file upload, rich text)
• Form templates
• Shareable URLs with Base64 encoded schemas
• Form submissions storage
• Email notifications
• Custom styling per field

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

MIT License - feel free to use this project for your own purposes.

🙏 Acknowledgments

Built as a coding challenge to demonstrate:

• Clean, readable code
• Solid architecture
• State management expertise
• UI/UX design skills
• Problem-solving abilities

---

Note: This project was built with ❤️ and ☕. May your state updates be predictable and your re-renders be minimal! 🚀