https://github.com/imteekay/hackernews
Hackernews UI
https://github.com/imteekay/hackernews
Last synced: 10 months ago
JSON representation
Hackernews UI
- Host: GitHub
- URL: https://github.com/imteekay/hackernews
- Owner: imteekay
- Created: 2021-08-25T21:45:36.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-10-09T01:23:01.000Z (over 4 years ago)
- Last Synced: 2025-03-28T20:55:31.478Z (10 months ago)
- Language: TypeScript
- Homepage: https://hackernews-five.vercel.app
- Size: 286 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Hackernews
Running the dev server:
```bash
yarn dev
```
## Tech Stack
- NextJS
- JavaScript
- TypeScript
- Hooks
- Prettier
- ESLint
## Architecture
The Hackernews page is located in the `index.tsx` file. And all of the components are in the `HackerNews` folder.
The main components (`Story`, `StoriesList`, and `LoadMoreButton`) are located in the `HackerNews` folder's root. All the smaller components are in the `components` folder. The `hooks` and TypeScript `types` are separated on its own folders.
To handle the data fetching, I created a first hook (`useTopStories`) to request the `topstories` that returns the top 100 stories from hackernews API. With this array of "ids", I request 6 by 6 the `item` endpoint with another hook (`useTopStoriesInfo`). The hook uses a `page` state to request 6 by 6 and provides a `fetchNextPage` function to add in the button `onClick` listener.
At first, I decided to use no css-in-js framework, so all of the styles are in the `style` prop for each component.
## Implementation History
- [Setup](https://github.com/leandrotk/hackernews/pull/1)
- [Fetch & List top stories](https://github.com/leandrotk/hackernews/pull/2)
- [Infinite Scroll to load more buttons on demand](https://github.com/leandrotk/hackernews/pull/3)
- [Refactoring: extracting components](https://github.com/leandrotk/hackernews/pull/4)
- [Style the list](https://github.com/leandrotk/hackernews/pull/5)
- [Loading Spinner](https://github.com/leandrotk/hackernews/pull/6)