HackerPedia

Overview

HackerPedia is a modern, feature-rich Hacker News clone built with React while learning frontend development. This project fetches real-time data from the Hacker News API and delivers a seamless user experience with infinite scrolling, nested comments, and a beautiful dark mode—all without using any state management library like Redux.

Tech Stack

• React - UI framework with modern functional components
• React Hooks - State and lifecycle management (useState, useEffect, useCallback, useRef)
• Styled Components - CSS-in-JS with theming support
• Material-UI (MUI) - Layout components and design system
• React Router DOM - Client-side routing and navigation
• Axios - HTTP client for efficient API calls
• React Spinners - Beautiful loading animations
• Context API - Global theme management
• PWA - Progressive Web App capabilities

Key Features

Core Functionality

• Real-time Story Feed: Fetches and displays top stories from Hacker News API
• Infinite Scroll: Seamlessly loads more stories as you scroll down
• Story Metadata: View points, author, post time, and comment count for each story
• External Links: Direct links to original articles with domain preview

User Interface

• Dark Mode: Toggle between light and dark themes with persistent localStorage
• Responsive Design: Fully responsive layout that works on desktop, tablet, and mobile
• Loading States: Beautiful loading animations using react-spinners
• Clean UI: Modern, minimalist design inspired by Hacker News

Search & Discovery

• Live Search: Real-time search with debounced input for better performance
• Smart Filtering: Search across story titles, authors, and domains
• Search Results Counter: Shows the number of matching stories
• Clear Search: Quick clear button and ESC key support

Comment System

• Nested Comments: Fully recursive comment threads with proper indentation
• Comment Collapse/Expand: Collapse comment threads to focus on what matters
• HN-Style UI: Authentic Hacker News comment styling
• Deep Nesting Support: Handles deeply nested comments with smart indentation caps
• HTML Sanitization: Safe rendering of comment content
• No Authentication Required: View all comments without logging in

Technical Highlights

Smart Caching Strategy

The app implements an intelligent caching system to improve performance and reduce API calls:

• Cache Duration: 5 minutes TTL (Time To Live)
• Storage: localStorage for persistence across page reloads
• Capacity: 100 stories maximum, 40 comment threads maximum
• Benefits: Faster navigation, reduced API calls, better UX, no loading spinners for cached content

Performance Features

• React Hooks: Modern functional components with useState, useEffect, useCallback, useRef
• Styled Components: Theme-aware, scoped CSS-in-JS styling
• Efficient API Calls: Axios with error handling and caching
• Context API: Global theme management without Redux
• Smart Caching: localStorage-based caching with 5-minute TTL and LRU eviction

User Experience

Intuitive Workflow

1. Browse Stories: Scroll through the main feed of top stories from Hacker News
2. Search: Use the search bar to filter stories by title, author, or domain
3. Toggle Theme: Click the moon/sun icon in the navigation bar for dark mode
4. View Comments: Click on the comment count to view the full discussion
5. Collapse Comments: Click [−] to collapse a comment thread
6. Navigate: Use the back button or browser history to return to the main feed