How I Used ChatGPT to Develop a Web App Without Coding Skills

ChatGPT is a powerful tool for content generation, as many know. But it can also generate code in a variety of programming languages. I set out to perform an experiment: to see if I, a non-programmer, was able to use ChatGPT as my software developer to develop a basic web application for me. I wanted ChatGPT to generate all the code, the logo, the name of the website, everything.

Was ChatGPT up to the task? Yes, it generated a fully functioning web application for me, which you can check out here: HorizonTimer. The application is simple: a timer website with various clock and timer options. But it works, both on desktop and mobile!

The whole process took me about 8-10 hours.

In this article, I’ll explain how I did it, my experiences, and provide some tips on how you can use ChatGPT as your personal software developer.

Using ChatGPT As Your Personal Software Developer

If you’re going to attempt to use ChatGPT to develop web apps, games, etc., you definitely want to use GPT-4 with the plus subscription, not GPT-3.5. A Plus subscription costs $20, but is definitely worth trying, at least for a month or two to see what it can do.

GPT-4 is much more capable than GPT-3.5, and will produce much better code. If you can’t swing the $20, you can try using Bing Chat AI on Creative mode, which is GPT4 under the hood. But it doesn’t seem to work as well as straight GPT-4 to me, and Bing’s personality isn’t as good as ChatGPT.

I also used a CustomGPT called Grimoire, which is designed around programming. It has prompts to cut down on commentary and have ChatGPT focus on producing code blocks.

I don’t know how much of a difference it made, but it certainly didn’t hurt!

My Background As It Relates to Software and Web Applications

I run several Wordpress content websites that are hosted online, such as this one you’re reading right now. I am not a software developer and cannot code, though occasionally I have had to copy a php function or some html or javascript to fix something that has gone wrong on a website.

So I am at least familiar with the concept of functions, code blocks, etc. But I am unable to write any genuine code beyond “Hello World”.

I was curious as to how well ChatGPT could handle the complete software development process. I have read many programmers say that ChatGPT and AI-assisted software platforms like Github Copilot and Cursor AI have made them much more efficient.

I previously put together an article on how to use ChatGPT for web scraping, so I knew it was capable of generating usable code. But I wasn’t sure if it could build an entire application for me.

I wanted to find out: could these systems be used by non programmers, too?

In the end, I was quite happy with the results.

Using ChatGPT to Develop a Web Application

Here is the process I used to shepherd ChatGPT through the development process.

1. Download and Employ the Grimoire CustomGPT

As mentioned above, I used Grimoire coding wizard as a CustomGPT to help me along.

2. Explain the concept and basic features of the application

I knew I wanted to make a basic timer website, so I outlined the functions I was looking for in the timer. I knew I wanted to use Replit as my programming environment.

I asked what programming languages would be the best choice for the task, and ChatGPT recommended html, css, and javascript. That’s what we went with.

3. Start With Feature #1 and Slowly Build Out New Features

From there, ChatGPT began creating code blocks. We started with just a simple timer displaying the current time and date. ChatGPT provided me with the code blocks to place in the various files, and I started building the app.

Here’s what a code block looks like in ChatGPT. You can click the copy code button at the top right, and paste the whole thing into Replit in the appropriate file:

ChatGPT Grimoire Code Block

The program consisted of only three files:

  • index.html (the html file, ended up at about 90 lines of code)
  • script.js (the javascript file ended up at about 240 lines of code)
  • style.css (the css file, ended up at about 170 lines of code)

4. Deploy Code to Replit and Debug

The Replit Development Environment

Unless you use the API, there’s no easy integration between Replit and ChatGPT. You have to manually copy the code generated by ChatGPT over to Replit.

In the future, I can certainly imagine a more direct integration without needing to use the API (say a plugin). This would make coding much easier.

5. Continue To Add Features and Build Out The Program

More ChatGPT code

Once the development process has started, it basically consists of a loop of:

  1. Ask ChatGPT for the next block of code for the next feature
  2. ChatGPT produces the code
  3. You copy the appropriate code and place it in the appropriate location in Replit
  4. Test Run the program in Replit to see if anything is broken
  5. Check the console log for errors. If there are errors, tell ChatGPT what the error is
  6. If something is broken, tell ChatGPT what’s wrong, and provide the relevant bit of code

6. Have ChatGPT generate a logo and brand for the program

I asked ChatGPT to come up with a bunch of name ideas for my timer, and wanted something that was available as a .com domain. I eventually settled on HorizonTimer, and asked ChatGPT to generate a logo and text lockup.

7. Host the Web App on a Server

Once I had the logo and url, I uploaded the files from Replit to the server, and configured it so that HorizonTimer was live on the web.

The entire process took me in the range of 10 hours over a few days.

The Challenges of The ChatGPT Software Development Process

This application was obviously quite simple, though I’m sure if I wanted to I could add several more features to make it more complex. In my experience, as the code itself gets longer, it is more difficult to find errors and to supply ChatGPT with what it needs to diagnose and fix errors.

This can really bog down the development process.

Often you’re copying whole files back and forth, pasting them into chatgpt and saying something like “The program doesn’t run. The console shows a Type Error on line 47. How do I fix it?” Over time, this gets unwieldy with several-hundred-line files.

Often ChatGPT would provide only portions of the code, not a whole file with the new code it has changed integrated into all the existing code. Copying these smaller code blocks can be challenging, and this is where most of the errors seem to occur.

Review Every Code Snippet ChatGPT Provides for Comments

Be sure to read every code snippet ChatGPT gives you. I can’t really understand code, but I am able to see the difference between comments and actual code. Often ChatGPT will provide a portion of code but then include something like:

/* the rest of your function here */

These are comments, and you need to pay attention to them. If they are present, you may need to copy only some of the code rather than everythign in the code block.

As the files get longer, it can be a struggle to get ChatGPT to provide a whole script.js file or whatever with the code it wants to add, as well as all the existing code you had generated. Using Grimore and Custom Instructions to provide complete code blocks can help, but it’s still a challenge.

A Few Tips To Make the Process Smoother

Encourage ChatGPT to provide full files whenever possible so that you can just copy and paste the whole thing. The more it gives you complete files, the easier the process is.

And as you’re working, keep reminding it of the existing code base by pasting what you have so far back into ChatGPT’s window for it to review. Even though supposedly ChatGPT can remember things from 100,000 tokens ago, that doesn’t seem to exactly work in practice. Regularly copying your code back into ChatGPT will help.

Final Thoughts

This is the worst AI systems like ChatGPT will ever be at programming. It is clear that the field is moving quickly, and as I have shown, it is now pretty easy for non-coders to be able to develop software on their own using ChatGPT and simple, natural language.

Going forward, this will become easier and easier. If you want to start using ChatGPT for software development, I definitely recommend starting small to get the hang of how it all works before getting too adventurous with your amazing App idea.

And if you haven’t signed up for it yet, it is absolutely worth trying a month or two of GPT-Plus to get access to GPT 4 power.

See also:

Author