Zero to App: How a VibeCoding Platform Ad Changed My Consulting Game

Famous.ai home screen where you enter you idea in plain text.

We’ve all been targeted by Facebook and Instagram ads. For me, it was Famous.ai. Since I watch DirectTV on AppleTV, I swear these platforms talk behind my back because suddenly, Famous.ai was everywhere I looked.

I wouldn’t say I fell victim. But eventually, I clicked.

At first, I tried to build one app, never finished. Tried to build another, ran into a wall. Walked away.

Then, opportunity knocked.

The Problem: A Partner in Need

How to get the mess of notes into a clean professional quote.

A business partner came to me with a challenge. They had a new opportunity that required quoting, formatting tables and word processing, but weren’t “computer people.”

The anxiety of sitting at a keyboard. The days dragging on. The turnaround time clients expect in quoting slipping away.

So I stepped in.

The first quote I built took four hours. It looked good, but I knew this can’t be the way.

The Decision: Build What Off-the-Shelf Apps Can’t

What needed to be built was a no frills system and something that would always look professional.

That’s when I thought back to Famous.ai and those two unfinished attempts. This time, I said I’m finishing it. I’m building a quoting and invoicing app that works the way we need it to work.

Sure, there are 100 invoicing apps on the market. But none with exactly what we needed:

• Line item grouping

• Multiple pricing per line

• Subtotals by group

• Photo support

• Tariff management for quoting and invoicing across borders

• Clean, simple output

So I committed.

The Build: 80 Hours, $587, a Lot of Coffee, and a Few Late Nights with a Little Bourbon

Ten days. Eight to ten hours a day. About 80 hours in total.

Before I dove in, I did the one-hour Zoom intro class that comes with signing up for Famous.ai. Even on that call, they were upfront: “One in five will actually complete an app.” Their advice? The more time you spend in the platform, the better you’ll get.

That stuck with me, especially as a parent. My 7-year-old son has a pretty sweet jump shot because he practices every day in the backyard. But he can’t dribble yet. I told him, “You’ve got to practice dribbling, or you’ll never even get close enough to the hoop to shoot.” Building apps is the same. You can’t just show up and expect to score. You have to put in the reps, work on your weak spots, and get comfortable with the fundamentals before you start hitting those wins.

I used Famous.ai for UI scaffolding and Supabase for the backend. But the real secret weapons? ChatGPT and Claude.

The advanced chat feature in ChatGPT was a game changer. Since I’d never architected an app before, being able to describe in plain English how I wanted the app to work, and then get step-by-step backend logic, was critical. ChatGPT was especially strong with backend development and helped me add tons of debug code, making troubleshooting via the web inspector dev tools much easier.

Claude, on the other hand, was my go-to for most of the UI work and for formatting the PDF output. It just nailed the look and feel of the pages, and handled PDF formatting with way less friction than ChatGPT did.

All in, I spent exactly $587.

And I learned more in those ten days than I had in years.

Setting Up a Solid Directory Structure

Before you dive headfirst into building your app, it’s crucial to start with a clear and logical directory structure. Think of it as the backbone that keeps everything organized when you need to find and fix things quickly.

A few essentials:

• Components Folder: Store all your reusable UI elements.

• Pages Folder: Each file here represents a different view or screen in your app.

• Utilities Folder: Your toolbox for helper functions like cleanText or date formatters.

• Hooks Folder: Keeps your custom logic neat and separate from UI components.

• Environment or Config Files: One place for API keys or base URLs.

Setting up these folders from the start saves you a ton of time later. When something needs fixing, you’ll know exactly where to look and you’ll avoid the confusion of editing the wrong file or dealing with a messy codebase.

The Art of Prompting: Getting the Best Out of Vibecoding

While vibecoding and no-code tools are designed to make development feel almost effortless, the reality is that a bit of care in crafting your initial prompts can make a world of difference. Just like baking, if you start with a good recipe and quality ingredients, you’re far more likely to get a great final product.

The better and more detailed your instructions to the AI, the closer the output will be to what you really want. If you spend a little extra time refining your prompt, explaining exactly what you’re aiming for and giving it more context or constraints, you’ll end up with results that are much more in line with what you envision.

