One shared store across remotes
How a single Redux store survives the seam between federated micro-frontends, and what breaks when it does not.
Cards
A card groups a small unit of content behind a hairline border and a soft shadow. The blog feed post is the card doing its most-used job.
Base card
A rounded 12-pixel surface on the card background, framed by a hairline and lifted by a soft shadow. On hover it lifts a little more. It is the shell almost every other card is built on.
A base card
A rounded surface with a hairline border and a soft shadow. Hover it to see the lift.
<div class="card"> … </div>Feed post
The blog listing card: the real FeedPostCard component, here with a placeholder where the hero image goes. On desktop it is a thumbnail beside a title, meta line and two-line summary; on phones it collapses to a compact row. Without artwork a feed post marks itself data-no-thumb and drops to one column, so the body never sits beside an empty image track.
The entire card is a single link, not a title link with a separate “read more”. Hover lifts the card and greens the title together.
Publication index
The feed post's dense sibling: one hairline row per post (mono date, title, series, reading time) grouped under a mono year marker. A feed card sells one post; the index proves a body of work, so artwork stays out of the flow. On a pointer at desktop widths, hovering a row floats the post's art in as a small rotated preview; touch and reduced-motion readers just get the rows. One implementation, the roster classes; it runs on the about page and is never paginated.
Series hero card
The blog home's current-series card, rendered live: hero art beside the series pitch, with the published-of-total progress bar. On phones it stacks and gains a solid View series button.
19 parts · Ongoing · next part 17 AugIn progress
React Native Module Federation
Build a federated React Native app from scratch with Module Federation and Re.Pack: runtime remotes, the shared-singleton contract, and a host shell that owns navigation.
9 of 19 publishedStart with part 1Next part · 17 Aug
Series card
The More-series shelf card from Blog home: art over a parts count, title and a two-line description. The real SeriesCard component, here with a placeholder for the art.
Author card
The bio card at the end of every post: avatar, name, bio, profile link. The real AuthorCard component, rendered live.
Current-role card
The home page's latest-role card: a logo disc beside the company and role, description below. Rendered from the real classes with placeholder content.
Acme Studios
Engineering Manager
Mar 2016 - Present
A placeholder role showing the card anatomy: a one-line summary that truncates after a few words so the row stays scannable.
View full detailsIcon link card
A base card that is one link: a Feather glyph and a title on the head row, a blurb below. Icon and title green together on hover. Born as this documentation’s own index card and promoted to the site: the icon-card classes on top of card.
CTA band
The centred closing band: tinted, bordered, 16-pixel corners, a short heading and one or two calls to action, capped at 640 pixels. It closes the CV page on its own; the home page closes with two of them in a cta-band-pair grid: stacked on small screens, side by side from 900 pixels, the solo width cap lifted so the pair balances.
CTA band
Prev / next tiles
Stat band
A mono line of counted facts between two hairlines: posts, series, minutes of reading. Green figures, muted labels. Every number is derived from the content at build time, never typed in, so the band cannot drift from what the site actually holds.
Prev / next tiles
Two tinted tiles at the foot of a detail page: a green uppercase direction label and the destination’s title, the next tile right-aligned. Articles and company pages share the pn-nav classes; on phones the tiles stack.
The home page also composes two bespoke cards from these parts: a current-series card with its progress bar beside the latest post. On phones both give way to the standard feed rows.
The lead post & viewports
The newest post gets a larger lead treatment, and the whole feed reshapes per band: a big lead card over compact rows on a phone, a two-column grid on a tablet, thumbnail rows with a sidebar on desktop. The frames below are the real blog page at each width.
The frames below are the real pages rendered at real widths, scripts off, so they always show the light theme and no analytics run inside them.
When to use
Do
Don’t
One shared store across remotes
How a single Redux store survives the seam between federated micro-frontends, and what breaks when it does not.
Do
Don’t
Do
Hover me
Border and lift move together.
Don’t
No border
On a tinted band this edge disappears.
Where it lives
Base: .card. Feed: .feed-post with .feed-post-thumb, .feed-post-body, .feed-post-meta, .feed-post-title, .feed-post-desc.