--- title: "Vibe Coding for Beginners: How to Build an App Without Breaking It Every Time" description: "A guide for non-technical beginners on vibe coding, testing apps for SEO, and using AI coding tools like Cursor, Claude, and Supabase safely." date: "2026-07-18" author: "Zakariae Boussaidi" image: "../assets/zakariae-boussaidi-mr-zak-growth-marketer-barcelona.jpg" image_alt: "Zakariae Boussaidi Mr Zak, Barcelona growth marketer and founder of Gofy and Recatch" --- # Vibe Coding for Beginners: How to Build an App Without Breaking It Every Time Hi, I'm Zak — follow me on X [@heyMrZak](https://x.com/heyMrZak) for more on building with AI. This article is for non-technical people who want to start vibe coding without any tech background. ## The Real Problem With Vibe Coding Based on my experience building apps and websites with AI, here's the issue: if you just watch AI write your code without understanding what it's doing, you'll usually say "I tested the app, the feature works." But the real question is — is this page secure? Is it optimized for SEO? Did you actually test that? That's the question most beginners skip. This article will show you how to test your features for SEO, and give you tips on using AI for coding without breaking your app every time you make a change. ## The "AI Loop" Problem Sometimes you give AI a prompt, it writes the code, and later you notice it broke something else without telling you — you only find out once you dig in. This is what I call the **loop of AI**. Every vibe coder deals with this. But you can reduce it with a few habits. If you're the type who jumps straight into building your next Instagram-scale app, welcome to the loop — especially once your app gets complex. ## Step 1: Get Clear on Your Idea First Before you do anything, is your idea actually clear? If not, use ChatGPT or Claude to talk it through, then turn it into a **PRD (Product Requirements Document)**. This is one of the most useful things you can hand an AI before you start prompting. Ask yourself: what else do I need? Design, for one. I recommend using your own imagination for design — a little bit of your personal touch beats the generic AI-generated design every beginner ends up with. You can use [Figma](https://www.figma.com) if you want to design properly, or just sketch wireframes in a notebook — that's what helps me get every idea out of my head. You can also use AI design tools, but always add your own touch. That's what actually matters. ## Step 2: Pick Your AI Editor or AI Tool Now that you have your design and PRD, you need to choose your **AI editor** or **AI tool** (they're not the same thing). I personally use an AI editor because I like the freedom — you can use it for anything, unlike most AI tools that lock you into their platform. That said, if your idea isn't that big or complex, an AI tool is totally fine and probably faster. If you're like me and want full control over everything, go with an AI editor: - **Cursor** - **Claude Code** - **Codex** ## Step 3: Choose Your Tech Stack Before anything else — what stack are you using? For **mobile apps**, I recommend **Flutter**. It's great for an MVP (Minimum Viable Product) because you get both iOS and Android from one codebase. For **websites**, use **React**. ## Step 4: Pick a Database You'll need a database to store your users' information. **Supabase** is easy to set up and works for both apps and websites, with a solid free tier. It handles auth and your database in one place. **Firebase** is also great — it's Google's product, and it works well for applications too. My personal recommendation: **Supabase with SQL**. Once you've got your database sorted and your stack decided, move to the next step. ## Step 5: Create Rules for Your AI This is where you set strict boundaries for your project. Ask ChatGPT or Claude to help you write a rules file. It should include things like: - Don't edit anything you weren't asked to edit - Max 400 lines per file — create new files after that - Comment every function: what it does and why - Don't add plugins or packages you didn't ask for - Follow the existing project structure At this point you have: rules, stack, design, and a PRD. Now you're ready to prompt. ## Step 6: Start Prompting (The Right Way) I won't teach prompting in detail here, but if you're not sure how to write a good prompt, ask ChatGPT or Claude to write it for you — just be clear about what you want. AI is smart, but it still misunderstands things sometimes. If you're a beginner, verify everything the AI builds. Don't assume it works just because it says it does. ## SEO and GEO Tips for Vibe-Coded Sites If you're building a website, tell your AI to add **schema markup** to your most important pages — and SEO basics on every page, honestly. Then test each page with [validator.schema.org](https://validator.schema.org/). Paste the page URL, run the test, and if there are errors or warnings you don't understand, take a screenshot and ask your AI to explain and fix it. ## Before You Ship: Security and Testing Once your app is ready, don't forget to have your AI check your security setup — this is the part most beginners skip, and it's the most important. There are plenty of security prompts online — use one, and have your AI verify every line for vulnerabilities. Go into your database and check your **RLS policies** (Row Level Security) in Supabase or your **rules** in Firebase. If you don't understand these, ask your AI to walk you through setting them up properly. Before you submit to the App Store (or hand it to real users), test every function and every button. Apps get rejected for broken flows more than anything else. And don't forget your privacy policy page — it's required, and it matters.