H4ckernews

A beautiful hackernews client build with NextJS and Tailwind CSS.

View App · Report Bug · Request Feature

About The Project

H4ckernews is a Hackernews client app inspired by the HNPWA project and an attempt to make hackernews more beautiful by enriching stories with preview images and descriptions.

Build With

• React
• Next.js
• Tailwind CSS
• Storybook
• Recoil State Management
• Vercel Serverless Functions
• Cheerio
• Quicklink
• Headroom.js
• mongoose
• InversifyJS

Features

Metadata

Each story is enriched with a preview image and a description. If no open graph meta tags are provided, several fallback strategies are used to make sure every story has an image.

Note: The code has been moved to a separate npm package (page-meta-scraper).

Database

H4ckernews uses a MongoDB to store stories. The newest stories can be loaded with a cron job scheduler using the endpoint /api/stories/[type]/refresh.

Link Prefetching

External links are prefetched on hover using quicklink.

Installable PWA

The app is a PWA and can be installed.

Infinite Scroll

More stories are loaded when scrolling to the bottom of the page.

Development

Installation

Clone the repository:

https://github.com/olerichter00/h4ckernews.git

Provide environment variables:

cp .env.example .env.local

Install dependencies:

yarn install

Run the project:

yarn dev

Testing

Run Tests with jest:

yarn test
yarn test:watch

Code Style

Run prettier:

yarn lint
yarn lint:fix

Deploy

Create the project with Vercel:

Deploy on staging:

yarn deploy:staging

Deploy on production:

yarn deploy