3-tier architecture diagram (web app)
This 3-tier architecture diagram shows a typical web application split into a presentation layer (the Web Browser), an App Tier, and a Data Tier. It suits students learning layered architecture and developers sketching a simple, scalable backend.
Example: Architecture diagram for a 3-tier web application: click to open it in the editor and change it.
The three tiers at a glance
The diagram has five components. Two named groups, App Tier and Data Tier, hold the server-side parts. The Web Browser sits outside them as the client, or presentation, tier.
| Component | Tier | Technology | Role |
|---|---|---|---|
| Web Browser | Presentation (client) | Any browser | Shows the UI and sends requests |
| Load Balancer | App Tier | Nginx | Receives traffic and spreads it across servers |
| API Servers | App Tier | Node.js | Run business logic and talk to the data tier |
| Database | Data Tier | PostgreSQL | Stores persistent application data |
| Cache | Data Tier | Redis | Keeps frequently used data in memory |
How a request flows
- The Web Browser sends a request to the Load Balancer over HTTPS, so traffic from the internet is encrypted.
- The Load Balancer forwards the request to one of the API Servers over plain HTTP inside the private network.
- The API Servers read or write cached values in Redis using GET/SET commands.
- When data is not cached, or must be saved permanently, the API Servers query PostgreSQL using SQL.
- The response travels back through the Load Balancer to the Web Browser.
Each tier only talks to the tier next to it. The browser never reaches the Database or Cache directly, which keeps the data layer protected and lets you scale each tier on its own.
How to adapt it for your project
- Swap technologies to match your stack. For example, use HAProxy instead of Nginx, Django instead of Node.js, or MySQL instead of PostgreSQL.
- Add more API Servers boxes to show horizontal scaling behind the Load Balancer.
- Remove the Cache if your app is small, or add a read replica next to the Database.
- Rename the edge labels if your protocols differ, such as gRPC between the load balancer and the API.
Tip: Keep the edge labels (HTTPS, HTTP, SQL, GET/SET). They show at a glance where encryption ends and which protocol each layer uses, and reviewers often ask about exactly that.
Frequently asked questions
What are the three tiers in a 3 tier architecture?
They are the presentation tier, the application tier and the data tier. In this diagram they are the Web Browser, the App Tier (Load Balancer and API Servers) and the Data Tier (Database and Cache).
Why is Redis placed in the data tier?
Redis stores data, even though it is temporary and in memory, so it belongs with PostgreSQL in the Data Tier. The API Servers check it with GET/SET before running slower SQL queries.
Why does the load balancer use HTTPS outside but HTTP inside?
The Load Balancer terminates HTTPS from the browser and forwards plain HTTP to the API Servers on the private network. This is common, but you can use HTTPS internally too if your security rules require it.
Make your own architecture diagram with AI →