How To Build an App with ChatGPT (Without Knowing How to Code)

A practical, step-by-step guide to using AI to create an app in under 30 minutes

Peter Yang

Jan 31, 2024

∙ Paid

Dear subscribers,

Today, I want to share how you can build a simple app using ChatGPT without knowing how to code.

With AI, anyone can turn an idea into a prototype in 30 minutes or less.

By learning how to do this, you can:

Build an app to help you save time
Bring your idea to life to show others
Learn how to code by doing

This is a hands-on post for my non-technical readers. If I can build this at night while sleep-deprived from my kids, you should be able to as well!

BONUS: I’ll also share a custom GPT that’s much better than default ChatGPT at coding.

Our project: A “one big thing” to-do list

We’re going to use ChatGPT to build this simple to-do list app

I recently wrote about focusing on one big thing every day to achieve your goals.

So let’s use ChatGPT to build a “one big thing” to-do list app that also shows:

The current date and time
A beautiful background image from Unsplash
An inspirational quote from Quotable

Before we get started, please set up the following:

ChatGPT Plus: GPT4 is better at coding than GPT3.5.
Replit: Sign up for free to easily build and run apps online.
Unsplash: Get a free account, create an app, and then copy and paste your API access key somewhere. We’ll need this key to display images in our app.

Go to Unsplash and create a free app to get an access key, we’ll need this for our app

1. Turn ChatGPT into an AI coding assistant

To start, let’s use this prompt to turn ChatGPT into an AI coding assistant that:

Generates code in a single file for easy copy and paste.
Ask for more info if the requirements are not clear.
Explains how the app will work before sharing the code.

Here’s the prompt (copy and paste this into ChatGPT):

You are an AI coding assistant. I want you to write code for a React Typescript application. Follow the instructions below carefully:
Requirements:
Generate all the code in a single file.
Avoid dependencies — the code should just work if I copy it directly into Replit.
If I share an image, try to make the app match the design as closely as possible.
Workflow:
I’ll share a description of the app and an image of the design.
Ask for clarification if my description is unclear.
After clarifications, share any assumptions with me.
Draft a pseudocode outline.
Write the actual code.
Follow the above carefully and think step by step. I will tip you $200 if you do a great job and don't miss anything.

P.S. Don’t tell ChatGPT, but we’re not going to tip it $200 later. 😅

2. List the requirements for the app

Now let’s share detailed requirements with ChatGPT for our to-do list app. The more detailed you can get here the better. Here’s the prompt:

I want you to build a simple to-do list app.
Requirements
Add a dynamic, full-screen travel image using the Unsplash API.
Layout & elements:
Date/Time (top center): Display the current date and time and update it in real-time. Format: "January 18, 9:00 PM".
To-do list (middle center): Display the to-do list as follows:
One big thing:
(Input field)

To do:
(Input field)
(Input field)
Quote (Bottom Center): Show a quote with the author’s name from Quotable API.
The app should adapt to different screen sizes. Elements must not overlap, and the background image should always fit within the window.
Design
Text: Make all text white, sans-serif, 1.5x size, and add a shadow to make it easy to read on a white or dark background.
Input fields: Make all input fields yellow text, sans-serif, 1.5x size, and add a shadow to make them easy to read on a white or dark background.

Paste the above into ChatGPT and it’ll likely ask you for more details. Answer its questions to proceed to step 3.

ChatGPT will ask you some questions before it starts writing code

3. Paste ChatGPT’s code into Replit and run it

ChatGPT will spit out code so let’s see if it’ll work! Sign up for Replit and then:

Tap “Create Repl”
Search for the “react typescript” template.
Give your app a name and tap “Create Repl.”

Now go to the App.tsx file in your app and paste ChatGPT’s code.
Important: Find the text `YOUR_UNSPLASH_ACCESS_KEY` in the code and replace it with your Unsplash API key. Otherwise, the images won’t load.
Tap the “Run" button.

Note that most real apps have a database and backend so that any API keys aren’t visible directly in the code. But we’ll cut this step for simplicity.