Diego
← Voltar para projetos

Hacker News Plus

Cliente web para o Hacker News — React + TypeScript, consumindo duas APIs públicas.

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

Full-screen para maior qualidade.

Contexto

HackerNewsPlus é um cliente web para o Hacker News que consome duas APIs públicas. O usuário navega pelos posts do front page, posts mais recentes, busca por título, visualiza comentários de uma story e acessa o perfil de qualquer autor. Interface full dark mode construída com Bootstrap 5.

Decisões técnicas

DOMPurify para sanitização de HTML externo

A HN API retorna comentários e o campo “about” dos usuários como HTML bruto gerado por terceiros. Antes de qualquer dangerouslySetInnerHTML, o conteúdo passa por DOMPurify.sanitize(). Sem isso, qualquer usuário do HN poderia injetar scripts que rodariam no contexto do cliente.

Duas APIs distintas para domínios distintos

Posts, comentários e busca usam a Algolia HN Search API — que tem suporte nativo a paginação, full-text search e filtros por tag. Perfis de usuário usam a Firebase HN API oficial, única fonte que expõe karma e about. Separar as chamadas por responsabilidade evita workarounds para buscar dados que uma API não tem.