From Research to Deployed App: Can a Non-Technical Founder Build a Secure Web App with Claude Code?

Zachary Nowroozi — Mon, 22 Jun 2026 09:40:38 +0000

How to read this piece: Part 1 is a literature review on whether AI coding agents actually make people faster, more capable, and safe. Part 2 is a hands-on guide that turns that research into a deployed web app you build yourself with Claude Code with no coding required.

PART 1 — The Research

Introduction

In 2021, GitHub released an AI tool called Copilot that changed software development forever (Lakshmanan). Programmers no longer had to scour the internet to seek help or copy code; an AI assistant plugged into their codebase could find answers immediately. Soon after, better generative intelligence emerged, and software became more automated. Tools upgraded from plug-ins, powered by OpenAI's Codex that could only edit one file at a time with little proficiency, to Cursor, a desktop application with stronger models that could solve tougher issues across numerous files. Today, the command line grants access to agentic assistants, where natural language can create an entire prototype in minutes.

The rapidly progressing capability of coding agents has led to fast adoption, and not enough time to deliberate the extent or context in which they are useful. In particular, this article questions: do AI coding agents actually accelerate development, or do the gains depend entirely on context, and is prototyping the specific case where the usual tradeoffs disappear? Through insight into these topics, we hope to answer experienced developers' concerns, and explore whether or not agentic coding assistants are actually useful in large, complex codebases. Additionally, we will dive into Claude Code — downloadable and used through the terminal, desktop app, IDE, and browser pending an Anthropic subscription — and instruct non-technical founders on how to leverage the tool to build and deploy a safe web app with language alone (Anthropic). It is expected that readers have access to a coding agent, namely Claude Code, if they desire to follow the instructional guide.

Literature Review

Coding agents like Claude Code and Codex have shifted from a novelty to a standard for software developers, but the research on their effectiveness has not kept up with how fast they have progressed. Early studies showed that the tools sped up simple, from-scratch work and slowed experienced developers down on large, existing codebases. This review explores three domains where coding agents were measured against human developers — on speed, capability on complex code, and security — and asks how previous findings hold up against recent evidence. The capability gap that once made agents unusable for advanced programming has mostly closed, but the security gap hasn't; this disconnect should shape how anyone builds with these tools today.

Domain 1 — Speed & Context

Users have consistently expressed that coding agents accelerate their software development, but the research offers mixed results dependent on context. An experiment run by Microsoft, GitHub, and MIT confirmed that generative AI has remained beneficial for easy tasks, finding their "treated group completed…[wiring up an http server in javascript] 55.8% faster" (Peng et al.). However, experienced developers historically have been affected less by agents. The same study by Microsoft, GitHub, and MIT in 2023 concluded that the improvement in speed was felt most by "developers with less programming experience, older programmers, and those who program more hours per day," not senior engineers (Peng et al.). Two years later, the precedent remained, and was proven. Model Evaluation and Threat Research (METR) published their 2025 paper detailing a noticeable gap between perception and tangible benefit of coding agents for experienced developers on large, existing codebases (Becker et al., "Measuring"). Notably, despite "developers forecast[ing] that allowing AI will reduce completion time by 24%… allowing AI actually increases completion time by 19%" (Becker et al., "Measuring"). Agents were the catalyst of slowing down proficient programmers, not accelerating them, yet developers still felt as if "allowing AI reduced completion time by 20%" (Becker et al., "Measuring"). Expert coders' discrepancy between estimation and reality of speed increase is profound. A tenable explanation is that they are faster, but their desired outcome changed while using AI. Larger codebases have products that can be improved, whereas new projects only have an idea that needs to be implemented. Experienced architects know how to find optimizations and can alter the task definition to achieve them; the big repositories they work in provide massive opportunity for improvements. On the other hand, beginner developers do not recognize optimizations as frequently, so will often stick to their original objective; the small repositories they work in provide little opportunity for improvements. When software developers are equipped with an agentic coding assistant their traits are magnified — senior programmers identify more enhancements and iterate faster, whereas their junior counterparts build an initial product quicker. Both parties are positively influenced by AI, but in different ways. In fact, this can be derived from a failed 2026 experiment by METR, who "observed a significant increase in developers choosing not to participate in the study because they do not wish to work without AI, which likely biases downwards [the] estimate of AI-assisted speedup" (Becker et al., "We Are Changing"). Funny enough, the study still discovered "a speedup of 18%," implying an immense velocity advantage for adept coders utilizing agentic tools (Becker et al., "We Are Changing").

