No Dev? No Problem: How I Built and Launched an App with ChatGPT-4
The real revolution with LLMs’ coding capabilities is not when a 1x developer becomes a 10x developer but rather when people with little or no coding skills become 1x developers
I believe that the future of building fully functional apps or websites from a simple prompt is just around the corner. For example, MegaGPT offers a solution enabling you to quickly develop apps that interact with ChatGPT. However, it is still a long way to go to build something significant this way without programming expertise.
The real revolution with LLMs’ coding capabilities is not when a 1x developer becomes a 10x developer but rather when people with little or no coding skills become 1x developers. It opens up endless possibilities for a broader audience to create and test products faster.
It took me 8-10 hours to develop this app. Without the ChatGPT support, it would have taken me weeks.
I’m a product guy transitioning into product management from product design, but I have a head start since I worked as a front-end engineer for a while before transitioning to product design. I developed a few iOS games on Unity and conducted data analysis at the university. Despite this, I think creating an app like this is possible even if you have no coding experience, but it may require extra debugging and back-and-forth conversation.
Therefore, in this post, I’ll take you through my step-by-step process of creating an app from scratch with ChatGPT-4. If you want to see the final result, check out the app by this link.
The goal
My goal was to use ChatGPT to create an app that was at least a little useful for me that leverages GPT-3 API with minimal coding required. Although many tutorials out there demonstrate building some apps, they usually don’t cover anything more complex than something like an ugly to-do list. Even though my app is relatively simple, I wanted to complete an entire development cycle from concept to deployment.
Furthermore, I haven’t released a fully self-made app or side project to the world in a while, and I yearn for that feeling again.
The idea
I’m not a native English speaker, but I consider myself proficient enough to perform my work well and communicate clearly. However, I recognize that I have room for improvement to at least try to achieve native fluency.
Since the release of ChatGPT, I have used it to improve my writing, but I have found the process tedious at times. It can be time-consuming to input the right prompt and then paste a text I want to improve, especially when it is long. Even when I set up the prompt correctly to only receive an improved text as a response, ChatGPT’s response often misses the mark after some time, causing me to try again.
While there are apps such as Grammarly, Notion AI, and smaller language-specific apps that can help you improve your writing, they do not always meet my exact needs.
I have identified two primary use cases where I want my English to sound more native and casual. These use cases are:
writing content for publications like this
communicating with colleagues via email and Slack.
Additionally, there are times when I need to correct mistakes in my writing.
The app, main ChatGPT convo, and source code
To get straight to business, you can test my app by this link.
Here are some additional links to check out:
Explore the entire ChatGPT conversation here if you want to dig into details.
Initial plan
Preparation:
Sketch the idea on paper (although I can design, I wanted to see what ChatGPT can offer, so I avoided using any design tools).
Create the prompts and test them in ChatGPT.
Coding:
Set up everything for development with Vite and Vue.js.
Create input and output text areas with a simple request to OpenAI API, a CTA button, and necessary UX elements like loaders, clear, copy button, and character limit.
Integrate tailwind CSS to start designing right away.
Implement functionality that allows users to use their API key and much-needed logic to make usage more convenient.
Add mobile screens support.
Styling. Then, focus on aesthetics and choose Tailwind CSS as a framework.
SEO. Ask ChatGPT to create SEO artifacts.
Deployment. Lastly, deploy the app to Render, as I’m familiar with this platform.
Use ChatGPT-4 for all of these tasks.
What I learned
The process of creating this app was so insightful that I believe I have captured only a third of it below. But the main insight is that building an app with LLMs is fast, convenient, and super fun.
Nail the Preparation
It’s important to thoroughly plan out the concept, as it’s easy to follow a plan until unexpected changes occur and you need to get your hands dirty in code. Creating paper drafts, designs, and prototypes in apps is necessary if you’re working on a serious project rather than simply tinkering with ChatGPT.
For example, considering numerous usability scenarios and edge cases, I spent considerable time adding the functionality to allow users to provide their API key to use the app. However, I ultimately decided to stick with my API key since achieving a $50 monthly quota would require thousands of daily users, which is unlikely for this proof-of-concept app.
Define the tech stack
Defining the tech stack you’re working with, including the desired programming language, framework, and additional specifications and requirements, is crucial.
For example, I used Vite and Vue.js and encountered an issue importing the OpenAI key from the .env file. The suggested code did not work, and I didn’t get a solution during subsequent debugging. Later, I found online that there should be a specified prefix in the env variable to make it work, which is specific to Vite: VITE_OPENAI_API_KEY.
I also had trouble making Tailwind CSS work, and I’m not sure what the specific issue was. However, I found that the setup guide for Vite worked perfectly.
Alternatively, you can ask ChatGPT about the tech stack if you don’t know where to start. Oh, and don’t forget to consult ChatGPT for advice on phrasing prompts effectively.
Be cautious with APIs
ChatGPT may suggest outdated ones, even for its API. It repeatedly suggested using the deprecated Engines API, which wasn’t functional, and I had to switch to the new Models or Chat API independently. If you know precisely which API you want to use, directly call it out or feed the API manual to ChatGPT if it’s a recent one.
Structure your prompts
Be very descriptive with your prompts. Imagine that you’re hiring a human programmer to complete your task. Have you provided them with sufficient information to work on your assignment? Or are you being too vague and leaving the programmer with no choice but to ask questions or submit something completely unrelated to your requirements?
I have found the following prompt format to be the most useful:
1. Name and describe the UI elements.
2. Outline the logic, referring to the elements by their designated names.
3. Provide data for the logic or request to generate dummy data.
And don’t forget the use best practices for prompt engineering with OpenAI AP for prompting.
Debugging and prompts edits
You can follow up with additional prompts if you don’t get exactly what you need from ChatGPT. I like the term “conversational coding,” where you simply debug the code with consecutive prompts.
Sometimes, despite multiple attempts, you may not get the exact solution you want from ChatGPT. In such cases, I usually input the correct solution to ChatGPTy, providing context for future queries.
Occasionally, the conversation may go back and forth without getting anywhere. In these cases, you need to return to your initial question, edit the request and generate another response to avoid keeping all the unsuccessful attempts in its memory.
Ask for best practices
ChatGPT is good at suggesting the best practices and style guides for writing code.
Get your hands dirty with refactoring
This is probably the most exciting part of the experience, but also the most challenging as it isn’t always straightforward because ChatGPT couldn’t follow all the nuances in logic and therefore suggested improvements where it wasn’t necessary.
For example, it passes down all the data and methods to the component; however, some logic can be encapsulated inside it. So eventually, I didn’t finish app refactoring as it would take longer than I expected.
Split the code if it’s too long
During the conversation in the main thread, I asked about the steps required to divide the app into components. Eventually, I created a new chat and inputted the latest code so that it had all the context. However, the text exceeded ChatGPT’s token limit, leading me to split it up.
Create a backend for your app in no time
Even if you create a basic application that only utilizes the ChatGPT API, you still require a backend to store the API key securely. Even keeping the key in the .env file or cloud environment variable is not sufficient, as the key is still stored somewhere in the JavaScript code on the client side.
I decided to create a Flask backend because I have some prior experience with Flask. While I understand that using AWS lambdas or other serverless javascript functions may be faster and better suited for this particular scenario, I wanted to try deploying a full-scale Flask backend as I plan on using this stack for future projects.
The process was straightforward:
I inputted JS code, and with a few back-and-forth prompts, my Flask server was up and running.
The tool recommended a Postman test to see if everything was working correctly.
Then it provided instructions on connecting the server to my front end.
It also gave guidance on deploying the Flask server to Render.com.
I asked it to help with managing local and production environment URLs.
Lastly, it helped me solve some problems I had encountered during the deployment process.
Use established CSS frameworks.
ChatGPT writes its own CSS well but is proficient with other CSS frameworks like Tailwind. If you can visually explain your need, it will effortlessly create it in CSS.
Do the SEO in less than 5 mins
Have it describe what your app does for a tutorial and meta description.
Assist in creating long-tail keywords.
Generate an SEO article based on the app's features and selected keywords.
Request to format the text for your web page.
All in all, These small input-output GPT apps can be pretty helpful. With the advancements in current LLM APIs, it has become effortless to create mini-apps that get the job done, especially if you are a subject matter expert.
On a side note… Coding is like a quest; you know what the result should be, but you still need to figure out how to get there. ChatGPT is like a companion, tool, or cheat code you use to achieve your goal. The minimal effort required to create this simple app reignited a spark in me, and I’m now more enthusiastic than ever to start my side hustle solo entrepreneurial journey.
Thank you for reading my post till the end; I really appreciate that!
I would like to hear back from you, so if you have any feedback regarding this or other posts; ways to improve; a topic that you want me to write about in the future; or you just want to say something nice or not nice, please feel free to reply to this email or comment below.
This is such a great breakdown. I did a similar thing but no where near as thorough and as awesome as yours: https://www.productparty.us/p/i-too-built-an-app-with-chatgpt
I love this! I'm actually working on an app that can help condense a lot of these steps (from generation to getting it deployed). If you have a moment to check it out, I'd love to hear what you think: https://create.xyz