Client-Server Architecture — System Design

The most fundamental pattern in distributed systems: clients initiate requests, servers listen and respond. The web, mobile apps, and most software you use today are built on this model. Understanding this is the foundation of all system design.

Request / Response in 3D

Four clients orbit the central server. Press Send Request to fire a single request/response cycle. Press All Clients to see concurrent requests.

drag — scroll to zoom

Code example

A browser making a fetch request and a Node.js server responding.

CLIENT ? SERVER ? RESPONSE

// CLIENT — browser sends a request
async function fetchUser(id) {
    const response = await fetch(`/api/users/${id}`, {
        method: 'GET',
        headers: { 'Accept': 'application/json' }
    });

    if (!response.ok) throw new Error(`HTTP ${response.status}`);

    const user = await response.json();
    console.log(user); // { id: 42, name: 'Naser', role: 'admin' }
    return user;
}

fetchUser(42);
// SERVER — Node.js listens and responds
const http = require('http');

const server = http.createServer((req, res) => {
    // Parse the URL to find the user ID
    const id = req.url.split('/').pop();

    // Build the response (normally fetched from a DB)
    const user = { id: Number(id), name: 'Naser', role: 'admin' };

    res.writeHead(200, { 'Content-Type': 'application/json' });
    res.end(JSON.stringify(user));
});

server.listen(3000, () => {
    console.log('Server running on port 3000');
});
      

Key concepts

💻

Client

initiates — consumes

Any device or program that sends requests: browser, mobile app, CLI tool, or another service. Clients always initiate the conversation.

🖥

Server

listens — responds

A program that listens on a port and responds to client requests. It exposes resources — data, files, computations — over a network.

↔

Request / Response

HTTP — TCP — cycle

The fundamental exchange: client sends a request (URL, method, headers, body), server processes it and returns a response (status, headers, body).

🔒

Stateless Protocol

HTTP — no memory

HTTP is stateless — each request is independent. The server doesn't remember previous requests. Sessions, cookies, and tokens compensate for this.

← Catalog System Design — Algo3DVerse APIs & REST ?