> Markdown version of [/videos/400-generate-customer-journeys-from-reusable-building-blocks?t=1402](https://www.wearedevelopers.com/videos/400-generate-customer-journeys-from-reusable-building-blocks?t=1402). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# Generate Customer Journeys from reusable Building Blocks

Stop rewriting complex customer journeys from scratch. Avoid full big-bang rewrites. Instead, learn to dynamically generate bespoke Angular flows using JSON configurations and modular building blocks.

- **Speakers:** Jochen Supper, Tobias Siebert
- **Event:** World Congress 2022
- **Published:** June 15, 2022
- **Duration:** 28:13
- **URL:** https://www.wearedevelopers.com/videos/400-generate-customer-journeys-from-reusable-building-blocks

## Summary

E-commerce platforms easily scale for highly industrialized, off-the-shelf products, but struggle with complex offerings like insurance that demand highly customized, non-standard customer journeys. To solve this, developers can harmonize product portfolios from the bottom up by progressively enhancing existing Angular applications into a modular building block platform. This architectural pivot eliminates the need for full big-bang rewrites, transitioning bespoke flows into a predictable, industrialized system.

This methodology leverages JSON configuration files and custom Angular schematics to dynamically generate complete customer journeys without manual coding. Self-contained components—acting as reusable building blocks—handle distinct sub-processes, managing data collection, validation, and platform readiness independently. A specialized routing engine laid over Angular's native routing processes the configuration, orchestrating decision points and lazy-loaded navigation across the generated standalone applications.

By decoupling global state management from localized component logic, the platform ensures components remain ignorant of the broader operational context, increasing modularity. Furthermore, integrating a dynamic Access Control List (ACL) enables real-time feature toggles, safely hiding or disabling UI elements based on runtime conditions without breaking underlying forms. Organized within an nx-based monorepo, this library-driven strategy allows teams to endlessly reuse core utilities like payment and delivery modules, blending the agility of isolated UI components with the scalability of cohesive micro frontend capabilities.

**Keywords:** angular schematics, json flow configuration, modular building blocks, nx monorepo architecture, micro frontend scaling, customer journey generation, angular routing engine, dynamic UI feature toggles, declarative web components, global state abstraction, dynamic access control list, reusable angular libraries, sales process industrialization, frontend platform engineering

## Chapters

1. **Standardizing web experiences for complex business products** (00:15) — Contrasting off-the-shelf sales with detailed configuration flows to justify a unified technical platform.
1. **Introducing the pizza configuration journey example** (06:22) — Defining the product capabilities and scaling requirements for a stepwise pizza-ordering application.
1. **Generating angular applications from basic flow configurations** (07:53) — Using custom angular schematics and a routing engine to scaffold a standalone application automatically.
1. **Implementing data-collecting building blocks in customer journeys** (11:56) — Defining data contracts to manage state restoration and turn placeholders into functional, self-contained components.
1. **Managing runtime visibility with feature toggles** (19:13) — Using an access control list inspector to dynamically alter mandatory form elements and interaction states.
1. **Extending the platform to new product journeys** (21:35) — Reusing global payment components while isolating specific product complexities in customized application configurations.
1. **Addressing backend architectures and code repository structures** (23:22) — Clarifying considerations about backend generation, monorepo maintenance, and relationships to micro frontend frameworks.

## Related Moments

- [Building long-term Angular architectures with domain-driven design](https://www.wearedevelopers.com/videos/5-sustainable-angular-architectures-with-nx-and-strategic-design) (from "Sustainable Angular Architectures with Nx and Strategic Design")
- [Evolving frontend application architectures from simple to enterprise scale](https://www.wearedevelopers.com/videos/1682-client-side-state-management-reimagined-think-outside-the-box) (from "Client-Side State Management Reimagined – Think Outside the Box")
- [Exploring Angular component patterns and upcoming framework updates](https://www.wearedevelopers.com/videos/364-angular-tips-tricks-you-can-use-from-tomorrow-on) (from "Angular tips/tricks you can use from tomorrow on")
- [Introduction to building reusable Angular components](https://www.wearedevelopers.com/videos/497-angular-magical-directives) (from "Angular Magical directives")
- [The rise of modern component-based frameworks and modular architecture](https://www.wearedevelopers.com/videos/118-how-to-stop-choosing-javascript-frameworks-and-start-living) (from "How to Stop Choosing JavaScript Frameworks and Start Living")
- [Overview of the Angular development platform](https://www.wearedevelopers.com/videos/189-angular-angular-cdk-awesomeness-combined) (from "Angular <> Angular CDK - Awesomeness Combined")

## Related Articles

- [3 JavaScript-Free Techniques for Accordions, Dialogs, and Table of Contents](https://www.wearedevelopers.com/magazine/684-3-javascript-free-techniques-for-accordions-dialogs-and-table-of-contents)
- [Navigating the AI Shift](https://www.wearedevelopers.com/magazine/629-navigating-the-ai-shift)
- [Web Development Best Practices: What The Data Tells us](https://www.wearedevelopers.com/magazine/84-web-development-best-practices-what-the-data-tells-us)
- [Never delegate the understanding](https://www.wearedevelopers.com/magazine/749-never-delegate-the-understanding)

## Related Jobs

- [Senior Software Engineer, Angular (B2C Web Platform)](https://www.wearedevelopers.com/jobs/ext/1927757-senior-software-engineer-angular-b2c-web-platform) at **Bitpanda**
- [Software Engineer, React & Angular (Broker Web Platform](https://www.wearedevelopers.com/jobs/ext/1558399-software-engineer-react-angular-broker-web-platform) at **Bitpanda**
- [Junior Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/1532351-junior-frontend-engineer) at **Almedia**
- [iOS Engineer, Swift/SwiftUI/Combine (B2C Broker)](https://www.wearedevelopers.com/jobs/ext/1611832-ios-engineer-swift-swiftui-combine-b2c-broker) at **Bitpanda**
- [Staff Frontend Engineer (Expert+/Lead equivalent) - Hybrid working model, 100%, Ho Chi Minh City](https://www.wearedevelopers.com/jobs/48314-staff-frontend-engineer-expert-lead-equivalent-hybrid-working-model-100-ho-chi-minh-city) at **SMG Swiss Marketplace Group**
- [Staff Frontend Engineer](https://www.wearedevelopers.com/jobs/48313-staff-frontend-engineer) at **SMG Swiss Marketplace Group**