Alexander Ertli

Posted on Dec 3

Vibecoding: How to get from 0 to SaaS in hours.

#webdev #ai #saas #javascript

With today's tools, validating an idea doesn't require coding.
This is about Vibecoding, a buzzword few define.

It’s assumed to be a Skill, just like programming. I may be or may not be, I’m not sure. So I run an experiment.

Everything began when I downloaded a new IDE from this site → https://antigravity.google/.

Okay, but what if? What about? Is this safe?
No, let’s stop those thoughts. I set a hard rule: Let’s not overthink this and have some fun.

Have a quick peek at what we are building here:

First prompt on the freshly installed IDE:

init me a next-js project with shadcn

Seeing the Agent install dependencies and validate the newly created project was impressive, but it also created the temptation:

okay, this takes too long; I would already be done with this!

Resisting the urge to take control, I waited. A couple of minutes later, the Agent finished the task.

So I followed up:

Set up a decent landing page, write an appropriate copy for a technology career advisor app
- That only requires a CV with 
    - a card-style embedding that is hinting at a drop, your CV here.
    - Also have a sign-in form for recurring users

And there it was, an App running in Chrome that contained exactly what I asked for.

Next prompt:

Fix design issues like padding and placement, and we should prefer SSR or static where possible for better SEO. Also, add a dark mode toggle.

That was not that easy for the Agent to execute, so I had to follow up:

The navbar has still placement and padding issues, and we need to flesh it out, and the colour theme switcher is not respecting the system settings

Yeah. A minute later, it’s fixed.

Watching the Bot iterate on mistakes grew boring. I thought:

"I'm doing it wrong—this isn't proper Prompt Engineering!"

I need to tell the Agent exactly what code I need and how exactly it would wire it. Which files to create and which to edit.

Or don’t I? It kinda worked, so just let’s continue.

After confirming via Chrome that it looks decent now, there is still a lot to nag on.

Next Instruction:

Okay, let's go. We need to make the landing page body clearer. Currently, the 'Drop your CV' section is not clearly labelled, and the signing form is not clearly separated from the new user onboarding flow.

I got what I asked for, then realised I wanted something else and blamed the Model for following instructions:

Make the onboarding more prominent. 
- So that it does not need a description as an internal tool would
- INSTEAD, ensure this UX would properly work as if it's a saas
- move the signing form into a more subtle and more appropriate spot

Now I had an app skeleton, perfect for a portfolio screenshot—just as the IDE warned me, I was out of tokens. Time for a break.

Two hours later, casually browsing the generated code:

Ugh... here we should have used..., and this file structure? We should have done... And how will...

I stopped catching myself almost wanting to rewrite everything.

Let’s continue, I prompted the Agent:

Okay! Next, we need a DB. Let's add Supabase for simplicity

After creating a .env with the proper entries I followed up with:

Now let's wire up the CV component so that the user can drop a txt or md, and we move to the next screen where we show the user their CV they just posted

After checking the results via my Browser:

Perfect! Next, wire up OpenAI, so we have it available and form a function in the server that we can use later with a proper prompt.

Minutes later, I got what I wanted. Dropping the Key into the .env, then restart the server. Walking through the entire UI to reach a conclusion.

Still not done, I instructed the busy bot with:

Okay, but before the user can get an analysis, he has to sign in or sign up. We should use Supabase here; it's a new page we get when the user clicks on the analytics button.

Yep, there it was, but still not quite right. I described the model that bordered me:

After I hit create account, I got this weird message: 'Please check your email to confirm your account. ' It looks like an error, but it's not. We need to address this.

A while later, after the browser popped up several times and the chat history became busy, the agent returned to Idle.

While verifying the results, I started noticing: testing changes is becoming difficult. Log in, click through the whole app, restart the server, repeat all the steps. This became more time-consuming than waiting for the Agent to complete a task. Antigravity clearly was using playwright internally, but I never got the scripts it used to test the App.

After a moment of freezing, I decided to skip the rabbit hole of writing automated E2E tests. It’s a classic SWE trap for early-stage projects:

“It takes 3 minutes to test, let’s spend 2 hours to automate it! (and another hour every time we introduce a change, updating them)”

Let’s focus on Product building!

So I prompted:

Next, the system should remember the analysis results and prevent re-analysis of the same CVs.

But instead of a busy Agent, I got an out-of-tokens message.

A few hours later, once the token limit recovered, I reopened the IDE. Since I’d closed it, I had to recover the chat history. My plan: replace the feature set and try again.

The system should remember the analysis results and prevent re-analysis of the same CVs. Let’s go!

Okay, something was done. As always, I hit accept all and launched the browser. Something was off. I read the change log and the documentation the model created.

Ah, okay, I forgot to create the Table in Supabase. I quickly did that and re-tested the whole App. I still wasn't working, so I read the logs showing that the server couldn't map them to the code...

Hm. Did we hit the wall? Time to take over?

I resisted the temptation again, trying to think through what went wrong. Here is what I hypothesised:

“Probably the Agent was unable to verify if the logic worked because the DB table was not present, so it coded blindly”

I copied and pasted the Table structure from Supabase into the chat interface and instructed the model to adapt the code to properly integrate with it.

A back-and-forth started. I tested the App, the model desperately tried to follow through my prompts like:

“Continue evaluating the root cause” → “Okay, I saw you found some Issues, so yes, let's do that. Execute your suggestions.”

Half an hour later, we resolved the CV cache issue. I still was not satisfied. So I shared my observations on another Issue with the model:

Despite being logged in when hitting the analyse button, this is wrong, and even if I truly would not be logged in, it should not have been an error but a sign-up/sign-in page

Yeah, I noticed that the more I chat with the Agent, the more I pretend to have never coded, and the more I pretend to have no Idea what’s broken here. Somehow funny.

It worked. Dedicated to finishing this App, I went back to vibecoding:

We have broken links in the navbar, flesh the necessary pages out.

That was easy, as the bot returned static pages quickly.

We continued:

We have an analysis of another CV button on one of our pages, but in addition to that button, I want a new button that leads to a new feature that would provide in-depth career guidance, which builds on top of that analysis and the CV... Let's first flesh out a mock page and wire it up properly.

Okay, this one was also easy. I still could not help myself, but imagine all the warnings the linter would throw at me, while glipping through the codebase...

So I instructed the model:

Use npm run lint and fix any issues

Yeah. The agent died several times trying to execute the task. I persisted that it should continue. And magic, magic, the Issues were all fixed.

I decided to continue, let’s push that further:

Okay, perfect, let's create a mock checkout page in the UI.

Verifying the changes and doing the obligatory out-of-token break! I continued:

Let's wire up Stripe; we may also need to revisit our checkout-page mock.

As I already knew, this is an external dependency... So I need multiple turns to fix this after adding the needed .envs, with prompts like:

I added the needed envs, continue fixing the integration

With that done... the journey continued with another Prompt:

now we need to keep track if a user has a subscription now we need to keep track if a user has a subscription

As expected, the implementation plan clearly showed:

WARNING
Database Schema: This will create a new subscriptions table in your Supabase database.

Yep, so I precreated the table and informed the model before it wrote any code. Within two turns, I had what I needed.

I let the Agent finish the remaining mock pages and elements, such as the advanced career guidance page. And walked through the last UX issues.

Finally, it was good enough for me, and after a review, 2 more out-of-token breaks... We got the plumbing done to deploy it via CI, and the Project went live.

Yup, this was a standard MVP build cycle: