3.1 Tech Fundamentals

What Does It Take to Run a "Restaurant"?

You've probably heard terms like "frontend," "backend," and "database," but they still feel fuzzy. Don't worry — I'll explain using something you experience every day: going to a restaurant.

Imagine you're opening a restaurant. What do customers see when they walk in? The menu, the decor, the waitstaff, the tables and chairs — everything visible and tangible. In the internet world, this is the frontend. After customers order, the ticket goes to the kitchen where chefs prepare the food — everything happening in the kitchen is invisible to customers, but without it the restaurant can't operate. This is the backend. The restaurant needs daily supplies — ingredients stored in an organized warehouse, pulled out when needed. This is the database.

  👤 User (Customer)
      │ Opens browser (Walks into restaurant)
      ▼
  🍽️ Frontend
  │  HTML (Menu) + CSS (Decor) + JS (Waitstaff actions)
  │  Everything the user sees: buttons, images, text, animations
      │ Sends request (Waitstaff delivers order to kitchen)
      ▼
  👨‍🍳 Backend
  │  Receives order → Verifies identity → Processes logic → Fetches data
  │  Business rules and security controls the user never sees
      │ Reads/writes data (Chef gets ingredients from warehouse)
      ▼
  📦 Database
  │  Stores user info, order records, product data
  │  Organized like a warehouse — categorized, ready to retrieve

Remember these three terms: Frontend = dining room, Backend = kitchen, Database = warehouse.

System Architecture Overview

Frontend: Everything the User Sees

Frontend is everything that appears on screen when a user opens your website or app. It's powered by three "languages":

HTML — the skeleton. Determines what content is on the page, like framing a house first. <h1> is a heading, <p> is a paragraph, <button> is a button.

CSS — the clothes. Determines how things look — colors, sizes, spacing, border radius. The same button can be red with rounded corners or blue with sharp corners, all thanks to CSS.

JavaScript — the muscles and brain. Makes the page "come alive." Click a button to pop up a dialog, scroll to load more content, real-time input validation — that's all JS. Without it, a webpage is just a static poster.

Here's an example — click the button and the text changes:

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: sans-serif; text-align: center; padding-top: 80px; }
    button { background: #ff6b35; color: white; border: none;
             padding: 12px 24px; border-radius: 8px; font-size: 16px; }
  </style>
</head>
<body>
  <h1>Hello, World!</h1>
  <p id="msg">Haven't clicked yet...</p>
  <button onclick="changeText()">Click Me</button>
  <script>
    function changeText() {
      document.getElementById('msg').innerText = '🎉 You just wrote your first line of JavaScript!';
    }
  </script>
</body>
</html>

Save it as an .html file, open it in a browser, and click the button — that's the frontend trio working together.

Backend: The Secrets of the Kitchen

The backend is the logic users never see. It typically does three things:

Business logic: After an e-commerce order, calculate the price, check inventory, apply coupons, generate an order number
API endpoints: The frontend "requests" data from the backend through "endpoints." Like telling a waiter "I'll have the braised pork"
Access control: Who can see what data and perform what actions — the backend decides

Request/Response: A Back-and-Forth

Frontend (Customer)                Backend (Kitchen)
   │── "I'll have braised pork" (Request) ──→ │
   │                                           │ Processing...
   │←── "Braised pork ready" (Response) ──────│

REST API: A Standardized Way to "Order"

REST API uses HTTP verbs to express what you want to do:

Action	HTTP Method	Example
Read	GET	`GET /api/users` — fetch user list
Create	POST	`POST /api/users` — create a new user
Update	PUT	`PUT /api/users/123` — update a user
Delete	DELETE	`DELETE /api/users/123` — delete a user

Think of it like a restaurant's standardized menu — each dish has a fixed number and preparation method, so it tastes the same no matter who cooks it. Common backend languages include Python, Node.js (JavaScript), Java, and Go. AI coding most commonly uses Python and Node.js.

Database: The Master of Warehouse Management

A database helps you "remember everything" — user info, product data, order records — virtually anything that needs to persist lives here.

SQL vs NoSQL

Relational databases (SQL) — MySQL, PostgreSQL — work like Excel spreadsheets:

┌────┬─────────┬───────────────────┬─────┐
│ ID │ Name    │ Email             │ Age │
├────┼─────────┼───────────────────┼─────┤
│ 1  │ Alice   │ alice@example.com │ 25  │
│ 2  │ Bob     │ bob@example.com   │ 30  │
└────┴─────────┴───────────────────┴─────┘

Each row is a record; each column is a field. Multiple tables are linked by IDs. Queries use SQL:

SELECT * FROM users WHERE age > 25;

Non-relational databases (NoSQL) — MongoDB — work more like JSON files, more flexible:

{ "name": "Alice", "email": "alice@example.com", "hobbies": ["coding", "running"] }