Domain 2 — Capability on Complex Code

Widening AI adoption has led to year-after-year growth in written lines of code, but the functionality and maintainability of new output has remained questionable. GitClear, established researchers in AI code assistance, tracked "211 million changed lines of code, authored between January 2020 and December 2024" in enterprise repositories, discovering a 9.2% increase per year in line additions and a 49.9% decrease per year in line moves (Harding). Agentic tools have influenced developers to supplement rather than refactor, but previous tools struggled to solve real challenges through creation. This was emphasized in a 2024 study by OpenAI where agents were given 500 samples of "a code repository and issue description, and challeng[ed]…to generate a patch" that was "verified to be non-problematic by…human annotators"; the frontier model generated solutions with only 33.2% accuracy (Chowdhury et al.). However, time has progressed, and so has artificial intelligence's programming capability. Best-performing coding agents in 2026 score higher than 80% on the same samples from years prior, but still rely heavily on generation (Vals AI). While resolving existing, hard problems has become trivial for AI, future issues may arise because of it. Abundant code addition was a topic of GitClear's aforementioned report, as "instead of developer energy being spent principally on developing new features, in coming years we may find 'defect remediation' as the leading day-to-day developer responsibility" (Harding). AI assistants ensure short-term viability in codebases both simple and complex, but their long-term effects are nuanced; programmers can either continuously generate new solutions, or bear the role of maintenance.

Domain 3 — Security, the Gap that Held

Generative AI has taken strides in capabilities, reducing time of implementation and proving utility in intricate projects by orders of magnitude, but security has stayed behind. When coding agents were introduced in 2021 with the emergence of GitHub Copilot, security was immediately noted as a glaring concern. New York and Calgary University researchers found that from "89 different scenarios for Copilot to complete, producing 1,689 programs…approximately 40% [were] vulnerable" (Pearce et al.). Five years later, after AI became more proficient than most senior developers, vulnerabilities are generated at the same, or higher, rates. Recent studies from the Cloud Security Alliance AI Safety Initiative (CSA) proved "forty-five percent of AI-generated samples failed security tests" during their experiment (Cloud Security Alliance). As the amount of AI-generated code grows exponentially, so does the number of security-flawed repositories; CSA scanned public codebases and found "in January 2026, six CVEs (common vulnerabilities and exposures) were attributable to AI-generated code. In February, fifteen. In March 2026, thirty-five — a near-sixfold increase in two months" (Cloud Security Alliance). This presents a massive risk for any developer. Inexperienced programmers are building product vulnerabilities for an unsuspecting customer, while senior programmers are instilling exploits in enterprise codebases; all parties have a reasonable chance to leak sensitive data that could devastate their company. Since this is an obvious issue, why have artificial intelligence companies not arrived at a resolution? Well, the method in which they created stronger agentic tools is likely the culprit for a lack of security. Specifically, agents are "trained over open-source code available on GitHub…where certain bugs are more visible in open-source repositories, those bugs will more often [be] reproduced" (Pearce et al.).

Conclusion

Throughout the years, both speed and functionality of AI-assisted development have become too valuable for any developer to avoid. However, the immediate benefits from rapidly progressing capability are not the full story. Where prototyping and iterating is easier than ever, maintenance and security became the bottleneck. The job of the developer has fundamentally transitioned from execution to repair. Coding agents supplement code to solve problems that the human must verify. If leveraged correctly, there is no barrier in software development; creating or editing applications can be done in minutes regardless of experience.

