• 

  Mockup

• 

  Branding for the project

• 

  Landing Page

• 

  Dashboard

• 

  Form Page

• 

  Figma Prototype

Inspiration

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.

What it does

Formulate is a powerful, no-code solution to the problem of paper-based data collection, utilizing technologies such as Convex and OpenAI 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.

How we built it

1. 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.

2. Automated Form Processing Once the file is uploaded, Formulate utilizes OpenAI's machine learning 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.

3. 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.

4. 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.

Challenges we ran into

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 together smoothly. Another challenge we encountered 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 frontend and backend.

Accomplishments we're proud of

We're really proud of Formulate overall! We had a smooth ideation process, with an amazing prototype designed by Andrew :). We're also really proud of the creation of the backend using Convex, and the front-end of our landing page. Formulate can also do some additional fun things, such as generating a form using a rough sketch (with neat handwriting).

What we learned

Throughout the hackathon, we all pushed ourselves beyond our comfort zones. Many of us took on roles aimed at expanding our skill sets, rather than sticking to what we were already familiar with. This included deepening our understanding of React, which we successfully navigated by working together and learning as we went.

What's next for Formulate

Looking ahead, one improvement we would have liked to implement is integrating Auth0 for secure user authentication. This would have enhanced the security of Formulate by ensuring that only authorized users could access the web forms and its associated data.

Built With

• convex
• figma
• gpt-4o
• polaris
• react