https://github.com/yakovkhalinsky/hackernews-ui

https://github.com/yakovkhalinsky/hackernews-ui

Last synced: 1 day ago
JSON representation

• Host: GitHub
• URL: https://github.com/yakovkhalinsky/hackernews-ui
• Owner: yakovkhalinsky
• Created: 2020-04-20T02:50:06.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T03:50:09.000Z (almost 2 years ago)
• Last Synced: 2024-10-12T23:54:40.802Z (about 1 month ago)
• Language: JavaScript
• Size: 791 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 8
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# hackernews-ui

## Requirements

- Node.js 12+ installed

## Setup

Install all dependencies

```

npm i

```

## Start in dev mode

```

npm run dev

```

Go to `http://localhost:3000` in your browser

## Build and start in production mode

```

npm run build

npm start

```

Go to `http://localhost:3000` in your browser

## Notes

Site is build with SSR using Next.js as the framework to handle bundling, routing as well as server side and client side compatability of the code.

A higher order component handles hydrating the redux store both on the server (initialise always) as well as hooking up the `Provider` to persist the redux store across routing handled in the client side after the first page load.

To allow both SSR and client side routing I've use the `next/link` component make routing consistent between server and browser.

### Routing

Routes are controlled through files setup in the `/pages` directory with `[foo]` denoting parameters.

The routes were setup with SEO friendliness in mind, so the `slug` part of the route is currently just generated and ignore on the page of that route.

#### Routes

- `/`

  - the root of the site which handles the index/home page

- `/[slug]/[itemId]`

  - details route which handles loading of the story item and it's top 20 comments

### Data

Data is handled with `redux`, which has been configure with `redux-thunk` in case asynchronous actions are required. But as the majority of asynchonous data fetching is properly handled in asynchronous functions during server rendering, asynchoronous fetching in the browser in this example is unnecessary, which provides some great opportunities for caching of the pages.

`getInitialProps` is the function that allows for this server side fetching and hydration of the `redux` store.