Network Pulse Slides System Architect Series
Network Pulse
Decoding the Client-Server Relationship
Lesson 1.0
The Warehouse Paradox
When you play Valorant or Roblox, where is the game actually happening?
On your laptop / console?
In a massive server room 500 miles away?
"The internet is just a conversation between two computers that agree on how to talk."
The Two Pillars
The Client
The Requester. It asks for resources or services.
User Interface (UI)
Input Processing
The Server
The Provider. It waits for requests and serves them.
Data Storage
High-Level Logic
The Request-Response Cycle
CLIENT
1. HTTP REQUEST
2. HTTP RESPONSE
SERVER
"Think of it like a restaurant. You (the client) order from a menu. The kitchen (the server) makes the food and brings it back. You don't go into the kitchen yourself."
Scenario: Netflix
On Your Phone (Client)
• Browsing thumbnails
• Clicking "Play"
• Decompressing the video
• Tracking where you paused
In AWS (Server)
• Storing Petabytes of MP4s
• Checking your subscription status
• Recommending the next movie
• Handling 200,000 requests per sec
Where does the heavy lifting happen?
Interaction Blueprints Worksheet Interaction Blueprints
System Architect Worksheet // Lesson 1.1
NAME: ___________________________
DATE: ___________________________
Mission: As a system architect, your first job is to map how data moves. Don't just think about the wires—think about the responsibilities. Who asks? Who answers?
1
The Functional Split
Identify which device typically handles the following responsibilities in a standard web-based application (e.g., Gmail or Netflix).
1. Rendering the user interface (buttons, sliders) CLIENT / SERVER
2. Storing 50 terabytes of user data CLIENT / SERVER
3. Verifying a user's password securely CLIENT / SERVER
4. Processing mouse clicks and touch events CLIENT / SERVER
5. Managing concurrent access for 10,000 users CLIENT / SERVER
6. Playing the actual audio out of speakers CLIENT / SERVER
2
System Schematics
Draw the Request-Response Cycle for the following scenario. Use arrows and label what specific data is being sent in the request and what is being sent in the response.
Scenario A: Checking your Inbox
User clicks "Refresh" on their smartphone email app.
CLIENT
SERVER
Scenario B: Searching for a Song
User types "Starboy" into the Spotify search bar.
CLIENT
SERVER
3
The "Fat Client" Problem
In modern architecture, we talk about Thin Clients (which do very little processing locally, like a basic web browser) and Fat Clients (which do a lot of processing locally, like a heavy video editing app or a AAA video game).
Reflect:
Why would a company like Google prefer to make "Google Docs" a Thin Client (running in a browser) rather than a Fat Client (software you have to download and install for every OS version)?
Hardware Hub Teacher Guide Hardware Hub Guide
Teacher Support Material // Lesson 1.2
Focus
Hardware Roles
Duration
50-60 Minutes
Key Concept
Separation of Concerns
Instructional Narrative
The client-server model is the fundamental structural design of the internet. It relies on a Distributed Architecture where tasks are partitioned between providers (servers) and service requesters (clients).
Teacher Tip: The "Server" is Software
Students often think of a "server" as a physical box. Clarify that while servers often run on powerful hardware, a server is actually a process or software that listens for requests. Even their laptop can be a server if it runs the right software.
Interaction Blueprints Answer Key
Part 1: The Functional Split
1. Rendering UI: CLIENT
4. Processing clicks: CLIENT
2. Storing 50TB: SERVER
5. Managing 10k users: SERVER
3. Password verification: SERVER
6. Playing audio: CLIENT
Part 2: Diagramming Guide
Scenario A (Email)
Request: Auth token + "GET /inbox"
Response: JSON object containing list of emails
Scenario B (Search)
Request: Query string "?q=Starboy"
Response: Metadata for matching songs (Artist, URL, Album Art)
Discussion High-Rollers
1. The Single Point of Failure
"If 1,000 clients depend on 1 server, what happens when that server crashes?"
Expected Insight: Centralized models are efficient but vulnerable. This sets the stage for future lessons on Cloud (distributed servers) and DDoS (targeting that single point).
2. Offline Mode
"Why can you play some games offline, but others (like Fortnite) won't even launch without internet?"
Expected Insight: Games that rely on the server for logic (like anti-cheat or world-state) cannot function without the connection. Local games are "Fat Clients" with all the logic on the hardware.
Vocabulary Expansion
Latency
The time it takes for a request to travel to the server and back. High latency = "lag".
Statelessness
The idea that each request from a client is new and independent (though cookies help track state).
API Gateway Slides System Architect Series
API Gateway
The Language of Interoperability
Lesson 2.0
The Uber Question
How does Uber show Google Maps inside its own app?
Uber didn't build a global map system. They didn't build their own GPS satellites. They didn't hire 10,000 drivers to photograph streets.
They "plugged into" Google's system.
Uber App
Google Maps API
This connection is an API.
Defining the API
Application
Software that performs a specific task (your weather app, Spotify, etc.).
Programming
Code that manages data and logic.
Interface
The point where two independent systems meet and communicate.
An API is a contract between systems. It says: "If you send me a request in This Specific Format, I will give you a response in That Specific Format."
JSON: The Universal Language
JavaScript Object Notation. It's how APIs package and send data.
weather_response.json
{
"city": "New York",
"temp": 72,
"unit": "F",
"conditions": "Sunny",
"wind_speed": 5.4
}
Key-Value Pairs: A name and its data.
Human Readable: You can read it, and computers can parse it instantly.
Lightweight: No heavy images or styling, just raw text data.
API Endpoints
The specific "URLs" or doors you use to access certain data.
GET api.spotify.com/v1/search?q=Drake Search for tracks
GET api.github.com/users/octocat Get user profile info
POST api.twitter.com/2/tweets Create a new post
Interoperability in Action
Data Decoder Worksheet Data Decoder
System Architect Worksheet // Lesson 2.1
NAME: ___________________________
DATE: ___________________________
Mission: To integrate two systems, you must understand the data format they share. Today, we decode the language of the web: JSON.
1
Deconstructing the Payload
Analyze the following JSON response from a hypothetical ride-sharing API and answer the questions below.
{
"ride_id": "XR-9921",
"status": "in_progress",
"driver": {
"name": "Alex Chen",
"rating": 4.9,
"vehicle": "Tesla Model 3"
},
"estimated_arrival": 7,
"surge_pricing": false,
"pickup_coords": [40.7128, -74.0060]
}
Q1: What is the data type for "estimated_arrival"?
Q2: How is the driver's vehicle information nested?
Q3: Is the passenger paying extra for this ride? Why?
2
Routing the Request
A "Social Photo App" has the following API documentation. Match the User Action to the correct API Endpoint .
User Actions
A. A user likes a friend's photo.
B. A user wants to see all their own photos.
C. A user deletes an old account.
D. A user searches for "Beach" photos.
API Endpoints
GET /search?query=... __
POST /photo/{id}/like __
GET /users/{id}/photos __
DELETE /users/{id} __
3
Designing the Contract
The Scenario: You are building a "Smart Fridge" app. The fridge (Client) needs to ask the Grocery Store (Server) for the current price of Milk .
In the box below, write a JSON response that includes the product name, price, stock status (true/false), and expiration date.
// Write your JSON response here...
{
Connector Guide Teacher Notes Connector Guide
Teacher Support Material // Lesson 2.2
Topic
Interoperability
Focus
JSON & Endpoints
Objective
System Integration
Scavenger Hunt Facilitation
Before students start the Data Decoder Worksheet , lead a 5-minute "API Scavenger Hunt" using their smartphones or laptops.
Ask: "Open the Weather app. Where does that data come from? Did Apple/Samsung put a thermometer outside your window?" (Ans: No, they fetch it from a Weather Service API).
Ask: "Find an app that lets you 'Log in with Google'. How does that app know you're you without seeing your password?" (Ans: They talk to Google's Auth API).
Data Decoder Answer Key
Part 1: JSON Parsing
Q1 Type: Integer (or Number)Q2 Nested: It is an object inside the main object, identified by the key "driver".Q3 Surge: No. "surge_pricing": false indicates standard rates.
Part 2: Matching
D → GET /search
A → POST /photo/{id}/like
B → GET /users/{id}/photos
C → DELETE /users/{id}
Part 3: Grading the JSON Design
Look for correct syntax: curly braces {}, quotes around keys "name", colons :, and commas , between pairs. High marks for including diverse data types (Boolean for stock status, Number for price).
Common Pitfall
Students often confuse API with UI . Remind them: The UI is for humans; the API is for other computers. If a button is clicked, the UI calls the API.
Extension Question
"What happens if an API changes its format but the app doesn't update?" (Ans: The app breaks because the contract was violated).
Sky High Slides System Architect Series
Sky High
Navigating Infrastructure as Code
Lesson 3.0
The Cloud is a Myth
The phrase "The Cloud" is just a marketing term for Someone Else's Computer.
Instead of buying, powering, and cooling your own servers in a closet, you rent them from companies like Amazon (AWS), Microsoft (Azure), or Google (GCP).
"On-Premise" → "Off-Premise"
DATA CENTER VS SERVER CLOSET
The Service Stack
IaaS
Infrastructure
"Give me the raw machine. I'll handle the OS, the apps, and the security."
EG: Amazon EC2, Azure VMs
PaaS
Platform
"Give me a place to run my code. I don't care about the OS or updates."
EG: Heroku, Google App Engine
SaaS
Software
"Just give me the app. I just want to use the features."
EG: Netflix, Gmail, Slack
Pizza as a Service
How much work do you want to do yourself?
Made at Home
[X] Dough
[X] Toppings
[X] Oven
[X] Drinks
ON-PREM
Take & Bake
[ ] Dough
[ ] Toppings
[X] Oven
[X] Drinks
IAAS
Delivery
[ ] Dough
[ ] Toppings
[ ] Oven
[X] Drinks
PAAS
Dining Out
[ ] Dough
[ ] Toppings
[ ] Oven
[ ] Drinks
SAAS
Why Go Cloud?
Scalability
Need 1,000 more servers today? Click a button.
Elasticity
Only pay for what you use. Scale down at night.
The Risk
• Latency: Your data has to travel hundreds of miles.
• Ownership: You don't control the hardware.
• Outages: If AWS goes down, your whole business stops.
Cloud Matrix Worksheet Cloud Matrix
System Architect Worksheet // Lesson 3.1
NAME: ___________________________
DATE: ___________________________
Mission: Strategic resource allocation. You must decide which layer of the cloud stack provides the best balance of control and efficiency for your organization.
1
The Categorization Audit
Place an "X" in the correct column for each cloud service or scenario.
Service / Scenario IaaS PaaS SaaS 1. Using Microsoft Word via a web browser (Office 365) 2. Renting a raw virtual machine to install Linux and your own database 3. A developer uploading a .zip file of code for the cloud to run automatically 4. Storing your photos in iCloud or Google Photos 5. Renting 500 virtual servers for an hour to process a massive dataset
2
The Elasticity Equation
A video editing company needs 10 high-end servers. They have two options:
OPTION A: ON-PREMISE
Buying Hardware: $50,000
Electricity/Cooling: $200/mo
Lifespan: 3 years
OPTION B: CLOUD (IaaS)
Hourly Rent: $0.50 per server
Usage: 40 hours per week
Setup Fee: $0
Calculate the total cost for one year for both options.
A:
B:
3
Case Study: SafeVault
SafeVault is a new startup that provides ultra-secure backup for medical records. They are deciding between Self-Hosting (owning their own physical servers in a secure basement) and AWS Cloud Hosting .
Argument for Self-Hosting:
"Since we handle medical data, we need total physical control. If we use the cloud, we don't know who is touching the hard drives."
Argument for Cloud:
"Amazon has better security (armed guards, fire suppression) than we could ever afford. Plus, we can scale instantly if we get more hospitals."
If SafeVault experiences a sudden viral growth and needs 10x more storage in 24 hours, which model is more likely to survive?
Identify one significant risk of moving to the Cloud for a medical records company.
Infrastructure Key Teacher Resource Infrastructure Key
Teacher Support Material // Lesson 3.2
Theme
Cloud Service Models
Goal
Model Comparison & Costing
Cloud Matrix Answer Key
Part 1: Categorization
1. Office 365 → SaaS
2. Virtual Machine → IaaS
3. Zip file (Code) → PaaS
4. Google Photos → SaaS
5. 500 Virtual Servers → IaaS
Part 2: The Math
Option A (On-Prem): $50,000 (Initial) + $2,400 (Power/Cooling) = $52,400
Option B (Cloud): 10 servers × $0.50 × 40 hrs × 52 weeks = $10,400
Insight: Cloud is significantly cheaper for startups, especially when they don't need 24/7 peak usage.
Case Study Debrief
Question 1: Rapid Growth
The Cloud Model survives. To scale On-Premise, you have to order hardware, wait for shipping, hire technicians, and install it. In the Cloud, you "scale up" with a single API call or button click.
Question 2: Medical Risks
Primary Risk: Data Sovereignty / Compliance. Medical data (HIPAA in the US) has strict rules about where data lives. If AWS moves data to a server in another country, SafeVault might be breaking the law.
The "Pizza as a Service" Guide
When using the slide analogy, emphasize that the shift from left to right represents transferring responsibility to the vendor.
Left (On-Prem): Maximum Control, Maximum Hassle.
Right (SaaS): Minimum Hassle, No Control over Ingredients.
Traffic Jam Slides System Architect Series
Traffic Jam
The Vulnerability of Centralization
Lesson 4.0
What is a DDoS?
Distributed Denial of Service.
It's not about "hacking" into a server to steal data. It's about making the server too busy to work.
"If 10,000 people try to walk through a single door at once, nobody gets inside."
The Zombie Army
Infection
Malware infects thousands of "IoT" devices: smart fridges, webcams, routers.
The Botnet
These "bots" sit quietly until they receive a command from a central "Command & Control" (C2) server.
The Flood
Simultaneously, all 1,000,000 devices send a request to a single URL, crashing the target.
Why is this "Distributed"? Because the attack comes from millions of IP addresses, not just one.
Case Study: The Dyn Attack
In 2016, a massive botnet called Mirai attacked a company called Dyn.
Dyn provided "DNS" services—the phonebook of the internet. When Dyn went down, half the internet "disappeared."
• Twitter
• Netflix
• Reddit
• Spotify
1.2 Tbps
Data Flood Rate
The equivalent of downloading 100 HD movies every single second.
Defense Strategies
Traffic Scrubbing
Large cloud providers filter incoming traffic. If it looks like a bot, it gets blocked before it hits the server.
Load Balancing
Distribute incoming requests across 100 servers instead of 1. It's much harder to crash 100 targets.
CDN
Content Delivery Networks cache your site globally. The request never even reaches your main server.
Defense Plan Worksheet Defense Plan
System Architect Worksheet // Lesson 4.1
NAME: ___________________________
DATE: ___________________________
ALERT: Detecting anomalous traffic spikes on the main gateway. Security clearance required to proceed.
1
The Botnet Lifecycle
Sequence the following steps (1-5) to show how a DDoS attack is orchestrated using a botnet.
___
The target server becomes unresponsive to legitimate users due to CPU/Bandwidth exhaustion.
___
Thousands of "smart home" webcams are infected with malware via an unpatched vulnerability.
___
The attacker sends a single command to the Command & Control (C2) server.
___
Infected devices "check in" with the C2 server, waiting for instructions.
___
Infected devices flood the target's IP address with millions of fake HTTP requests.
2
Threat Assessment
Target A: Local Pizza Shop
Runs a single web server in the back of the shop for online orders. No cloud integration.
Primary Weakness:
Target B: Global Streaming App
Uses AWS with Load Balancing and a global Content Delivery Network (CDN).
Primary Defense:
3
Security Architect Proposal
Scenario:
"The Book Worm" is a massive online retailer. Every December, they get attacked by competitors using botnets to crash their site during sales. As their CTO, propose a 3-step mitigation strategy using Cloud concepts.
Phase 1: Traffic Filtering
Phase 2: Distribution
Phase 3: Fallback (Offline/Static)
Botnet Simulation Teacher Guide Botnet Simulation
Teacher Support Material // Lesson 4.2
Mission: To simulate a Distributed Denial of Service attack using the classroom as a living network. This activity helps students visualize how "distributed" requests overwhelm a centralized target.
Setup & Materials
Roles Needed:
• 1 Server (A student at a desk with a stack of papers).
• 1 Legitimate User (A student with a simple request).
• 1 Command & Control (Teacher or lead student).
• The Botnet (The rest of the class).
Supplies:
• 50+ index cards or scrap paper.
• A stopwatch.
• A wastebasket (the server's "processing" bin).
Phase-by-Phase Instructions
1
Normal Operation
The Legitimate User walks to the Server and asks them to write a name on a card and place it in the bin. The Server does this easily. (Low Latency, High Availability).
2
Infection & Check-in
Tell the Botnet students to stand up. They are now "zombies." They cannot move until the C2 (Teacher) gives a signal. They should all be staring at the teacher.
3
The Flood (The Attack)
Signal the attack! Every Botnet student must walk to the Server simultaneously and ask them to sign an index card. They must be insistent and keep coming back for more.
4
Denial of Service
While the flood is happening, the Legitimate User tries to get a card signed. The Server should be overwhelmed and unable to keep up. Eventually, the Server "crashes" (stops working) because they are buried in requests.
Post-Simulation Debrief
"To the Server: How did you decide whose card to sign first?"
Point: Without a "Load Balancer" or "Scrubber," a server can't easily tell the difference between a bot and a real user when the flood is that intense.
"To the Bots: Why was this attack harder to stop than if only 1 person attacked?"
Point: You can block 1 person. You can't easily block 25 people coming from 25 different directions at the same time.
Defense Plan Worksheet Answer Key
Part 1 Sequence:
Infection (Webcams)
Check-in (With C2)
Attacker Command
The Flood (Requests)
Server Unresponsive
Architect Launch Slides System Architect Series // Capstone
Architect Launch
Designing the Infrastructure of the Future
Lesson 5.0
The CTO Challenge
You are the Chief Technology Officer of a new startup.
Your job isn't to write the code. It's to design the System Architecture . Before the first line of code is written, you must draw the map of how the pieces fit together.
→ Which clients?
→ Which cloud models?
→ Which APIs?
→ How do we survive an attack?
SYSTEMS THINKING
Blueprint Requirements
1. Frontend (The Client)
Will your users use a smartphone (Fat Client), a web browser (Thin Client), or an IoT device?
2. Interoperability (APIs)
Which 3rd-party services do you need? (Payments? Maps? Weather? Auth?)
3. The Backend (Cloud)
Which cloud model will you use? SaaS for simple tools? IaaS for total control?
4. Resilience (DDoS)
How will you prevent a competitor from crashing your server on launch day?
Reference Architecture
The App
AWS (PaaS) LOAD BALANCER
Google Maps API
Stripe Payments API
Your design must be as clear as this.
Ready to Architect?
"Good design is obvious. Great design is transparent."
60
Minutes for Design
5
Minute Pitch
System Blueprint Worksheet System Blueprint
Capstone Design Document // Lesson 5.1
PROJECT NAME: ___________________________
ARCHITECT: ___________________________
1. The Vision
What problem does your app solve? Who are the users?
2. The Frontend (Client)
Will you build a Mobile App (Fat Client), Web App (Thin Client), or both?
3. Interoperability (APIs)
Identify two external APIs your app will "plug into."
API 1:
API 2:
4. The Infrastructure (Cloud)
Will you use IaaS, PaaS, or SaaS for your main servers? Justify why.
System Architecture Schematic
VERSION 1.0 // GRID SCALE 1:1
DESIGN SPACE
SCHEMATIC CHECKLIST:
[ ] Label all Clients
[ ] Draw arrows for Req/Res
[ ] Place your Server in the Cloud
[ ] Connect External APIs
[ ] Include a Load Balancer
Resilience Audit
Launch Day Security: A massive botnet targets your server. Explain exactly how your architecture survives the attack.
[ ] SCALABLE [ ] INTEROPERABLE [ ] DISTRIBUTED
APPROVED BY CTO: ___________________________
Project Rubric Teacher Guide Project Evaluation
Teacher Support Material // Lesson 5.2
This rubric evaluates the student's ability to synthesize client-server, API, cloud, and security concepts into a cohesive system design.
Criteria Emerging (1) Proficient (2) Mastery (3) Architecture Schematic Disjointed components; unclear request/response flow. Logical flow; includes Client, Server, and Cloud components. Comprehensive; clear labels; shows load balancing and data flow. Cloud Integration Incorrectly identifies SaaS/PaaS/IaaS. Correctly chooses model with basic justification. Deep justification linking cloud choice to scalability needs. API Interoperability APIs are not relevant to app function. Includes 2 relevant 3rd-party APIs. Describes specific data being traded (JSON format hinted). Security Resilience Ignores DDoS vulnerabilities. Mentions basic filtering or cloud protection. Proposes multi-layered defense (Scrubbing, Load Balancing, CDN).
The "High Bar"
• Student specifies Latency concerns for their specific user base (e.g., "We need CDN nodes in Europe because...").
• Student identifies the specific JSON keys their app would send to an external API (e.g., "POSTing credit_card_token to Stripe").
• Student chooses a PaaS model specifically to lower management overhead for a small team.
Questioning Strategy
Use these during student presentations:
1. "If your payment API goes down, does your whole app stop working, or just the checkout?"
2. "Why didn't you choose to build your own server room in the basement?"
3. "Which part of your app is a 'Single Point of Failure'?"
Note: This capstone project is designed to be a "paper architecture" exercise. The goal is conceptual mapping, not coding. If students finish early, challenge them to design the Database Schema (JSON structure) for their primary data object.
