The entire modern web stack in plain language — what each piece does, an everyday analogy, and a one-line way to remember it. This covers ~80–90% of what you'll meet building apps like this hub.
🌐 Frontend — what users see
🦴HTML
Builds the structure of the website.
🟰 Like: The skeleton of a house.
💡 HTML = builds the website.
🎨CSS
Makes the website look beautiful.
🟰 Like: Clothes and paint for the house.
💡 CSS = decorates the website.
⚡JavaScript
Makes the website move and do things.
🟰 Like: Muscles that make the body move.
💡 JS = makes the website interactive.
⚛️Next.js
Organizes and builds the whole app.
🟰 Like: The project manager building the entire house.
💡 Next.js = builds the whole app.
🪣Tailwind CSS
A faster way to write CSS.
🟰 Like: A paint roller instead of a paintbrush.
💡 Tailwind = faster CSS.
🧠 Backend — behind the scenes
🟢Node.js
Runs the app's brain on the server.
🟰 Like: The kitchen where food is cooked.
💡 Node.js = runs the app.
🔗API
Lets two apps talk to each other.
🟰 Like: A telephone between two friends.
📬REST API
A common way apps send information.
🟰 Like: Sending letters through the mail.
🍕GraphQL
Ask only for the information you need.
🟰 Like: Ordering only the toppings you want on your pizza.
🗄️ Database — stores information
🟢Supabase
Stores users, passwords, files, and app data.
🟰 Like: A giant filing cabinet.
💡 Supabase = stores data.
💎Prisma
Helps your app talk to the database.
🟰 Like: A translator between your app and the database.
💡 Prisma = database translator.
🗃️ORM
Makes databases easier to use from code.
🟰 Like: A helper that translates database language.
☁️ Hosting — put your app online
▲Vercel
Puts your website on the internet.
🟰 Like: Opening your store so everyone can visit.
💡 Vercel = publishes your website.
🚂Railway / Render
Runs your backend online.
🟰 Like: A factory working 24/7.
☁️AWS / GCP / Azure
Giant cloud computers that run big apps.
🟰 Like: Renting a huge building instead of building your own.
💡 Cloud = powerful computers on the internet.
📦 Development tools
🐳Docker
Packs your app so it works anywhere.
🟰 Like: Packing all your toys into one box before traveling.
💡 Docker = packs your app.
🐙GitHub
Stores your code online.
🟰 Like: A library for your projects.
🌿Git
Saves every change you make to your code.
🟰 Like: A magic undo button.
💻CLI
Control your computer by typing commands.
🟰 Like: Talking directly to your computer.
🧩Extension
Adds new features to VS Code.
🟰 Like: Installing a new app on your phone.
🤖 AI terms
🤖LLM
An AI that understands and writes text.
🟰 Like: A super-smart robot teacher.
🧠Context Window
How much the AI can remember in one conversation.
🟰 Like: Short-term memory.
🪙Token
Small pieces of words the AI reads.
🟰 Like: LEGO blocks that make sentences.
🔒Closed Source
You can use it, but can't see how it's built (Claude, ChatGPT, Gemini).
🟰 Like: A dish you order but never get the recipe for.
🌍Open Source
Anyone can download and run it (Llama, Qwen, DeepSeek).
🟰 Like: A recipe published in full.
🏆SWE-Bench
A coding exam for AI models.
🟰 Like: A report card for AI programmers.
🔌 Networking
🔔Webhook
Automatically sends information when something happens.
🟰 Like: A doorbell that rings by itself.
📄JSON
A way computers organize and share information.
🟰 Like: A form with labels and answers.
🚀 The modern website flow
🦴HTMLbuilds the structure
🎨CSS / Tailwindmakes it beautiful
⚡JavaScriptadds movement & interaction
⚛️Next.jsbuilds the whole application
💎Prismatalks to the database
🗄️Supabasestores all the data
▲Vercelputs the app online
☁️AWS / GCP / Azureused when your app gets very big
⭐ One sentence to remember
HTML builds it. CSS (or Tailwind) makes it beautiful. JavaScript makes it interactive. Next.js organizes the whole app. Node.js runs the backend. Prisma talks to the database. Supabase stores the data. Vercel publishes it online. AWS/GCP/Azure help it grow when millions of people use it.
The three foundations of every website — even the most complex apps still use HTML + CSS + JS under the hood. You don't need a framework to start.
StructureHTML
HyperText Markup Language
The skeleton of a webpage. It defines what content exists — headings, paragraphs, buttons, images, links. It doesn't style or animate anything, just labels the content.
<h1> headings<p> text<div> boxes<img><a> links
StyleCSS
Cascading Style Sheets
The skin and clothing — colors, fonts, spacing, layout, animations. Without CSS everything is plain black text on white. CSS is what makes things look designed.
colorsfontsflex / gridanimationsresponsive
BehaviorJavaScript
The programming language of the browser
The muscles — moving content, sending data, opening modals, loading content without a page refresh. Every interactive behavior on the web is powered by JS.
click eventsfetch / APIDOMlogic
💡 Analogy
HTML = the bones of a person · CSS = the skin and clothes · JavaScript = the muscles and brain. For a simple landing page, HTML + CSS is all you need. Add JS only when you want a button or element to actually do something.
landing-page.html
<!-- Simplest possible landing page — zero frameworks needed -->
<html>
<head>
<style>
body { font-family: sans-serif; background: #0a0a0f; color: white; }
h1 { font-size: 3rem; color: #f6cb1f; }
button { padding: 12px 28px; background: #f6cb1f; }
</style>
</head>
<body>
<h1>My Landing Page</h1>
<p>Zero frameworks. Pure HTML + CSS.</p>
<button onclick="alert('It works!')">Click me</button>
</body>
</html>
<!-- ^ This is a complete website. Open in any browser. Done. -->
Match what you're building to the smallest stack that does the job.
| What you're building | Minimum needed | Framework? | Database? |
|---|
| Landing page / portfolio | HTML + CSS | ✗ No | ✗ No |
| Blog / content site | HTML + CSS + JS | ~ Optional | ✗ No |
| Contact form | HTML + JS + Formspree | ✗ No | ✗ No |
| E-commerce store | Shopify or Next.js | ✓ Yes | ✓ Yes |
| SaaS app with login | Next.js + Supabase | ✓ Yes | ✓ Yes |
| Real-time chat / dashboard | Next.js + Supabase + Node | ✓ Yes | ✓ Yes |
| AI-powered app | Next.js + Anthropic API | ✓ Yes | ~ Depends |
Pre-made styles to move faster. None are required — they're just convenient.
Most popularTailwind CSS
Utility classes — no CSS file needed
You don't write a CSS file. You compose classes directly in your markup: className="flex bg-black text-white p-4 rounded". Very fast to prototype; the trade-off is busy-looking markup.
utility-firstno CSS fileReact-friendly
ClassicBootstrap
Pre-built components — buttons, nav, grid
Older but still widely used. Ready-made components (navbars, modals, cards). Easy for beginners, but Bootstrap sites tend to look alike. Works in plain HTML — no React needed.
componentsbeginner-friendlyplain HTML ok
Plain CSS / Variables
Write it yourself — full control
Zero dependencies. Slower to start but smaller files, more unique design, nothing extra to learn. The right choice for simple sites — this hub's base styles work this way.
zero dependencyfull controlsmallest file size
Trendingshadcn/ui
Copy-paste components built on Tailwind
Not an installed library — you copy-paste the component code into your project. Built on Tailwind + Radix. Extremely clean design. Used by most modern Next.js + React projects.
copy-pasteReact onlyTailwind-based
When an app grows — many pages, components, shared state — plain JS gets messy. Frameworks keep it organized and scalable.
Most usedReact
by Meta — component-based UI library
Component-based UI library. Not a full framework — you add routing and data fetching yourself. The base of Next.js. Highest job-market demand of any frontend tool.
componentsJSXhuge ecosystem
DominantNext.js
by Vercel — React with superpowers
React + routing + server rendering + API routes in one. Deploy to Vercel in minutes. The most popular production React framework. Use it when you need frontend AND backend (this hub uses it).
SSR / SSGAPI routesVercel-optimized
GentleVue.js
Gentler learning curve than React
Easier to learn than React, with cleaner syntax. Popular with smaller teams. Nuxt.js is its Next.js equivalent. Smaller ecosystem than React.
beginner-friendlyNuxt.jsclean syntax
Svelte / SvelteKit
No virtual DOM — compiles to vanilla JS
Newer and faster than React. No runtime library — it compiles to plain JS, so bundles are smaller. SvelteKit is its Next.js equivalent. Growing fast.
compiledfastsmall bundle
Remix
Next.js competitor from the React Router team
An alternative to Next.js — strong at form handling and data loading. Now merged with React Router v7. Good if you want to avoid Vercel lock-in.
formsno lock-inReact-based
Content sitesAstro
Ships zero JS by default — super fast
Ships HTML-only by default, so it's blazing fast. Add React/Vue/Svelte components only where needed. Perfect for blogs, docs, and marketing sites — not heavy web apps.
content siteszero JS defaultislands
How to put Claude inside your own app — the most relevant AI stack for building an AI-powered site or tool.
🤖 Minimum stack to build an app with Claude inside
Next.jsFrontend + APIAnthropic SDKTalk to ClaudeVercelDeploySupabaseSave user dataTailwindStylingAuth.js / ClerkUser login
- 1
Anthropic API
api.anthropic.comThe core. You send messages to Claude and get responses, via REST or the SDK. Free credits to start; then pay-per-token (more tokens = higher cost).
- 2
Anthropic SDK (Node / Python)
npm / pipThe official library that makes the API easy. `npm install @anthropic-ai/sdk`, then talk to Claude in a few lines. Supports streaming so responses appear word by word.
- 3
Claude models — Haiku · Sonnet · Opus
choose modelHaiku = cheapest & fastest, for simple tasks. Sonnet = best balance, recommended for most apps. Opus = most powerful, for complex reasoning (pricier).
- 4
Claude Code (CLI)
terminalAnthropic's terminal tool. Claude lives in your terminal — reads files, writes code, runs commands. Like an AI developer next to you. (This hub was built with it.)
- 5
MCP — Model Context Protocol
open standardAnthropic's open standard to connect Claude to external tools — GoHighLevel, GitHub, Supabase, Slack. Gives Claude live data, not just text. The future of AI agents.
- 6
Prompt engineering
docs.anthropic.comThe craft of writing instructions for Claude — system prompt, user message, history. Better prompt = better output. A skill worth learning.
claude-call.ts
// Simplest Claude API call in a Next.js API route
import Anthropic from "@anthropic-ai/sdk";
const client = new Anthropic({ apiKey: process.env.ANTHROPIC_API_KEY });
const message = await client.messages.create({
model: "claude-sonnet-4-6",
max_tokens: 1024,
messages: [{ role: "user", content: "Explain React in simple terms" }],
});
// message.content[0].text → Claude's answer
The whole ecosystem, grouped by what each tool is for — pick one per row as you build.
🌐 Hosting / Deploy
- Vercel — Best for Next.js · free tier
- Netlify — Great for static sites
- Railway — Backend servers
- Render — Free-tier backends
- GitHub Pages — Free · static only
- Cloudflare Pages — Fast, free, global
🗄️ Database
- Supabase — Postgres + auth + realtime
- PlanetScale — Serverless MySQL
- Neon — Serverless Postgres
- MongoDB Atlas — NoSQL · flexible
- Turso — SQLite at the edge
- Firebase — Google NoSQL · realtime
🔐 Auth / Login
- Clerk — Easiest drop-in auth
- Auth.js — Free · open source
- Supabase Auth — Built-in with the DB
- Firebase Auth — Easy Google login
- Lucia — Lightweight · DIY
- NextAuth — → now Auth.js
💳 Payments
- Stripe — Industry standard · PH ok
- LemonSqueezy — Merchant of Record
- Paddle — SaaS-focused
- PayMongo — PH · GCash / Maya
- Xendit — SE-Asian payments
- DragonPay — PH banking
📧 Email
- Resend — Dev-friendly · cheap
- SendGrid — Enterprise scale
- Mailgun — API-first email
- Postmark — Transactional email
- React Email — Build emails in React
- Nodemailer — DIY · Node.js
🤖 AI APIs
- Anthropic — Claude — best for coding
- OpenAI — GPT-4o — most popular
- Google AI — Gemini — cheap at scale
- Groq — Fastest inference · free tier
- Replicate — Run open models via API
- Together AI — Cheap open-model API
🔧 Dev Tools
- GitHub — Code storage + CI/CD
- Cursor — AI code editor
- Postman — Test APIs
- Prisma — Database ORM
- Zod — TypeScript validation
- ESLint / Prettier — Lint + formatting
📦 Package Managers
- npm — Default Node manager
- pnpm — Faster · less disk
- bun — Fastest · all-in-one
- yarn — Old reliable
- pip — Python packages
- cargo — Rust packages
🚀 No-Code / Low-Code
- Webflow — Visual website builder
- Framer — Design + publish
- Bubble — Full no-code web app
- Notion — Docs + simple sites
- Carrd — Simple landing pages
- Lovable / Bolt — AI generates a full app
Complete developer reference · HTML → AI stacks · grouped for clarity
