Vibe Coding: ″Feel pain. Accept pain.‶

## Background: Honestly, I was skeptical about vibe coding. I only used LLMs to help with a small portion of the code — around 10%. Why? Because it doesn’t know the context. It’s great at building standard apps like calculators, e-commerce templates, or to-do lists… but that’s not what I needed. That’s not to say I didn’t use it. I did. I leaned on it to: - Fix bugs - Write code for domains I haven’t faced before - Answer questions I was too lazy to Google But everything changed when I started building a **Phoenician transliteration tool** — a website that converts Arabic and English text into the ancient Phoenician script. And I was doing this in **ReactJS**... without ever really learning ReactJS. Sure, I had some experience with Flutter. But building a web app in Flutter felt off. React was calling. ## It Worked at First Sight! I tested the idea using ChatGPT. First, I asked Gemini to help me craft a good prompt. I tweaked it a bit, then passed it to ChatGPT. To my surprise, within about two hours, I had a working, **decent-looking website.** Sure, I had to adjust some of the mapping logic — the GPT-generated code wasn’t perfect there — but still, it worked. The LLMs handled everything else surprisingly well, from code generation to debugging. Except for the core logic — as I mentioned earlier, that part still needed human intuition and **correction**. ## Where the Problems Started Then came the part where I had to **actually deploy the website** — and that’s when the real problems began. ChatGPT couldn’t even provide a full list of the libraries it used. I thought, “Okay, maybe Cursor can help me solve this.” But even Cursor couldn’t install all the necessary libraries correctly. Worse, I couldn’t even get the app to **run locally** — only inside ChatGPT’s code canvas. Both Cursor and ChatGPT were using **outdated methods** for starting React projects. After some digging, a few hallucinated commands from ChatGPT, and multiple retries, I finally got partial answers. Some libraries were revealed, but I had to manually go through component websites to figure out what was missing. For example, ChatGPT used **shadcn/ui** components but never referenced or installed the package. Eventually, after several trial-and-error commands, I was able to: - Start the app locally - Fix the missing pieces - And finally, deploy it on **GitHub Pages** ## It’s Live… But Was It Worth It?  In the end, I managed to upload the site and get a fully working version online. Yes — I even added it to Google Search and made final tweaks without using any LLMs 😅. But here's the catch: The code was… **messy**. Everything was mostly thrown into a single file, with different pieces mixed together. No structure, no maintainability. It took me around **6–8 hours** to fully debug and deploy it. Can you imagine? The app was generated in **2 hours**, but I spent **4 times** that just trying to make it actually work. That’s when I realized something important: If I had invested just **20 hours** learning React properly, I probably could’ve: - Avoided a ton of debugging - Known which library versions to use - Used LLMs more like a **Lego kit** — asking for small, focused pieces of code - And focused my energy on the **core logic**, not fixing broken scaffolding ## Conclusion As many people say, **AI and LLMs are skill multipliers**. If you bring nothing to the table — you’ll get nearly nothing back. (Just like me struggling with React 😅.) Sure, tools like **_context7_** promise to make LLMs (e.g., in Cursor) use the latest documentation versions. But I’ll write about that later. _(Spoiler: it doesn’t work as well as you'd hope.)_ Trying to build anything beyond a small tool using pure "vibe coding" — no architecture, no planning, just prompts — is **painful**. The code complexity scales faster than exponential, and debugging becomes a nightmare. But if you treat LLMs like a Lego toolkit, everything changes. Take the time to: - Design a solid architecture (yes, this might take hours!) - Write a few key functions yourself - Then use the LLM to generate small, self-contained parts that fit into your structure - Handle the hard logic manually — around **20–30%** of the code Don't ask it to write large functions across multiple files — that’s where hallucinations begin. And yeah, stay tuned for my next article — where I’ll show a **successful vibe coding case in FastAPI** (where I actually know what I’m doing 😄). **_Hit the reaction that match how you feel — and follow me to explore more!_** ## References: [Phoenician Transliteration Tool](https://abstract-333.github.io/phoenician-transliterator/) [Source Code](https://github.com/abstract-333/phoenician-transliterator) --- ## You can also find me there :) ### **[Github](https://github.com/abstract-333)** ### **[Medium](https://medium.com/@abstract-333)**