React Form Builder [GSoC Project] [Global Alliance for Genomics and Health]
This is a project report about my GSoC Project about how I implemented a React Form Builder.
About the Project:
When we talk about genetics data collection in this date, the way the data gets collected is not uniform. Thus developing a solution for analysing or sharing this data is not an easy process.
This project aims to solve this issue. This projects implements a React drag and drop form builder where user can create dynamic forms using drag and drop operations. This data which the form collected is stored in GA4GH standards and thus are very easy to integrate with third party libraries to analyse.
Technologies Used: ReactJS, ReactDND, Formik
Important Links:
GitHub Repo: https://github.com/TrakGene/react-form-builder
Live Demo: https://react-form-builder-trackgene.vercel.app/
Documentation Link: https://rfb-docs.vercel.app/docs/intro
TrakGene: https://www.trakgene.com/
If you want to know more about the project overview please do check the Documentation. The further section will talk about my GSoC Timeline.
My GSoC Timeline:
May 20 — June 12 [ Community Bonding Period] :
At this stage I had regular meetings with my mentor about the various libraries and tech stack we can use for the project. After discussion we decided to choose ReactJS for the project. In this period I also finished setting up my development environment for the project. The project repo was also created during this timeframe.
June 12 — July 1 :
This was a stage where there was a lot of discussion with my mentor about the internal data structure we are going to follow for the project. After discussion it was decided to follow a Graph data structure to store the section data of the form. I decided to follow a service structure for the project (a single service file with helper functions) which handles all the CRUD operations performed on the graph data structure.
The following are some of the commits during this period.
Adding Initial Structure to form Builder
Adding Initial Structuring Services to the core structure
July1 — July 24 [MidTerm Evaluation]:
At this stage I started making modifications to project to add support of Drag and Drop in the project. Moreover I developed the form elementary Form element types during this period (Short Text and Checkbox Form Element). Also added create, edit and delete functionalities to the above mentioned form elements. Also made some minor modifications to the decided schema.
The following are some of the commits during this period.
July 25 — August 15
At this stage I developed several other form Types (Dropdown, Linear Scale, MCQ etc). Conditional Sections was introduced to the project at this time which was a very time taking feature. There were several discussions regarding this part. I also made some bug fixes during this time.
The following are some of the commits during this period.
Added Basic Support for Conditions in Sections
August 15 — September 8
At this stage I fixed some of the very big issues of the project like handling the schema when a form Element attached to a pre-existing condition is deleted etc. Also added Embed Content support to the form. Moreover I made UI enhancement and added Mobile Support for the drag and drop feature. Lastly I also created the detailed documentation for the project.
The following are some of the commits during this period.
Added Mobile Support for Drag and Drop
Add Embed Content and Bug Fixes
All the commits of the project can be checked here
Acknowledgement:
I would like to sincerely thank my mentors, the GA4GH community, and Google for giving me an enriching experience this summer. I am extremely thankful for the opportunity to participate in this program and enhance my programming skills while developing the react-form-builder project.
I am immensely grateful to Tim Jackson for his constant guidance, timely and extensive code reviews, and engagement in regular discussion to clarify my queries.
The GA4GH has always been welcoming and helpful. Their efforts towards improving the developer experience have provided a very conducive environment to contribute. I am grateful and elated to be a part of it.
