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

Introduction

Next.js Hackernews is an open-source hackernews clone written in TypeScript and built with Next.js and shadcn/ui.

• Utilizes the latest Next.js features, including App Router, RSC, and Server Action.
• With a stunning UI powered by shadcn/ui, it seamlessly adapts to both desktop and mobile environments, providing an exceptional user experience.
• Data is retrieved from various sources, including the official API](https://github.com/HackerNews/API), official website, and HnAlgolia API.
• Feel free to explore a 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.

• Clone the project.

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

cd nextjs-hackernews

• Install dependencies.

pnpm install

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

cp .env.example .env.local

• Run the development server with hot reload.

pnpm dev

• Open http://localhost:3000 with your browser to see the result.
• Build for production

pnpm run build

• Serve in production mode

pnpm start

For more information, see: https://github.com/WhiteDG/nextjs-hackernews

Comments

[JameyHenry]

Exciting to see a HackerNews clone leveraging Next.js and shadcn/ui for a modern and interactive user experience!
Fairplay