Building a Website from Scratch

Last year, building a website from scratch meant learning a framework, writing boilerplate, configuring a dozen tools, and spending two days on setup before writing a single line of real application logic.

In April 2026, I can go from an empty folder to a publicly reachable HTTPS URL in under five minutes. Real database. Real authentication. Real deployment. Preview URLs for every branch. The first time I did this, I kept checking whether the site was actually live or whether I was looking at localhost. It was live. Five minutes earlier I’d had an empty folder.

This chapter is where everything from the course comes together. Prompting from Chapter 1. Warp from Chapter 4. GitHub from Chapter 5. Claude Code from Chapter 6. Planning from Chapter 8. Supabase from Chapter 9. Vercel from Chapter 10. All aimed at one goal: take an idea and turn it into a live, working website.

The 2026 starter stack

For the first time in years, the recommended stack for a new web project is settled. Next.js 16 with the App Router and React Server Components. React 19 with the React Compiler handling memoization automatically. TypeScript in strict mode, always. Tailwind CSS v4, rebuilt with the Oxide engine for 100x faster builds. shadcn/ui for components — not a dependency you install, but code copied into your project that you own and modify. Supabase for database, auth, storage, and APIs. Vercel for deployment.

Run the Next.js scaffolder, add shadcn/ui, connect Supabase for the backend, deploy to Vercel. You’re building.

Alternatives have real niches. Astro is the right answer for content-heavy marketing sites where minimizing JavaScript matters (it’s what we use for eltexsoft.com). SvelteKit wins on bundle size. Nuxt is the equivalent for Vue teams. But for most new full-stack projects, Next.js is the starting point — deepest AI tool support, most tutorials, best integration with Vercel and Supabase.

The workflow

The old workflow: open editor, write code, test locally, deploy when “ready.” The 2026 workflow: plan → AI scaffolds → human reviews → AI iterates → deploy preview → merge.

Start with a plan

The biggest predictor of a good outcome isn’t the AI tool. It’s whether you wrote down what you’re building before opening the terminal. A one-page brief is enough: the problem, the user, the primary action, what’s out of scope, and how you’ll know it worked. This brief doubles as the prompt base for Claude Code. Without it, even a brilliant agent will happily build the wrong thing with great enthusiasm.

CLAUDE.md

Before writing features, create a CLAUDE.md file at your project root. Claude Code reads it automatically at the start of every session. Include your stack, build commands, architecture rules, and hard constraints. Thirty lines. It saves hours of misguided output.

The build loop

Tell Claude Code what to build — one feature at a time. Review the diff. Test locally. Commit and push. Check the preview deployment. Fix what’s wrong. Move to the next feature.

The key discipline: review every diff. Claude Code is a brilliant junior developer with no judgment. It produces plausible code that compiles and often works. It also produces code that leaks data, breaks edge cases, or introduces security holes. Last month, Claude Code generated a Server Action that bypassed Row Level Security by using the service role key instead of the user’s session. The code worked in testing because the test user happened to be the data owner. In production, any authenticated user could have read anyone else’s data. I caught it in the diff. The diff is the last line of defense.

From blank screen to live site

The twelve steps, condensed: write the plan. Set up your development environment. Scaffold the project. Push the empty scaffold to GitHub immediately. Deploy to Vercel on day one — this is counterintuitive but catches environment issues when there’s nothing else to debug. Set up Supabase and enable Row Level Security on every table (a table without RLS is publicly readable through the auto-generated API). Build the frontend feature by feature with Claude Code. Add authentication. Write one end-to-end test for the critical path. Set up a custom domain. Add analytics, error monitoring, and uptime monitoring. Then iterate.

Every new feature follows the same loop: branch → Claude Code builds it → you review the diff → push → preview deployment → test → merge → auto-deploy. Cycle time from idea to live should be hours, not weeks.

The mistakes that catch everyone

Not writing a plan. “I’ll figure it out as I build” works for experiments. For anything with users, you end up rebuilding half the app when requirements don’t match assumptions.

Over-engineering V1. A solo founder does not need microservices. A three-page app does not need Redux. I watched a founder spend six weeks building a custom auth system for an MVP with zero users. Supabase Auth would have taken an afternoon. By the time auth was “production-ready,” two competitors had launched with simpler stacks.

Not deploying on day one. If your first deploy happens after two weeks, you’ll spend a day fixing environment issues. We enforce this on every client project now. First ticket in sprint zero: deploy the empty scaffold to staging.

Ignoring mobile. Over 60% of web traffic is mobile. Build mobile-first.

Hardcoding secrets. Your API key in source code works until someone pushes it to GitHub. Once it’s in git history, it’s compromised — even after deletion.

Skipping auth on the data layer. Writing “if not logged in, redirect” at the top of your page is UI, not security. A determined user can call your API directly. The real boundary is Row Level Security.

Copying AI output without reading it. The single biggest source of production bugs in 2026. Treat every AI-generated diff like a PR from someone who joined yesterday.

Vibe coding vs. engineering

“Vibe coding” — Andrej Karpathy’s term for building with AI while accepting all suggestions without reading the code — was meant for throwaway weekend projects. Within months, startups started shipping vibe-coded products to real users. The data on how well this works is now in.

A randomized controlled trial by METR studied 16 experienced developers using Cursor Pro with Claude Sonnet on 246 tasks. Developers predicted a 24% speedup. They self-reported 20%. The measured result: a 19% slowdown. The AI helped on simple tasks but hurt on complex ones because developers spent more time reviewing and debugging than they saved.

Google’s DORA 2025 report found 80% of developers feel more productive with AI — but AI adoption correlates with increased delivery instability. Only 24% report high trust in AI-generated code.

The security record is worse. CodeRabbit found AI-co-authored code contains 2.7x more security vulnerabilities. Lovable has had three separate security crises, including one in April 2026 exposing source code from projects linked to Nvidia, Microsoft, and Uber.

None of this means AI tools are useless. They’re transformative when used as accelerators, not replacements. I build faster with Claude Code than without it. Every engineer at EltexSoft does. But the speed comes from the review loop, not from skipping it. Use AI for the 70% of code that’s obvious. Review the 30% where bugs, security holes, and bad architecture live. Never ship AI-generated code that touches auth, payments, or user data without manual review.

Simon Willison draws the line clearly: “If an LLM wrote every line of your code, but you’ve reviewed, tested, and understood it all, that’s not vibe coding. That’s using an LLM as a typing assistant.” You’re the architect. The AI is the builder. You review every wall before the roof goes on.

The bottom line

Building a website in 2026 is less about writing code and more about orchestration. The stack is settled. AI agents scaffold most of it in minutes. The skill that matters now is discipline: writing a clear plan before building, reviewing diffs instead of accepting blindly, deploying on day one, enabling RLS on every table, and treating every AI-generated line like a PR from someone who doesn’t understand your users.

The blank screen is closer to the live site than ever. The distance that remains is taste, review, and security. Those are human skills. They always will be.

---

This is the free web edition of Chapter 11. The full text — with complete code walkthroughs, Supabase setup scripts, Next.js configuration files, Playwright test examples, and project structure templates — is available in 42: The AI Builder’s Stack, coming Q3 2026 on Amazon in hardcover, paperback, and digital.