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

Learn how to "vibe code" a full-featured, full-stack web application from scratch! In this video, we walk through building a collaborative envelope budgeting app using Wasp, React, Shadcn-admin (Tailwind + Shadcn/ui), Prisma, and AI assistance with Cursor & Gemini 2.5 Pro Follow along (timestamps are 👇) as we demonstrate a realistic vibe coding workflow: 1. Setting up the project and AI coding environment (using .cursor/rules/). 2. Defining requirements (PRD) and creating a development PLAN. 3. Implementing features end-to-end using a vertical slice approach. 4. Debugging and updating our Plan and Rules as we go. 5. Leveraging Wasp's full-stack capabilities (Auth, Database Operations) and AI for faster development. Get the starter code and follow along: 🔗 GitHub Repository: https://github.com/wasp-lang/vibe-coding-video Timestamps 00:00 -- What we're gonna build 04:08 -- How to vibe code a full-stack app the right way 05:40 -- Explaining the PRD Prompt 10:44 -- Starting the app (see the repo above for instructions) 12:28 -- Generating the PRD from prompt 14:59 -- Generating the implementation PLAN for AI to follow from the PRD 20:50 -- 1.1 - fullstack Auth 29:34 -- 1.2 - budget profile entities and auth hooks 35:49 -- 1.3 - budget envelope entity and migrate db 38:09 -- 1.4 - CRUD operations for envelope management 42:59 -- 1.5 - budget UI & settings for cursor/rules files 58:09 -- 2.1 - transaction entity and prisma enums 01:01:06 -- 2.2 - CRUD operations for transactions 01:04:00 -- 2.3 - transaction form UI 01:09:25 -- 2.4 - transaction list UI 01:12:28 -- 2.5 - budget page summaries & adding shadcn progress component 01:25:08 -- adding sidebar items outside the plan 01:30:40 -- generating ai docs 01:32:45 -- 3.1 - collaboration entity 01:33:53 -- 3.2 - CRUD operations for collaborator invite 01:38:10 -- 3.3 - add role-based permissions to all operations & do a quick security check 01:39:52 -- 3.4 - budget collaboration UI 01:48:35 -- fixing stubborn bug by passing docs url/snippets to LLM 02:22:00 -- 4 - adding dashboard summary visuals 02:27:07 -- final app state w/ nice dashboard summaries 🎉 02:37:45 -- 5.1 - generate a deployment plan from Wasp docs URL 02:40:12 -- 5.2 - using SendGrid email sender for production build 02:44:00 -- 5.3 - have cursor deploy to fly.io for us 🚀