With AI, a well-crafted prompt is your best starting ingredient.

💥 The Unicode Rabbit Hole

One of the most time-consuming and underappreciated parts of the build was handling Unicode and text sanitization. Here’s why. We often pulled equipment descriptions straight off PDFs and websites, so they were full of underlying code and hidden characters. The simplified jspdf function we used for generating PDFs couldn’t handle all that hidden code like the webapp HTML views could. So it looked great on the screen, but when we needed to print the PDF, it looked like a circus.

I spent a day refining a cleanText utility that would strip out invisible characters, weird encodings, and anything that could silently break our database or UI. At one point, stray RTL marks and zero-width spaces were wrecking JSON parsing and causing ghost bugs in our input fields. I ultimately stripped non-standard characters before data insertion and validated post-write output, but it was a masterclass in “Your app only works until it doesn’t because of invisible Unicode gremlins.”

The Learnings: Tech, Tenacity, and Trusting the Process

Cooking now…

I learned about RLS (row-level security), database permissions, wrappers vs pages vs modals, and most importantly, how to “talk” to AI tools to get what I needed.

When I first tried Famous.ai, those initial attempts were made before the platform introduced Bulldozer and Genius modes. Bulldozer is aggressive and overwrites code to forcefully complete the command you give it, sometimes blowing up work you wanted to keep. Genius, on the other hand, is more tactical and surgical in its changes, writing more advanced code and making precise adjustments.

Famous.ai will happily “fix” things you love by overwriting files, so I started giving it clear rules. Don’t touch this. Only add new files. Only change this globally. Knowing when to use Bulldozer or Genius mode became part of the strategy.

When it came to backend logic and troubleshooting, ChatGPT’s advanced chat made it possible for me to architect and debug like a pro, even without a traditional developer background. And when I needed polished UI or a clean PDF, Claude got it done faster.

Sometimes it felt like a circular loop. Same errors. Same fixes. Back and forth until it finally stuck.

But I stayed committed.

🧠 What “Vibecoding” Really Means

Vibecoding is the emerging term for building software through natural language and intuition rather than line-by-line syntax. You describe what you want, the AI generates working code, and you iterate through prompts, refinements, and testing.

The vibe part is that you’re shaping how it feels and functions, not micromanaging the brackets and semicolons.

But unlike “no-code,” vibecoding still gives you direct access to the underlying code, so you can inspect, learn, or modify it when you need control or precision.

Pitfalls of Vibecoding: Beware of Unintentional Clutter

One key challenge I ran into while using a vibecoding approach like with Famous.ai is that it often auto-generates a bunch of files—utilities, components, placeholders—that may not actually do anything. For example, we ended up with both quotePDFgenerator.ts as a utility and quotePDFgenerator.tsx as a component. At first, I didn’t realize some of these files were just empty or unused stubs.

The pitfall is that you can end up editing the wrong file, wondering why your changes aren’t taking effect, because the file you’re tweaking isn’t actually the one wired into the app. Or you might have clutter that makes the codebase messy and harder to maintain.

In other words, vibecoding can lead to a little bit of file bloat or confusion until you have a clear grasp of what each piece does. The lesson is, once the AI generates the structure, take a little time to map out which files are actually in use and clean out the rest. It will save you headaches down the line.

The Breakthroughs: Small Wins, Big Momentum

That first successful PDF Quote that looks almost perfect.

The first time the modal popped up. The first time data saved to Supabase. The first time I generated a polished PDF with photos and subtotals.

Each one felt like a win. And each one made the app feel more real.

The Tradeoffs: Less is More (But Never Really Done)

I stripped out anything that slowed us down:

• Payment application

• Reconciliation logic

• Accounts receivable

Because truthfully, all we cared about was build a professional quote, manage tariffs, convert to invoice with one click, send it out the door. Accounting could stay in QuickBooks.

But as I gained proficiency and as real-world needs evolved, I ended up adding back a feature that lets you show a deposit or payment applied against the invoice, with a clear balance due. App building is a lot like gardening. You’re never really done. There’s always a new spot in your yard for a garden bed or flower pot, and there’s always another feature or improvement waiting to be planted, especially if you live by a TCI (Total Continuous Improvement) mindset.

