Complete Vibe Coding Tutorial: Build a Full Stack App with AI | Andy Carroll (Windsurf)

What if you could launch a product next week without writing a single line of code? Today, it's possible. Andy Carroll (a 16 year PM and vibe coding expert) shows you exactly how to vibe-code your way into building great products — by building a $1M app live, right in front of you. We're discussing: Preview – 00:00:00 What Is Vibe Coding? – 00:01:57 Vibe Coding Tutorial Begins – 00:05:18 Ad – 00:10:32 Ad – 00:11:20 Building a Full-Stack Mobile App – 00:12:16 Creating the AI Sports Reporter – 00:18:12 Developing AI Tools Live – 00:21:22 Ad – 00:30:33 AI Sports Reporter (Part 2) – 00:31:25 Reviewing the Learning Page – 00:34:18 Using Prompts to Generate a Brand Logo – 00:42:04 Designing an Infographic – 00:46:49 Why Prompt Quality Is Everything – 00:50:21 Recap of the Live Build Session – 00:53:59 How PMs Should Use These Tools – 00:58:34 The Future of Vibe Coding for PMs – 01:00:15 What Is Aisle Partners? – 01:04:08 Should PMs Consult, Stay Full-Time, or Build Their Own Product? – 01:07:24 Closing Notes – 01:11:20 Podcast transcript + infographic: https://www.news.aakashg.com/p/andy-carroll-podcast 💼 Check out our sponsors: Maven: I’ve just launched my unique curation of their top courses - http://maven.com/x/aakash Miro: The innovation workspace: your team’s canvas - http://miro.pxf.io/PO4WZX Amplitude: Try their 2-min assessment of your company’s digital maturity - https://bit.ly/4hl25RG 👀 Where to find Andy LinkedIn: https://www.linkedin.com/in/heyandycarroll Aisle Partners: https://www.aisle.partners 👨‍💻 Where to find Aakash: Twitter: https://www.twitter.com/aakashg0 LinkedIn: https://www.linkedin.com/in/aagupta/ Instagram: https://www.instagram.com/aakashg0/ 🔑 Key Takeaways 1. Vibe coding puts product creation in non-technical hands. Even after 15 years as a PM, Andy can't write code from scratch. But AI tools like Windsurf and Lovable made it possible for him to collaborate with AI to build real products without coding skills. 2. Front-load your planning to avoid rebuilding everything. He painfully learned that diving straight into coding creates expensive headaches. So, it’s best to use AI to draft strategy documents and architecture plans first, preventing the frustration of multiple false starts. 3. Set up a simple deployment pipeline immediately. GitHub for code, Netlify for deployment, and Superbase for databases is his recommended stack. Deploy frequently and early as waiting too long means facing hundreds of errors at once instead of fixing small issues. 4. Create PM deliverables in hours, not weeks. He built a detailed product roadmap and strategy documents in a single afternoon. These become living references in GitHub that team members can access anytime, eliminating version control nightmares. 5. Watch out for AI's eagerness to change your code. Windsurf has two modes: safe "chat" and powerful "write." Only toggle to write mode when you want changes made, otherwise, AI might drastically refactor your entire page when you just want a font color change. 6. Switch AI models when you hit roadblocks. Different models have different strengths. He uses Claude 3.7 for brainstorming, DeepSeek for specific tasks, and switches to GPT-4 when stuck. A fresh model may solve problems that the first one couldn't. 7. Validate ideas faster than ever before. Skip weeks of perfecting logos, brands, and pixel-perfect designs. Build something "good enough" quickly, get real feedback, and iterate based on actual user responses rather than internal debates. 8. Target your creativity where it matters most. AI tools eliminate 90% of implementation busy work. Use templates for standard elements like landing pages, then focus your team's energy exclusively on the features that truly differentiate your product. 9. Automate status reports and presentations. He generates comprehensive project updates directly from his roadmap progress, feeding them into presentation tools like Gamma. This eliminates hours spent creating the same PowerPoint slides teams have made for decades. 10. People are launching profitable side hustles with vibe coding. Entrepreneurs like Peter Levels and John Rush build and monetize micro-SaaS products through vibe coding. The approach allows testing ideas quickly and pivoting without emotion when something doesn't work. #AI #startup #vibecoding 🧠 About Product Growth: The world's largest podcast focused solely on product + growth, with over 170K listeners. Hosted by Aakash Gupta, who spent 16 years in PM, rising to VP of product, this 2x/ week show covers product and growth topics in depth. 🔔 Subscribe and like the video to support our content! And turn on the bell for notifications.

