← projects/WHERE slug = 'metdaan'
row 3 of 4
Digital media publication
MetDaan
A high-traffic publisher, and the first time I owned a feature from the SQL all the way to the pixel.
- slug
- metdaan
- kind
- Digital media publication
- year
- 2023 — 2024
- role
- Software engineer
- stack
- Next.js, TypeScript, Sass, Zustand, Python, SQL
- live
- metdaan.media ↗
- repo
- NULL
MetDaan is a digital media publication. I worked across the stack: React and TypeScript for the reading and editorial surfaces, Python and SQL underneath for content processing and the queries that fed the feeds.
01The problem
Publishing has an unforgiving performance profile. Most visitors arrive cold from a social link, read one article, and leave. There is no warm cache to hide behind, so the first paint is the whole experience.
Long article feeds made it worse. Scrolling a list of several hundred items in a naive React implementation means state updates that touch far more of the tree than they need to.
02What I did
On the client I moved feed state into Zustand with narrow selectors, so a component subscribed to the one slice it read rather than to the whole store. Combined with hooks written for specific derived values, that kept a scroll or filter change from re-rendering items that had not changed.
On the server side I worked on the Python and SQL that assembled the content. Feed queries were doing work per request that could be done once, and were selecting columns nothing rendered. Tightening them and adding the indexes the access patterns actually implied moved more than any client-side change did.
Because I owned both ends, I could put each fix on the side that was cheaper. That is the part I could not have done in a frontend-only role.
03On reflection
I reached for a state library before I had exhausted what colocation and component boundaries could do. Some of what Zustand solved there was structural, and could have been solved by moving state closer to where it was read.