The Result: A Tool That Just Works

A simple, clean quoting and invoicing app. Photo support. Grouped line items. Subtotals and totals. Tariff management. One-click quote to invoice. Payment and deposit tracking.

Exactly what we needed. Nothing more. Nothing less.

The Perspective: Removing Barriers and ROI from a Targeted Ad

Nine months ago, this would have been a $100,000 build. Custom dev team. Weeks of back-and-forth. Months before launch.

Instead, it took me 80 hours. Ten days. $587.

And here’s the kicker. For the first time ever, a targeted ad didn’t just cost me, it gave me ROI. That Instagram ad for Famous.ai led to a real, working solution for a real business problem, and a powerful new tool in my consulting arsenal.

And while I’m not a developer, I now speak enough “dev” to hold my own.

Most importantly, I built this because a business partner needed it. That’s what drives me as a consultant: removing barriers so my clients and partners can succeed.

Final Word: Build for a Reason

If you’re sitting on an idea, don’t wait. Don’t overthink. Don’t assume you need a six-figure budget.

I started because of a Instagram ad. I finished because a real business need demanded it.

And now, this skillset is in my toolbox, ready for the next partner who needs a barrier removed. Will I build more apps? If it helps someone become successful in business, absolutely.

Mini Glossary for App Builders

• Hook: A function (commonly in React) that lets you “hook into” component behavior, for example, to manage state, respond to user input, or run code on mount (useState, useEffect, etc.).

• Modal: A pop-up dialog that overlays the main UI. Used for forms, confirmations, onboarding flows, and decision prompts.

• Pages: Screens or routes in your app, each one typically mapped to a URL or navigation event.

• Components: Reusable blocks of UI, like buttons, inputs, cards, or navbars. Each component can have its own logic, state, and style.

• Utilities: Helper functions or modules that handle repetitive logic, like formatting dates, cleaning strings, parsing data. Keeps core code clean.

• UI (User Interface): The visual layer of your app, buttons, fields, colors, layout. The “what users see and interact with.”

• RLS (Row-Level Security): Supabase/Postgres feature that controls which rows of a table a user can read or write based on their session data, for example, user_id equals auth.uid().

• Auth (Authentication): The system for logging users in and out. In Supabase, includes email/password, magic links, OAuth, and refresh token management.

• Toast: A lightweight, non-blocking message, like a popup confirmation or error alert. Used for quick feedback after actions.

• UUID: Universally Unique Identifier. Often used as the primary key for users or rows in Supabase. Looks like 0aa410b5-f92b-4df5-b1ed-ae84d4f626c7.

• Bucket: Supabase Storage concept, a “folder” where you store files, images, etc., organized by name and access policy.

• Anon Key / Service Role Key: Supabase keys that define API access. Anon key is for public client-side requests. Service key is for secure, admin-level access, used in backend or server-side scripts.

• Unicode: A global standard for encoding text across languages and symbols. Issues arise when invisible or non-standard characters sneak into user input, causing display bugs, failed JSON parsing, or database corruption.

• cleanText: A utility function used to sanitize input by removing hidden Unicode characters, like zero-width space, right-to-left marks, emojis, etc. Essential for ensuring consistent formatting, filtering, and storage.

• Slug / Slugify: A URL-friendly version of a string. For example, "My Event Title" becomes my-event-title. Used in URLs, database indexing, and routing.

• PAC/POD: If applicable, PAC is Potere Anticongelante (freezing point depression); POD is Potere Dolcificante (sweetness power). Used to balance texture and taste in gelato recipes.

• VibeCoding: A playful term describing intuitive, real-time, low-code development, typing natural language prompts to build or edit code with AI assistance, then refining logic manually. Platforms like Famous.ai fall into this category.

Ready for a Provocative Conversation About Your Business Needs?

If you’re curious about the inspiration behind my custom app for a business partner, or if you’re facing inefficiencies, communication gaps, or strategy misalignments in your own organization, I’d love to chat. My goal is to help you overcome these challenges and achieve tangible business results.