Vibe Coding a Recipe App or: How I Learned to Stop Worrying and Love the Bot

Vibe coding. Programming via natural speech using AI. Everyone's buzzing about it. You see it all over social media. But how much is real and how much is content creator swill or bot blogging? 

Let's find out!

We're going with Cursor on this one.  It's an AI 'assisted' programming IDE based on Visual Studio Code (Didn't realize VS Code was open source!). Forget about assistance, we're 100% putting R2D2 to work on this!

We'll be running on the Free tier, of course, and using default setup. Free apparently gets you "...for evaluation and light usage. You can perform up to 2,000 code completions and 50 premium model requests per month, with monthly resets."

How much is this, exactly? Pfft! Beats me. Cursor also supports bringing your own API keys, so maybe we can plug it into OpenRouter/Free if the pond dries up. We'll see.

 Anyways, let's rock!

 

 First prompt: "create an app called Bread Hero that will be used for entering and storing a user's baking recipies using baker's math. It should support various leavening agents, have the ability for users to add multiple types of flour, add mix ins, and add baking notes."

Yup. Spelling and typos and all. The only reason I still have it is because I hashed out what might be a good 1st prompt in notepad before copy/pasting to Cursor. Starting context is king! Until the bot forgets it. Poor senile silicon.

 

 

Magic from the first prompt! It figured out what I wanted, built a very functional version, complete with appropriate default values, and error trapping. It even thought we needed a little bread emoticon.

 

This list of leavening agents? Ditsy Dumbotron did it! All that was specified about it in the first prompt was "It should support various leavening agents".

 

It's a simple web app but built crazy fast and is using enough stuff I was unfamiliar with that I went crying to Google Gemini ("I installed Cursor to try vibe coding an app. It chugged away for a while and now I have folder with a bunch of stuff I don't know what to do with. I've attached the readme."-actual prompt. And, yeah, Cursor wrote a readme file for the app). Also, Cursor's terminal window and file browser are off by default (in View menu), which seems like an odd choice for an IDE. Welcome to the future of programming?

 

From there, I just rode the vibes. Never touched the code. Moved from sidebar navigation to tabbed interface to finally a tighter flow that needed neither. Everything worked first try! Only wrinkle I hit was the Undo button doesn't just undo the last prompt, but undoes everything since the last time you hit Keep. Learning curve. Cursor does support .git integration if you're doing anything that matters (a problem I rarely have ;) ). I just copied a backup of the project folder to the desktop whenever I was in a good spot.

 

Some folks have been curious about how I write my prompts, so here are a bunch of examples copy/pasted exactly from the chat history. And a few anecdotes.

• " I want to switch to a tabbed interface, moving the Recipies from the sidebar onto a Recipies tab in the main section. the current main section for data entry should be called Edit. "
• " when a recipe is selected, I would like it to show the summary unless the user clicks an edit button " There was no Edit button previously, hence "an edit button". It did add it.
• " okay, i guess we don't need the tabs anymore. take those out. "
• " can we update the main content when a recipe is selected to show the formula summary and add a button just before Edit button that goes back to the recipe list. "
  
  
  
• " the drag handle don't work very well. anything that can be done? "  It tweaked the handle behavior (still wonky) and added up/down arrows as a fallback.
• " lets add the ability to import/export all recipies as .json. Put buttons for this at the bottom of the recipes list " This was cool! And kinda needed as it uses local storage (think cookies). Darn thing even warns about data overwrite on an import.
• " please clean up the code if it is needed. don't super optimized and don't break anything. It is ok if it cannot be optimized safely." Yeah, was being cautious. Only two redundant calls removed.
• " remove "saven on this device" from the subtitle " Yes, this worked even with a typo in the quotes.
• " at the bottom of the recipe summary card, add a button that will export the summary to .pdf "

 

...and so forth. I didn't put much thought into these like I did the first one. Just vibin'.

 

 

 

It got a little squirrelly working on the PDF export formatting. The usual AI stuff: "can we add the bread emoticon to the PDF? -sure- -"Title is garbled" -I can fix it- "Still no emoticon." -Oh, this doesn't work on your PDF plugin-, etc. It is unclear if I'm running out of my allotment of 'good backend stuff' or the bot just needs a whack with the /reset stick.

 

It also started suggesting changes rather than just doing them. Panzer, my OpenClaw AI, pulls this crap on occasion. The next prompt is always "do it". Pfft! No fancy autocomplete gonna put me to work!

From there, it was just "npm run build" in Cursor's terminal and drag/drop the project's \dist folder onto netlify.com. It even allows linking to your own domain for free! You can use Bread Hero yourself at https://breadhero.growingupotaku.com/. I have made the entire project folder available here (license CC4-BY-NC).

 

Total time from concept to deployment? Probably a casual five hours spread out over three days (including the hassle of making two accounts and learning everything). 

 

Honestly, I'm delighted! It is pretty rare when I tell folks about AI stuff without a ton of asterisks to spell out caveats. This was a genuinely great experience. I dunno how larger projects work with Cursor but, for my little doddle, I'm super impressed.

 

Well, that'll about do it for me. As always, remember that we lo-

 

Hang on... I feel a vibe coming on...

 

What if... Now, hear me out... What if... Rather than just a bread app... We launch a brand!

 

We're gonna try to one-shot this. Let's hope we still have some 'good backend stuff' left. Ready? 

 

Prompt: "I want to change this app from Bread Hero to Bar Hero, an app for keeping cocktail recipes. Keep the functionality similar but make it for cocktails rather than bread."

 

Two minutes later...

 

Here's Bar Hero. Use it online here. Or don't. Now that I have an account, putting this up was, literally, drag and drop. Took me a whole 'nother two minutes.

 

Let the good vibes roll!