A Journey of Building a Form Builder: Week 1 Progress Report
Last week, I embarked on a new personal project with the goal of building a form builder from scratch. I chose this project to challenge myself and to improve my skills in building projects from beginning to end. The first week was a roller coaster of learning and problem-solving, but I am proud to say that I made significant progress toward my goal. It’s important to note that each “day” in the timeline below may encompass several hours of work or only a couple, depending on the completion of that day’s objectives.
Day 1: Scaffolding the Project
I started by scaffolding a React + TypeScript + Flask project. I used a new tool called vite.js to build my React app, as I had read that the create-react-app way was no longer the preferred method to build a React.js application. I worked on connecting my backend to MongoDB Atlas but ran into a connection issue when trying to use environment variables to hide the connection credentials.
Day 2: Fixing the Database Connection
Within 2 minutes, I fixed the database connection issue. It turned out that I was formatting the connection string incorrectly, causing it not to connect to the database. I learned more about f-strings in python and how they can be helpful in solving problems like this one.
Day 3: Research and Mockups
I took some time to research other form builders on the market and made mockups of the homepage and templates page for future reference. I also implemented the initial routing for the frontend to get a visual idea of where everything would be on the site.
Day 4: Experimenting with CSS Frameworks
I experimented with a new CSS framework called Grommet, but I found that it made my life more difficult than if I were to build the navbar and footer from scratch. I switched to a more familiar framework, Bulma, and had a beautiful navbar and footer within minutes. With Bulma, I created the homepage based on my previous mockup and set up routing for the other pages I needed.
Day 5: Researching the Drag and Drop Feature
I researched the drag-and-drop feature on other form builders and found a library called react-form-builder2 that I could use. However, I ran into a problem where I couldn’t get it to display in the browser. I suspect that it may not be compatible with the package manager I’m using, so I plan to try uninstalling and installing a different one on Monday.
Overall, it was a productive first week, and I am excited to continue working on my form builder project. Stay tuned for updates on my progress!
Supplemental Resources
Learn about “f-strings” in Python (scroll down to “f-Strings: A New and Improved Way to Format Strings in Python”)