Professional Form Builder

Advanced Dynamic Form Builder

1 / 3

This project is an online tool for building dynamic forms with a Drag & Drop user interface, enabling users to create complex multi-step forms with validation, conditional logic, and structured JSON output. The system is designed to support both form building and form execution, with seamless integration through RESTful APIs. The core focus of the project is on managing complex state, high flexibility, and maintaining system stability in highly dynamic scenarios.

Technologies

React 19TypeScript 5React Hook FormZodTailwind CSS 4@dnd-kitReact Query 5AxiosREST APIs

Features

Drag & Drop field reordering
Multi-step form support
Support for 15 different field types
Custom and extensible validation
Jalali and Gregorian calendar support
Conditional logic for field visibility
Controlled custom JavaScript execution
JSON import and export

My Role in Project

Front-End Developer & Architect (React / TypeScript) Responsible for designing the form builder architecture, implementing Drag & Drop functionality, state management, validation systems, conditional logic, and structured JSON generation.

Challenges & Focus

Managing form building and form execution simultaneouslyImplementing stable Drag & Drop without losing field stateDynamic validation based on field type and user-defined rulesImplementing conditional logic for showing or hiding fieldsSupporting both Jalali (Persian) and Gregorian calendarsGenerating and importing JSON independent of the UI

Technical Decisions

Schema-driven Architecture

Forms are defined based on a UI-independent schema. This approach enables JSON export/import, form execution in different environments, and long-term scalability.

React Hook Form + Zod

Used to manage complex forms with minimal re-renders and type-safe, extensible validation. This combination proved more performant than fully controlled forms in dynamic scenarios.

@dnd-kit instead of simpler Drag & Drop solutions

Chosen for precise performance control, advanced collision detection, and stable field reordering without heavy re-renders.

Separation of Form Builder and Form Renderer

The form creation environment and the form execution environment were fully decoupled to isolate complexity and improve maintainability.

React Query for API communication

Used to manage async state, handle data submission, and prevent redundant requests in long and complex forms.

Optimizations & Solutions

Memoization to prevent full form re-renders during field movement
Normalized state management for simpler and more predictable updates
Declarative, schema-based conditional logic execution
Multi-layer validation (UI-level and schema-level)
JSON import/export fully decoupled from UI versions

Trade-offs & Engineering Considerations

Architectural complexity was intentionally accepted to achieve higher flexibility, avoiding simpler but limiting solutions.
Some Drag & Drop interactions were intentionally simplified to preserve system stability.
Custom JavaScript execution was restricted and sandboxed to ensure security and predictability.

Outcome

This project was a serious exercise in managing complexity, designing dynamic systems, and making architectural decisions. It demonstrates that my focus goes beyond building UI — toward designing systems that remain stable, scalable, and maintainable under real-world conditions.

Links

Demo

Back