PART 2 — The Build

Instructional Guide: How can a non-technical founder use Claude Code to build and deploy a working web app MVP (React + Supabase + Vercel) without manually writing code?

After diving into the research, two things are clear: building a working prototype no longer requires knowing how to code, but the coding agent will not keep that prototype safe on its own. An agentic tool like Claude Code now lets a non-technical founder build and deploy a real web app using language alone, but the agent's speed doesn't extend to security or scope, so the work that's left for the human is deciding what to build and verifying what gets built. This guide walks a founder through that process end to end: defining the app, letting Claude Code generate it across React, Supabase, and Vercel, and checking it for vulnerabilities before it goes live. By the end, you'll have a working web app you deployed yourself, and a repeatable way to do it again.

Before You Start

Success Criteria

The success criteria is staying minimal. Avoid wasting time or money on unnecessary features or products and build only what is required for an initial prototype.

Viable: Solves the core problem and nothing else.
Working: The critical paths function — a user can sign up, do the core action, and the data persists.
Secure: Passes a basic security pipeline — no exposed keys, real authentication, and locked database rules.

Figure 1. The lean-startup definition of an MVP: viable, working, secure, and nothing more.

Tools to Set Up

To follow along, the reader needs a Claude Pro subscription to access Claude Code, a repository on GitHub, a Supabase project to store application data, and a project on Vercel to deploy their application. It is recommended that readers keep the created repository in GitHub, project in Supabase, and project in Vercel on separate tabs to make traversal between them efficient for later.

1. Claude Code: $17 a month. First, navigate to Claude.com and purchase a subscription for a Pro account by selecting "Try Claude" and registering an email address.

Figure 2. The Claude Pro plan includes Claude Code — select "Try Claude" to subscribe.

Next, download Claude Code through the terminal on Claude.com: go to the top of the website, select "Other ways to use," choose the "Terminal" option, open your terminal application, paste the command into the terminal window, and hit Enter. For Windows users the process is a little different; I recommend following this Windows setup guide.

Figure 3. On Claude.com, "Other ways to use" → "Terminal" reveals the install command.

Figure 4. Open the Terminal app (on Mac, search "terminal" in Spotlight).

Figure 5. Paste the install command into the terminal and press Enter.

2. GitHub Repository: Free. A repository ("repo") is just the online folder that holds your project's files. Proceed to github.com, select "Sign Up," and register an account.

Figure 6. Create a free GitHub account.

Figure 7. Fill in your email, password, and username to finish signing up.

After creating the account, select the "New" button on the top left of the dashboard, give the repository a name, choose the visibility as Private, and push "Create repository."

Figure 8. From the dashboard, click "New" to start a repository.

Figure 9. Name the repo and set visibility to Private so your code and keys stay out of public view.

Figure 10. Your new, empty repository and its Quick setup panel.

3. Supabase Project: Free. Supabase is where your app's data and user logins live. Head to supabase.com, register an account with the same email used for GitHub (the "Continue with GitHub" option), and select "Start your project."

Figure 11. Supabase provides your database and authentication — select "Start your project."

Next, create an organization: select "New Organization," and give it a name, type, and ensure the plan is Free.

Figure 12. Create a free organization to hold your project.

Within the organization you created, instantiate a project by selecting "New Project."

Figure 13. Inside your organization, click "New project."

Give the project a name, a password you will remember, connect the project to the repository you created in GitHub, then select "Create new project."

Figure 14. Configure the project. Note the Security section — you'll lock these tables down with Row Level Security later in the build.

4. Vercel Environment: Free. Vercel is the service that puts your app online at a public link. On vercel.com/signup, register an account through GitHub ("Continue with GitHub").

Figure 15. Sign up for Vercel with your GitHub account.

Choose the "Hobby" plan, give a team name, and push "Continue."

Figure 16. Pick the free "Hobby" plan for personal projects.

