DEV Community

Cover image for A Structured Workflow for "Vibe Coding" Full-Stack Apps

A Structured Workflow for "Vibe Coding" Full-Stack Apps

vincanger on April 16, 2025

There's a lot of hype surrounding "vibe coding". You've probably seen the AI influencers making claims like how you can build SaaS apps in 15 minut...
Collapse
 
davideoliveri profile image
davide oliveri

Thank you for the write up! I'm currently at the point where I experienced first hand the limitations beyond the hype and your guide gives a good starting point.

I haven't watched your video yet and I wonder if you mention anything about costs. How much did it cost to create the app from scratch with your approach?

Collapse
 
vincanger profile image
vincanger

I pay the $20/month flat fee for Cursor. Works great!

Collapse
 
davideoliveri profile image
davide oliveri

I understand. I thought that cursor users had to pay extra for api usage. Wasn't it your case for the use of Gemini 2.5?
Note: I am on the go and I can't review your article, but I recall you mentioning you've been using Gemini 2.5. I hope I'm not wrong.

Thread Thread
 
vincanger profile image
vincanger

if you pay the flat fee you dont have to pay extra for using Gemini 2.5 pro. There are other models that cost extra per request though, just not this one :)

Collapse
 
franjo_mindek profile image
Franjo Mindek

Go Vinny! Go Vinny!

Collapse
 
vincanger profile image
vincanger

🏃

Collapse
 
infomiho profile image
Mihovil Ilakovac • Edited

I'd love to see more visualizations on your way of thinking, it sounds like you went deep and got some really nice insights there! Also, what percentage of the code was written by you vs. AI?

Collapse
 
vincanger profile image
vincanger

I barely touched a line of code! So 98% ai written for sure. I’d suggest to do a code review after to gauge the quality.

Collapse
 
sashakrsmanovic profile image
Sasha

Great writeup, and thanks for the video. For vibe coding, at least to me, it is better to see how people do it, over read about it.

Collapse
 
vincanger profile image
vincanger • Edited

That was the idea behind it. Glad you find it useful. :)

Collapse
 
matijasos profile image
Matija Sosic

This is exactly what I was hoping for. A full, detailed, step-by-step guide on how to build a medium-sized SaaS app with AI. All the quirks and errors included, together with deploying the app. Thanks, Vinny!

Collapse
 
vincanger profile image
vincanger

Thanks. Hope it’s useful!

Collapse
 
ezo_kewnuki_54439a5baa3dd profile image
Werewolf-XL

I registered to this platform because of your article. This is a really well done workflow that I am gonna put to use in my own projects.

Collapse
 
vincanger profile image
vincanger

Awesome! Glad you found it useful.

Collapse
 
rsaint01 profile image
Roger St Hilaire

Thank you for the write up I really appreciate the details and you sharing your process. It will definitely help me a a project I am building. Great work !!!

Collapse
 
vincanger profile image
vincanger

thanks. glad it could help :)

Collapse
 
cprecioso profile image
Carlos Precioso

Nice dive!

Collapse
 
paul_funnell_e9e7ff2d784b profile image
Paul Funnell

This is great, I've been kicking these ideas around with GPT after Sam's Sunday letter on Lego coding but you are definitely a few steps ahead. I'm also working on self hosting the assistant for more control and cost efficiency when being scaled to a team.

Collapse
 
vincanger profile image
vincanger

Nice. Good luck! :)

Collapse
 
stanleysathler profile image
Stanley Sathler

Great post, thanks! 🚀

You suggest to document continuously - how exactly? Comments in the code? More cursor rules? PRDs?

Collapse
 
vincanger profile image
vincanger

I usually have it generate Documentation for each phase of the plan after I've implemented it. It gets more beneficial as the project grows in size and complexity, because then you can pass previous examples to it as reference so it stays consistent. Of course, Wasp helps a lot here in that it takes care of a lot of boilerplate code for the LLM.

Collapse
 
stanleysathler profile image
Stanley Sathler

Thanks! Question is more about where exactly you store those docs?

Collapse
 
marek_stark_88c952594e6eb profile image
Marek Stark

Hey man! Love the article and the video, as well as the github repo! I have spent a few days working on a project, but seem to have a dead end. Now Cursor insists that there is a but in wasp 0.16.3 and that I need to download la ter version.. but it does not exist.

How can I help you to identify the error and update wasp?

Here is what Cursor told me after I had deleted the .wasp and node_module directories and compiled the project again, with the same error, which was:


[ Wasp ] src/features/assignments/pages/CreateTruckPage.tsx(326,22): error TS2322: Type 'string' is not assignable to type '"/sign-up" | "/login" | "/auth/verify-email/:token" | "/request-password-reset" | "/auth/reset-password/:token" | "/" | "/chats" | "/tasks" | "/apps" | "/users" | "/settings/*" | ... 11 more ... | "/assignment/:assignmentId/create-truck/:truckType"'.
❌ --- [Error] Your wasp project failed to compile: -------------------------------

  • SDK build failed with exit code: 2 ❌ --- [Error] Compilation of wasp project failed: -------------------------------- 1 errors found --- Cursor said: --- Thanks for trying that again. Unfortunately, the result is the same, which strongly points away from simple caching issues and reinforces the conclusion that this is likely a problem with how Wasp v0.16.3 generates the relative import paths within the .wasp/out/web-app/src/router.tsx file when it processes your main.wasp configuration (specifically after adding the CreateTruckPage and its associated route). The generated path ../../../../src/features/assignments/pages/ProjectPage.tsx is incorrect relative to the location of .wasp/out/web-app/src/router.tsx, hence Vite cannot find the file. Recap of Why This Likely Happens: Your main.wasp definition for ProjectPage seems correct (import ProjectPage from "@src/features/assignments/pages/ProjectPage.tsx"). Clearing .wasp/out and node_modules forces a full regeneration, but the generator still produces the wrong path. This points to an issue in the Wasp v0.16.3 generator itself, potentially triggered by the complexity or structure of the routes defined in main.wasp after our refactoring. Next Steps (Reiterated): Update Wasp (Strongly Recommended): This is the most likely solution. Check if a newer version of wasp-lang (e.g., 0.16.4, 0.17.x, etc.) is available and update using npm. Newer versions often contain bug fixes for issues like path generation. You can check the latest version on npm or the Wasp documentation/releases. Command might be npm install wasp-lang@latest. Remember to stop the server, delete .wasp/out and node_modules again after updating, run npm install, and then wasp start. Simplify Route (Diagnostic): As a test, temporarily change the CreateTruckRoute path in main.wasp to something very simple (e.g., /test-create-truck). If this builds correctly, it confirms the complex path structure was the trigger, strengthening the case for a Wasp bug report. Report Wasp Issue: If updating doesn't work or isn't an option, reporting this detailed scenario (Wasp version, error message, relevant main.wasp snippets) on the Wasp GitHub issues is the best way to get it fixed in the framework. Given the persistence of this specific Vite error after multiple cleanup attempts, focusing on updating Wasp seems like the most productive path forward. Would you like help checking the latest Wasp version or constructing the update command?
Collapse
 
vincanger profile image
vincanger

Can you please ask the question in our discord?! Thanks.

Collapse
 
raphael909 profile image
Raphael909 • Edited

You should remove the God's image .it is not appropriately used . You are hurting hindu sentiments

Collapse
 
sourabh_f76a03b06b0f90abd profile image
Sourabh

Yes , I was about to comment the same.
This is very inappropriate

Collapse
 
m_maksimovic_ profile image
Milica Maksimovic

Apologies, we changed the cover as soon as we realized the mistake!

Collapse
 
shelar1423 profile image
Digvijay Shelar

Great one vinny

Collapse
 
vincanger profile image
vincanger

Thanks :)

Collapse
 
karadza profile image
Juraj

🔥🔥

Collapse
 
vincanger profile image
vincanger

😎

Collapse
 
j_j_b77c6f60020810c325308 profile image
J J • Edited

A "Structured Worfklow"? Ironic, perhaps?
That said, thanks for the article.

Collapse
 
vincanger profile image
vincanger

maybe a little

Collapse
 
oluwawunmiadesewa profile image
Oluwawunmi Adesewa

This is hard asf.

Collapse
 
vincanger profile image
vincanger

Tuff!

Collapse
 
e_flatmajor_16be3fd20553 profile image
E FLAT MAJOR

I code a full app using DeepSeek , all I need to do is copy and paste it into python

Collapse
 
vincanger profile image
vincanger

that can work too to a certain extent.

Collapse
 
minkhantnaung profile image
Min Khant Naung

Nice! I will use Laravel, React, Inertia stacks.

Collapse
 
vincanger profile image
vincanger

It will probably work for that stack as well since it's a batteries-included framework like Wasp is for javascript (react, nodejs, prisma). It's just that we unfortunately don't have a template and predefined rules for laravel.