Formulate
A no-code app that digitizes paper forms instantly. Powered by AI, it transforms images into interactive web forms, streamlining data collection and management for any industry. I worked on this project in a team of 4 at Hack the North 2024.
CATEGORY
Full Stack
NAME
Formulate
DATE
September 2024
Project link
LIVE WEBSITE
In today's fast-paced digital world, the reliance on paper forms persists across various industries. From healthcare intake forms to legal documents and government tax forms, business entities and organizations still spend considerable resources on managing physical forms. This slows down workflows and creates challenges in storing, accessing, and analyzing data efficiently. Enter Formulate, a web application designed to bridge the gap between physical forms and digital efficiency. Formulate aims to revolutionize how businesses, government organizations, and nonprofit entities handle forms by digitizing them seamlessly and efficiently, allowing users to easily upload, customize, and manage forms.
Formulate is a powerful, no-code solution to the problem of paper-based data collection, utilizing technologies such as Convex and OpenAI's GPT-4o to streamline the digitization process. At its core, Formulate allows users to upload paper-based forms in various formats (e.g., PDFs or images) and seamlessly convert them into structured, interactive web forms without any technical expertise required. This transformation happens instantly, creating both the frontend interface and backend infrastructure automatically. By digitizing these forms, users can easily store and manage data, making it accessible for future use, analysis, or integration into existing systems. Formulate eliminates the need for manual data entry and offers a complete, end-to-end solution for modernizing data collection workflows.
File Upload and Conversion – The user journey begins with the ability to upload a file (PDF, image, etc.) that contains the desired form. This could be a paper form that has been scanned or a digital document that needs to be made interactive. The file is stored securely in the backend using Convex’s file storage system, ensuring privacy and data protection.
Automated Form Processing – Once the file is uploaded, Formulate utilizes OpenAI's GPT-4o model to analyze the document. The application extracts essential form data, such as questions and answer types, and converts it into structured JSON format. This process enables the identification of question types, including free-response, multiple-choice, checkboxes, and more. For example, a form may contain a question like "State your name," which would be categorized as a free-response text field, or "Select your state," which would be converted into a multiple-choice field.
Dynamic Web Form Generation – Once the form data is processed into JSON, it is passed back to the frontend, where it is dynamically converted into a responsive web form using React components. Each question type (e.g., text input, radio buttons, checkboxes) is rendered as an appropriate interactive element, allowing users to fill out the form digitally.
Form Submission and Backend Integration – Once a user fills out and submits the digitized web form, the data is captured and stored in the backend using Convex’s serverless platform. Convex provides a highly scalable, dynamic backend that enables real-time updates and integrations, ensuring that the submitted form data is processed and stored efficiently.
During the hackathon, one of the key challenges we faced was node compatibility between Convex and Shopify Polaris. This incompatibility led to issues in setting up the development environment, causing delays as we had to troubleshoot, downgrade, and configure dependencies to ensure both systems could function smoothly. Another challenge during the hackathon was formatting the JSON files for dynamic form generation. We faced issues with ensuring consistency across different fields and data types. This required a lot of debugging to ensure that the JSON schema was correct and that it aligned with the expected input for both the front end and back end.
Throughout the hackathon, we all pushed ourselves beyond our comfort zones. Many of us took on roles to expand our skill sets rather than sticking to what we already knew. This included deepening our understanding of React, which we successfully navigated by working together and learning.
