# 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-layout` wraps all three pages. - `site-header` + `site-footer` render on every page. - `form-field` + `text-input` + `button` are shared by the login form *and* the change-request form. - `status-badge` shows 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 `` (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 ```bash npm install npm start # ng serve → http://localhost:4200 (login → dashboard → detail) npm run storybook # component library, organized by atomic layer ```