Idea From PDF to App: Prototype in 15 Minutes

What happens when you have a PDF and a bit of curiosity? I tried it out – and with the help of ChatGPT, I developed a functional tax calculator in just 15 minutes. But that wasn’t the end of it: find out how this idea turned into a Progressive Web App.

Recently, I received an email from my tax advisor. It was a general newsletter to all clients – nothing that required my full attention immediately. But when I saw the attached PDF with instructions on how to calculate monthly tax projections, I got curious. What could ChatGPT make of this document?

So I deliberately held back and only provided the PDF file to ChatGPT, without any additional information or guidance. I wanted to see how far we could get with just that. My first prompt was:

Analyze this PDF. Ignore the sample photo topic. Can you create a Vue form from it?

The document describes a simplified method for calculating tax projections, primarily in two steps:

1. Projection of the annual profit:

• The annual profit is calculated based on the business management evaluation (BWA).

• The formula for determining the annual profit is […]

The collaboration between ChatGPT and my expertise:

After I sent the first prompt, I quickly realized that Vue alone wasn’t enough to create a working form. So, I adjusted my approach and asked ChatGPT to integrate the code into a complete HTML page, including a CDN for Vue and Tailwind, so the project could run standalone.

Screenshot of the first version of the calculator

From there, the development continued step by step. Some of my further requirements were:

  • The results should be displayed in localized format, i.e., in the German number format.
  • A toggle for freelancers who do not have to pay trade tax should be added.
  • A month selector with the current month set as the default, and the profit label dynamically adjusted.
  • Finally, the month should be displayed in shortened form (e.g., "Jan" instead of "January"), and the calculation should occur live without a submit button.

With these changes, the prototype was complete. Before continuing, I sent it to my tax advisor for testing – and she was thrilled.

Further development after the prototype:

After my tax advisor tested the prototype and gave her feedback, I continued the development. The prototype was a solid foundation, but I refined and optimized it further.

The project was broken down into as many components as possible to clearly separate the input fields from the calculation results. This component-based structure made it easier to make changes to individual parts without affecting the entire application.

Another important step was to set up the tool as a Progressive Web App (PWA)1 . This made it available not only through the browser but also usable on mobile devices like a native app. A special feature is that custom tax rates and the freelancer toggle are stored locally. This means these settings are retained even after restarting the app, so users don’t have to enter them every time.

Conclusion:

This project showed me how powerful collaboration with ChatGPT can be. From the initial idea to the working prototype, it took just 15 minutes – an incredible speed considering the complexity of the task. But that wasn’t the end of it: over the next four hours, I continued developing and refining the prototype.

A particular highlight for me was that I gave ChatGPT just Tailwind, and it immediately produced a well-structured UI design. The UI came from ChatGPT, but the UX decisions were mine. This division of labor made the project both quick and efficient.

Final version

The final product as a Progressive Web App with locally stored settings was the last step that turned a simple prototype into a fully functional tool. In the end, this project shows that coding with ChatGPT is fast and easy if you know what you’re doing – and if you’re willing to use the tool as a partner in the development process.