Yibu 一步 — Social Platform

The idea

Yibu ("one step") is a microblogging platform: post a thought, follow people, scroll a timeline. The familiar grammar — because the point is the product work around it, not the format.

A feed is a pipeline

The feed is not a component, it is a pipeline: fetch → normalize → sort → virtualize. Every post is a typed Post record, the timeline is an infinite scroll over a cursor, and only visible rows are mounted as DOM nodes.

type FeedRequest = { cursor: string | null; tab: 'for-you' | 'following' };
type FeedResponse = { posts: Post[]; nextCursor: string | null };

// The tab is part of the query key — switching tabs refetches,
// not recomputes.
queryKey: ['feed', tab, cursor],

Dark-first, deliberately

The default theme is dark. Every card, badge, and input was specced in dark mode first; light mode is the accent. The premium upsell card is deliberately inverted — one white surface in a black feed pulls the eye exactly once.

The split-screen login

The sign-in page is two panels: the brand story on black, the form on white. It was the first place I put real design intent — and the last place I'd cut it. Login flows are a portfolio's most-read page; they deserve the budget.

The idea

Yibu ("one step") is a microblogging platform: post a thought, follow people, scroll a timeline. The familiar grammar — because the point is the product work around it, not the format.

A feed is a pipeline

type FeedRequest = { cursor: string | null; tab: 'for-you' | 'following' };
type FeedResponse = { posts: Post[]; nextCursor: string | null };

// The tab is part of the query key — switching tabs refetches,
// not recomputes.
queryKey: ['feed', tab, cursor],