Engineering Fluency OS

Why This Matters

Every time you open a web page, send a message, or stream a video, your device is acting as a client talking to a remote server. The client-server model is the backbone of the modern internet. Your browser sends a request, a server processes it, and a response comes back -- often in milliseconds. Without this pattern, every application would need to store and compute everything locally, and collaboration between users would be impossible.

Understanding client-server architecture is the first step toward designing any networked system. Whether you are building a simple REST API, a real-time chat application, or a massive distributed platform, the conversation always starts with one question: who is the client, and who is the server?

Define Terms

Visual Model

ClientBrowser or app

InternetHTTP over TCP/IP

ServerRoutes requests

DatabasePersistent storage

Request

Query

Result

Response

The full process at a glance. Click Start tour to walk through each step.

The request-response cycle: client sends a request, server processes it, and returns a response.

Code Example

Code

// Express.js — a minimal HTTP server
const express = require("express");
const app = express();

// Define a route (server-side)
app.get("/api/greeting", (req, res) => {
  const name = req.query.name || "World";
  res.json({ message: `Hello, ${name}!` });
});

app.listen(3000, () => {
  console.log("Server listening on port 3000");
});

// Client-side: making a request with fetch
async function getGreeting(name) {
  const response = await fetch(`/api/greeting?name=${name}`);
  const data = await response.json();
  console.log(data.message); // "Hello, Alice!"
  return data;
}

getGreeting("Alice");

Interactive Experiment

Try these exercises:

Start a simple HTTP server and visit it in your browser. Notice the request in the browser's Network tab.
Change the HTTP method from GET to POST. What happens when you try to visit the URL directly in the browser?
Add a second route that returns a 404 status code. How does the browser display it?
Send a request with invalid JSON in the body. How does the server respond?

Quick Quiz

Coding Challenge

Request Router

Write a function called `handleRequest` that takes a request object with `method` (string) and `path` (string) properties. It should return a response object with `status` (number) and `body` (string). Route as follows: GET /hello returns {status: 200, body: 'Hello, World!'}. GET /time returns {status: 200, body: 'Current time'}. POST /echo returns {status: 200, body: 'Echo received'}. Any unknown path returns {status: 404, body: 'Not Found'}. Any unsupported method returns {status: 405, body: 'Method Not Allowed'}.

Loading editor...

Real-World Usage

Client-server architecture is everywhere in production:

Web applications: Your browser (client) communicates with backend servers via HTTP to load pages and fetch data.
Mobile apps: iOS and Android apps act as clients calling REST or GraphQL APIs on remote servers.
Email: Email clients (Outlook, Gmail) talk to mail servers using SMTP, IMAP, or POP3.
Databases: Your application server is a client to the database server, sending SQL queries and receiving result sets.
DNS: Your computer is a client to DNS servers, asking "What IP address does example.com resolve to?"

Client-Server Architecture