I Tried Using Vibe Coding to Create My Own Productivity App

Since AI chatbots specified arsenic ChatGPT burst onto the scene, determination has been a tiny magnitude of panic astir AI taking each of our jobs. While determination are inactive plentifulness of things that AI chatbots can't yet do, 1 country wherever they person proved to beryllium awesome is coding.

It's present imaginable for anyone to make their ain codification utilizing AI chatbots simply by explaining what they privation to bash successful a prompt, a method that has travel to beryllium known arsenic vibe coding. I decided to springiness vibe coding a effort to spot if I could make a elemental app without entering a azygous enactment of codification myself.

What Is Vibe Coding?

Vibe coding is simply a method of creating bundle oregon applications utilizing AI tools, such arsenic chatbots, to make codification based connected written descriptions. If you privation to make a side-scrolling level game, for example, alternatively of penning the codification yourself, you conscionable explicate to an AI chatbot what you privation the crippled to do, and the chatbot volition make each the codification for you.

You tin past refine your instauration with further prompts, asking the chatbot to marque changes to however the crippled behaves oregon to hole immoderate bugs that occur. By getting the chatbot to refine the codification for you, you tin make moving bundle without penning a azygous enactment of code.

Picking an Idea to Create

I person a small coding experience, but I wanted to spot if I could usage vibe coding to make thing without having to marque immoderate changes to the codification myself. I didn't privation to spell for thing excessively complicated; I conscionable wanted to spot if vibe coding would enactment to marque a utile and functional app purely by describing what I wanted.

I've ever struggled with productivity, uncovering that I get easy distracted, and I've tried galore apps to effort to lick this. The Pomodoro method of 25 minutes of focused enactment followed by a five-minute interruption has helped, but I've inactive recovered that I get distracted during the focused sessions. I've besides recovered time blocking to beryllium useful.

I decided to effort to make an app that combined both. It would make 30-minute blocks of clip that I could capable successful with the tasks I wanted to complete. Each artifact would person its ain Pomodoro timer that I could tally from the block, and astatine the extremity of each 25-minute league of work, it would punctual maine to participate immoderate distractions that occurred. This would assistance maine way the things that are stealing my absorption truthful I could fig retired ways to halt those distractions.

Choosing a ChatGPT Model

Now I had my plan, I was astir acceptable to start. I person a ChatGPT Plus subscription, truthful that was the chatbot I planned to use. The adjacent determination was to prime which exemplary to usage successful ChatGPT. All the models tin grip coding to immoderate extent.

Some models enactment the Canvas feature, which opens a abstracted model for your code, but since I'm vibe coding and don't privation to interaction the codification astatine all, this wasn't important. In the end, I opted for the o3-mini-high model, which is based connected the o3-mini model that has a bully estimation for coding. The o3-mini-high exemplary is supposedly much intelligent, though it takes a small longer.

The First Attempts astatine Creating My App Got The Basics Down

I started by describing what I wanted the app to do. I tried to see arsenic galore of the features that I wanted arsenic possible. This was the hardest portion of the full process; I needed a wide thought of precisely what I wanted the app to bash and needed to picture it arsenic accurately arsenic I perchance could. This would guarantee that the effect was arsenic adjacent arsenic imaginable to what I wanted.

I typed retired a punctual that included astir of the features that I wanted to include, and the exemplary started thinking. After a infinitesimal and 19 seconds (I cognize due to the fact that it told me), ChatGPT produced a artifact of code. I copied it into TextEdit, saved it arsenic an HTML file, and erstwhile I opened the file, the app loaded successful my browser.

The archetypal effort was reasonably good; it had the blocks of times acceptable retired and the fields for entering the names of the enactment sessions, selecting the times, and adding them to the schedule. There was a wide docket fastener that cleared the full page.

Once I entered the sanction for a session, I could click the "Play" icon for that league to commencement a 25-minute timer, aft which a five-minute interruption timer would run. So far, truthful good. This wasn't the finished product, however, truthful I was going to request to marque immoderate changes.

Using Further Prompts to Fix the Countdown Timer and Layout

There was an contented with the layout; the clip blocks were arranged truthful that the times accrued horizontally crossed the screen, but I wanted the times to summation vertically successful columns. I hadn't specified this successful my archetypal prompt, truthful this 1 was connected me.

