Pick your stack: a beginner-friendly map of modern web tools
he modern web stack looks bewildering from the outside: TypeScript, React, Next.js, Vercel, Tailwind, Supabase, edge functions, and a hundred more names. Most of those names are layers in a small, well-defined stack. Once you can see the layers, choosing tools gets a lot simpler.
Modern Web Stack Layers
- Modern web stacklayer
- Frontend
- Backend
- Database
- Deployment
- Beginner-friendly default
- Add tools sparingly
Table of Contents
- What you'll learn· 1 min
- Four layers every web app has· 1 min
- A beginner-friendly default· 1 min
- When to add a tool, and when not to· 1 min
Quick reference
The browser
HTML, CSS, JavaScript: what your user actually touches.
The framework
React + Next.js, Vue + Nuxt, Svelte + SvelteKit. Pick one and stop comparing.
The server
Mostly serverless functions on Vercel/Netlify/Cloudflare. Run on demand.
The data
Postgres via Supabase or Neon. Learn SQL, not just the ORM.
Sensible default
TypeScript + Next.js + Tailwind + Supabase + Vercel.
Adding tools
Only when you've hit a real problem the tool directly solves.
The modern web stack looks bewildering from the outside: TypeScript, React, Next.js, Vercel, Tailwind, Supabase, edge functions, and a hundred more names. Most of those names are layers in a small, well-defined stack. Once you can see the layers, choosing tools gets a lot simpler.
What you'll learn
Four layers every web app has
Every modern web app, however hyped its tooling, sits on the same four layers:
- 1The browser. HTML, CSS, JavaScript. This is the thing your user actually touches.
- 2The framework. Code that helps you build the browser-side experience without writing everything from scratch: React, Vue, Svelte, and so on. Often paired with a meta-framework like Next.js or Remix that adds routing and server-rendering.
- 3The server. Where your code runs when you need to do things the browser can't: talk to a database, hold a secret, send an email. This is increasingly serverless: each route is a small function that the platform spins up on demand.
- 4The data store. The database where your real state lives. Postgres covers 95% of cases. The platform layer (Supabase, Neon, PlanetScale) handles the operational side.
A beginner-friendly default
For a first real app, this stack is hard to beat:
- TypeScript: JavaScript with types. Pays for itself within a week.
- Next.js (App Router): meta-framework that handles routing, server rendering, and edge functions. Deploys with one click on Vercel.
- Tailwind CSS: utility classes for styling without writing a stylesheet. Easy to start, easy to live with.
- Supabase: Postgres database, auth, and storage in one platform with a generous free tier. SQL is a real skill worth investing in early.
- Vercel: push to GitHub, deploys to a URL automatically. Excellent free tier.
None of those are required. They just remove decisions so you can focus on the app.
When to add a tool, and when not to
Tooling decisions are a tax. Each new dependency is more docs to read, more breakage to debug, and more lock-in to negotiate later. Add a tool only when:
Resist tools that promise general "improvement," tools you adopted because a tutorial used them, and tools whose website is more polished than their docs. Beginner stacks fail by accumulating, not by missing things.
Want a more guided way to practise this?
Common questions
Do I need to learn all of these to start?
No. Start with one framework and one platform. Type-checking and a database are worth adding within the first project. Everything else can wait.
Should I use React or something else?
For a beginner today, React with Next.js has the most tutorials, the most jobs, and the largest ecosystem. Vue and Svelte are excellent; pick whichever a friend can help you with.
Is serverless the right default?
For early projects, yes. Serverless is forgiving: you don't manage servers, the free tier is generous, and you can grow into a more managed setup if you need to.
When do I outgrow this stack?
When you have real users, real money, or a feature these tools genuinely can't do. That's usually further away than people think.
Bottom line
The modern web stack is four layers, not forty tools. Pick one sensible default per layer, ship something, and only add to the stack when a real problem demands it.