# hn

**Repository Path**: mirrors_WebReflection/hn

## Basic Information

- **Project Name**: hn
- **Description**: Isomorphic Hacker News
- **Primary Language**: Unknown
- **License**: ISC
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-08-19
- **Last Updated**: 2026-01-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Isomorphic Hacker News

<sup>**Social Media Photo by [AbsolutVision](https://unsplash.com/@freegraphictoday) on [Unsplash](https://unsplash.com/)**</sup>

- - -

### [Live static site](https://webreflection.github.io/hn/top/?1).

- - -

The goal of this project is to showcase a 100% isomorphic version of the famous [Hacker News PWA](https://hnpwa.com/), through my tiny [µhtml](https://github.com/WebReflection/uhtml#readme) and [µcontent](https://github.com/WebReflection/ucontent#readme) libraries, able to produce a fully static, yet _SSR_ ready, Hacker News reader.

### Achievements Unlocked

  * this _PWA_ works on a 100% static host
  * this _PWA_ could be pre-rendered via _SSR_ too
  * the client renders everything incrementally
  * the server renders everything with, or without, _JS_
  * both client and server share exactly the [same view](https://github.com/WebReflection/hn/blob/master/client/%40/js/view.js)
  * both client and server share exactly the [same controller](https://github.com/WebReflection/hn/blob/master/client/%40/js/hn.js)
  * both client and server logic is route based, meaning each _URL_ can be shared
  * no bundlers whatsoever are involved, everything is standards based
  * _Lighthouse_ scores ~100% on a _GitHub_ hosted static site

### Extra Details

All you need to do, in order to test this project locally, is the following:

```sh
git clone https://github.com/WebReflection/hn.git
cd hn
npm i
npm test
# npm run test:ssr # for SSR
```

The client side part is within the [client/@/](./client/@/) folder, while the server side part is within the [server/](./server/) folder.

The reason to choose a `@` as folder prefix, is to have a portable pattern that would never interfere with the name of any other possible folder.

As example, the _SSR_ part uses those folders indexes to render each page, but the structure is fully compatible with a static host too.

The client side is served either through [µcdn](https://github.com/WebReflection/ucdn#readme), or pre-built via [µcompress](https://github.com/WebReflection/ucompress#readme), after a npm run build command.

To keep it simple, I have also targeted the docs folder, instead of public, simply to be able to tell _GitHub_ to publish this Web App via such folder.

I hope this project will inspire new, as well as old, Web developers, as it's definitively something anyone could do without needing to move away from plain Web standards 🎉