Frameworks & Libraries

Why Nobody Writes Everything From Scratch

Imagine you need to hang a picture. You could go to the forest, chop down a tree, mill the wood, forge the metal, shape a hammer head, attach a handle... or you could just buy a hammer.

That sounds ridiculous, but that's exactly what writing all your code from scratch would look like. Millions of problems in software have already been solved: how to display a button on screen, how to talk to a database, how to handle someone clicking a link. People packaged those solutions into reusable tools so the next person doesn't have to solve them again.

These reusable tools come in two flavors: libraries and frameworks.

---

Libraries vs Frameworks: The Key Difference

A library is a tool. You pick it up when you need it, use it for one thing, and put it back down. You're in control. You decide when and how to use it.

• Need icons? Grab lucide-react.
• Need to talk to a database? Grab drizzle-orm.
• Need charts? Grab recharts.

A framework is a workshop. It decides how things are organized, where files go, and how the pieces connect. You work within its structure. It's in control, and you fill in the blanks.

The analogy: a library is like a power drill you grab from a shelf. A framework is like moving into a fully equipped workshop where the workbenches are already placed, the power outlets are already wired, and there's a specific spot for every tool. You build faster because the decisions are already made.

React is a library. It handles one thing well: building user interfaces from reusable components. You could use React inside any project structure you want.

Next.js is a framework. It uses React for the UI parts, but it also decides how your pages are organized, how your app talks to the server, how images load, how URLs work, and how the whole thing gets deployed. It's the workshop that React lives inside.

---

The Stack: Layers of Tools

When someone describes what a project is "built with," they're listing a stack, which is layers of tools where each one handles a different concern. Here's what a typical modern web app looks like:

Each layer does one job and doesn't worry about the others. The browser doesn't care what hosting platform is handling deployment. The styling library doesn't care that React is managing components. This separation is what makes it possible to swap one layer without rebuilding everything.

---

package.json: The Recipe Card

Every JavaScript project has a file called package.json. Think of it as a recipe card. It lists:

• The project name, meaning what this app is called
• Dependencies, which are every library and tool the project needs (the ingredients)
• Scripts, the commands to run common tasks (the cooking instructions)

When a developer runs npm install, they're saying "go get all the ingredients on the list." npm (Node Package Manager) reads package.json, downloads every dependency, and puts them in a folder called node_modules.

When they run npm run dev, that's "start cooking." It launches the app locally so you can see it in your browser.

{
  "name": "my-app",
  "dependencies": {
    "next": "16.x",
    "react": "19.x",
    "tailwindcss": "4.x",
    "drizzle-orm": "0.x",
    "lucide-react": "0.x"
  },
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}

That's a simplified version of a real package.json. Five dependencies, three scripts. The recipe card for the whole app.

---

Why This Matters: Speaking Stack Fluently

You now know what people mean when they say:

• "It's a Next.js app" means the framework is Next.js (which means React is in there too)
• "We use Tailwind for styling" means a CSS library that handles how things look
• "It runs on Cloud Run" means a hosting service runs the app
• "Check the package.json" means look at the recipe card for dependencies and scripts
• "Run npm install" means download all the project's dependencies

None of this requires writing code. It requires understanding what the layers are and what each one does. That's the vocabulary that lets you have meaningful conversations about how software is built, and more importantly, lets you describe what you need to an AI that can actually build it.

---

Further Reading