DEV Community

Cover image for I tried vibe coding, and survived to tell (well kinda) - Part 1
orelzion
orelzion

Posted on

I tried vibe coding, and survived to tell (well kinda) - Part 1

TL;DR I'm still in the early stages of the project; vibe coding is fine and all — until you need to do something that's slightly customized. Then, a developer's eye is needed.

📖 The Why

Ok, ok, let me start the story like it should—from the beginning.

So, I'm writing a book (it's about being moral, but you never asked, so I won't tell), and when I was searching for ways to properly edit and design it, I came across several options but didn't like any of them.

They were either too complicated or cost more than I wished to afford.

I spent hours researching and asking ChatGPT for brilliant ways to overcome this, but to no avail.

But then myself told me: "Orel! You're a programmer, right?"

"Well, yes," I replied, as I am quite polite.

"Then why," myself continued, "don't you develop an app tailored to your needs by yourself?!"

I must admit that myself posed a good question, but I didn't want to admit it — so I came up with an even better idea:

"You know what?" I told myself, "why write an app when you clearly don't know enough JS, when you can vibe code it?"

Oh, did I not mention? I'm a mobile developer; I barely know the basics of web development. So I went to ask the smartest person I know.

No, not me, I'm not that pretentious.

I meant ChatGPT.

So I asked him, and he agreed with myself. Now they were two against one, so I had to do the democratic thing and agree.

And thus began the crazy journey of a mobile developer vibe coding his first desktop app. Stay tuned—there will be bears 🐻.

🛠️ The Plan

I started by asking ChatGPT to come up with a plan. We discussed my needs, technologies, and features until I thought it was enough.

Then, I asked it to craft a PRD and created a new directory on my computer.

I ran Claude Code from the VSCode terminal and asked it to read the PRD first and explain what its plan was to develop it.

Claude Code is my favorite AI code assistant. I like that it's a CLI tool and that it seems to really understand the requirements of the project.

It gave me a comprehensive plan, broken down into steps and divided into MVP and future implementation milestones. After some back and forth with it, I agreed to the plan.

Then I asked it to write that plan down into a development_plan.md file so we would have a reference.

We decided to use react for the frontend, built on top of Tauri.

I saved my project and was ready to start coding—or, actually, vibe coding.

🚩 The Struggle

The first struggle came when I asked Claude to start with installation. To its credit, it did try — but it kept failing. Eventually, I told it to just give me instructions and I'd handle the heavy lifting myself.

I reverted all generated code and went through the installation process on my own: the Tauri CLI, the NPM packages, everything I needed. At last, everything was ready, and I did my first commit.

Then I asked it to save our progress to a development_log.md file so we could track progress. I ran /clear to reset the context and save money.

Next, I asked what our next step was, and it went ahead and started developing. I approved everything without reading the code. I mean, I could’ve, but this is vibe coding we’re doing—and like I said, I’m not a web developer.

Anyway, it tried to run the app but had a hard time doing it from the CLI. So I told it I'd run it from the terminal myself. A good choice, and you’ll see why later.

The first iteration was great: the editor was usable, I could write text, emphasize it, and do text-editor-y stuff. Excited, I asked it to add a chapters menu—and it did!

I asked for more steps, but then my session was stopped. You see, my Claude subscription is the $20/month one, and I have a limit on tokens. So after a while, I got blocked. Kindly, it showed me when I could return to vibe — so I waited.

😍 The Honeymoon

Waiting can teach you patience. And patience is everything, or something — I don’t know, I’m not great at Buddhism. Anyway, after my detention time ended, I returned to programming.

We reviewed the structure of the saved files and agreed on how to store the markdown content. But something kept breaking. No matter how hard Claude tried to get the saving feature working, it wouldn’t cooperate.

Then I realized a permission was probably missing. I mentioned this, and we searched together. Turns out, it did request the permission—but the Tauri package was missing, so I installed it manually. Once I did that, saving worked smoothly.

We went back and forth on other features and made great progress. We implemented themes, I18N, tons of text features, chapters, and subchapters — I really felt like I didn’t need to do anything. An entire app was being built by a computer. Amazing.

I got so excited I told anyone reckless enough to ask how it was going.

And then I read the code...

I discovered it didn’t always implement I18N and had hardcoded strings scattered throughout. It also didn’t consistently follow the theme approach and used inline styling in random places.

So I read more about it and realized I needed to add a CLAUDE.md file with proper instructions. I used Claude’s code to generate it, naturally.

In this file, I stated some rules, like so:

## Important Rules
- **NEVER run the Tauri app** – always tell the user what to test and let them test manually
- **ALWAYS use i18n text** – never hard code strings, use translation keys from i18n config
- **Structure components in folders** – organize components into logical folder structures
- **No automatic tests** – we don’t run automated tests, manual testing only
- **ONLY use react-icons** – never use SVGs, always use icons from react-icons/fa6 package
Enter fullscreen mode Exit fullscreen mode

It also explained the project purpose, the technologies, and basically everything Claude needed to know. Now it mostly complies with my preferences — and if not, I just mention it broke the rules, and it apologizes and fixes things immediately.

I mean, I’d prefer it didn’t break the rules in the first place, but you know what they say: “You can’t have it all.”

Claude Code interface

💻 The Debug

Debugging with Claude is surprisingly pleasant. No, I really mean it.

After some trial and error, I discovered the best way to actually fix problems: tell it to add logs.

Yes, plain old logs.

I just review the logs, paste them into Claude, and suddenly it understands exactly where the problem stems from.

This feels a lot like pair programming to me.

Of course, sometimes — or should I say too many times — Claude claims it figured out the problem and fixed it, only for you to test the app and discover it's gotten worse.

But let's be honest: how many times has that happened to you? Don’t answer me.

Still, this isn't quite the same. Like I said, I’m not a web developer, so I can't really verify that Claude isn't writing complete nonsense. But sometimes you just sense something's off.

You know what I mean? Like you can't read TypeScript code, but you recognize a code smell when you see one.

You notice how it sprinkles setTimeout calls throughout the code and you're not sure why, but you're pretty sure that's not how things should work.

So you ask why, and Claude responds with something like "You're right, let's completely change that." Then it rewrites everything and the app stops working entirely.

Moments like this lead to great frustration. Honestly, there were times when I thought this whole thing was a big mistake, and I just couldn't fight with it anymore.

Over time, I learned how to question it properly.

If it tries to fix some problem in a way that looks odd to you, just stop and ask why — like why did it choose this particular solution?

Sometimes you need to tell it to go look up the problem on the internet. Hell, sometimes I did it myself, came up with a solution, told Claude about it, and it implemented it perfectly.

So yes, don’t automatically accept every one of its fixes. Question it.

For example, if there's an error with a library it's using, Claude might just completely change it and use another library. You need to stop it from doing so and tell it to show pros and cons of that library — or to search for the issue online first. Just so you know, Claude can search the internet—it just won’t do it unless you specifically ask for it.

🐻 The Bears

Ok, ok, so there were no bears, I’m sorry for that. But we did reach the end of this post, and that's something, isn't it?

If you followed along, you saw that I have my moments with Claude's code. Sometimes I'm like “God, this is genius - I love you!” and other times I'm like “How can you be so stupid?”

But this isn't really the end. I'm only at the beginning of the project, so other posts will surely follow.

Maybe there weren’t any bears — yet. But give it time. Claude might generate one.

Top comments (0)