Understand Architecture
Understand how different parts of a web application work together.
LEVEL 05 · WEB FUNDAMENTALS
Web Application Architecture
Learn how real web applications are organized into presentation, application and data layers, and how APIs, authentication, caches, CDNs, reverse proxies and load balancers fit into a complete architecture.
01
Learning Objectives
Build a complete mental model of a production-style web application.
Learn MVC
Understand Model, View and Controller responsibilities.
Understand APIs
See how frontend and backend components communicate.
Understand Security Boundaries
Identify where authentication and authorization checks belong.
Understand Performance
Learn where caching, CDNs and load balancing can fit into an architecture.
Understand Scalability
See why larger applications use multiple servers and layers.
02
What Is Web Application Architecture?
Architecture describes how the major parts of an application are organized and communicate.
A web application may contain a browser-based user interface, backend application logic, databases, authentication services, APIs and supporting infrastructure.
Web application architecture describes how these parts are separated, how they communicate and what responsibilities each part has.
The goal is not simply to add more servers. Good architecture separates responsibilities in ways that make an application easier to build, operate, secure and change.
Simple definition
Web application architecture is the structure and communication design of the components that make a web application work.
03
The Simplest Web Application
Start with the smallest useful architecture.
🌐 Browser
↕
⚙️ Application Server
↕
🗄️ Database
Important:
Small applications can use a simple architecture.
Larger systems generally introduce additional layers
and infrastructure as their requirements grow.
04
Three-Tier Architecture
One of the most important architecture models for Web Technologies.
01
Presentation Layer
Responsible for the user-facing interface and interaction.
↓
02
Application / Business Layer
Processes requests, applies business rules and coordinates application operations.
↓
03
Data Layer
Manages persistent application data and database operations.
05
Why Separate the Layers?
Separation of responsibilities makes systems easier to reason about.
Separation of Concerns
Different parts of the system focus on different responsibilities.
DESIGNMaintainability
Changes in one layer can often be made without rewriting unrelated layers.
MAINTAINTestability
Individual responsibilities can be tested more independently.
TESTINGScalability
Different layers can sometimes be scaled independently.
SCALE
06
MVC Architecture
MVC is a common way to organize application code by responsibility.
🗄️
MODEL
Data and application state
↕
🎛️
CONTROLLER
Receives input and coordinates processing
↕
🖥️
VIEW
Presents information to the user
MODEL
What does it do?
✔ Represents application data
✔ Performs data-related operations
✔ Works with persistence logic where appropriate
CONTROLLER
What does it do?
✔ Receives input or requests
✔ Coordinates processing
✔ Selects the appropriate response or view
VIEW
What does it do?
✔ Presents information
✔ Displays application state
✔ Handles presentation responsibilities
07
MVC Request Flow
A simplified example of a student-result request.
👨🎓 Student
↓
🌐 Browser
↓
🎛️ Controller
↓
🧠 Model
↓
🗄️ Database
↑
🖥️ View
08
Monolithic and Layered Applications
Architecture can range from a single deployable application to separately organized services.
MONOLITHIC
One Main Application
UI
Business Logic
Data Access
Authentication
Multiple application responsibilities can exist within one deployable application.
LAYERED
Organized Responsibilities
Presentation
Application
Data
Application responsibilities are organized into clearer layers.
Important:
“Monolithic” does not automatically mean “bad”.
A well-designed monolith can be appropriate for many
applications. Architecture should match the problem.
09
API Layer
APIs provide a defined way for software components to communicate.
Frontend
Browser / Client
→
API
Communication Boundary
→
Backend
Application Logic
→
Data
Database / Services
An API can serve as a clear boundary between software components. For example, a frontend can request student data from an API without directly connecting to the database.
Important architecture principle
A browser should normally communicate with a controlled application or service interface rather than receiving direct database credentials.
10
Authentication and Authorization Boundary
Security checks belong inside the application flow, not only inside the user interface.
👤 User
↓
🌐 Browser
↓
🔐
Authentication
Who are you?
↓
🛡️
Authorization
What may you do?
↓
⚙️ Protected Application
Remember:
Authentication verifies identity; authorization determines
whether the authenticated entity may perform a requested
action or access a resource. These are distinct concepts.
11
Where Does Caching Fit?
Caches can reduce repeated work and improve response efficiency.
🌐 Browser
→
⚡ Cache
→
🖥️ Server
→
🗄️ Database
A cache stores eligible information so that a future request may be served without repeating all of the original processing.
Depending on the system, caching may exist in a browser, proxy, reverse proxy or managed CDN cache.
Important:
Caching is not simply “save everything”.
Freshness, validation, privacy and correctness
must be considered.
12
Content Delivery Network — CDN
A CDN can place cached content closer to users.
🖥️
Origin
Main application / source
🇮🇳
Edge
🇺🇸
Edge
🇸🇬
Edge
🇬🇧
Edge
A CDN is a distributed network of servers that can serve cached content from locations closer to users. This can reduce network distance for suitable content.
13
Load Balancer
Multiple application instances can share incoming traffic.
🌐
Clients
→
⚖️
Load Balancer
↙ ↓ ↘
🖥️ Server A
🖥️ Server B
🖥️ Server C
Why use a load balancer?
It can distribute requests among multiple servers, allowing an application to use more than one backend instance.
14
A More Complete Web Architecture
Now combine the components we have learned.
👤 User
🌐 Browser
↓
🔐 HTTPS
⚡ CDN / Cache
🔀 Reverse Proxy
↓
⚖️ Load Balancer
🖥️ App Server A
🖥️ App Server B
🖥️ App Server C
↓
🔐 Authentication
🔗 API
🧠 Business Logic
↓
⚡ Application Cache
🗄️ Database
📦 External Service
Important:
This is a teaching architecture, not a mandatory deployment.
Real systems vary significantly depending on requirements.
15
Premium Visualizer — Complete Request Journey
Trace a request from a user to the application and data layer.
STEP 01
User Starts the Request
A user opens a web application and performs an action.
User → Browser
What this architecture trace teaches
01
Requests can pass through multiple infrastructure layers before application processing.
02
Authentication and authorization are application security concerns, not merely interface features.
03
The database is part of the backend architecture, not a direct browser-facing service.
16
Premium Interactive — Architecture Builder
Select an architecture pattern and observe how the components are arranged.
Presentation → Application → Data
Three-Tier architecture selected
17
Choosing Architecture Components
Each additional layer should solve a real requirement.
| Component | Why It May Be Used | Typical Responsibility |
|---|---|---|
| API | Separate client and service communication | Interface between systems |
| Reverse Proxy | Front-door control and routing | Forward requests to backend systems |
| Load Balancer | Distribute traffic among instances | Traffic distribution |
| Cache | Avoid repeated work | Store eligible data/responses |
| CDN | Deliver suitable cached content closer to users | Distributed edge delivery |
| Database | Persistent application data | Store and retrieve data |
18
Real-World Example — CodeBhavya Student Portal
Apply the architecture to a familiar application.
Student Result Dashboard
A student signs in and asks the application to display the semester results.
The browser sends a secure request to the application. The backend checks authentication and authorization, processes the request and retrieves the required data.
The result is returned through the appropriate application interface and displayed by the browser.
👨🎓 Student
↓
🌐 Browser
↓
🔐 Authentication
↓
🔗 API
↓
⚙️ Business Logic
↓
🗄️ Student Database
19
Common Architecture Mistakes
These mistakes are frequently seen in beginner projects.
Browser Connects Directly to Database
Normal web applications should place controlled application logic between the client and database.
Authentication Only in JavaScript
Client-side checks can improve user experience, but protected resources require server-side enforcement.
Adding Every Technology
More components do not automatically create better architecture.
No Clear Responsibility
When every component does everything, the system becomes harder to maintain and debug.
20
Interview Preparation
Think first, then click a card to reveal the answer.
INTERVIEW QUESTION
01
What is three-tier architecture?
Think about presentation, application and data.
Click to reveal answer
ANSWER
Three-Tier Architecture
It separates an application into presentation, application/business and data responsibilities. The exact implementation can vary.
Click again to return to the question.
INTERVIEW QUESTION
02
What is MVC?
Think Model, View and Controller.
Click to reveal answer
ANSWER
Model-View-Controller
MVC is a software architecture pattern that separates application state/data, presentation and request or input coordination into different responsibilities.
Click again to return to the question.
INTERVIEW QUESTION
03
Why should a browser normally not connect directly to a database?
Think about credentials, validation and application logic.
Click to reveal answer
ANSWER
Application Boundary
A controlled backend layer can enforce validation, authentication, authorization and business rules, while keeping database credentials and database operations away from the browser.
Click again to return to the question.
INTERVIEW QUESTION
04
What is the role of a reverse proxy?
Think about the server-side front door.
Click to reveal answer
ANSWER
Reverse Proxy
A reverse proxy receives client requests and forwards them to internal servers. Depending on its configuration, it can also support caching, routing, authentication or load balancing.
Click again to return to the question.
INTERVIEW QUESTION
05
What is a load balancer?
Think about distributing requests across servers.
Click to reveal answer
ANSWER
Load Balancer
A load balancer distributes incoming traffic across multiple backend instances according to configured routing and health mechanisms.
Click again to return to the question.
INTERVIEW QUESTION
06
What is the difference between authentication and authorization?
Think: identity versus permission.
Click to reveal answer
ANSWER
Authentication vs Authorization
Authentication verifies an entity's identity. Authorization determines what that authenticated entity is permitted to access or do.
Click again to return to the question.
INTERVIEW QUESTION
07
Why is caching used in web applications?
Think about repeated work and response efficiency.
Click to reveal answer
ANSWER
Caching
Caching allows eligible data or responses to be reused, which can reduce repeated processing, network traffic or latency.
Click again to return to the question.
INTERVIEW QUESTION
08
What is the purpose of a CDN?
Think about geographically distributed cached content.
Click to reveal answer
ANSWER
CDN
A Content Delivery Network uses distributed edge locations to serve suitable cached content closer to users, which can reduce network distance and improve delivery performance.
Click again to return to the question.
21
Quick MCQs
Check your architecture knowledge.
MCQ 01
EASY
Which layer is responsible primarily for presentation?
MCQ 02
EASY
In MVC, which component primarily coordinates requests or input?
MCQ 03
MODERATE
Which component commonly distributes requests among multiple servers?
MCQ 04
MODERATE
Which component can serve suitable cached content from locations closer to users?
22
Practice Problems
Draw and explain the architectures yourself.
01
Draw a three-tier architecture for a college student portal.
02
Explain MVC using a student result application.
03
Explain why a browser should normally not receive database credentials.
04
Draw an architecture containing a reverse proxy, load balancer and three application servers.
05
Explain where authentication and authorization checks fit into an application.
06
Explain how a CDN and cache can reduce repeated work for suitable content.
23
Glossary
Click a term to flip the card and reveal its meaning.
TERM
Architecture
Click to see meaning
DEFINITION
Architecture
The structure and communication design of the components that make an application work.
TERM
Three-Tier Architecture
Click to see meaning
DEFINITION
Three-Tier Architecture
Separation into presentation, application and data responsibilities.
TERM
MVC
Click to see meaning
DEFINITION
MVC
Model-View-Controller, a pattern that separates application data/state, presentation and coordination.
TERM
API
Click to see meaning
DEFINITION
API
A defined interface through which software components can communicate.
TERM
Reverse Proxy
Click to see meaning
DEFINITION
Reverse Proxy
An intermediary server that receives client requests and forwards them to backend servers.
TERM
Load Balancer
Click to see meaning
DEFINITION
Load Balancer
A component that distributes incoming traffic among multiple backend instances.
TERM
CDN
Click to see meaning
DEFINITION
CDN
Content Delivery Network: distributed infrastructure that can serve suitable cached content from edge locations.
TERM
Cache
Click to see meaning
DEFINITION
Cache
A storage layer that can retain eligible information for reuse on later requests.
24
Quick Revision
Remember the architecture relationships.
🖥️
Presentation
User interface
⚙️
Application
Business logic
🗄️
Data
Persistent storage
🎭
MVC
Code organization pattern
🔗
API
Communication boundary
⚖️
Load Balancer
Traffic distribution
⚡
Cache
Reuse eligible data
🌍
CDN
Distributed edge delivery
Key Takeaway
A web application is a collection of cooperating components rather than simply an HTML page and a server.
Three-tier architecture separates presentation, application and data responsibilities. MVC provides another useful way of organizing application code.
APIs, authentication, reverse proxies, load balancers, caches and CDNs can be introduced when the application's communication, security, performance and scalability requirements justify them.
In the next level, we move from architecture into the professional tools and workflow used to build, inspect, debug and manage Web projects.
LEVEL 05
Web Application Architecture
Finish the lesson and mark this topic as completed.