A Journey of Building a Form Builder: Week 6 Progress Report
This week, I focused on implementing the react-dnd library and making draggable and droppable cards on the FormBuilder page.
Day 1: Implementing the react-dnd library
I began the week by implementing the react-dnd library and getting the initial setup done. This involved making and displaying a static list of cards first on the FormBuilder page and styling them to be in columns and to the right.
Day 2: Making Cards Draggable with react-dnd
I made the cards draggable using the react-dnd library. I was able to get the drag capability on the list of cards and made an initial dropzone area easily enough. The dropzone is where users will drop different cards containing form elements like “header”, “paragraph”, “email”, etc. Each card can now be dragged individually to this area, and the preview of the draggable card is easy to see.
Day 3: Making Cards Droppable in the Dropzone
I spent time working on making the cards droppable in the dropzone. I had to figure out why the drop function from react-dnd wasn’t working correctly.
Day 4: Cleaning Up JS Files and Getting Drop Functionality to Work
By adding an additional line to the tsconfig.json file, I was able to resolve the issue of autogenerated .js files cluttering the workspace for every .tsx file in the project. Additionally, I made changes to the vite.config.ts file to fix the drop functionality, which was not working as expected in development due to a problematic “global{}” line that was causing different behavior in development versus production. Removing this line allowed the drop functionality to work properly in both environments. I also added interfaces to *d.ts files as necessary to resolve any warnings or missing files. During my troubleshooting process, I rolled back on the versioning for several dependencies. Now that the drop functionality is working in both development and production, I may be able to update these dependencies individually in the future. Lastly, I updated the scss and DragDrop files, so that cards are properly dropped into the form builder area.
I made great progress in implementing the react-dnd library and making the cards draggable and droppable. Thanks for reading and stay tuned for next week!
Supplemental Resources
- React Dnd Library