Hearthstone Roastery — Full Stack Architecture Explorer

☕

Scenario in use throughout this explorer

A customer visits hearthstoneroastery.co.uk, selects a 250g bag of Kenya Nyeri, and clicks "Place Order". Select each stack layer below to see exactly what happens at that tier.

🖥️

Layer 1 · Client-Side

Front-End Presentation Layer

Runs inside the user's browser — no server required for rendering

What happens at this layer?

When the customer lands on the product page, the browser has already downloaded the HTML, CSS, and JavaScript files from the server. From this point forward, the front-end operates entirely client-side. The product catalogue is rendered from a previous API response stored in memory.

When the customer clicks "Add to Basket", a JavaScript event listener intercepts the click, updates the basket state in memory, and rewrites the basket icon count in the DOM — instantly, without any network request. When they proceed to checkout and click "Place Order", JavaScript collects the form data, validates it, and dispatches a POST request via fetch() to the back-end API.

HTML5 CSS3 JavaScript ES6+ Bootstrap 5 fetch() API DOM Manipulation Event Listeners

// Front-end: collect & dispatch order
orderBtn.addEventListener('click', async () => {
  const payload = {
    product: 'kenya-nyeri-250g',
    qty: 1, userId: session.id
  };
  const res = await fetch('/api/orders', {
    method: 'POST',
    body: JSON.stringify(payload)
  });
  const data = await res.json();
  showConfirmation(data.orderId);
});
            

Data Flow Route at this layer

Browser renders page HTML parsed, CSS applied, JS executed — product page visible

User interaction captured Click event fires on "Place Order" button via addEventListener

Client-side validation JS checks form fields before any network request is sent

fetch() POST dispatched JSON payload sent to /api/orders — request leaves the browser

Back-End processes request → See Layer 2

Database persists data → See Layer 3

⚙️

Layer 2 · Server-Side

Back-End Business Logic Layer

Runs on a remote server — processes every request before touching the database

What happens at this layer?

The server receives the POST /api/orders request. The first action is authentication: the session token in the request header is verified. If it is invalid or expired, the server returns a 401 Unauthorized response immediately — no database query is executed.

If authentication passes, the back-end validates the payload server-side — product ID exists, quantity is valid, stock is available — then constructs and executes a SQL query to write the new order record. It returns a 201 Created JSON response with the new order ID.

Node.js Express.js REST API JWT Auth Middleware Server Validation HTTP Status Codes

// Back-end route handler (Express.js)
app.post('/api/orders', authenticate, async (req, res) => {
  const { product, qty, userId } = req.body;

  // Server-side validation
  if (!product || qty < 1)
    return res.status(400).json({ error: 'Invalid order' });

  // Write to database
  const order = await db.orders.create({ product, qty, userId });
  res.status(201).json({ orderId: order.id });
});
            

Data Flow Route at this layer

Front-End dispatches request → See Layer 1

Route matched by Express POST /api/orders hits the registered handler function

Authentication middleware JWT token verified — request proceeds or is rejected with 401

Business logic executed Stock checked, payload validated, order object constructed

Database query dispatched SQL INSERT sent to database — waits for confirmation

Database persists data → See Layer 3

🗄️

Layer 3 · Data Persistence

Database Storage Layer

Persists all application state — survives server restarts and user sessions

What happens at this layer?

The database receives a parameterised SQL INSERT query from the back-end. It writes the new order record into the orders table, simultaneously decrements the inventory table's stock count for Kenya Nyeri, and wraps both operations in a transaction so that a failure in either step rolls back both.

The generated order_id primary key is returned to the back-end as a query result. The back-end passes it to the front-end in the JSON response. The front-end uses it to display the confirmation screen.

PostgreSQL SQL INSERT Transactions Foreign Keys Primary Keys Schema Design ACID Compliance

-- Database: transaction across two tables
BEGIN;

INSERT INTO orders (user_id, product_id, qty, status)
VALUES ($1, $2, $3, 'confirmed')
RETURNING order_id;

UPDATE inventory
SET stock = stock - $3
WHERE product_id = $2;

COMMIT;
-- Both succeed or both roll back
            

Data Flow Route at this layer

Front-End dispatches request → See Layer 1

Back-End validates & routes → See Layer 2

SQL query received Parameterised INSERT arrives from the back-end ORM

Transaction executed orders and inventory tables updated atomically

order_id returned Primary key passed back up the stack to the back-end

Response travels back JSON { orderId } reaches front-end — confirmation displayed

Interactive Demo

Simulate a Full Request-Response Cycle

👤

User

🖥️

Browser

⚙️

Server

🗄️

Database

✅

Response

Press "Run Simulation" to trace a coffee order through the full stack.