AI Web App and E-Commerce Architecture

Build the mental model

This lesson connects nearly every piece from this entire course into two architecture patterns that power a large share of real products built today.

Seeing DNS, CDN, frontend, backend, database, API, authentication, and secret management all show up together in one labeled diagram is the payoff for everything learned earlier.

AI web application architecture follows a now-familiar shape with one important new branch: the user's browser talks to a frontend, which talks to a backend, and the backend is the piece that calls out to an AI API or a locally hosted AI model, since that call typically requires a secret API key.

That backend often also branches to a regular database for application data, a vector store for similarity search over embeddings, and object storage for files like uploaded documents or generated images.

The key architectural rule carried forward from earlier secret-management lessons is direct: an AI API key should not normally be exposed in client-side browser code, because anything shipped to the browser can be read by whoever opens it, so the backend keeps the key server-side and makes the AI call on the frontend's behalf.

E-commerce architecture follows a parallel but distinct shape: a user reaches a store frontend, which talks to a backend, and the backend branches out to a products database, an orders system tracking purchases, authentication for customer accounts, a payment provider handled as an external API rather than custom-built payment code, and an email service for receipts and shipping updates.

Both patterns are simply the same building blocks from earlier chapters, arranged to fit each product's specific requirements.

AI WEB APP AND E-COMMERCE ARCHITECTURE
--------------------------------------
AI WEB APP AND E-COMMERCE ARCHITECTURE
------------------------------------------
AI WEB APPLICATION ARCHITECTURE
  User -> Browser -> Frontend -> Backend -> AI API / Local AI
                                    |
                    --------------------------------
                    |               |               |
                Database      Vector Store    Object Storage

E-COMMERCE ARCHITECTURE
  User -> Store Frontend -> Backend
                               |
        ------------------------------------------------
        |            |              |            |      |
     Products      Orders    Authentication    Payment  Email
     Database                                  Provider

Connect it to a real scenario

Picture a startup building an AI writing assistant that also sells a premium subscription.

The AI features need the AI architecture: the frontend sends a user's draft to the backend, the backend calls an AI API using a key that never leaves the server, and results might be stored alongside embeddings in a vector store so similar past documents can be retrieved later.

The subscription and billing side needs pieces from the e-commerce pattern instead: an authentication system for accounts, a payment provider handled as an external API for processing subscription charges, and an email service for receipts and renewal notices, even though this product isn't a traditional online store selling physical goods.

This is a realistic combination, not a special case: a single real product frequently draws pieces from more than one architecture pattern at once, using the AI shape for its core feature and the e-commerce shape for how it gets paid. Recognizing the individual components, database, auth, API, secrets, payment provider, behind each labeled diagram is what actually transfers to a new, unfamiliar product, far more than memorizing any specific diagram shape.

• AI web application architecture routes calls to an AI API or local model through the backend, keeping the API key server-side.
• E-commerce architecture branches a backend into products, orders, authentication, a payment provider, and email.
• Both patterns are built from the same components covered throughout this course — DNS, CDN, frontend, backend, database, API, auth, and secrets.

Try the working example

function assembleArchitecture({ isAIPowered, isEcommerce, needsPayments, needsVectorSearch }) {
  const components = new Set(["DNS", "CDN", "Frontend", "Backend", "Database", "Authentication"]);

  if (isAIPowered) {
    components.add("AI API / Local AI");
    components.add("Object Storage");
    if (needsVectorSearch) components.add("Vector Store");
  }

  if (isEcommerce) {
    components.add("Products Database");
    components.add("Orders System");
    components.add("Email Service");
    if (needsPayments) components.add("Payment Provider (external API)");
  }

  return Array.from(components);
}

const app = {
  isAIPowered: true,
  isEcommerce: true,
  needsPayments: true,
  needsVectorSearch: true,
};

console.log(assembleArchitecture(app));

It prints: [ 'DNS', 'CDN', 'Frontend', 'Backend', 'Database', 'Authentication', 'AI API / Local AI', 'Object Storage', 'Vector Store', 'Products Database', 'Orders System', 'Email Service', 'Payment Provider (external API)' ] — the combined component list for a product that is both AI-powered and e-commerce.

Wikipedia — E-commerce — How the Web Works