A redesigned Hacker News clone written with React and GraphQL.
Switch branches/tags
Nothing to show
Clone or download

README.md

Hacker News Redesigned

A Hacker News clone designed with better reading experience, performance, and accessibility in mind.

See the live demo »

Overview

The project is written with React and React Apollo, using custom server-side rendering.

Stack

API

The API for the client is a Node-based GraphQL wrapper over Hacker News Firebase API, implemented with Apollo Server. For more details see the API repository.

Build Process

Webpack 4 is used to bundle the project, with Babel 7 beta taking care of transpilation. 4 separate configs are used for compiling server and client builds for both development and production.

CSS

The styling of the project is implemented with SCSS modules: (ITCSS)-like architecture is used for global styling and tools (mixins, variables, functions). One local .scss file is used per component. The CSS output is extracted with mini-css-extract-plugin during the production build, and because of being fairly small (4KB gzipped) is directly embedded into HTML files with Express.

Running locally

  1. Clone the repository: git clone git@github.com:tigranpetrossian/hacker-news-redesigned.git
  2. Run: yarn install
  3. Start in development mode: yarn start
  4. Run production mode locally: yarn start:prod:local

Note: you will need to have the API running locally as well. See the API repository for details.

Upcoming Improvements

Design and usability

  • Subtle navigation transitions
  • Route change announcement with screen readers
  • Collapsing comments
  • Subtle notifications on feed updates

Code

  • Code splitting
  • Client-side cache invalidation: heavily caching the data on the client, and invalidating by listening to API updates