9b85309002
Demonstrates the atomic-design payoff: a whole new flow (route + page + nav link) reuses page-layout, heading, alert, form-field, text-input, button and link with no new component files. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
BIG-register Self Service Portal — Atomic Design POC
An Angular POC showing how atomic design makes a frontend cheap to build and reuse. Domain: the BIG-register self-service portal (NL register of healthcare professionals). Styled with the Rijkshuisstijl via the NL Design System / Utrecht component CSS — no hand-written theme.
The atomic-design story (folder = layer)
src/app/
atoms/ button · text-input · heading · link · alert · status-badge
molecules/ form-field (label+input+error) · data-row
organisms/ site-header · site-footer · login-form · registration-summary
registration-table · change-request-form
templates/ page-layout (header + content + footer)
pages/ login · dashboard · registration-detail
core/ models · registration.service (HttpClient → public/mock/*.json)
Reuse in action — the same building blocks appear everywhere:
page-layoutwraps all three pages.site-header+site-footerrender on every page.form-field+text-input+buttonare shared by the login form and the change-request form.status-badgeshows on both the dashboard and the detail page.
Adding a new page is just composing existing organisms inside the layout — see
pages/ for how little code each page is.
Styling / theming
@rijkshuisstijl-community/design-tokens + @rijkshuisstijl-community/components-css
provide Rijkshuisstijl-themed Utrecht components as CSS. The theme is applied by the
rhc-theme lintblauw classes on <body> (see src/index.html). Atoms are thin
Angular wrappers that apply these CSS classes — so the design system does the visual
work and we only own the component API.
POC shortcuts: free Fira Sans stands in for the licensed Rijksoverheid font, a text wordmark stands in for the logo, login is mocked, and data is static JSON.
Run
npm install
npm start # ng serve → http://localhost:4200 (login → dashboard → detail)
npm run storybook # component library, organized by atomic layer