An app which shows a list of the newest hackernews posts, in a charming way. Created using VanillaJS.
https://felipebernardes.github.io/hackernews-feed
- Better readability: it counts with a charming, better readable UI than the HN original feed.
- Real-time updates: if there's any new posts, it will pop up on top of the feed!
- Infinite Scroll: if you reach the bottom of the list, it will show older posts.
- Offline-friendly: if you're out of internet connection, it's ok: you can check previously fetch posts.
- Installable PWA: you can install it on your Android or iOS device!
- Fast, performatic, and accessible: we have the highest lighthouse benchmark scores for these KPIs.
npm i
npm start
- Unit tests (jest):
npm run test - Integration tests (cypress):
npm run cypress
- Webpack, for building & local development server
- Cypress, for integration tests
- Jest, for unit tests
- Eslint, for code hints & warnings
- Firebase, for accessing HackerNews API, which is built on top of it
- Sass, for CSS preprocessing
|--services
| |----realTimeDatabase.js
|
|--components
| |----feed.js
| |----infiniteScroll.js
| |----paginator.js
| |----postRenderer.js
|
|--main.js
- Sometimes, the newest post data isn't available in HN API right away;
- The API only offers the 500 newest items, so the feed/scroll isn't actually infinite;
- Infinite scroll is based on window scroll event, which needs to be optimized;
- Make possible to read stories & comments in-app, withtout the need to access HN original post;
- Add new feed tabs like 'popular', 'ask', and 'jobs';
- Background-load posts even if the user hasn't scrolled, so older posts can be shown when offline;