{"slug": "how-to-build-an-app-with-ai-from-scratch", "title": "How to build an app with AI from scratch", "summary": "A vendor-neutral guide published by The Primer on 9 August 2026 maps the six common walls non-coders hit when building an app with AI: scoping, tool choice, the 70% problem, free-tier limits, security, and finding first users. The guide cites Addy Osmani's '70% problem,' where AI gets non-engineers about 70% of the way to a working app before progress stalls, and warns that usage-based billing can push costs past the sticker price.", "body_md": "The Primer · Getting Started\n\n# How to build an app with AI from scratch\n\nVendor-neutral\n\nAI gets a non-coder from idea to a working demo quickly. Then the same person hits the same walls, in the same order: scope, tool choice, the 70% problem, the free-tier cliffs, security, and getting paid. This is the map of that whole path, with the real numbers at each wall and the deeper guide that gets you over it.\n\nAI will get you from an idea to a working demo faster than you expect, often the same day. Then you hit a wall, and then another, and the walls are the same ones in the same order for almost everyone who starts from zero. This primer is a map of that whole path. It is not a build log; we did not build an app for this piece and there is no repo or bill to show you. It is the documented route most non-coders actually walk, assembled from primary pricing and limits pages we read on 9 August 2026, named practitioners on the record, and a documented security incident, with a pointer to the deeper Okane Land guide at each wall so you can go as far into any one of them as you need.\n\nHere is the shape up front. Six walls: scope your idea, pick your tool, get through the 70% problem, ship it past the free-tier cliffs, secure it, and find the first users. The building is the easy part now. The walls are everything after the demo, and knowing they are coming is most of the battle.\n\n## Step 1: idea and scope, before you touch a tool\n\nThe cheapest decision you will make is what to build, and it is the one people skip. AI is happy to generate whatever you describe, which means a vague idea produces a vague app, quickly and convincingly enough that you do not notice until you are deep in it.\n\nSpend the first hour with no tool open. Write down the one thing the app must do, for one specific person, and the smallest version of that which would be useful. Not the feature list, the single core loop. This is unglamorous and it is where the “does this person know what to build” bottleneck lives, the one that no amount of model quality fixes. If you are still deciding whether the whole endeavor is worth it, [our worth-it study](/study/is-vibe-coding-worth-it/) is the place to start; if you know what you want, keep going.\n\n## Step 2: pick your tool, and know what it costs\n\nThere is one real fork here, and it is about how much control you want.\n\n**App builders** like Lovable take a prompt and give you a deployed app, fastest from idea to something live, with the least visibility into what was built. **Editor-plus-agent** setups like Cursor or Claude Code give you a real codebase you drive, more control and more to learn. A true beginner testing an idea is often best served by the app-builder speed; someone who intends to keep and grow the thing is usually better in an editor from the start. The full slot-by-slot breakdown, with what each costs a month, is in [the vibe coding stack](/primer/vibe-coding-stack/), and we have hands-on guides for [Cursor](/primer/how-to-use-cursor/), [Claude Code](/primer/how-to-use-claude-code/), and [Lovable](/primer/how-to-use-lovable/) individually.\n\nThe one thing to internalize before you commit: the sticker price is a floor, not a ceiling. Usage-based billing means a heavy session can run past the plan price, which is the entire subject of [our cost study](/study/cut-your-ai-coding-bill/). Pick the tool for the job, and read its meter from day one.\n\n## Step 3: build the app with AI, and the 70% wall\n\nThis is where the map earns its keep, because this is where nearly everyone stalls in the same place.\n\nAddy Osmani named it the 70% problem: AI gets a non-engineer roughly seventy percent of the way to a working app fast, and then the last thirty percent, the edge cases, the integration, the security, the thing that breaks only on real input, is where progress grinds. The specific trap is the debug death-spiral. You ask the model to fix a bug, it introduces a new one, you ask it to fix that, and it reintroduces the first. Two steps forward, two steps back, with growing confidence that you are almost there.\n\nThe way through is not a better prompt; it is a smaller scope per step. Change one thing at a time, confirm it works before the next, and when the model cannot fix its own bug after two tries, stop and read the code yourself rather than looping a third time; reading the code is also [where the learning happens](/primer/can-you-learn-while-vibe-coding/). That the model feels like it is helping while this happens is its own hazard, and it is exactly the perception gap [our study on whether AI makes you faster](/study/does-ai-coding-make-you-faster/) measures, and the reason [agents still need a human in the loop](/study/do-ai-agents-work-yet/) on anything real.\n\n## Step 4: ship it, and mind the free-tier cliffs\n\nGetting an app running on your machine is not shipping it. Shipping means a host and, usually, a database, and both have free tiers with edges worth knowing before you hit them.\n\nFor hosting, **Vercel’s Hobby plan is $0** and generous for a personal project, including 100 GB a month of data transfer, with one catch that surprises people: it is licensed for personal, non-commercial use, so the moment you charge for the app you are meant to be on **Pro at $20 a month** per seat, which adds $20 of included usage credit and a terabyte of transfer. All figures verified on Vercel’s pricing page on 9 August 2026.\n\nFor data, **Supabase’s Free plan is $0** with a 500 MB database, 50,000 monthly active users, and 1 GB of file storage, and its own catch is the one that quietly kills weekend projects: **free projects are paused after one week of inactivity**, so an app nobody visited for a week comes back to a stopped database. Pro is $25 a month and removes the pause. Both figures verified 9 August 2026. Neither cliff is a problem if you see it coming; both are a bad afternoon if you do not.\n\n## Step 5: security you cannot skip\n\nThis is the wall with the highest stakes and the one AI is least likely to handle for you, because insecure code runs exactly as well as secure code in a demo.\n\nThe cautionary tale is CVE-2025-48757, disclosed in May 2025: apps built on a vibe-coding platform leaked data because row-level security was left off, so anyone could read records that should have been private. The researcher lists it at a CVSS base of 8.26, which is to say serious. The mechanism is the point: the model built something that worked, nobody turned on the access control, and the gap was invisible until it was found. AI-built apps ship insecure by default, and the one check that matters most is that an unauthenticated request cannot reach data it should not. The full self-audit, eight checks you run on your own app, is [our security study](/study/is-your-vibe-coded-app-secure/), and it is the one wall on this map you should not walk past.\n\n## Step 6: first users, and getting paid\n\nThe last wall is the one that has nothing to do with code, and it stops more projects than any bug. A shipped app with no users is a hobby, and the jump to ten users is its own skill.\n\nTwo handoffs close the map. Finding those first people is a specific, learnable move rather than “marketing,” and [our first-ten-users guide](/ledger/first-10-users/) lays out the plays that work when you have no audience. And if the app is for someone else, being fast is a trap unless you charge for the value rather than the hours, which is the whole of [our pricing guide](/ledger/pricing-ai-work/). Build fast, then price like it took skill, because it did.\n\n## The map, and the one edge to keep\n\nThat is the path: scope, tool, the 70% wall, the deploy cliffs, security, users. None of the six walls is secret, and all six are where first-timers actually stop, which is why the useful thing was never a step-by-step of the easy part. The demo is the easy part now.\n\nOne edge to keep. Every price and limit here carries the date we read it, because these pages move, and the tool that repriced last year will reprice again. Re-check the number before you rely on it, treat the free tiers as introductions rather than homes, and remember that the model that got you to the demo is the same model that will confidently walk you off each of these cliffs if you let it. The map does not make the walls disappear. It just means you will see each one coming, which is the difference between a project that ships and one that stalls at 70%.\n\nOne email, when there's something worth sending\n\n## Get the research in your inbox.\n\nNo fixed schedule, no filler. You get an email when we've tested something, run the numbers, or found a tool worth your time.\n\nFree. Double opt-in, unsubscribe in one click.\n\nWhich wall are you stuck at? [Compare notes in the forum ↗](https://community.okaneland.com)\n\n## Sources\n\n| Source | Link |\n|---|---|\n| Vercel pricing (verified 2026-08-09): Hobby $0/mo, personal and non-commercial, includes 100 GB/month Fast Data Transfer; Pro $20/mo per developer seat with $20 of included usage credit and 1 TB/month transfer; spend management can stop usage before you exceed a set budget. |\n|", "url": "https://wpnews.pro/news/how-to-build-an-app-with-ai-from-scratch", "canonical_source": "https://okaneland.com/primer/build-an-app-with-ai-from-scratch/", "published_at": "2026-08-26 00:00:00+00:00", "updated_at": "2026-08-27 00:20:11.731862+00:00", "lang": "en", "topics": ["artificial-intelligence", "ai-tools", "ai-products"], "entities": ["The Primer", "Lovable", "Cursor", "Claude Code", "Addy Osmani"], "alternates": {"html": "https://wpnews.pro/news/how-to-build-an-app-with-ai-from-scratch", "markdown": "https://wpnews.pro/news/how-to-build-an-app-with-ai-from-scratch.md", "text": "https://wpnews.pro/news/how-to-build-an-app-with-ai-from-scratch.txt", "jsonld": "https://wpnews.pro/news/how-to-build-an-app-with-ai-from-scratch.jsonld"}}