Figure 17. The Vercel dashboard, where you'll import your repository at the end.

The Workflow

The human owns scope, accounts, and approvals; the agent owns scaffolding and programming. Now that we have registered the accounts, it is time to set up a building environment for Claude Code that allows rapid, safe development.

Set Up the Environment

The first step is to clone (download a copy of) the GitHub repository into a known folder. Navigate to the repository and copy the .git line below the "Quick setup" header.

Figure 18. Copy the repository's .git URL from the Quick setup panel.

Then open your terminal application (or PowerShell for Windows users), and clone the empty repository using the format git clone [paste .git line here].

Figure 19. Clone the repository into a local folder with git clone.

Now navigate into the folder where your codebase lives. The folder has the same name as your repository, so go to it with cd [repository name].

Figure 20. Move into your project folder with cd.

Next, use the claude command to open Claude Code within the codebase.

Figure 21. Run claude to start Claude Code inside your project.

Plan the Application

Head to Claude.ai and log in with your Claude Pro credentials. Create a new project, which will hold the plan you give to Claude Code.

Figure 22. In Claude.ai, create a project to draft and refine your plan.

Inside this project, chat with the best model (currently Opus 4.8), pasting in an .md file (a plain-text "spec") for it to read and improve before you hand it to Claude Code. A sample spec is provided below for you to adapt to your own idea. Do not paste the altered .md file into Claude just yet.

Adapt the Overview, Must-Have Features, Not in This MVP, and Data sections to your own idea, and leave the rest as written (those parts keep any build safe and on-scope):

Before you paste the spec into the chat, locate the "Connect" button in your Supabase project, change the framework to "React," and copy the prompt next to "Give your agent everything it needs."

Figure 24. Supabase's Connect panel generates the exact code your app needs — set Framework to React.

Now, in the Claude project, paste your spec, add a prompt asking Claude to improve the plan, and paste the connection instructions you copied from Supabase. A prompt that works well:

"I am creating a prototype for [your app idea]. I need you to vet this plan for speed, functionality, and security, and also provide the instructions from Supabase to connect the application to a database I have created (below). The .md file you will create will be given to Claude Code within the codebase, so ensure the rules I established are upheld, and provide a more detailed step-by-step guide for Claude Code to carry it out."

Figure 25. Combine three things in one message: your spec, your planning prompt, and Supabase's connection instructions.

Claude returns a refined, downloadable spec file. Two quick reminders it will surface are keep your GitHub repo private while you build, and remember that Vercel won't read .env.local, you'll re-enter those variables in Vercel's settings at deploy time.

Figure 26. Claude produces a single refined spec file to hand to Claude Code.

Build the Application

At last, it is time to build the prototype with Claude Code. Copy the refined spec from the browser and paste it into Claude Code in your terminal. To let it apply changes automatically, press Shift + Tab together to enable "accept edits on."

Figure 27. Paste the refined spec into Claude Code as your first message.

After receiving the spec, Claude Code enters Plan Mode, inspects the project, and writes a refined plan of execution.

Figure 28. Claude Code enters Plan Mode and inspects your empty project first.

Figure 29. The plan: scaffold, install, store secrets, create the table with Row Level Security, build auth and tasks, then deploy.

Review the plan, then choose option 1 to approve it and let Claude Code build with auto-accept.

Figure 30. Approve the plan to let Claude Code build automatically.

Claude Code will reach a stopping point where it's your job to run the database setup (SQL) in Supabase.

Figure 31. Claude Code pauses and hands you the two steps only you can do in the Supabase dashboard.

To do this, print the SQL file with ! cat supabase/schema.sql, copy the output, paste it into the SQL Editor in your Supabase project, and click "Run."

Figure 32. Print the generated SQL with ! cat supabase/schema.sql and copy it.

Figure 33. In Supabase, open the SQL Editor.

Figure 34. Paste the SQL and click Run. "Success. No rows returned" means the table and security rules were created.

Go back to Claude Code in the terminal, tell it you've completed the steps it set out for you, and tell it to continue with its plan.

