HN Feed

This project creates a more intuitive, user friendly UI for Hacker News, with the goal of increasing usage and participation.

Overview

HN Feed is designed to be a standalone front-end web-application, with built in PWA compatibility, as well as android and ios apps using Capacitor.

This project is structured as a monorepo containing:

• Frontend: React SPA with TypeScript and Vite (apps/client/)
• Shared: Common configurations and utilities (packages/shared/)

You can find a live demo at [https://hnfeed.pages.dev/]

Prerequisites

• Node.js: Version 18 or higher
• pnpm: Version 8 or higher (install with npm install -g pnpm)

Installation

1. Clone the repository:

   git clone <repository-url>
   cd hacker-news

2. Install dependencies for all workspaces:

   pnpm install

Available Commands

Development

• pnpm dev - Start both client and in development mode
• pnpm dev:client - Start only the React frontend (port 5173)

Building

• pnpm build - Build client

Code Quality

• pnpm lint - Run ESLint across all workspaces
• pnpm lint:fix - Fix auto-fixable ESLint issues
• pnpm format - Format code with Prettier

Testing

• Testing suite set up with vitest
• pnpm test - Run tests across all workspaces

Project Structure

hacker-news/
├── apps/
│ ├── client/ # React frontend (@hacker-news/client)
│ │ ├── src/
│ │ ├── package.json
│ │ └── vite.config.ts
│ └── server/ # Express backend (@hacker-news/server)
│ ├── server.ts
│ └── package.json
├── packages/
│ └── shared/ # Shared configurations
│ ├── eslint/ # ESLint configurations
│ ├── prettier/ # Prettier configuration
│ └── tsconfig/ # TypeScript configurations
├── package.json # Root package.json with workspace scripts
├── pnpm-workspace.yaml # pnpm workspace configuration
└── README.md

Technology Stack

Frontend

• React - UI library
• TypeScript - Type safety
• Vite - Build tool and dev server
• TanStack Router - Client-side routing
• Vitest - Testing framework

Backend

The project is front-end only currently, but the monorepo structure is designed to easily slot in a backend in future if needed.

Development Tools

• pnpm - Package manager with workspace support
• ESLint - Code linting
• Prettier - Code formatting
• TypeScript - Static type checking

Workspace Configuration

The project uses pnpm workspaces with shared configurations:

• TypeScript: Base, React, and Node.js specific configurations
• ESLint: Shared rules for consistent code style
• Prettier: Unified formatting across all packages

Each app has its own package.json but inherits shared configurations from the packages/shared/ directory.

License

Copyright 2025 James Johns. All rights reserved.