Experiment 3: Prompt Programming – How to Build a Simple Drawing App with ChatGPT & v0

There were two key reasons I decided to create this app.

First, I wanted to challenge myself. I’m not a developer by trade, so the idea of building something functional with prompt programming was exciting.

noxnoxnoxnoxnox

Could I really create an app without traditional coding knowledge?

noxnoxnoxnoxnox

That was the experiment.

noxnoxnoxnoxnox

Second, I wanted something practical—a simple drawing app.

noxnoxnoxnoxnox

My family and I could use it at home or work for fun activities or during chores time.

noxnoxnoxnoxnox

Who draws the short straw? Who’s doing the dishes tonight? Who’s the one going for new batch of ice cream?

noxnoxnoxnoxnox

This app would answer those questions with a quick draw!

noxnoxnoxnoxnox

What is Promptgramming – Prompt Programming?

noxnoxnoxnox

Prompt programming refers to the method of creating applications or solutions using natural language commands or prompts, often through tools like ChatGPT, which interpret and transform those prompts into executable code.

noxnoxnoxnoxnox

The concept behind it is that even someone with no coding background can leverage AI to build apps, automating processes, and developing software iteratively, using conversational prompts instead of manual coding.

noxnoxnoxnoxnox

Tools I Used

noxnoxnoxnox

• Vercel (v0): A powerful platform to deploy and host the app with zero configuration.
• ChatGPT (o1): My main tool for generating code and solving problems throughout the process.
• Cursor Code Editor: A user-friendly interface to adjust and fine-tune the code.

The Development Process

noxnoxnoxnox

I went through 20-something iterations to build this app.

noxnoxnoxnoxnox

Here’s how it went:

noxnoxnoxnoxnox

Planning & setup:

noxnoxnoxnoxnox

I began by laying the foundation—creating the basic HTML structure and adding essential elements like buttons and text areas using Vercel’s v0 app.

noxnoxnoxnoxnox

Drawing Functionality:

noxnoxnoxnoxnox

The heart of the app was a name-drawing feature.

noxnoxnoxnoxnox

I wanted the app to randomly select names from a list, which is ideal for deciding chores or simple office activities.

noxnoxnoxnoxnox

Settings and Customization:

noxnoxnoxnoxnox

To make the app more versatile, I included a settings panel where users could input names, set a timer, and even decide whether to remove the winner after each draw.

noxnoxnoxnoxnox

User Interface (UI):

noxnoxnoxnoxnox

Using prompting and v0 app ChatGPT o1 wrote the CSS, and styled the app to make it visually appealing, adding playful fonts and background gradients to give it a light, fun feel.

noxnoxnoxnoxnox

Confetti Animation:

noxnoxnoxnoxnox

For added excitement, I added confetti animations to celebrate each draw, using a simple third-party library.

noxnoxnoxnoxnox

This added a fun element to the experience.

noxnoxnoxnoxnox

Testing and Iteration:

noxnoxnoxnoxnox

With every update, I iterated on the code by prompting ChatGPT to fix bugs or add new features.

noxnoxnoxnoxnox

It took about 25 rounds of improvement before I arrived at a smooth and functional app.

noxnoxnoxnoxnox

Final Code Breakdown

noxnoxnoxnox

The app consists of several key files:

noxnoxnoxnoxnox

1. HTML (Structure)
   • Main layout with a header, button for drawing names, and a settings panel.
   • I used a simple, intuitive design, including space to display the drawn name and confetti celebration on a successful draw.
2. CSS (Style)
   • Custom font (Lilita One) to give the app a quirky, handwritten style.
   • A gradient background for a modern look.
   • Button styles that make the UI interactive and responsive.
   • The app is mobile-responsive, ensuring it works on both desktop and mobile devices.
3. JavaScript (Functionality)
   • The drawing logic, which randomly picks a name from a user-inputted list.
   • The settings panel, allowing customization of name lists, timers, and the option to remove the winner.
   • Confetti animation to celebrate each draw in a fun and engaging way.

App Features

noxnoxnoxnox

Here are the main features of the app:

noxnoxnoxnoxnox

1. Random Name Picker: The core functionality, perfect for chore assignments or casual office use. Input a list of names, hit “Draw,” and let the app pick the lucky winner.
2. Settings Panel:
   • Input names directly into the settings.
   • Set a timer for how long it takes to draw.
   • Decide whether the winner should be removed from the list or stay in the pool.
3. Confetti Celebration: A festive animation using the confetti.js library whenever a name is drawn.
4. Responsive Design: Whether you’re on a mobile phone or desktop, the app adjusts to provide an easy and enjoyable experience.

The verdict – Can apps be built only by using prompting?

noxnoxnoxnox

Absolutely.

noxnoxnoxnoxnox

This experiment proved that prompt programming can be a viable way to build fully functional applications without traditional coding skills.

noxnoxnoxnoxnox

Through tools like ChatGPT and platforms like Vercel, I was able to transform simple ideas into code, refining the app with each iteration.

noxnoxnoxnoxnox

It wasn’t always smooth—there were bugs, limitations, and constant tweaking required—but that’s part of the development process.

noxnoxnoxnoxnox

What’s amazing is that, with a bit of persistence and creativity, non-developers can bring their ideas to life through prompting.

noxnoxnoxnoxnox

Would I say prompt programming can replace developers entirely?

noxnoxnoxnoxnox

Not quite.

noxnoxnoxnoxnox

Complex projects will still need the expertise of seasoned developers, but for simpler, creative apps like this one?

noxnoxnoxnoxnox

Yes, prompt programming is more than enough.

noxnoxnoxnoxnox

In the end, not only did I create a fun and functional app for the office and home, but I also proved that technology is increasingly accessible to everyone.

noxnoxnoxnoxnox

With AI tools and a bit of patience, anyone can build something great.

noxnoxnoxnoxnox

Building this app using prompt programming was a rewarding journey.

noxnoxnoxnoxnox

Not only did it show me that it’s possible for non-developers to create functional apps, but it also resulted in a practical tool I can use at home and in the office.

noxnoxnoxnoxnox

What should be my next experiment?

noxnoxnoxnoxnox

TRY THE APP HERE

noxnoxnoxnoxnox noxnoxnoxnoxnoxnoxnoxnoxnoxnoxnox