E-Commerce Architecture Demo

This website describes the project technology stack, the application architecture, and their interactions.

• Architecture Definition Model
• Element Background Colors
• System Landscape

Architecture Definition Model

🔝

The project architecture is written in Structurizr language and rendered with Structurizr Site Generatr in accordance with the C4 model which has 4 levels of detail:

• context - shows integrations of the given software system with others
• containers - shows what the given software system consists of
• components - shows what the given container consists of
• code - shows execution flows (see example)

To reduce “visual noise”, REST API descriptions do no include HTTP response statuses common to all operations:

• 401 - missing or invalid authentication, therefore user is unknown (for operations not available to anonymous users)
• 403 - authentication is valid, but current user has no access to the operation requested
• 400 - invalid request data, for example missing a required parameter, incorrect date format, etc.
• 500 - internal server error

Element Background Colors

🔝

• green - clients, Frontend applications, and their requests
• blue - Backend applications and their requests
• brown - server infrastructure elements and their requests
• orange - databases and database queries
• gray - external systems (third-party services)

System Landscape

🔝

This diagram depicts software systems, including external ones, and their relationships. Due to its nature, the picture may look cluttered; clicking on any box (except external systems) shows its constituent parts, if any. All the diagrams are vector ones and can be zoomed in without losing detail by resizing the browser window.

Clicking on any diagram title (below the diagram) lets:

• smoothly change the diagram scale with the mouse wheel
• drag the diagram by holding the left menu button and moving the mouse
• download the diagram as: PNG (raster) / SVG (vector) / PUML (diagram description language)