SQL is like a rigid table where every record follows the same format; NoSQL is freer — each record can have different fields.

Beginner recommendation: Use Supabase (built on PostgreSQL) or Firebase (built on NoSQL). They abstract away the complexity — you can get started without learning SQL.

User Authentication: Never Build It Yourself

Login is formally called "Authentication." It involves an enormous number of concerns: password hashing, verification emails, password reset flows, third-party login, token management, brute-force protection, CSRF/XSS prevention… every single one is a potential security vulnerability.

So, never write your own login system. Use established authentication services:

Supabase Auth: Seamlessly integrates with Supabase database; free tier is enough for personal projects
NextAuth.js / Auth.js: The perfect Next.js companion; built-in support for dozens of third-party logins
Clerk: Best-looking UI, nearly zero-code integration

User clicks "Sign in with Google"
Redirected to Google's page to confirm authorization
Google sends a "pass" (Token) back to your website
Your website uses the pass to fetch the user's basic info

Throughout this process, the user never gives you their Google password — that's the elegance of OAuth.

How Do They All Work Together?

Let's trace a "user likes a post" action through the full flow:

① User clicks the "👍 Like" button (frontend interaction)
      │
② JS captures the click, sends request: POST /api/posts/123/like
   Request header includes Token to prove identity (frontend → backend)
      │
③ Backend receives the request:
   - Verify Token → Who is this user?
   - Check rules → Already liked?
   - Write to database → INSERT INTO likes (user_id, post_id)
      │
④ Database returns result (database → backend)
      │
⑤ Backend returns response: { "success": true, "likeCount": 42 }
   (backend → frontend)
      │
⑥ JS receives the response, updates page: button changes to "👍 Liked", number 41→42
   ✅ Done!

The entire process takes under 1 second. When writing code with AI, you need to understand that "liking" involves four layers — frontend interaction, network request, backend logic, and database operation — so you can give AI the right instructions.

Common Tech Stack Combinations

A "tech stack" is your chosen set of tools — like picking ingredients for a dish. Chinese cooking uses a wok and soy sauce; Western cooking uses an oven and butter.

LAMP (Old-School Classic): Linux + Apache + MySQL + PHP. The powerhouse of the 2000s — WordPress is built on it. Rarely used for new projects today.

MEAN/MERN (Full-Stack JavaScript): MongoDB + Express + Angular/React + Node.js. Frontend and backend both in JS — one language to rule them all. Great for small teams shipping fast.

Next.js + Supabase (AI Coding's Top Pick):

Next.js (Frontend + Backend in one)
  ├── Frontend: React components + Tailwind CSS
  ├── Backend: API Routes / Server Actions
  └── Connects to Supabase
        ├── Database: PostgreSQL
        ├── Auth: User authentication
        └── Storage: File storage

Two tools to handle everything from UI to database, with free tiers. The go-to combo for indie developers and AI coders.

Quick Tech Glossary (20 Terms)

Term	One-Line Explanation
Frontend	Everything the user sees and interacts with
Backend	Logic running on the server that users never see
Database	Where data is stored and managed
API	A "standard interface" for programs to communicate
Server	An always-on computer running your backend code
Framework	Pre-built tools and rules to help you code faster
Library	A collection of ready-made code you can use as needed
Deployment	Putting code on a server so the world can access it
Domain	A website's address, like google.com
HTTPS	Encrypted secure connection — the 🔒 before a URL
Token	A "pass" after login that proves "I am who I say I am"
Component	A self-contained module of a frontend page, like building blocks
Routing	Deciding which page to display based on the URL
Responsive	A page that automatically adapts to different screen sizes
SDK	A toolkit provided by a service to make integration easier
Package/Dependency	Someone else's pre-built tool — install and use
Terminal	A text-based interface for giving commands to your computer
Git	A version control tool that tracks every change to your code
Open Source	Code that's publicly available and free for anyone to view and use
Async	A programming style of "you go ahead, tell me when you're done"

Tech fundamentals are like learning the city layout before learning to drive — you don't need to know every street name, but you need the big picture. Frontend is the storefront, backend is the factory, database is the warehouse, and they collaborate through APIs to get things done. With this foundation, you won't get lost when we dive into frameworks and tools.

What Does It Take to Run a "Restaurant"?​

System Architecture Overview​

Frontend: Everything the User Sees​

Backend: The Secrets of the Kitchen​

Request/Response: A Back-and-Forth​

REST API: A Standardized Way to "Order"​

Database: The Master of Warehouse Management​

SQL vs NoSQL​

User Authentication: Never Build It Yourself​

What Is OAuth? How "Sign in with Google" Works​

How Do They All Work Together?​

Common Tech Stack Combinations​

Quick Tech Glossary (20 Terms)​