Vibe Coding with AI Agents: From Todo App to Your Own Product
Learn to direct Lovable on a neutral Todo training app, then transfer the method to your own product.
What you'll build
Learn vibe coding with AI agents by building a real Todo app in Lovable, then transfer the same method to your own product.
This is not a course about copying one Todo tutorial. Todo is the training field. The real skill is learning how to brief Lovable, break work into features, review generated code, recover from mistakes, add data and auth safely, deploy, and start your own product with the same loop.
What you'll learn
- Work with Lovable like an operator: prompts, feature loop, checkpoints, rollback.
- Plan a Todo app and your own product in parallel.
- Build the first frontend Todo app.
- Add localStorage persistence.
- Practice the Agent Feature Loop with filters, edit, priority, due date, and search.
- Refactor safely before backend work.
- Move from localStorage to Supabase.
- Add login and user-specific tasks.
- Protect data with RLS.
- Deploy to Vercel.
- Polish, document, and understand the remaining product map.
- Start your own product using the same method.
Requirements: No technical background required
Curriculum
00Course Preview, Limits, and Tools
Free6 lessons Β· 69 min
Preview the course promise, learning paths, tool stack, costs, and product-transfer idea before paid Lovable work begins.
- What You Will Be Able to Buildπ7 min
- Course Paths and Transfer Promiseπ12 min
- The Tools We Useπ20 min
- Free or Paid Lovable?π10 min
- How to Save AI Agent Requestsπ5 min
- Your Product Ideaπ15 min
01First Todo Build in Lovable
Paid6 lessons Β· 107 min
Build the first browser-only Todo app in Lovable while learning scope, PRD, Project Knowledge, Plan mode, review, fix, checkpoint, and rollback habits.
- Scoped First-Build Briefπ15 min
- PRD and Project Knowledgeπ20 min
- Plan Mode and Visual Directionπ10 min
- Review the First Generationπ20 min
- First Fix Loopπ30 min
- Checkpoint and Rollback Practiceπ12 min
02Feature 1: localStorage
Paid4 lessons Β· 90 min
Add browser persistence to the Todo app, then test refresh behavior and common localStorage failure modes.
- Why localStorage Mattersπ10 min
- Implement localStorageπ35 min
- Test localStorage by Handπ20 min
- What to Do When localStorage Breaksπ25 min
03When Lovable Does the Wrong Thing
Paid4 lessons Β· 68 min
Practice recovering from scope drift, loops, invented APIs, broken changes, and confusing errors before the app becomes more complex.
- Lovable Changed What I Did Not Ask Forπ18 min
- Lovable Is Looping or Inventing APIsπ18 min
- When Rollback Is Better Than Fixingπ12 min
- Read Errors Without Reading Codeπ20 min
04Feature Loop, UX Checks, and First Transfer
Paid6 lessons Β· 230 min
Build frontend features with less hand-holding, place UX states where they are testable, and create the first own-product slice.
- Filters and Empty Statesπ35 min
- Edit Task with Your Own Promptπ40 min
- Priority and Data Migrationπ45 min
- Due Date, Search, and No-Results Statesπ45 min
- Mobile UX and Regressionπ20 min
- Milestone: Your Product's First Sliceπ45 min
05Refactor with Lovable
Paid3 lessons Β· 75 min
Clean up the Todo app in focused refactor steps while preserving behavior through regression checks.
- When Refactoring Is Worth Itπ15 min
- Extract Task Utilitiesπ30 min
- Extract the localStorage Adapterπ30 min
06Database, Async, and Own Entities
Paid3 lessons Β· 55 min
Bridge from browser storage to remote data, async behavior, loading/error thinking, and the learner's own product data model.
- From localStorage to Remote Dataπ15 min
- Your Product Data Modelπ20 min
- Migration Brief for Todo Databaseπ20 min
07Supabase Database Implementation
Paid4 lessons Β· 140 min
Create the Supabase project, plan the migration, build the tasks table, and connect real remote reads and writes.
- Create Supabase from Scratchπ30 min
- Create the tasks Table with Lovableπ35 min
- Load Tasks from the Databaseπ35 min
- Connect Create, Update, and Deleteπ40 min
08Login and User-Specific Tasks
Paid3 lessons Β· 70 min
Add login, connect tasks to users, and test two-user behavior before enabling privacy enforcement.
- Why Login Is Neededπ10 min
- Add Auth UIπ40 min
- Test with Two Usersπ20 min
09Security: RLS and Task Privacy
Paid4 lessons Β· 102 min
Turn task ownership into real database privacy with RLS, debugging, and two-user access tests.
- Why Frontend Filtering Is Not Enoughπ12 min
- Implement RLS Policiesπ35 min
- Debug RLS When It Blocks Your Own Rowsπ30 min
- Test Auth and Access Errorsπ25 min
10Deploy on Vercel
Paid6 lessons Β· 132 min
Connect GitHub, prepare environment variables, deploy to Vercel, and smoke-test the live app after security is in place.
- What Deployment Meansπ12 min
- Create GitHub from Scratchπ25 min
- Prepare the Project for Deploymentπ20 min
- Environment Variablesπ20 min
- First Deploymentπ35 min
- Production Smoke Testπ20 min
11Final Todo QA and Portfolio Handoff
Paid4 lessons Β· 87 min
Polish the completed Todo app, run final regression, write the portfolio handoff, and name what Todo did not teach.
- UX Polishπ25 min
- Final Regression Checklistπ25 min
- README and Portfolio Descriptionπ25 min
- What Todo Did Not Teach Youπ12 min
12Own Product Capstone, Recipes, and Tool Map
Paid5 lessons Β· 120 min
Use the accumulated Build Notes to deepen your own product slice, then leave with reusable recipes and a tool map.
- Assemble Your Own PRDπ25 min
- Universal Prompt for a New Feature or Productπ15 min
- Your First Product Feature from Start to Finishπ45 min
- Recipe Index and Next Featuresπ20 min
- When Lovable Is Not Enough: The Tool Mapπ15 min
Honest promise
The learner will not become a full software engineer just by finishing this course. They will learn the operator workflow: define the task, constrain Lovable, review output, test behavior, recover from mistakes, and keep moving in small safe steps.