Project: Design a Full Web Architecture

Build the mental model

The capstone doesn't hand you a new diagram to memorize — it asks you to reuse the same building blocks from the Advanced chapter's SaaS, real-time, AI, and e-commerce architecture lessons and assemble them yourself from a requirements list.

The skill being tested is composition: each component should appear because a real requirement demands it, not because you're pattern-matching to a diagram you've seen before.

• Needs authentication -> auth service
• Needs to persist data -> database
• Needs file upload -> object storage (not the database)
• Needs to send notifications -> notification service
• Needs a realtime feature -> a persistent connection (WebSocket/push channel)

The client/server mental model sits underneath: 'the backend' is rarely one box — it is a backend plus whichever specialized services the requirements actually call for.

ASSEMBLED WEB ARCHITECTURE FROM REQUIREMENTS
--------------------------------------------
FULL ARCHITECTURE: AUTH + DASHBOARD + DATABASE + UPLOAD + NOTIFY
--------------------------------------------------------------------
[User]
   |
   v
[Browser] <---- static assets ----> [CDN]
   |
   | HTTPS request (API calls)
   v
[Frontend]  (dashboard UI, served via CDN)
   |
   v
[Backend / API]
   |
   +----------------+----------------+------------------+
   |                |                |                  |
   v                v                v                  v
[Database]   [Auth service]   [Object storage]   [Notification
                                                    service]

Connect it to a real scenario

Work top-down from the requirement list rather than trying to draw the whole picture at once.

Change one flag (drop file upload, add realtime) and re-run it — seeing exactly one component appear or disappear confirms the mapping is genuinely one-to-one.

• Architecture design is a requirements-to-components mapping, not memorizing one diagram
• 'The backend' is usually a backend plus whichever specialized services the requirements call for
• Adding an unneeded component and omitting a needed one are two distinct, equally real mistakes

Try the working example

function designArchitecture(requirements) {
  const {
    needsAuth = false,
    needsDatabase = false,
    needsFileUpload = false,
    needsNotifications = false,
    needsRealtime = false,
  } = requirements;

  // Every project in this course starts from the same base: a client,
  // a CDN for static assets, a frontend, and a backend that talks to them.
  const components = ['Browser (client)', 'CDN (static assets)', 'Frontend', 'Backend / API'];

  if (needsAuth) components.push('Auth service / identity provider');
  if (needsDatabase) components.push('Database');
  if (needsFileUpload) components.push('Object storage (file uploads)');
  if (needsNotifications) components.push('Notification service');
  if (needsRealtime) components.push('Realtime channel (WebSocket / push)');

  return components;
}

const dashboardApp = designArchitecture({
  needsAuth: true,
  needsDatabase: true,
  needsFileUpload: true,
  needsNotifications: true,
  needsRealtime: false,
});

console.log('Dashboard app architecture:');
dashboardApp.forEach((c, i) => console.log(`${i + 1}. ${c}`));

const chatApp = designArchitecture({
  needsAuth: true,
  needsDatabase: true,
  needsFileUpload: false,
  needsNotifications: true,
  needsRealtime: true,
});

console.log('');
console.log('Realtime chat app architecture:');
chatApp.forEach((c, i) => console.log(`${i + 1}. ${c}`));

Running designArchitecture() for this lesson's requirement set and a second, realtime-chat requirement set prints:

Dashboard app architecture:
1. Browser (client)
2. CDN (static assets)
3. Frontend
4. Backend / API
5. Auth service / identity provider
6. Database
7. Object storage (file uploads)
8. Notification service

Realtime chat app architecture:
1. Browser (client)
2. CDN (static assets)
3. Frontend
4. Backend / API
5. Auth service / identity provider
6. Database
7. Notification service
8. Realtime channel (WebSocket / push)

System Design Primer (GitHub) — How the Web Works