DNA
Our core values, principles, and design philosophy
What is SHOPin?
SHOPin is an Agnostic Frontend Accelerator (or Composable Storefront Accelerator). It is a solution layer designed to overcome the practical difficulties of building a consumer experience on a purely decoupled (MACH) backend.
Why SHOPin is just an accelerator
The SHOPin Accelerator is delivered as a source code framework, not a closed platform, because the unique nature of modern frontend experiences cannot be solved by a single, generic solution. Your competitive edge relies on custom features—checkout logic, specialized UI, and other bespoke business requirements—that a static, closed platform cannot accommodate. The accelerator provides the starting framework you customize to meet your specific needs.
Why you get the code
- •Control and ownership: SHOPin gives you full ownership and control of the code. This eliminates vendor dependency, allowing your team to control hosting, deployment, and performance without being locked into a third-party roadmap.
- •Focus on philosophy, not updates: Once launched, your team's job is to maintain SHOPin's architecture and patterns, not to install our new features. We do not force version updates. This is crucial because your business may evolve in a unique technical direction, and we discourage continuous, large-scale feature migration, as it would create unwanted disruption to your customized, production-ready code. Your business evolves based on your own roadmap, not ours.
- •Acknowledge custom complexity: The custom code, unique feature additions, and specific third-party integrations your team develops will introduce new, project-specific challenges related to performance, scalability, and security. The accelerator provides the best foundation, but successfully managing these unique features requires diligent operational and security effort from the implementing team.
SHOPin architecture
Architecture can be understood as four distinct layers of thinking, each addressing a different class of concerns. SHOPin's core principle is to clearly separate these different kinds of complexity, ensuring that visual design, rendering logic, data orchestration, and interface contracts remain independent. This separation prevents the common anti-pattern of cramming all complexity into a single file or layer, making the system more maintainable, testable, and adaptable to change.
Four layers of architectural thinking
Visual thinking
StorybookSeparates visual design and component composition from business logic. This layer centralizes your visual language, ensuring UI components are independent, reusable, and testable in isolation. By isolating visual concerns, you prevent design complexity from bleeding into application logic.
Rendering thinking
Next.jsSeparates page composition and rendering strategy from data orchestration. This layer handles routing, server-side rendering, and page assembly without mixing in data fetching or transformation logic. Keeping rendering concerns separate ensures performance optimizations remain independent of backend complexity.
Orchestration thinking
NestJSSeparates data aggregation and transformation from both presentation and backend services. This layer orchestrates multiple microservices (CMS, Commerce, Search) into unified responses, isolating integration complexity. By keeping orchestration separate, you can swap backend services without touching presentation code.
Contract thinking
TypeScript / TypedocSeparates interface definitions from implementation details. This layer establishes strict, shared contracts between layers, ensuring data structures remain stable regardless of backend changes. By enforcing contracts, you prevent cascading changes and maintain clear boundaries between architectural concerns.
Layer synergy
The following diagram illustrates how the different layers interact and work together, showing the flow of data and responsibilities between UI, Presentation, BFF, and the underlying contracts.
Monorepo structure
All of this is organized within a single monorepo to avoid managing several repositories, ensuring consistency and simplifying development workflows.
Workspaces categories
SHOPin has five categories of workspaces:
| Category | Purpose | Usage |
|---|---|---|
| apps/* | Product Applications | Any runnable application or site. |
| core/* | Shared Packages | Reusable code, types, tooling configs (contracts, i18n, eslint, prettier, typescript). |
| integrations/* | Backend Integrations | Commerce and auth providers (e.g. commercetools-api, commercetools-auth, mock-api). |
| config/* | Central Configuration | Cross-app and core configuration and constants. |
| demo/* | Optional Demo/Sample Features | Demos and prototyping; safe to remove for production. Dedicated to showcasing SHOPin possibilities. |
Project structure
apps/
core/
integrations/
config/
demo/
SHOPin presentation only, to be removed for real development