Diego
← Back to projects

Hacker News Plus

Hacker News web client — React + TypeScript, consuming two public APIs.

  • React 18
  • TypeScript
  • Vite
  • React Router DOM v6
  • Axios
  • Bootstrap 5
  • React Bootstrap
  • Phosphor Icons
  • date-fns
  • DOMPurify
GitHub

Full-screen for best quality.

Context

HackerNewsPlus is a web client for Hacker News consuming two public APIs. Users browse the front page, recent posts, search by title, view story comments and access any author’s profile. Full dark mode interface built with Bootstrap 5.

Technical decisions

DOMPurify for external HTML sanitization

The HN API returns comments and user “about” fields as raw HTML generated by third parties. Before any dangerouslySetInnerHTML, content goes through DOMPurify.sanitize(). Without this, any HN user could inject scripts running in the client’s context.

Two distinct APIs for distinct domains

Posts, comments and search use the Algolia HN Search API — with native pagination, full-text search and tag filters. User profiles use the official Firebase HN API, the only source exposing karma and about. Splitting calls by responsibility avoids workarounds for data one API doesn’t have.