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.
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.
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.
22 parts · Ongoing — next part 20 JulIn 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.
5 of 22 publishedStart with part 1Next part · 20 Jul
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 home page and the CV page — one implementation, the cta-band classes.
CTA band
Prev / next tiles
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.