Additionally, I wanted the timer to open arsenic a full-screen window. This would assistance to artifact retired each the different apps and springiness maine little distraction (I'd beryllium moving the app connected my MacBook portion moving connected my iMac).

I entered a punctual explaining what I wanted to fix, on with different mates of tweaks, and ChatGPT thought for different 44 seconds earlier generating the caller code. Running the caller code, I recovered that my instructions for the layout had been excessively ambiguous; the times were present 1 agelong vertical file alternatively than the grid I'd asked for initially. This was an important acquisition astir vibe coding: The results are lone ever arsenic bully arsenic your instructions.

I added different punctual to clarify, and aft a further 39 seconds, I got the corrected code. Running the caller mentation gave maine the layout I wanted and fixed the different tweaks that I'd asked for.

There was besides a occupation with the countdown timer. It worked good erstwhile the countdown surface was successful focus, but if I started utilizing different apps, the number wouldn't proceed accurately. If I utilized different app for a minute, the timer would lone person dropped by 30 seconds, for example.

I added different punctual asking to hole the contented with the timer, explaining that I wanted the clip to beryllium measured accurately adjacent erstwhile the app wasn't successful focus. After different 72 seconds, the codification was generated, and the timer occupation was fixed.

Asking for Additional Code to Autopopulate Fields

The adjacent occupation was thing I hadn't considered erstwhile I was penning my archetypal prompt. When readying my day, I would beryllium apt to capable successful each clip artifact successful order. In it's existent form, the app was automatically populating the clip tract with the clip of the adjacent disposable block.

However, since astir of my tasks usually instrumentality much than 25 minutes, I volition usually insert respective blocks for the aforesaid task, truthful it made consciousness for the league sanction to support the sanction of the erstwhile artifact until it is overwritten.

I crafted different prompt, and ChatGPT did its thing. After a infinitesimal oregon so, the codification was generated. It astir worked arsenic expected, but determination was 1 problem. If I selected an alternate clip utilizing the drop-down menu, the league would beryllium added to the adjacent disposable slot alternatively than the clip I'd selected. Another speedy prompt, and 15 seconds later, the occupation was fixed.

Adding a Way to Log Distractions

I realized determination was 1 important portion that I'd missed successful my archetypal prompt. One of the things that I wanted from my app was the quality to log thing that had distracted maine during my focused enactment session. This would assistance maine to find the astir communal causes of my distractions and try to find ways to minimize them.

This was wherever I tried thing a small different. My archetypal punctual had missed immoderate cardinal information, truthful I wondered if ChatGPT could adjacent assistance maine constitute the vibe coding prompt, too. I opened the GPT-4o model, explained what I wanted successful rambling terms, and asked it to springiness maine a punctual that I could usage to marque the due changes to my code.

I took the resulting punctual and pasted it into my vibe coding chat, and ChatGPT updated the codification for me. It took a fewer further tweaks to get it moving perfectly, but earlier long, I had each the features that I needed for my app.

The completed app does everything I asked for, and it was created without maine penning a azygous enactment of code. I'm definite I'll marque immoderate improvements to it implicit clip (it doesn't look great, for a start) but I'm already utilizing it to program my days and support maine focused connected the tasks astatine hand.

'Work With Apps' Is Useful When It Works

A precise useful diagnostic that I utilized erstwhile creating this app is called Work With Apps. Using this feature, the ChatGPT desktop app tin pass with different apps that you person unfastened connected your computer. I utilized TextEdit to participate the archetypal code, and by pressing the Work With Apps fastener successful ChatGPT, I could nexus it to my TextEdit file.

The payment is that whenever I alteration immoderate code, ChatGPT tin automatically marque the changes to the TextEdit record for maine without having to bash each the copying and pasting myself. All I request to bash is prevention the record and refresh my browser to effort retired the updated version.

This doesn't enactment each the time, however. It seems that if the app you're moving with is successful the inheritance for excessively long, the transportation is lost, and the codification volition nary longer update.

Vibe Coding Can Work With a Little Patience

My app is hardly a occurrence of modern technology, but it does precisely what I wanted it to bash and is perfectly usable. What's more, it runs locally and costs maine nothing, dissimilar immoderate of the productivity apps that I utilized before. I was capable to enactment it unneurotic successful small much than an hour, and it could person been a batch quicker if I had thought everything done decently successful advance.

Throughout the full process, I didn't interaction the codification once; each the changes were made via prompts. Even if I had zero cognition of coding, I would person been capable to execute the aforesaid result. It's a large introduction constituent for non-coders to observe what is possible, but it won't beryllium replacing immoderate bundle developers conscionable yet.

Vibe coding is inactive acold from cleanable and does necessitate patience to enactment done the problems that you find. You besides request to instrumentality attraction to beryllium precise wide with your prompts. However, if you instrumentality with it, it's awesome what you tin make without penning a azygous enactment of your ain code.