Frontend architecture
Frameworks render views; they do not decide how a product is organized. This collection is about that missing layer: where business rules live, how folders should tell you what the product does, and how to change structure while the system keeps earning money.
The Frontend Architecture Fundamentals series is the best entry point. The checkout case study then shows the same ideas applied to a large, live codebase.
Start here
-
React is a View Library, Not an Architecture
Your component started innocent, but today it does everything. Learn why React is a View library, not an architecture, and how to separate domain from UI.
-
Vertical Slices in the Frontend: When the Folder Tells You What the Product Does
How to structure a React SPA in vertical slices by domain: public API per slice, data from route loaders, and an architecture test that blocks shortcuts in CI.
-
How We Reorganized an E-commerce Checkout Without Stopping Sales
How we reorganized a major e-commerce checkout in production with Nuxt Layers, the CAL pattern, and automated linting rules — without stopping a single sale.
Series in this guide
All articles (15)
-
LangGraph Only for the Handoff: A Support Chatbot Where a Decision Model Picks Who Answers
A post-sales chatbot built with LangChain and LangGraph where a decision model picks the subagent per message: architecture, code, fallback, A/B and failures.
-
Decision Models in Practice: When Picking the LLM per Message Pays Off (and When the Mid-Tier Model Is Enough)
I had Microsoft-Decision-1 pick the subagent and LLM in a post-sales chatbot: harness, calibration, cost guard, and what 1,000 synthetic conversations showed.
-
Vertical Slices in the Frontend: When the Folder Tells You What the Product Does
How to structure a React SPA in vertical slices by domain: public API per slice, data from route loaders, and an architecture test that blocks shortcuts in CI.
-
React is a View Library, Not an Architecture
Your component started innocent, but today it does everything. Learn why React is a View library, not an architecture, and how to separate domain from UI.
-
How We Reorganized an E-commerce Checkout Without Stopping Sales
How we reorganized a major e-commerce checkout in production with Nuxt Layers, the CAL pattern, and automated linting rules — without stopping a single sale.
-
Amazon Bedrock in practice: AI as part of the architecture, not as an external dependency
How I moved from OpenAI to Amazon Bedrock: IAM auth, consolidated billing, Haiku vs Sonnet by task, and real trade-offs of running AI on AWS.
-
What I have learned from building a product with Spec-Driven Development
What I learned building a product with Spec-Driven Development: How structured specs eliminate technical debt using AI as a development peer.
-
NestJS monorepo with pnpm workspaces: how I structured the dev experience for multiple services
How I structured a NestJS monorepo with pnpm workspaces for multiple services: shared packages, hot reload in dev and optimized build in production.
-
Composable Abstraction Layer: the missing pattern between Pinia and its Vue components
Learn how the Composable Abstraction Layer eliminates the coupling between Pinia and Vue 3, centralizing logic, side-effects and ensuring testability per layer.
-
Modular Architecture with Nuxt Layers in Vue Projects
Discover how Nuxt Layers organizes Vue.js projects with modular architecture. Create scalable and maintainable front-end applications with backend concepts.
-
Nuxt 4: New Directory Structure and Migration Guide
Discover the new Nuxt 4 directory structure with the app/ directory and learn how to migrate your Nuxt 3 projects safely and without breaking anything.
-
Persistent Storage in Nuxt with Unstorage
Learn how to use Unstorage on Nuxt to persist server-side data with Redis and Cloudflare KV. Complete guide with practical storage examples in Nuxt 3.
-
Metrics to Measure Software Performance
Understand the main software performance metrics: latency, throughput and scalability. How to monitor and optimize systems for high availability.
-
Building a Robust Architecture
Explore the pillars of a robust software architecture: configurability, extensibility, and ease of installation for scalable, flexible systems.
-
What are micro frontends
What Micro Frontends are: the architectural pattern that brings microservices to the frontend for independent teams, faster deployments and scalability.