Skip to content
career_db

← 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.

record7 fields
slug
metdaan
kind
Digital media publication
year
2023 — 2024
role
Software engineer
stack
Next.js, TypeScript, Sass, Zustand, Python, SQL
repo
NULL
Fig. 01 — schematic
Narrowing the re-render scope of a feed updateBefore: one store change re-renders every item in the feed. After: a narrow selector re-renders only the item that changed.BEFORE — ONE STORE CHANGE, EVERY ITEM RE-RENDERSfeed126 / 126AFTER — NARROW SELECTOR, ONLY THE CHANGED ITEMfeed1 / 126SCOPE OF A SINGLE UPDATE — SCHEMATIC
Narrow store selectors reduce a feed update from re-rendering every item to re-rendering only the one that changed.

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.

next row

Innovemia Academy

Education platform

Back to table