System Design
Every system we use today, no matter how simple it looks, is built on layers of decisions, tools, and ideas.
Simple systems rarely stay simple. Behind every working application is a set of architectural decisions that shape how the system evolves.
Building the Foundation
In this section, I will walk through how this website was built from scratch.
From the beginning, I reminded myself to keep the architecture simple and organic.
By organic, I mean starting with the core idea and building the system using minimal dependencies. External libraries and integrations are introduced only when they truly add value.
Start small. Add complexity only when it becomes necessary.
As shown in the diagram on the left, the base structure of the site is intentionally simple:
- Header – logo and navigation
- Main Content Area – where the page content is rendered
- Footer – supporting links and information
At first glance this structure looks straightforward, but even a simple site requires several important decisions. One of the first choices is selecting the programming language and framework used to power the application.
For this site, I chose Java as the primary language and built the backend using the Spring Framework ecosystem.
Just like a coin has two sides — head and tail — every modern web application also has two major parts:
- Frontend – the user interface that visitors interact with
- Backend – the system responsible for processing requests, managing data, and serving content
For this project:
Frontend
- Java 25
- Spring Boot 4.0.3 (server-side rendering)
Backend / Application Layer
- Angular framework
As we explore the architecture further, I will explain how these components work together to power the site.
Backoffice and Operational Layer
While the public-facing site focuses on delivering content to users, a supporting backend interface is required to manage and monitor the platform.
The diagram on the right illustrates the backoffice layout, which is used to operate the site and observe how the system is performing over time.
This operational layer provides capabilities such as:
- Managing site content and configurations
- Monitoring system behavior and usage patterns
- Observing application health and performance
- Reviewing operational metrics and logs
To build this layer, I chose:
- Angular 20 for the frontend application framework
- Node.js 22 as the supporting runtime environment
This separation between the public site and the operational interface helps keep the system organized and allows administrative tools to evolve independently from the main user-facing application.
As the platform grows, this backoffice layer can be extended to support additional capabilities such as analytics dashboards, system insights, and operational tooling.
Layered Architecture Approach
To design the frontend portion of the system, it helps to first visualize the application as a set of architectural layers.
The diagram illustrates a simplified layered model consisting of three primary sections:
- Presentation Layer – responsible for rendering the user interface and handling user interactions
- Business / Domain Layer – where the application logic and core functionality reside
- Data Source Layer – responsible for data access, persistence, and external integrations
Separating systems into layers keeps responsibilities clear and allows each part of the application to evolve independently.
Organizing the application into layers helps maintain clear separation of responsibilities. Each layer focuses on a specific concern, which improves maintainability, testability, and long-term scalability.
To implement this layered structure, a framework is typically used to provide the foundational components and dependencies required to build the application.
For this project, I selected the Spring Framework ecosystem as the foundation.
To begin with, I started with a minimal set of dependencies, keeping the system lightweight and avoiding unnecessary complexity in the early stages of development.
Additional components and libraries can be introduced later as the system evolves and new requirements emerge.
Behind the Scenes
What appears to be a simple website is powered by a rich ecosystem of frameworks and tools working together behind the scenes.
These technologies collaborate to handle requests, process data, and deliver content seamlessly to users — bringing information from complex systems directly to your fingertips.
Sometimes people ask whether AI will replace us. Maybe in dreams it can. In reality, it’s just another tool. Like many technologies before it, it helps people fill gaps in what they know, learn faster, and explore ideas they might not have tried before.
Instead of being afraid of it, it’s probably better to learn how to live and build with it.
Have a Question or Insight?
If something here sparked a thought or raised a question, feel free to reach out.
Contact Me