03project
umediagram
An Instagram-style media sharing application: feeds, posts and social interactions built with Next.js.
- Year
- 2024
- Type
- Open source
- Tech stack
- Next.jsTypeScript
About the project
umediagram recreates the core of a media social network — feeds, posts and interactions — to explore data modeling and optimistic UI patterns in Next.js.
Gallery
- 01
The challenge
Media feeds punish lazy engineering: heavy images, infinite scroll and social interactions make both performance and data modeling genuinely hard.
- 02
The solution
Next.js SSR for first paint and SEO, cursor-based pagination for the feed, optimistic updates for likes and follows, and image optimization throughout.
- 03
The result
An Instagram-style experience that stays smooth deep into the feed — and a reference implementation I reuse for content-heavy client work.
Key features
- 01Infinite feedCursor pagination and virtualized rendering keep scrolling smooth at any depth.
- 02Optimistic UILikes and follows respond instantly, reconciling with the server in the background.
- 03SSR-firstPosts render on the server — sharable, crawlable and fast on slow devices.
My role
- Full-stack: data model to UI
- Performance and SEO patterns testbed
- Next.js + TypeScript throughout
Related service
Performance, SSR & SEOMore projects
Build something similar
↗cloud-os
2026An experimental web-based cloud operating system — a desktop-like environment running in the browser.
PHPJavaScript
↗nextjs-fullstack-template
2026A production-ready full-stack Next.js starter with TypeScript — the boilerplate I reuse to ship new products fast.
Next.jsTypeScript