HN Reader

A modern, clean interface for reading Hacker News stories. Built with Next.js 15, Tailwind CSS, and shadcn/ui.

Features

• 🎨 Modern, clean UI inspired by Notion/Typora
• 🌓 Dark mode support
• 📱 Fully responsive design
• ⚡ Server-side rendering for optimal performance
• 🔄 Real-time data from Hacker News API
• 💬 Nested comments with collapsible threads
• 🔍 Sort comments by time or number of replies
• 📄 Pagination support
• ⚡ Optimistic loading states
• 🔄 Automatic retries for failed requests

Tech Stack

• Next.js 15+ - React framework
• Tailwind CSS - Styling
• shadcn/ui - UI components
• TypeScript - Type safety
• date-fns - Date formatting
• Hacker News API - Data source

Getting Started

1. Clone the repository:

   git clone https://github.com/lewislovelock/hnreader.git
   cd hnreader

2. Install dependencies:

   npm install

3. Run the development server:

   npm run dev

4. Open http://localhost:3000 with your browser.

Project Structure

src/
├── app/                    # Next.js app directory
│   ├── page.tsx           # Home page (top stories)
│   ├── new/              # New stories
│   ├── ask/              # Ask HN
│   ├── show/             # Show HN
│   ├── jobs/             # Jobs
│   └── item/[id]/        # Story detail pages
├── components/            # React components
│   ├── comment.tsx       # Comment component
│   ├── comment-list.tsx  # Comment list with sorting
│   ├── header.tsx        # Navigation header
│   ├── story-item.tsx    # Story card component
│   └── story-list.tsx    # Story list with pagination
└── lib/                  # Utilities and API
    └── hn/               # Hacker News API integration

Features in Detail

Story Lists

• View top, new, ask, show, and job stories
• Pagination with 30 items per page
• Clean card layout with essential information

Story Detail

• Full story content with external links
• Nested comments with collapsible threads
• Comment sorting by time or number of replies
• Lazy loading of comment replies

UI/UX

• Dark mode support with system preference detection
• Loading states with skeleton placeholders
• Error handling with retry options
• Responsive design for all screen sizes

Roadmap

• Performance Optimization

  • Implement virtual scrolling for long lists
  • Add service worker for offline support
  • Optimize image loading and caching

• Feature Enhancements

  • Add search functionality
  • Implement user profiles
  • Add story bookmarking
  • Support for multiple languages

• Developer Experience

  • Add comprehensive testing
  • Improve error handling
  • Add performance monitoring
  • Enhance documentation

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Hacker News for the API
• Next.js team for the amazing framework
• shadcn for the beautiful UI components
• Vercel for the hosting platform