Hacker News Redesigned
A Hacker News clone designed with better reading experience, performance, and accessibility in mind.
- React – client-side logic
- React Apollo – GraphQL client
- React Router – handling routes
- React Helmet –
- webpack 4 – bundling and building
- Node.js & Express – server rendering
- NGINX – reverse proxy over Express for enabling HTTP/2, serving & caching static assets.
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.
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.
- Clone the repository:
git clone email@example.com:tigranpetrossian/hacker-news-redesigned.git
- Start in development mode:
- Run production mode locally:
Note: you will need to have the API running locally as well. See the API repository for details.
Design and usability
- Subtle navigation transitions
- Route change announcement with screen readers
- Collapsing comments
- Subtle notifications on feed updates
- Code splitting
- Client-side cache invalidation: heavily caching the data on the client, and invalidating by listening to API updates