VIZE Forms – A React Component with Spring Boot APIs & Manager

VIZE Forms is a multipurpose dynamic forms module or manager. On the front-end it is a simple React component that generate dynamic forms using Material-UI components for React. On the back-end it is part of a full fledged Spring Boot CMS with different Restful APIs. Form layout can be configured using predefined JSON that can be loaded from simple JSON file or Restful API.

Objective

Core objective was to create a simple React component that can render multiple purpose contact us and quotation information like forms and can be controlled from back-end.

Another objective was to make it dynamic and easily configurable. So they can easily create and manage different forms from their CMS and integrate those forms in different React based websites.

Later they updated scope to also support survey and feedback forms that they can use to collect information from their site visitors occasionally and generate different reports based upon that data.

Solution

As they were already using a CMS and also because they were very much clear about the end solution. That’s why I didn’t change much in their requirements and project scope expect some minor tweaks as per user’s point of view.

We also divided complete solution into two modules keeping in mind their current CMS and architecture.

1. React component
2. Forms Manager and Restful APIs to generate JSON and save submitted information

React component support various different field types to collect information that includes simple text input, multi-line text input or textarea, date picker, date picker to collect date of birth, switches as a replacement to simple checkbox, checkbox and radio groups, etc.

You can also apply different validation rules like required, max number of characters, minimum age, number, email, websites, etc.

You can see a complete list of available field types, validation rules and settings in a sample JSON here.

Result

Final result was simple and spot on. Client was so happy and impressed by quality of work that they promised to consider and include me in their future projects in various different technologies.

As I have signed a NDA with client that’s why I can’t share their name, website, code and actual visuals here on my website. But, I am able to create a simplified version of React component by removing all references and APIs calls. You can look at the code and download it from my GitHub profile or project repo here. And you are free to customize and extend it as per your need.

• 

• 

You can contact me here for any future implementation of your application or project using React, Spring Boot or any other preferred technology stack of your choice. Or you can hire me on UpWork or Fiver.