Atomic Design

Composition across the whole stack.

An atom is a focused building block. A feature combines a resource, the logic that works with it, and the presentation that gives it purpose.

01 / Resources

Event

Title, date, venue, description and publication state.

02 / Behavior

Programme

Select published events, order the programme and check access before editing.

03 / Presentation

Cards and pages

A shared event card composes into a listing and a featured section. A route brings the parts together.

04 / Route

Public programme

The route brings the event resource, selection logic and shared card into one public programme.

Event Behavior Presentation Public programme

One working feature. Reusable parts across the stack.

The events example: a public programme built from an event resource and reusable presentation blocks.
The events example: a public programme built from an event resource and reusable presentation blocks.

Read about full-stack composition ↗