Figure 35. Confirm you're done, and Claude Code finishes the build, committing as it goes.

Deploy the Prototype

After building the initial product, it's time to deploy and test it. First, confirm Claude Code is done generating.

Figure 36. Claude Code's done-summary: working, viable, and secure, with the deploy step left to you.

Copy the names and values of the environment variables (VITE_SUPABASE_URL, VITE_SUPABASE_PUBLISHABLE_KEY), then head to your Vercel dashboard and import your GitHub repository.

Figure 37. In Vercel, import the GitHub repository you built in.

Select Vite as the application preset, paste your copied environment variables, and push "Deploy."

Figure 38. Choose the Vite preset and add the two Supabase variables — Vercel needs its own copy because it can't read .env.local.

You now have a deployed web application with a public URL for others to access. Click the window below the "Congratulations" header to visit your prototype online.

Figure 39. Your live app: a "My Tasks" sign-up and login screen, deployed to a public URL.

Verify It Before You Trust It

The research throughout Part 1 concludes coding agents generate working features quickly, but they do not reliably secure them. Recent testing found that nearly half of AI-generated code samples failed security checks (Cloud Security Alliance). So the final, and most important, step is verification. Claude Code already ran a security pass during the build, but you should confirm it yourself. None of the following requires writing code; you are checking the three things from the Success Criteria, which is exposed keys, weak authentication, and open database rules.

1. No exposed keys. In Claude Code, paste: "Search the entire repository, including git history, for my Supabase URL or any key string. Confirm none are committed, and that .env.local is listed in .gitignore." You want to hear that nothing sensitive is tracked. (Your publishable key is designed to ship in the browser; this check is about not committing it to source, while Row Level Security does the real protecting.)

2. Real authentication. Open your deployed site in a private/incognito window without logging in. You should see only the login screen, no task data, no way to read or write anything. Every action that touches data should require a logged-in session.

