A Modern Hacker News Experience
Project Presentation · Agent Product Team
March 2026 · Presented by Steve (PM)
Hacker News hasn't meaningfully changed since 2007.
📐 Table-based layout with zero visual hierarchy
👆 Tiny tap targets hostile to mobile browsing
📱 No responsive design — same layout on every screen
🧠 Power users have Stockholm syndrome. Everyone else bounces.
We're building a modern, read-only frontend that reimagines
the HN experience while respecting its mental model.
| User Type | Description | Key Needs |
|---|---|---|
| Daily HN Reader | Checks HN 3-10x/day | Fast scanning, clear hierarchy |
| Casual Browser | Visits via shared links | Intuitive nav, no learning curve |
| Mobile-First Reader | Browses on phone during commute | Touch-friendly, responsive, fast |
✅ HN's information architecture can be reskinned without losing usability
✅ A 6-page React SPA exercises real architectural & design complexity
✅ Mock data with relational structure (stories ↔ users ↔ comments) enables realistic cross-page navigation
✅ An autonomous agent team can ship a complete product end-to-end
V1 scope: multi-page web app, client-side routing, mock data only — no backend
Top, New, Best, Ask HN, Show HN — tab-based switching with URL-driven state
Full story header + nested comment tree (4+ levels deep with color-coded depth)
Username, karma, bio + tabbed view of submissions & comments
Link/Ask toggle, client-side validation, live StoryCard preview
URL-driven query params, filter by type/date/points, story + comment results
Save stories via localStorage, dedicated page with empty state & remove action
Stories + Comments — The core HN flow. Proper routing, URL state, breadcrumbs.
User Profile — Second entity type, cross-linking navigation, different layout pattern.
Submit — Form page in a feed app. Exercises validation, form design, different interaction model.
Search — URL query params, filter controls, connects to every other page.
Bookmarks — Only feature with persistent client-side state (localStorage). Spans multiple pages.
Each page adds unique architectural complexity — not padding.
1. Browse → Read → Explore
Home → Story → Comment author → User profile → Their submission → Story detail
2. Search → Discover → Save
Search bar → Results → Filter by points → Click story → Bookmark it
3. Submit → Preview → Browse
Submit page → Fill form → Live preview → "Submit" → Toast → Home
4. Curate → Revisit
Browse → Bookmark several → /bookmarks → Click saved story → Read
5. Filter by Type
Home → "Ask HN" tab → Thread → "Show HN" tab → Different stories
🧭 Sticky header — Logo, story tabs, search, bookmarks badge, submit link
📱 Responsive layout — 375px (iPhone SE) through 1440px desktop
🔙 Browser history — Back/forward works across all routes
⚡ Page transitions — Subtle CSS fade between routes (200ms)
👆 Touch targets — Minimum 44×44px on all interactive elements
🚫 404 page — Styled catch-all with navigation back home
1. Scannable over decorative — Content density is a feature. Visual hierarchy accelerates scanning, not slows it down.
2. Warm neutrality — Cream, soft orange accents as a nod to HN's identity. Modern contrast, not cold/corporate.
3. Generous touch, tight grid — 44px+ tap targets, breathable spacing, but information-dense on desktop.
4. Progressive disclosure — Essential info first. Comments collapse, metadata is secondary.
5. System-native feel — Native font stack, feels like a well-built tool — not a marketing site.
--color-primary #FF6600
--color-secondary #6366F1
--color-background #FAFAF8
--color-text-primary #1A1A1A
Inter + system font stack
15px base · 18px titles · 24px headings
4px → 48px spacing scale (8 tokens)
6px buttons · 10px cards · 16px modals
L0 — Orange
L1 — Indigo
L2 — Cyan
L3 — Purple
| Component | Purpose | Variants |
|---|---|---|
| Header | Global nav — logo, tabs, search, bookmarks, submit | desktop / compact |
| StoryCard | Story in list views — title, domain, metadata | default / ask / show |
| CommentTree | Recursive nested comments with depth colors | — |
| Comment | Single comment with author, time, collapse | default / op |
| StoryForm | Submit form with validation + live preview | link / ask |
| FilterBar | Search filters — type, sort, date | — |
| Toast | Temporary notifications | success / error / info |
| EmptyState | No content placeholder | bookmarks / search |
All components spec'd with responsive behavior, states, and acceptance criteria
🚀 Zero runtime cost — styles resolved at build time, no JS overhead
🔒 Scoped by default — no naming conflicts, no BEM gymnastics
🎨 Design tokens as CSS custom properties — Natasha defines tokens in variables.css, components consume them naturally
📦 Co-located files — Header.jsx + Header.module.css live together
🧹 Clean JSX — no utility class clutter like Tailwind
Alternatives considered: Tailwind (config overhead), styled-components (runtime cost), vanilla CSS (naming conflicts)
| Layer | Choice | Why |
|---|---|---|
| Framework | React 18 | Mandated, stable, well-understood |
| Routing | React Router v6 | Nested routes, URL params, query strings |
| Styling | CSS Modules | Zero runtime, scoped, clean JSX |
| Build | Vite 5 | Fast HMR, zero-config, modern ESM |
| State | Context + useReducer | Sufficient for bookmarks — no Redux needed |
| Data | Static JS modules | Relational mock data, easy API swap later |
| Icons | Lucide React | Lightweight, tree-shakable |
✅ All 5 user flows tested end-to-end
✅ Responsive layout verified on mobile + desktop
✅ Design system tokens correctly applied throughout
✅ Clean build — 291KB JS, 20KB CSS
⚠️ 4 minor issues: file organization deviations (functionality intact)
Fully autonomous agent pipeline · Single sprint · Zero human code
HN Redesign — v1 Complete
7 pages · 45/48 spec items · 0 critical issues · 🟢 PASS
Agent Product Team · March 2026