From Zero To SaaS #43 Vibe Coding

Vibe coding is a trend; Cursor went from 1m ARR to 100m ARR in 12 months, hitting the world record in SaaS, and Lovable went to 10m ARR in just 2 months after launching.

With the cost of SaaS production almost zero, marketing is following the same trend.

Quick Questions:

• But what makes something Vibe versus Non-Vibe?

Vibe: Prompt-based execution, or the idea is enough to set up a task, and afterward, you sharpen this idea/project with continuous prompting.

• What is the origin of vibe-coding?

Three years ago, people removed the sandbox, or safe environment, from LLMs to generate code and act on it with AutoGPT, BabyGPT, etc.

However, strategic planning was missing, and it ended last year with the release of OpenAI's o1 model.

All these startups expanded the sandbox environment of LLM to both generate, execute, and store the code.

• What is the future of vibe- movement?

I believe everything will have a vibe, or starting with a prompt, you will still have editing and sharpening, but the concept of starting from scratch will die out.

• How do you make the most of the Vibe trend?

The core of vibe is prompting; if you learn how to prompt, you should be able to work on each vibe-oriented platform within 1-3 months.

Vibe Coding Experience

The first vibe tool I came in contact with was V0 of Vercelli; with a prompt, you would generate an entire front end.

I was amazed by the speed and production-ready code, but when exported, I still had to download some libraries because the code was made to run on their website, not necessarily on my MacBook Pro.

Nowadays, Lovable and Bolt can also do the back end, so I tested it.

Not surprised, but this is the prompt I gave:

I want an app where I can upload a document or PDF, click enter, and have my signature on every page in the white space in the right corner. This app also has a place to draw and store my signature.        

Failures on the first attempt:

• did not take into account react-pdf dependency -> tried to solve it.
• did not generate a place to store signature -> did not try to solve it.

Of course, I should have added a database, but I wanted to see how far it would get.

So, I integrated Supobase with basic instructions again to see how well it would manage the database.

 Add a Google login and make a database to store the PFDs and signatures.        

I had to take some actions on Google Cloud to make the login work, such as creating a client ID and client secret. You would think this would be easy, but Google Cloud has a gigantic infrastructure and constantly changes the UI.

What is new:

• You don't go to APIs -> go to clients -> to make the key -> login branding screen
• Make sure to add the URL of the superbase project in redirect links of the auth configuration -> https://pgpkykpcvspknbylhmmx.supabase.co/auth/v1/callback

After 5/6 attempts to fix login in Lovable, I stopped.

Here is where vibe coding comes short and why I only build the front end using vibe coding: When you are busy with the back end, which concerns API keys, secrets, redirects, etc., you want to work directly on the code level, not with prompts.

Let's make one more attempt to see if the Google Firebase Vibe coder is better.

On the first attempt:

• I cannot log in to Google; nothing happens when I press the button
• I did not see SQL that generates a database, so it doesn't exist
• Although there is a field for a signature, I can draw anything
• Although I can upload a PDF ( small win for Google Corporate over Lovable)

After this prompt:

The login should be before you see the UI of the app.

The signature has to be drawn; when I try to draw in that signature field, lines don't appear.        

It fixed the drawing, but the signature was put on the pdf.

After many attempts to fix the sign-the-document button, you notice that if you build an app with one chat window, it gets stuck.

After you click sign document, my signature must be in the white space in the bottom right corner. It should not be placed on text.        

After you sign the document, I will download the new document to check if the signatures were added to every page of the PDF I uploaded.

You download the finished version as a PDF and show the user that you have added the signature in the UI.        

But to my surprise, firebase has an advanced code editor.

After double-checking with Gemini to see if my app had the functionality, I made it more detailed to break down the process.

This is what the app should

You upload a PDF, and the user draws a signature. Then, the PDF is cut into multiple pages, and my signature is added to the bottom right corner of each page.

Then, you show the user that you have done that, and a download is started so they can see the updated file.

You must store both the uploaded PDF and the signature to do this.

Would you happen to know if this app does that?        

It added a bunch of code, but as suspected, it is full of bugs because it doesn't consider dependencies.

So after 4-5x attempts of just using AI fix, it gets stuck.

After 3 hours, throw in the towel; I know I can build this within 2 weeks.

But I still maintain that vibe coding is good for the front end, but the moment you want to add login, database storage, a model, chat, etc., data manipulation, you want to go more granular.

How I do Vibe Coding

1. Use ChatGPT o1 to set up the software architecture and decide which tech stack. 

2. Generate all the API keys and secrets.

3. First, create the frond-end on Firebase Studio (vite, next-js, not Tailwind)

4. Then move the code over to the cursor.

5. ensure the front end works instead of just looking pretty.

6. The I first set up a Google login with Supobase 

7. When I start fixing the script, I try to avoid using any database except for login. You can use Google Chrome storage for most data manipulations unless you need advanced computation. 

This is secure, as nothing leaves the browser. It also decreases the chance of running into front-end-back-end communication errors, as everything happens in the front end.

8. When the MVP is good enough, I record a video using Tella to share it on LinkedIn.

9. Now the beast comes, which is the deployment.

-  the laziest version is Chrome extention as they do the hosting, and you do not need to buy a domain. 

- AWS, Google Cloud, Azure, or Vercell are good hosting platforms, but do not underestimate this; I wish it were as easy as adding an address and key or uploading some files. 

10. Congratulations! You survived the week of not throwing your laptop against the wall due to LLM's inability to make what you want. 

Now, the real struggle begins with marketing and sales.