Stop 01 · Web & Internet FoundationsTopics · 4/10

Client-Server Architecture

Part of the Full Stack Developer Roadmap

In short

Mobile app, website, smartwatch: they all ask one backend for the same data. That split is why you can add to your cart on the phone and see it on your laptop.

The architectural pattern where clients (browsers) send requests and servers process them, run business logic, and return responses — the foundation every full-stack app is built on.

The mascot serves food from big pots to a queue of students holding plates at the mess counter.

Think of it like this

The hostel mess counter

Students come with plates and ask for food. They never walk into the kitchen or open the ration store. The mess staff decide the portions and the rules. Clients ask, the server owns the kitchen and the stock, and everyone is served from the same pots.

Watch it happen

Two clients, one source of truth

Mobile app

Web app

API server

Database

GET /cart

1/6The mobile app asks the API for the user's cart. It never talks to the database directly.

The big ideas

What you need to know

Many clients, one server

Browsers, apps and other services are clients. They all depend on the same backend for data and rules.

The database stays private

Only the server connects to the database. Clients see an API, never table names or passwords.

The server has the final say

Validation, prices and permissions are checked on the server, because anything on the client can be edited.

The API is the contract

As long as URLs and JSON shapes stay the same, you can rewrite the server or the app without breaking the other.

See it in code

Walk through the code

1import express from "express";2 3const app = express();4const carts = { u7: [{ item: "Notebook", qty: 2 }] }; // stand-in for a database5 6app.get("/cart/:userId", (req, res) => {7  const cart = carts[req.params.userId];8  if (!cart) return res.status(404).json({ error: "No cart found" });9  res.json(cart);10});11 12app.listen(3000, () => console.log("API on http://localhost:3000"));13// Client side, in a browser or app:14// const cart = await fetch("http://localhost:3000/cart/u7").then((r) => r.json());

1/3The data lives on the server. Here it's an object, in real life a database.

The client only knows a URL and the JSON shape. It can't tell whether the server uses Postgres, MongoDB or a plain object like this one.

Save yourself the pain

Common mistakes

Oops

Connecting a React or Flutter app straight to the database with the password inside the app.

Do this instead

Anything shipped to a client can be extracted. Keep database credentials on the server and expose only API endpoints.

Oops

Trusting the price or user ID that the client sends in the request.

Do this instead

Look up prices in the database and identify the user from their login token on the server.

Your mission

One API, two clients

~25 min

Quick check

A user edits the JavaScript in their browser to change a course price from 4999 to 1, then places the order. What should your backend do?

Go deeper

1Diagram a request flowing from your React frontend through your Express backend to a database and back.
2Learn the difference between client-side and server-side responsibilities.
3Identify the client and server layers in an app you use daily.