Feedcrumb — Product & Systems Architecture

CTX-01

Context

RSS looks simple until different sources expose incompatible structures and article content has to be extracted reliably.

PRB-01

Problem

XML variants, malformed HTML, full-text versus summary feeds and rendering hundreds of entries require one controlled ingestion pipeline.

ROL-01

My role

Product architecture
Feed processing system
Frontend / backend

SOL-01

Solution

I split fetching, parsing, normalization, Readability extraction, sanitization and persistence into explicit stages to make ingestion deterministic.

BLD-01

What was built

RSS / Atom ingestion and XML normalization
Article extraction and readable-content generation
HTML sanitization and HTML → Markdown conversion
Bookmarks and source management
Virtualized large feed lists
PWA foundation

ARC-01

System architecture

Content pipeline

RSS / Atom
XML Parser
Normalization
Mozilla Readability
sanitize-html
Reader
Supabase

STK-01

Technical stack

Frontend

React 19 · TypeScript · TanStack Start · TanStack Router · TanStack Query · Tailwind CSS 4 · TanStack Virtual

Backend / Data

Supabase

Content processing

Mozilla Readability · fast-xml-parser · rss-parser · sanitize-html · Turndown

Platform

PWA

DEC-01

Important engineering decisions

Never expose raw parser output to the UI; normalize into a shared entry model
Make sanitization mandatory before the render layer
Bound DOM growth with virtualization for large lists

CODE-01

Code / architecture excerpts

Ingestion pipelineTS

01const article = await pipe(
02  fetchFeed,
03  parseXml,
04  normalizeEntry,
05  extractArticle,
06  sanitizeContent,
07  persistArticle,
08)(source);

FLOW-01

Data flow

Feed flow

Feed URL
Fetch
Parse
Normalize
Extract
Sanitize
Persist
Virtualized reader

OUT-01

Result / current state

Feedcrumb currently tests ingestion, reading, bookmarks and PWA behavior as one experimental product flow.

LRN-01

Engineering takeaways

In content products, normalization can matter more than the interface.
Explicit pipeline stages make failures easier to trace to their source.

OUT-LIVE / Visit product

Feedcrumb

Visit product