HackerPedia

Why I Built This

I was learning React and didn't want to build another todo app. I wanted a real API, real data, and enough UI complexity to actually push me - infinite scrolling, recursive comment threads, theming, caching. Hacker News checked every box. The API is public, the data is live, and the UI has genuine depth if you try to get the comment threading right.

Tech Stack

• React - UI framework with functional components and hooks
• Styled Components - CSS-in-JS with theming support
• Material-UI - Layout components
• React Router DOM - Client-side routing
• Axios - HTTP client
• Context API - Global theme management (no Redux)

Key Features

• Real-time feed - Fetches top stories from the Hacker News API with points, author, and comment count.
• Infinite scroll - Loads more stories as you scroll down, no pagination buttons.
• Nested comments - Fully recursive comment threads with proper indentation and collapse/expand.
• Dark mode - Toggle between light and dark themes, persisted in localStorage.
• Live search - Filter stories by title, author, or domain with debounced input.
• localStorage caching - Caches 100 stories and 40 comment threads with a 5-minute TTL. Cached content loads instantly.
• HTML sanitization - Comment content rendered safely.
• No authentication required - Read everything without logging in.

Why No Redux

The app manages story lists, comment threads, theme state, search filters, and cache invalidation. That sounds like a job for a state management library, but React's built-in tools handled all of it. useState and useEffect cover component state. useCallback and useRef handle performance. Context API manages the theme globally. Adding Redux would have meant more boilerplate for the same result.

What I Learned

The comment system was the hardest part. Hacker News comments are deeply nested and each one requires a separate API call. Getting recursive rendering, collapsible threads, and indentation caps to work together taught me more about React's rendering model than any tutorial. The caching layer was the second lesson - once I added localStorage with TTL-based expiry, navigation between pages felt instant, and API calls dropped significantly.