Hackernews in Nextjs

This is a project I created out of my own interest to learn more about Nextjs app router, React Server Components and styling with tailwindcss and shadcn. I have also challenged myself to make the website responsive on mobile as well. The web app is currently deployed on vercel.

Tech stack used

• Next.js 14 with Typescript
• tailwindcss
• shadcn
• zod

Running locally

The usual way

git clone https://github.com/WilsonOh/hackernews-next.git
npm i
npm run dev

Docker

git clone https://github.com/WilsonOh/hackernews-next.git
docker build -t <your image name>:<your tag> .
docker run -p 3000:3000 -d <your image name>:<your tag>

Screenshots

Desktop

Mobile

Features

• Dark/Light mode toggle
• Infinite/Paginated view toggle
• Mobile-first design

Roadmap

• Pages for each stories category (best, new, job etc.)
• Card view of items for each stories page with pagination
• Item page with collapsible comments
• Mobile responsive view for stories page and item page
• Go between sibling/parent/root nodes in the comments (similar to the original hackernews website)
• Sorting of stories by score, number of comments, date created etc.
• Filtering of stories by score, date created, date range etc.
• Implement bookmarking of items using local storage (probably not gonna use/host a DB for this)

Not going to do (probably)

• Implement the user page
• Implement search
• Anything that requires authentication like logging in, voting, posting etc. (since there's no official API support) Still might do this in the future with NextAuth though

Credits

• Hackernews API
• This project for inspiring me to do a hackernews clone using Next.js
• Harmonic-HN for inspiration for the UI