Develop a dynamic form builder using Next.js (version 12.3.4), TypeScript, and React Hook Form. The form should be rendered based on a predefined schema with variable configurations and demonstrate your ability to write dynamic, reusable, scalable, and extensible UI components.
- Utilize the
FormField
type andFormFieldType
enum fromsrc/models/form.ts
to define a form schema. - Your form should support all field types defined in
FormFieldType
.
- Implement the
FormBuilder
component insrc/components/FormBuilder/FormBuilder.tsx
. - Implement necessary supporting components.
- Dynamically render form fields based on the
fields
prop using React Hook Form. - Ensure each form field supports the attributes and validation specified in the
FormField
interface.
- Implement an
onSubmit
function insrc/pages/index.tsx
that logs form values to the console. - Include appropriate validation handling based on the schema.
- Ensure that the webpage and form are responsive and adapt to different screen sizes, especially mobile devices.
- Use SCSS or a UI framework / library of your choice for styling.
- Create a mock API endpoint within the Next.js project to serve form field configurations.
- Modify the
src/pages/index.tsx
to retrieve form configurations from this API.
- Implement a mock API endpoint for form submission within the Next.js project.
- Modify the form submission logic to POST the form data to this API.
- In the API handler, log the received form data to simulate saving and return a mock response.
- TypeScript and ES6+ code.
- Emphasis on maintainability and understandable code structure.
- Flexibility to modify the provided starter code.
- Option to use additional libraries to complete the task.
- Functionality: The form should be fully functional and meet all objectives and requirements.
- Reusability and Scalability: Components should be designed for reusability, extensibility and scalability.
- Responsiveness: The webpage should be responsive and mobile-friendly.
- Code Quality: Code should be clean, well-organized, and follow best practices.
- UI Design (Plus, not primary): A user-friendly and aesthetically pleasing UI is a plus, but the primary focus is on functionality and code quality.
- API Interaction (Bonus): Ability to interact with APIs for fetching form configurations and submitting data.