whitedg / nextjs-hackernews

A HackerNews clone built with Next.js and shadcn/ui.

Next.js HackerNews

This is a HackerNews clone built with Next.js and shadcn/ui.

Live Demo

Features

• Next.js App Router
• React Server Components (RSCs) and Suspense
• Server Actions for mutations
• Beautifully designed components from shadcn/ui
• Styling with Tailwind CSS
• Browse stories: Top, Newest, Best, Show, Ask, Jobs.
• Search for stories.
• User authentication: Create an account or log in using your Hacker News account to access personalized features.
• Mark stories as favorite.
• Upvote stories or comments.
• Add comments.
• View user profile: About, Submitted, Comments, Favorites, Upvoted(private).
• Responsive design: Friendly to both mobile and desktop.
• Automatic light/dark mode based on system settings.

Screenshots

Desktop

Mobile

Running Locally

Requires Node.js 18.17 or later.

0. Clone the project.

git clone https://github.com/WhiteDG/nextjs-hackernews.git

cd nextjs-hackernews

1. Install dependencies.

pnpm install

2. Copy .env.example to .env.local and update the variables.

cp .env.example .env.local

3. Run the development server with hot reload.

pnpm dev

4. Open http://localhost:3000 with your browser to see the result.

5. Build for production

pnpm run build

6. Serve in production mode

pnpm start

APIs

This project leverages the power of various APIs to provide an enriched user experience:

• HackerNews Official API
  • Get stories
  • Get comments
  • Get user profiles
• HackerNews Website
  • Login/create account
  • Add comments
  • Upvote
  • Favorite
  • Submitted, Comments, Favorites, Upvoted(private)
• HnAlgolia API
  • Search

License

Licensed under the MIT license.