Pick one and use it. Don't tool-hop. Lovable and Bolt are best for pure vibe-coders who want to stay in a browser. Cursor gives more control once you need it. v0 is unmatched for UI components if starting out (and you can graduate into design skills.md later).
VS Code is the free industry-standard editor underneath everything — Cursor is literally built on top of it. You may start in Lovable, move to Cursor, then circle back to VS Code as AI agents mature. Claude Code, GitHub Copilot Workspace, and MCP-connected agents increasingly operate inside VS Code directly, giving you more control than any proprietary wrapper.
GitHub stores your code. Think of it as Google Drive for software — with the added superpower that it tracks every change ever made. Free tier is fine to start.
Vercel is a nice default for modern web apps — free tier, deploys in 30 seconds, connects straight to GitHub. Railway is better if you need a backend server running continuously.
Supabase is your database, auth system, file storage, and API — all in one. Free to start, built on Postgres. Your AI tools know this stack inside out.
Where you buy and manage your domain name. Cloudflare Registrar is cheapest and has the best DNS tooling. Namecheap is a solid alternative. Avoid GoDaddy for anything beyond basic purchases.
Pick one place for everything — ideas, PRD, decisions, links. The tool doesn't matter; the habit does. Notion has the best free tier for founders building products.
You're about to create 40+ accounts — GitHub, Vercel, Supabase, Stripe, Cloudflare, analytics tools, email services, AI APIs. Without a password manager you will lose access to something critical at the worst possible moment. Non-negotiable.
API keys accidentally committed to GitHub are the #1 preventable security disaster for early-stage apps. GitGuardian watches your repo and alerts you instantly if a secret slips through. Ensure you add .env and other items to .gitignore
A few extensions that save hours. Loom for screen recording. ColorZilla for grabbing colors from any site. JSONViewer for reading API responses. React DevTools if you're in React.
You don't need a completely original idea — but you do need a clear reason why your version is better, different, or targets someone underserved. Google it. Search Product Hunt. Check the App Store.
Sign up for the free tier of every competitor. Screenshot their onboarding, pricing page, and core feature. You're looking for gaps — what's missing, clunky, or overpriced.
Most apps have 2–3 types of users with different needs. Define each role, what they want to do, and what success looks like. Don't build for "everyone" — that's how you build for no one.
If you can't summarize what your app does in one clear sentence, you don't understand it well enough to build it yet. This sentence also becomes your hero headline at launch.
You can't design the product without knowing how it makes money. Subscription vs. usage-based vs. one-time changes what you build: metered usage needs counters in your DB; subscriptions need Stripe webhooks; one-time needs a different checkout flow. Decide early — retrofitting monetisation is painful.
In B2B, the person who pays (the buyer — usually a manager or founder) is often not the person who uses the product daily (the end user). This distinction changes everything: buyers care about ROI and security; users care about UX and speed. Your marketing, pricing page, and onboarding need to serve both.
What are the "things" in your app? Every product is a collection of objects with relationships. A project tool has Projects, Tasks, Users, Comments. Sketch yours before you build.
A Product Requirements Document is the contract between your idea and your build. It describes what the product does, who it's for, what success looks like, and what's explicitly out of scope. Without it, scope creep destroys timelines.
One source of truth. All decisions, links, and meeting notes — in one place. The enemy is having things spread across Slack, email, and five Notion pages nobody can find.
Give Claude your one-sentence summary, user roles, and rough feature list. Ask it to produce a structured PRD. Edit it — don't just accept it blindly.
The POC should demonstrate a user can complete the core action from start to finish. Everything else — error states, edge cases, mobile layout — is irrelevant at this stage.
Auth takes longer to build correctly than the core feature itself. In your POC, hardcode a fake user. Drop a const currentUser = {'{'}id: 1, name: "Demo"{'}'} at the top and move on.
Use fake, hardcoded data to simulate what your database will hold. Arrays of objects in a JS file are fine. The goal is to make the UI work — not to build a real backend yet.
Different tools for different stages. Lovable and Bolt get a full UI running fast. v0 is best for individual components. Your IDE gives more control when you need to refine.
Every time you open a new chat with your AI tool, it has no memory of your project. A context file fixes this. .cursorrules (Cursor) and CLAUDE.md (Claude Code) are files that automatically load project context — your stack, conventions, naming patterns, and rules — into every session without re-explaining them.
Your first prompt sets the entire direction. Be specific about the tech stack, what to build, what to skip, and what data model to assume. Vague prompts produce vague apps.
When you do add auth: lead with "Continue with Google." Progressive fields — show email first, password reveals after. Full-width primary button, auto-focused on load. Enter key submits. One page for both login and signup — detect which the user needs based on whether their email exists.
Magic links (email a login link, no password needed) deliver dramatically better UX for many apps — especially B2B tools. Users click a link and they're in. No password to forget, no reset flow to build.
Show it to 3 people who are not you. Ask: "Without me explaining anything — what does this do? What would you do next?" If they get it, you're done. If confused, fix the confusion — not the features.
Supabase Auth, OAuth, magic links, RLS templates
Stripe webhooks pre-connected, customer portal
A mail relay that is domain verified is configured, templates folder ready at a minimum. Also you may want to consider if you need to communicate with this domain (email corresspondence, support tickets etc)
Sentry, Posthog, pre-commit hooks installed
Don't build from a blank file. A boilerplate gives you auth, routing, and database connections already wired up. The standard is Next.js + Supabase + Tailwind — AI tools know this stack deeply.
Multi-tenant: Many companies share one database, separated by org_id. How Slack, Notion, Linear all work. Cheaper to operate. Single-tenant: Each customer gets their own database. Required for regulated industries. For 99% of early-stage founders: go multi-tenant.
Supabase Auth handles email/password, magic links, and OAuth out of the box. Clerk has better UI components if auth is central to your product. Use Row Level Security (RLS) from day one — it ensures users only see their own data at the database level.
Never store passwords as plain text — ever. Supabase Auth handles this automatically with bcrypt. If building custom auth, bcrypt or argon2 with a salt rounds value of 12+. "Salting" adds a unique random value before hashing — two identical passwords produce different hashes, blocking rainbow table attacks.
A migration is a script that changes your DB structure in a trackable, repeatable way. Never make DB changes by clicking around in Supabase UI without writing a migration. One repo per product. .gitignore must exclude node_modules and .env. Branch protection on main — require a pull request before merging.
Pre-commit hooks run automatically every time you commit. They catch secret keys, formatting issues, and obvious bugs before they hit GitHub. Set up once, forget about them — they just work silently in the background.
Transactional email (welcome emails, receipts, password resets, notifications) is a completely separate system from auth email. You need a dedicated email service — don't use Gmail for this. Resend is the best modern option: clean API, great React Email component library, generous free tier.
Without rate limiting, a single bad actor (or a bug in your own code) can spam your API thousands of times per second — blowing your Supabase compute budget, your AI API budget, or both. Rate limiting caps how many requests a user or IP can make in a given time window.
A feature flag lets you ship code to production but turn features on/off without deploying. Essential for gradual rollouts, beta testing with specific users, and turning off a broken feature instantly without a code push. Simple to add early; painful to retrofit later.
Draw two diagrams: (1) System architecture — what connects to what. (2) Core process flow — what happens step-by-step when a user completes the main action. These are invaluable when onboarding developers later.
Anthropic Claude — best for reasoning, writing, structured output, and safety-conscious use cases. OpenAI GPT-4o — best ecosystem, widest tool support. Groq — fastest inference, great for real-time features. Google Gemini — best for multimodal (image + text). Most products use one primary provider and fall back to another.
Your AI API keys are the most expensive credentials in your stack — a leaked key can run up thousands of dollars in hours. Never expose them client-side. Always call AI APIs from your server (API routes, edge functions). Set a hard spend cap in your provider dashboard the day you create the account.
Streaming: Words appear token-by-token as the model generates them (like ChatGPT). Feels fast, dramatically better UX for long responses. Batch: Wait for the full response before showing anything. Simpler to implement but feels slow for anything over 2 seconds. Use streaming for anything user-facing.
AI costs are measured in tokens (roughly 4 characters = 1 token). Know your numbers before you launch: how many AI calls does your average user make per month? What's the average token count? Multiply by cost-per-token. This is your AI cost-per-user — it must be less than your revenue-per-user or you lose money on every customer.
Your system prompts are as important as your code — changing one word can dramatically alter behaviour. Treat prompts like code: version them, test changes, don't edit live prompts without review. Store prompts in your DB or a dedicated file, not hardcoded in API routes.
You need to know what your AI is saying to users, how much it's costing, which prompts are failing, and where latency is high. Langfuse is the best open-source option — it traces every AI call, logs inputs/outputs, measures latency, and calculates cost per session.
Disclose AI use: If your product generates content, makes decisions, or gives advice using AI — tell users. Regulators and users increasingly expect this. A simple "✦ AI-generated" label is enough for most use cases.
Human review for high-stakes actions: AI should not autonomously send emails, post publicly, charge customers, or delete data without a human confirmation step — at least until you've tested extensively.
Hallucination handling: AI makes things up. For factual products (legal, medical, financial), always show sources and add a disclaimer. Build a "thumbs down" feedback mechanism so users can flag wrong answers.
Content moderation: If users can submit text that goes into an AI prompt, validate and sanitize it first. Prompt injection — where a user tries to override your system prompt — is a real attack vector.
You need a wordmark (text logo) and an icon (square mark). Midjourney for exploration, Looka for fast brandable outputs, or hire a designer on 99designs for <$300.
Your icon must work at 16px (browser tab) AND 512px (app stores). Test it small first. Use realfavicongenerator.net to produce all sizes from one image.
5 colors: primary, secondary, accent, neutral light, neutral dark. Use Coolors.co to generate and test. Define as CSS variables in your codebase from day one.
Get a .com if you can. Short, memorable, easy to spell out loud. Check trademark availability, not just domain availability. Buy it before you start building — good names get grabbed.
DNS turns "yourapp.com" into the right server. Cloudflare manages this for free. You'll add a CNAME pointing to Vercel. SSL (the https padlock) is provisioned automatically by Vercel and Cloudflare — you don't need to do anything.
Vercel for Next.js: every push to a branch = preview URL; every push to main = production deploy. This is your entire pipeline with zero configuration. Railway for persistent backend servers.
API keys never go in your code. They go in .env locally, the Vercel dashboard in production. The .env file must be in your .gitignore. If it ever hits GitHub, rotate every key immediately.
Stripe is the industry standard — don't build your own payment processing. You need: Products and Prices set up in Stripe Dashboard, a checkout session (hosted by Stripe — no card data touches your server), a customer portal (lets users manage their subscription), and webhooks to sync payment events to your DB.
The emails your app sends automatically: welcome on signup, payment receipt, trial expiry warning, password reset, weekly digest, invitation email. These are not marketing emails — they're expected and have high open rates. Build them in React Email and send via Resend.
User-uploaded files don't live in your database. Supabase Storage is easiest. Cloudflare R2 is cheapest at scale. AWS S3 is the industry standard for anything enterprise.
Any EU or UK traffic = you need a cookie consent banner. GDPR in plain language: tell users what you collect, let them delete it, don't sell it. Use a generator for your Privacy Policy and Terms — don't write them yourself. Add a "Delete my account" button from day one.
SOC 2 — only when enterprise customers ask (>$50K ARR). HIPAA — only if handling medical records. PCI DSS — use Stripe hosted checkout and you're covered. Don't let compliance anxiety stop you shipping.
Every converting landing page has the same six sections: Hero (who it's for + what it does + one CTA), Problem (make them feel it), Solution (your product, simply explained), How It Works (3 steps), Social Proof (testimonials or logos), CTA (once more, with urgency).
Your pricing page is your highest-intent page — optimize it ruthlessly. Rule of 3: show 3 tiers, make the middle one highlighted as "Most Popular." Anchor high — show the expensive plan first. Lead with outcomes in feature lists ("Unlimited projects" not "No project limit"). Include a FAQ that pre-handles every objection. Add a money-back guarantee if you can.
A structured beta is not "give a few friends access." It's a programme: defined cohort of 10–20 users, a clear time period (4–6 weeks), weekly feedback calls or async surveys, and a specific list of hypotheses you're testing. Beta users should get a discount for life in exchange for feedback — not just access.
The first 10 users don't come from marketing — they come from direct conversations. Post in communities where your users already are (Slack groups, Reddit, Discord, LinkedIn). DM people personally. Do things that don't scale.
Write for your customer, not about yourself. "We help [them] do [thing]" — not "We are a platform that leverages..." Specificity beats vague claims. Numbers build trust. Shorter sentences land harder.
A 60–90 second product demo on your landing page increases conversion by 30–80%. Screen record, add voiceover in Loom, edit in ScreenStudio or Descript. Remotion builds programmatic videos — great for animated data demos and social content that generates itself.
Know three things: how many people visit, what they click, and where they drop off. Posthog handles product analytics, session replay, and feature flags in one tool. Free to start.
SEO = found by Google. Write content answering your users' real questions. Proper meta tags, sitemap, fast load times. AEO (Answer Engine Optimization) = recommended by AI tools like ChatGPT and Claude. Structure content as clear, specific, citable answers. AI tools quote sources that are specific, credible, and well-formatted.
For most founders: v0 generates great UI from text descriptions, Tailwind UI gives production-ready components, Figma is worth learning for custom design. You don't need to be a designer — you need to recognize good design and prompt for it.
Edge functions run your code at servers close to your users globally — dramatically reducing latency. Durable functions are long-running processes that survive server restarts and timeouts — essential for multi-step workflows like onboarding sequences, report generation, or complex AI pipelines.
Some tasks are too slow for a user to wait on: sending emails, generating reports, processing uploads, calling AI APIs. Move these to a background queue — the user gets an instant response, the work happens asynchronously. BullMQ (Redis-backed) is the Node.js standard.
Beyond .env files: Doppler syncs secrets across all environments with one source of truth and full audit logs. HashiCorp Vault is enterprise-grade dynamic secrets with auto-rotation. AWS Secrets Manager for the AWS ecosystem.
Dev — local machine, experiments, breakage allowed. Staging/QA — production replica for final testing before release. Production — what your users see. Never test in production. Never push directly to production without going through staging.
CI runs tests on every pull request automatically. CD deploys when tests pass. GitHub Actions handles both for free. A basic pipeline: lint → test → build → deploy to staging → require approval for production.
At scale: automated daily backups (Supabase does this on paid plans), connection pooling via PgBouncer to prevent connection exhaustion, read replicas for heavy read workloads, and regular VACUUM operations to keep Postgres performant.
Strategy: main = production, develop = integration, feature branches off develop. Git worktrees let you work on multiple branches simultaneously in separate folders without stashing — invaluable when juggling a hotfix and a feature build at the same time.
Vercel, Supabase, and AI API costs can spike unexpectedly — a viral week or a runaway bug can generate a bill you weren't expecting. Set billing alerts at $50, $100, and $500 in every service dashboard. Implement per-user AI usage caps. Calculate your cost-per-user monthly and track it alongside your MRR.
Know when things break before your users tell you. Sentry catches JavaScript errors in real-time. Betterstack monitors uptime and pages you when your site goes down. Datadog for full enterprise observability.
The honest answer: earlier than you think, later than you fear. You need a senior engineer when:
You have 2+ developers working simultaneously,
You're signing enterprise contracts requiring security reviews,
Your AI tool can't debug the problem you're hitting,
Performance is visibly impacting real users.