Vibe Coding with AI - a success story

[DaveC426913]

TL;DR

Not a question, just marvelling at AI's capabilities

I'm old and I want to get stuff done. I have other hobbies than programming web applcations.

I just vibe-coded a complete GUI control panel for my dad's painting gallery. Didn't write a single line of code.

Backstory:
I built the gallery a year or so ago by-hand, to facilitate family and friends browsing and choosing any paintings they want. It has filter tags, resizing, and a sprinkling of useful metadata.

At its heart is a single .JSON object containing all 800+ items:

jsonListings = [
    {
        "folder": "./box-a",
        "store": "Box A",
        "img": "2521",
        "descrip": "",
        "note": "Corina",
        "price": "",
        "claimed": "true",
        "tags": [
            "matted",
            "structure"
        ]
    },
    {
        "folder": "./box-a",
        "store": "Box A",
        "img": "2522",
        "descrip": "",
        "note": "",
        "price": "",
        "tags": [
            "structure",
            "matted"
        ]
    },

Every time someone asks for a painting I've got to go in and update this .js file manually, then upload it to the server. A single missed comma or quote, and the whole thing bricks. My brother just asked for a dozen.

/Backstory

So I have been jonesing for a control panel that

1. eliminates crashy typos and discourages uncrashy typos.
2. works directly online, so I don't have to laboriously edit it in Notepad, then save the file, then upload it to the server every time.

I was on the verge of asking my PHP friend how much he'd ask to do it for me, when I thought I'd give ChatGPT a shot at it.

All it did was ask me for my data file and it

• built an entire CRUD (Create, Read, Update, Delete) interface to operate it,
• guessed the field types, including the multi-select tags I was using for filtering,
• created a one-time setup file so I could create my own a password access,
• implemented the list/line-item layout, a keyword search, a filter, two-level save, cancel, dupe and delete,
• supplied user prompts before committing to data-altering operations,
• left my data file exactly as-is, in human-friendly format with my inline, comments, in case I want to (or have to) fall back to operating it manually,
• used the proper PHP methods to encode the data, so it handles things like quotes gracefully (being a flat data file, it is also immune to SQL injection attacks),
• troubleshot a compatibility problem with the version of PHP my webhost uses. Replaced the 8.0 function with one that works with my webhost's PHP version,
• produced a README.TXT file to tell me exactly how to implement it and run the setup.

It did this all on its own without being asked.

The whole endeavor took maybe two hours - and 1.5 of those hours was me asking for aesthetic tweaks.

Here it is. One page, one file:

What a time to be alive. Also: damn I'm glad I'm about to retire...



And before you ask: why a .js data file, and not a proper database? Because I don't trust databases. Or, more accurately, I don't trust webhosts. Even more accurately, I don't trust myself to remember, a year later, how it works. Complex technology is fragile, and it rots. Versions change, my brain forgets how stuff was built, I lose intrest in maintaining/troubleshooting it. I've have more than one project get bricked because my webhost shuttered its doors, or the database became incompatible and it would take too much work to troubleshoot. And I like self-contained, portable, discrete web apps.

 

[FactChecker]

You'll like retirement if you like things like this. AI-generated code is great for fun things where the consequences of an error are not severe.
As the severity of a coding error increases, my concern increases.

 

[DaveC426913]

You'll like retirement if you like things like this. AI-generated code is great for fun things where the consequences of an error are not severe.
As the severity of a coding error increases, my concern increases.

Totally agree. As with all things: the right tool for the right job.

Useful as it may be for many other things, I would not use an internal combustion engine to clean my ears. There are safer, more appropriate tools for that.

 

[Hornbein]

A couple of years ago I used the free version of ChatGPT to create a small program in a programming language I didn't much know. It did a great job. The code was error free and well organized. It made a number of helpful suggestions about things to try that I never would have thought of. It knew linear algebra better than I did. The thing that impressed me most was how it could understand what I wanted with minimal instruction.

I did have to learn to work around its foibles. It would never admit it couldn't do something. Instead things would get worse and worse accompanied by declarations like "now I've nailed it!" so it was important to keep checkpoints to which one could retreat. I learned to never let it touch my code directly, as it would sometimes leave out things that weren't relevant to the issue at hand, me finding out about this much later. But on the whole it was a huge gain, speeding things up a factor of at least ten and producing a higher quality product. It didn't hurt that it kept reminding me what a genius I was.

I suppose things are better now but I've already had more than enough programming for one lifetime.

 

[cedricuk]

TL;DR: Not a question, just marvelling at AI's capabilities

I'm old and I want to get stuff done. I have other hobbies than programming web applcations.

I just vibe-coded a complete GUI control panel for my dad's painting gallery. Didn't write a single line of code.

Backstory:
I built the gallery a year or so ago by-hand, to facilitate family and friends browsing and choosing any paintings they want. It has filter tags, resizing, and a sprinkling of useful metadata.

View attachment 374778

At its heart is a single .JSON object containing all 800+ items:

jsonListings = [
    {
        "folder": "./box-a",
        "store": "Box A",
        "img": "2521",
        "descrip": "",
        "note": "Corina",
        "price": "",
        "claimed": "true",
        "tags": [
            "matted",
            "structure"
        ]
    },
    {
        "folder": "./box-a",
        "store": "Box A",
        "img": "2522",
        "descrip": "",
        "note": "",
        "price": "",
        "tags": [
            "structure",
            "matted"
        ]
    },

Every time someone asks for a painting I've got to go in and update this .js file manually, then upload it to the server. A single missed comma or quote, and the whole thing bricks. My brother just asked for a dozen.

/Backstory

So I have been jonesing for a control panel that

1. eliminates crashy typos and discourages uncrashy typos.
2. works directly online, so I don't have to laboriously edit it in Notepad, then save the file, then upload it to the server every time.

I was on the verge of asking my PHP friend how much he'd ask to do it for me, when I thought I'd give ChatGPT a shot at it.

All it did was ask me for my data file and it

• built an entire CRUD (Create, Read, Update, Delete) interface to operate it,
• guessed the field types, including the multi-select tags I was using for filtering,
• created a one-time setup file so I could create my own a password access,
• implemented the list/line-item layout, a keyword search, a filter, two-level save, cancel, dupe and delete,
• supplied user prompts before committing to data-altering operations,
• left my data file exactly as-is, in human-friendly format with my inline, comments, in case I want to (or have to) fall back to operating it manually,
• used the proper PHP methods to encode the data, so it handles things like quotes gracefully (being a flat data file, it is also immune to SQL injection attacks),
• troubleshot a compatibility problem with the version of PHP my webhost uses. Replaced the 8.0 function with one that works with my webhost's PHP version,
• produced a README.TXT file to tell me exactly how to implement it and run the setup.

It did this all on its own without being asked.

The whole endeavor took maybe two hours - and 1.5 of those hours was me asking for aesthetic tweaks.

Here it is. One page, one file:

View attachment 374781



What a time to be alive. Also: damn I'm glad I'm about to retire...



And before you ask: why a .js data file, and not a proper database? Because I don't trust databases. Or, more accurately, I don't trust webhosts. Even more accurately, I don't trust myself to remember, a year later, how it works. Complex technology is fragile, and it rots. Versions change, my brain forgets how stuff was built, I lose intrest in maintaining/troubleshooting it. I've have more than one project get bricked because my webhost shuttered its doors, or the database became incompatible and it would take too much work to troubleshoot. And I like self-contained, portable, discrete web apps.

The checkpoint advice is especially useful. AI can save a lot of time, but keeping a working version to fall back on seems essential when it starts making changes across a project. I also think being able to explain what you want in plain language is a big part of what makes these tools so useful.

 

[DaveC426913]

The checkpoint advice is especially useful. AI can save a lot of time, but keeping a working version to fall back on seems essential when it starts making changes across a project.

Fortunately, it also makes that easy by providing a downloadable, versioned zip file with each iteration. They unzip over top of the existing files, so only one production set of files, but if anyone of them doesn't work, I just unzip the previous version over top of it.


Oh yeah. One other feature it added without being asked. I created a "data backups" folder and auto-saves a time-stamped version of the data before making any changes to it.

 

[DaveC426913]

"It's like having an autistic but thoroughly competent comp sci grad student as an assistant."
- my PHP guy

 

[jedishrfu]

AI is like a djinn; be careful what you ask for and what you let it access.

It reminds me of Shakespeare's The Tempest or the sci-fi story Forbidden Planet, where the power of AI is harnessed by the Id, and we are no more.