Form Generator

Without elaborating, check out the demo.

This is a react app I created as a test assignment to show my front-end skills. The task was:

Сreate an application in React & TypeScript where a user can generate forms from JSON declaration. They enter JSON and see the form. That’s it!

App Overview

This project was bootstrapped with Create React App, so I reuse what it offers.

I also added eslint with some popular presets, you may check out the full configuration in .eslintrc.json. I use @typescript-eslint, eslint and eslint-plugin-react recommended presets mostly for code issues coverage, and airbnb presets mostly for code style. So I’m sticking to these rules, e.g. they prefers function declaration over arrow functions for components.

So, from a bird's eye view, the structure is as follows:

1. index.tsx is an entrypoint. It finds the root DOM element and render the App.
2. app/ contains any app-level code.
   • App.tsx is where the app is described. It can render several features and do the routing, but currently there is only one feature.
3. features/ contains feature-specific code, directory per feature:
   • FormGenerator is the main feature that allows a user to type in JSON and get a Form Preview.
     • FormGenerator.tsx implements the full feature, the user scenario
     • model/ directory describes the data model and data flow of the feature. This is implemented with React useReducer hook in a redux way.
     • widgets/ directory contains feature-specific domain-oriented widgets.
     • types/ directory describes feature-specific typings.
4. shared/ directory contains utils and non-specific components.

Deep Dive into FormGenerator

The FormGenerator feature workflow is as follows:

1. The FormParser takes user input and dispatches state change.
2. The reducer handles this action and validates user input according to the schema. Then it builds a new state with a parsed schema and/or validation errors. E.g., if there are some validation errors, we should not change or delete the schema, to show the last valid form.
3. Finally, the FormBuilder renders a form by the schema from the state (last valid state, I mean).

How to add a new input type

1. First of all, describe the new input type: FormGenerator/types.
2. Then, write a schema in the Ajv to validate the input declaration. Don’t forget to add it to the general formInputSchema: FormGenerator/schema + tests.
3. Then teach the FormBuilder to render your new component: FormGenerator/widgets/FormBuilder/FormField + tests.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

Uses react-scripts.

npm test

Launches the test runner in the interactive watch mode.

Uses react-scripts, jest and React Testing Library.

npm run build

Builds the app for production to the build folder.

Uses react-scripts.

npm run lint

Runs code linters to check dumb errors and code style.

Uses eslint.

npm run lint:fix

Fixes code issues and style.

Uses eslint.

Learn More

You can learn more in the Create React App documentation.

License

This app is GPL licensed.