How To Develop A Web App With ChatGPT (from first prompt to published app without knowing how to code)

I am a marketer, No code guy, always interested in tools that make it possible to build websites, apps, and more without writing code.

So when I heard that ChatGPT can help do that, I got interested in trying it out.

Following this recipe, you can develop an app without knowing how to code.

This app will create square images that can be shared on social media. You can quickly adapt my prompts so the app generates graphics that match your brand’s style. Think of this as a highly simplified version of Canva.

Depending on your knowledge, you can take this concept pretty far.

Prerequisites:

What we are going to develop:

A web app that allows us to generate an image for social media sharing.

It’s a cumbersome task to build the same type of image repeatedly. So, I was looking for a way to ease the task of creating square social media images with text on it (for my LinkedIn profile). Those images should have Fresh van Root branding (the icon logo), a gradient background, and a specific font. I should be able to choose between two background image files, and depending on which background image I choose, the font color should change.

These are the images the app can create:

To get started, start a conversation with ChatGPT as you would for anything else. There is no secret dev mode or developer extension you need.

In my first prompt, I outlined the basic concept of the app:

As you can see in the responses, certain kinds of apps get created a lot of times, like a To-Do list app.

We continue our conversation with the following prompt.

Now, the requirements in detail that define the user input and what should be generated:

This prompt is already very specific, outlining what the user input should be, which graphic files to use, and providing details about positioning etc.

What now follows is ChatGPT generating the code, split into 3 files:

  • The HTML file (the user interacts with it / holds formatting, layout)
  • A CSS file (defining the style)
  • A JavaScript file (it contains the logic)

You do not have to worry if you do not understand that; let us continue.

This is what the output looks like:

ChatGPT splits up the code generation and explains what is happening.

Now, after some more wait time, ChatGPT has finished generating the first version of our app.

And this is where the magic happens: ChatGPT asks us to publish the app immediately using Netlify Drop.

No manual step is necessary. You do not need to save and publish the code on a web host.

But here comes the thing: It probably won’t be the desired result. You often miss details in your prompts, or ChatGPT generates incomplete code.

In our example, ChatGPT delivered an app that looked right, but nothing happened when clicking the Generate button.

ChatGPT can debug its generated code and will try to fix the issue.

ChatGPT forgot or ignored some of the details I provided in my initial prompt, so I provided them again:

Now, we redeploy the updated code.

Something crucial for you to know about this process:

  • Every time you deploy a version of the app to Netlify, it gets a new URL
  • You have one hour to claim the URL
  • Whenever you generate a version of the app that works or is an improved version of a previous one, you should claim the URL. This is very easy: Create a free Netlify account and click the claim URL link in ChatGPT.

It is also very important to save the app locally, here is how to do that:

  • When you get a version of the app that works for you, tell ChatGPT to show you the entire code, not just the updated part.
  • Copy the code to a text editor and save each file individually
    • Index.HTML
    • Style.css
    • script.js

I am using Sublime, but you can use any text editor.

I do not want to bore you with the back and forth that happened until I got the app I wanted, but it was within 10 more prompts.

Try out my LinkedIn Square Image Generator app.

I made some further updates to the app:

  • Increasing the width of the input form
  • Showing the image without clicking Generate

Bonus Tip: You can run the app locally in your browser. Once you stored the 3 files (HTML, CSS, JS) on your hard disk, you can browse to the folder and open the index.html in your local browser.

Now, how can you replicate this app for your use case?

  • Upload your logo somewhere on the web
  • And upload potential background and other graphics you want use in the app
    • The images need to be reachable via a public URL (for example, you could upload them to a WordPress site)
  • Customize font details
  • Change the prompts accordingly.

And with that, you should get to an app that generates images that match your brand.

But this is just the minimal viable prototype. You can extend that app to build carousels for your LinkedIn posts or add a file upload dialog to let the user upload graphic files, and much more. The options are limitless.

Here is the initial ChatGPT prompt to get you started:

The User input in the web app

– Headline Max 80 chars
– Supporting Headline mx 150 chars

– Choose one of the two graphic files:
— Gradient light: https://your graphic file.com/graphic1.png
— Gradient full colors: https://your graphic file.com/graphic2.png

– If user clicks generate:

– Create a square image with 1800×1800 px
– The gradient is scaled to fit on the image (ignore the original ratio of the gradient)
– Place this icon Logo icon bottom right: https://yourlogo.com/yourlogo.png
— the icon should be placed in the bottom right, 150x150px

The entered text should be placed like this:

Font requirements:

Headine: Google Font Poppins Bold
Supporting Headline: Google Font Poppins Regular

Place the font with a 20% padding
Both centered on the image
First the headline
Then the supporting headline

Other things to note when developing apps with ChatGPT:

Developing the prototype of the app took only minutes. But to get the result I wanted, it took a few hours. Why? Because ChatGPT often forgets a detail to add, adds a bug, or deployment to Netlify fails and brings a 404 error.

What can you do about that? Save working versions locally, not only on Netlify (see above), and also point ChatGPT to working versions (for example, I once said to ChatGPT, “Please revert to the version you deployed at 2:14 PM”)

Conclusion

Creators of all trades should look for tasks they do repeatedly and check if they could be sped up by having a specific app to get them done. Social Media image creation is one example, but in a creator’s life, hundreds of small tasks are to be accelerated.

Developing apps got way easier with ChatGPT, and the process is much faster than learning a specific no-code platform. Creators, marketers, and entrepreneurs should take this seriously and try it out for their projects.

More Content on how creators can use ChatGPT:

Get Access To Our List of 185 Tested Apps!

All you have to do is join our newsletter.

Every two weeks you will get an email with 4-5 recommended apps, plus reading tips.

Our newsletter is for marketing nerds, online creators of all kind, and entrepreneurs. up!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Curation & Analysis

Join 1000 curious marketers, content & web-creators, and entrepreneurs who get our bi-weekly curated newsletter.

Sign Up and get access to a list of 185 tested apps!