To run the development server:
npm run dev
Open http://localhost:3000 to view it in the browser.
Also you can find a deployed version here: https://dynamic-forms-nine.vercel.app/
See the teck task in the "Acre Frontend ... .pdf" file.
(According to the tech task description)
-
In the
data
folder you will find form Schema.json with the required structure. To view form data after submission, you need to open the console. -
To add input validation I modified the json field and added this logic to the components (see Input.tsx, RadioGroup.tsx)
-
In the FormGenerator.tsx file I added a map to keep such depndencies and then I added theonChange function for the function to display channges accroding to the validation rules
-
To solve the problem with dynamic journeys, I would create custom forms for each user based on their profile information. So the process will be as follows:
-
- Collect all the necessary information about the user during the registration process
-
- Send this data to the database
-
- When a user opens any form, the application should make a request and ask the backend to provide a customized JSON form based on the user's responses, which are stored in the database.
There are of course a lot of things to improve in this project, such as:
- Fix current bugs (especially, with the handleSubmit function in the FormGenerator), add types to events
- Add Redux to make filling out and storing form data easier.
- Add tests
- Add additional form libraries to make them easier (For example, Formik)
- Rewrite Field.tsx using the Builder design pattern instead of Switch.
- Create a custom React library for all components and simply reuse them in this project.
- Add scripts for CI/CD to run tests during the build process.