rocktimsaikia / hackernews-redesign

minimal hacker news client built with Next.js and TailwindCSS

🚀 Hackernews Redesign v2

A minimal looking hackernews client built with Next.js and TailwindCSS.
This is v2 of the original redesign that I did 2 years ago.

✨ Techstack

• Next.js - Framework
• TailwindCSS - Styling
• Framer motion - Animation
• SWR - Data fetching

⚡ About

I originally did a HN redesign 2 years ago (Hackernews Redesign v1) which was my first react project. But recently I thought of redesigning the same application with Next.js. So I did. .

I am not using the official HN API because it is very poorly designed which makes it very slow and not practical. I built a custom HN api only for this application. And to get the comments of a post, I am using Algolia's hn API.

Support

You can support me and my work right here :

License

MIT 2021 © Rocktim Saikia

hackernews-redesign's Issues

Design request if possible

Hi @rocktimsaikia,
The site looks neat and minimal, nice work. I really like the design.

This is what I thought could be improved, the position of the items in a row.
For example

In this row, I get headline right off the bat which is epic, but to get the author/site/... and other meta information, I have to look till the end of the row. This might be fine for first few rows but when you start going to the mid of the table you start track which row you are trying to view the information for.

This the solution I thought of

if you notice has all the information contained in one place, the end user doesn't have the burden to go through the whole row to get relevant pieces of information.
This is old reddit post format

I am interested in contributing on this, if you feel this is an valid feature

Anyways, nice redesign and keep up the effort 👍

Horizontal scroll appearing in few pages

Thank you for sharing your work. It's great looking. Coming to the issue, sometimes it's creating a horizontal scroll(in chrome Android)

for example here https://hn-redesign.vercel.app/items/26872904

Seed initial data to SWR for the dynamic pages

Seed initial data to SWR for the dynamic pages. (ie, pages/items/[id].jsx) .
It can be done using a combination of getStaticPaths and getStaticProps. It also needs all the ids of the posts showing on the pages.