Hacker News Redesigned
A Hacker News clone designed with better reading experience, performance, and accessibility in mind.
Overview
The project is written with React and React Apollo, using custom server-side rendering.
Stack
- React – client-side logic
- React Apollo – GraphQL client
- React Router – handling routes
- React Helmet –
<head>tags management - webpack 4 – bundling and building
- Babel 7 – transpiling JavaScript
- Node.js & Express – server rendering
- NGINX – reverse proxy over Express for enabling HTTP/2, serving & caching static assets.
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
- Clone the repository:
git clone [email protected]:tigranpetrossian/hacker-news-redesigned.git - Run:
yarn install - Start in development mode:
yarn start - 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