3. Locked database rules (RLS). In Supabase, go to Authentication → Policies (or the Table Editor's RLS indicator) and confirm Row Level Security is on for your tasks table, with all four policies present (select, insert, update, delete). Then run the real test by signing up a second account and confirm it sees an empty list, but not the first account's tasks. If two accounts can ever see each other's data, stop and fix RLS before sharing the URL.

To make Claude Code do the heavy lifting, one prompt covers it: "Do a final security pass and show me what you checked: confirm no secrets are committed, that login is required for all reads and writes, and that RLS is enabled with per-user policies. Then tell me how to verify the two-account isolation test myself."

If all three pass, your prototype meets the "Secure" bar in the Definition of Done. If any fail, treat it as a stop-the-line issue.

Iterate the Prototype

Once the MVP is verified and live, you'll want to add to it. The discipline that kept the first build safe is the same that keeps the next one safe; the human owns scope, the agent owns execution.

To add a feature:

Update the spec, not just the chat. Your spec file (often saved as CLAUDE.md) is the single source of truth. Move the new feature into "Must-Have Features" and out of "Not in This MVP" so the agent's guardrails stay accurate.
Describe one feature at a time, in plain language. "Let a user edit a task's text after creating it" is a complete instruction. Resist bundling five ideas into one prompt.
Make Claude Code re-enter Plan Mode. Have it lay out the files, any new database columns or SQL, and the build order, then approve before it builds as you did the first time.
Re-run the security pass after every addition. New tables or columns need their own Row Level Security policies.
Commit in small pieces. One feature, one commit, one deploy. If something breaks, you can rewind to the last working state with Claude Code's checkpoints (/rewind).

The trap to avoid is scope creep. Research shows experienced developers quietly expand a task while an agent works, and a non-technical founder can do the same without noticing. If you catch yourself adding "just one more thing" each session, stop and write it down as a real feature with its own spec entry first!

Troubleshooting

Debugging

A few issues come up often for first-time builders. Most are quick fixes you can hand straight to Claude Code.

"Missing Supabase env vars" error. The app can't see your keys. Confirm .env.local exists in the project root and that you restarted the dev server after creating it. Vite only reads env files at startup.
You signed up but can't log in. Email confirmation is probably still on. In Supabase → Authentication → Sign In / Providers, turn off "Confirm email" for the prototype, or click the confirmation link Supabase emailed you.
It works locally but the deployed site is blank or errors. Vercel does not read .env.local. Add VITE_SUPABASE_URL and VITE_SUPABASE_PUBLISHABLE_KEY in Vercel → Settings → Environment Variables, then redeploy.
Reading and copying SQL from the terminal is awkward. Install a free IDE like VS Code to open /supabase/schema.sql and copy it without the cat command. It also makes reviewing Claude Code's changes easier.
You want to see it before it goes live. Ask Claude Code to "run the app on localhost so I can test it in my browser before we deploy."

When in doubt, paste the exact error text into Claude Code and ask what it means and how to fix it. The agent debugs its own output well when you give it the message.

Connect Vercel to Claude Code

After your first manual deploy, you can let Claude Code handle future deploys for you. Vercel publishes a plugin that turns your coding agent into a deployment assistant. In your terminal, run: "npx plugins add vercel/vercel-plugin”

Figure 41. Vercel's coding-agent plugin lets Claude Code deploy for you from the terminal.

This is optional, and best added once you're comfortable with the manual flow so you understand what the automation is doing. With the plugin installed, you can ask Claude Code to deploy, check build status, and pull environment variables without leaving the terminal, removing the last few dashboard steps from your loop.

Closing

You now have a deployed, verified web app you built by describing it in natural language, and a repeatable loop for the next one. Remember, agents make the building fast, but the value you add is everywhere they fall short; choose the smallest viable scope, and verify security consistently throughout the process.

Works Cited

Part 1

Introduction

Anthropic. "Claude Code." Anthropic, www.anthropic.com/product/claude-code.

Lakshmanan, Ravie. "GitHub Launches 'Copilot' — AI-Powered Code Completion Tool." The Hacker News, 30 Jun 2021, https://thehackernews.com/2021/06/github-launches-copilot-ai-powered-code.html.

Speed & Context

Becker, Joel, et al. "Measuring the Impact of Early-2025 AI on Experienced Open-Source Developer Productivity." METR, 10 July 2025, metr.org/blog/2025-07-10-early-2025-ai-experienced-os-dev-study/.

Becker, Joel, et al. "We Are Changing Our Developer Productivity Experiment Design." METR, 24 Feb. 2026, metr.org/blog/2026-02-24-uplift-update/.

Peng, Sida, et al. "The Impact of AI on Developer Productivity: Evidence from GitHub Copilot." arXiv, 13 Feb. 2023, arxiv.org/abs/2302.06590.

Capability on Complex Code

Chowdhury, Neil, et al. "Introducing SWE-bench Verified." OpenAI, 13 Aug. 2024, openai.com/index/introducing-swe-bench-verified/.

Harding, Bill. AI Copilot Code Quality. GitClear, 2025, www.gitclear.com/ai_assistant_code_quality_2025_research.

Vals AI. "SWE-bench." Vals AI, vals.ai/benchmarks/swebench.

Security, the Gap that Held

Cloud Security Alliance. "Vibe Coding's Security Debt: The AI-Generated CVE Surge." Cloud Security Alliance, 4 Apr. 2026, labs.cloudsecurityalliance.org/research/csa-research-note-ai-generated-code-vulnerability-surge-2026/.

Pearce, Hammond, et al. "Asleep at the Keyboard? Assessing the Security of GitHub Copilot's Code Contributions." arXiv, 2021, arxiv.org/abs/2108.09293.

Part 2

Smith, Lucy. "Minimum Viable Product (MVP)." Snov.io, 11 Nov. 2023, snov.io/glossary/minimum-viable-product/. (Figure 1)

DEV Community: Zachary Nowroozi