Orange
A modern, read-only Hacker News reader. Built to show clean architecture, a custom design system and good UX.
Orange screenshot, 1600 x 1200
Scope
- Story lists: Top, New, Best, Ask, Show and Jobs
- Story page with the full comment tree, including polls
- User profiles and search
- Saved stories and read tracking, stored in the browser only
- Keyboard shortcuts, for example j/k navigation
- PWA and offline support
Decisions
- Every API request runs on the Next.js server, so the browser never calls Firebase or Algolia directly and first loads stay fast.
- Every response is parsed with Zod. One bad item never crashes a page.
- Light and dark themes as tokens, set before the first paint, so the wrong theme never flashes.
- Long comment threads are virtualized with TanStack Virtual.
Stack
- Next.js
- React
- TypeScript
- TanStack Query
- Zod
- Base UI
- CSS Modules
- TanStack Virtual
- Storybook