Aakash GuptahostAndy Carrollguest

May 16, 20251h 12mWatch on YouTube ↗

CHAPTERS

0:00 – 3:47
Defining “vibe coding”: humans + AI building together
Aakash and Andy frame vibe coding as a collaborative workflow where AI handles much of the implementation while humans steer intent, taste, and product direction. They discuss why the term took off (Karpathy) and why it feels like a step-change for non-technical or semi-technical PMs.
- •Vibe coding as human–AI “jamming” to create products faster
- •Why the term resonates (and why it can be cringey)
- •AI tools reduce friction from idea to working software
- •PMs can participate deeper without being full engineers
3:47 – 5:21
Tool landscape and why Andy chooses Windsurf
Andy compares popular AI dev tools (Replit, Cursor, Lovable, v0) and explains where they shine versus where they feel limiting. He positions Windsurf as a more “full-stack, full-editor” experience that exposes the whole codebase and offers broad LLM access.
- •Quick-start tools vs full-stack editing needs
- •Windsurf’s positioning as a full IDE + AI copilot
- •Different tools fit different stages of exploration
- •Choosing a “weapon” and committing to a workflow
5:21 – 7:53
First look at Windsurf: workspace, files, and Cascade copilot
Andy shares his screen and demystifies the Windsurf interface: projects/folders on the left, code in the middle, and Cascade chat on the right. He highlights how quickly his personal output accelerated once he got comfortable with the environment.
- •Workspace with multiple active projects and repos
- •Basic mental model: file tree + editor + AI chat
- •Creativity and throughput gains over a short time span
- •Using the IDE as a cockpit for multiple initiatives
7:53 – 8:54
Chat mode vs Write mode: controlling risk and avoiding “overzealous” edits
Andy explains the crucial distinction between safe “chat” and code-changing “write” mode. He warns that AI can refactor or break things unexpectedly, and suggests a cautious workflow—especially early on.
- •Write mode enables direct code edits; chat mode is safe
- •AI can be proactive to the point of breaking pages
- •Practical guardrails for non-technical builders
- •Why understanding tool controls prevents painful mistakes
8:54 – 14:18
Model selection strategy: using different LLMs for different tasks
Andy shows Windsurf’s access to multiple models and describes when to use “thinking” models to go broad versus switching models when stuck. He emphasizes that model variety can unblock debugging and planning.
- •Claude thinking models for exploration and trade-offs
- •Switching models (e.g., to GPT-4.0) to unblock progress
- •Different models excel at different project phases
- •Using the AI to ask clarifying questions and structure decisions
14:18 – 16:18
Planning before coding: prompt libraries and PM fundamentals
Andy shares a key learning: diving straight into building without planning caused false starts and restarts. He now uses a structured prompt library to generate strategy, architecture, and product thinking artifacts quickly—bringing him back to core PM craft.
- •Costly lesson: insufficient planning leads to rework
- •Prompt library to systematize discovery and definition
- •Frameworks: JTBD, story mapping, PR/FAQ, tech stack selection
- •Goal: avoid endless documentation while clarifying “what/why”
16:18 – 19:21
Project example: AI Sports Reporter origin story and first prototype
Andy introduces a concrete example—an AI match report generator inspired by kids’ football match reports. He uses it to illustrate how an idea can become a landing page and early product concept rapidly, while noting early mistakes in planning.
- •Real-world spark: youth sports match reports parents loved
- •Prototype concept: generate written + audio match reports
- •Early iteration started as a waitlist/landing page
- •Using small projects to learn tools and workflows fast
19:21 – 23:27
Creating “one cockpit” documentation: strategy, architecture, roadmap in-repo
Andy walks through the project’s internal documents (README/strategy/architecture/roadmap) stored alongside code. He argues this collapses feedback cycles, improves team alignment, and makes status/strategy transparent to collaborators.
- •Docs live next to code: strategy, overview, architecture, roadmap
- •AI accelerates “0 to 80%” on PM artifacts
- •Roadmap becomes a living, check-marked execution guide
- •Shared repository makes work legible to the whole team
23:27 – 28:45
Deployment realities: GitHub discipline, CI/CD, and why “deploy early” matters
Andy contrasts easy one-click deploy tools with the complexity of full-stack setups, describing painful deployment errors caused by delaying deployment and commits. He recommends getting a minimal version live early, then iterating with checkpoints using GitHub + Netlify (or Vercel).
- •Deploying in stages prevents massive late-stage error piles
- •Commit frequently to GitHub to create reliable rollback points
- •Netlify CI/CD pulls from GitHub automatically
- •Minimal live version first, complexity later
28:45 – 38:52
Live shipping #1: fixing contrast by editing code via screenshot + Write mode
They make a quick UI improvement: “Coming Soon” text color change for better contrast. The segment demonstrates the workflow of screenshot-driven feedback, switching to write mode, and then watching a build/deploy trigger downstream.
- •Using screenshots as context for UI feedback
- •Write mode enables direct file edits; chat mode won’t modify code
- •Seeing code changes open in the right files automatically
- •Netlify build triggers after GitHub push with commit messages
38:52 – 40:58
Local vs production testing + terminal inside Windsurf
Andy shows how to run the app locally (localhost) for immediate feedback, contrasting it with production deploy latency. He highlights Windsurf’s integrated terminal execution to reduce tool switching and keep the workflow contained.
- •Local server for instant iteration vs waiting on deploy
- •Integrated terminal commands generated/executed via the AI
- •Reducing context switching by keeping everything in one tool
- •Custom domains on Netlify for a more professional presence
40:58 – 46:31
Live shipping #2: generating and implementing a logo + favicon via prompts
Andy demonstrates using a reusable prompt to produce an SVG logo and favicon, then implementing them directly into the project. They discuss how “good enough” branding can be created quickly to support validation rather than perfection.
- •Prompt-driven brand assets (SVG logo + favicon)
- •Automatic file creation and placement in project structure
- •Trade-off: imperfect aesthetics vs speed and progress
- •Using “bad first version” to solicit better design feedback
46:31 – 54:01
Live shipping #3: adding a ‘How it works’ interactive infographic section
Aakash proposes a simple explanatory infographic, and Andy turns it into a clean step-by-step “How it works” section. The result is interactive (hover states), showing how quickly UX improvements can be shipped during a conversation.
- •Translating a product explanation into on-page UX
- •AI proposes steps: capture moment → input details → AI → formats → share
- •Keeping it clean and simple to avoid unnecessary complexity
- •Prompt quality and reusable patterns as leverage
54:01 – 1:00:09
What these tools unlock: experimentation, team alignment, and monetization paths
Andy summarizes the bigger impact: cheaper experimentation, faster feedback loops, and better early alignment around a shared goal. They discuss how people monetize vibe-coded products (micro-SaaS, rapid trials) and the importance of a shared team toolkit.
- •Lower cost of experimentation reduces premature commitment
- •Teams need a shared playbook/tooling to avoid fragmentation
- •Monetization examples: Peter Levels, John Rush, micro-SaaS weekends
- •Focus on differentiation: automate the busywork, invest in the “secret sauce”
1:00:09 – 1:12:14
PM career evolution, Andy’s journey, and building Aisle Partners
Andy reflects on shifts in product management since 2008 and argues vibe coding may be the biggest change yet—moving PMs from delivery metrics back to value and pixels. He then explains Aisle Partners’ work (AI training + implementation) and shares candid lessons about going independent.
- •From early agile days to today’s AI-driven tooling shift
- •PMs can stop over-investing in non-differentiating product parts
- •Aisle Partners: targeted AI training + automation implementation
- •Consulting realities: pipeline vs delivery balance, brand building, lifestyle trade-offs