https://github.com/devbyray/hackernews-clone
A fully functional HackerNews clone built with Vue 3, Tailwind CSS, Vitest, and Storybook. Features 7 tested components, 46 unit tests, and real HN API integration.
https://github.com/devbyray/hackernews-clone
Last synced: 1 day ago
JSON representation
A fully functional HackerNews clone built with Vue 3, Tailwind CSS, Vitest, and Storybook. Features 7 tested components, 46 unit tests, and real HN API integration.
- Host: GitHub
- URL: https://github.com/devbyray/hackernews-clone
- Owner: devbyray
- Created: 2026-01-30T20:16:24.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2026-01-30T22:03:37.000Z (4 months ago)
- Last Synced: 2026-01-31T12:37:51.947Z (4 months ago)
- Language: JavaScript
- Homepage: https://hackernews-clone-demo.vercel.app/
- Size: 1.02 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ๐๏ธ HackerNews Clone
A fully functional, read-only HackerNews clone built from scratch with Vue 3, featuring comprehensive testing and documentation.
[]()
[]()
[]()
## โจ Features
- ๐ฐ **Browse Top Stories** - Real-time top 30 stories from HackerNews
- ๐ฌ **Nested Comments** - Recursive comment threads with collapse/expand
- ๐จ **Responsive Design** - Beautiful UI with Tailwind CSS v4
- ๐งช **Fully Tested** - 62 unit tests (56 passing)
- ๐ **Documented** - Storybook stories for all components
- โก **Fast & Modern** - Built with Vite and Vue 3 Composition API
- โฟ **Accessible** - Semantic HTML and ARIA attributes
- ๐ง **Reusable Components** - Button and Input components for consistency
## ๏ฟฝ Design
Built from a community Figma design:
- **[HackerNews Website Redesign](https://www.figma.com/design/nZYxyHjSmGpgACq6qC4Wq6/HackerNews-Website-Redesign--Community-?node-id=19-1250&t=UCkFgUKMUAWa1SPp-4)** - Modern redesign with orange branding
## ๏ฟฝ๐ฏ Live Demo
Run locally in 2 minutes:
```bash
npm install
npm run dev
```
Visit: http://localhost:5173
## ๐๏ธ Tech Stack
| Technology | Purpose |
| ------------------- | ------------------------------ |
| **Vue 3** | UI Framework (Composition API) |
| **Vue Router** | Client-side routing |
| **Tailwind CSS v4** | Utility-first styling |
| **Vitest** | Unit testing framework |
| **Storybook** | Component documentation |
| **Vite** | Build tool & dev server |
| **HackerNews API** | Real data integration |
## ๐ Getting Started
### Prerequisites
- Node.js 18+ and npm
### Installation
```bash
# Install dependencies
npm install
# Start development server
npm run dev
```
Visit **http://localhost:5173** to see the app!
### Quick Commands
```bash
# Development
npm run dev # Start dev server
# Testing
npm test # Run all tests
npm test -- --watch # Run tests in watch mode
npm run coverage # Generate coverage report
# Storybook
npm run storybook # Start Storybook on port 6006
# Production
npm run build # Build for production
npm run preview # Preview production build
```
## ๐ฆ Project Structure
```
src/
โโโ components/ # 11 components (organized in folders)
โ โโโ Button/
โ โ โโโ Button.vue
โ โ โโโ Button.test.js
โ โ โโโ Button.stories.js
โ โโโ Input/
โ โ โโโ Input.vue
โ โ โโโ Input.test.js
โ โ โโโ Input.stories.js
โ โโโ Header/
โ โ โโโ Header.vue
โ โ โโโ Header.test.js
โ โ โโโ Header.stories.js
โ โโโ Footer/
โ โ โโโ Footer.vue
โ โ โโโ Footer.stories.js
โ โโโ LoadingSpinner/
โ โโโ ErrorMessage/
โ โโโ StoryItem/
โ โโโ StoryList/
โ โโโ CommentItem/
โ โโโ CommentList/
โ โโโ ReadingList/
โโโ pages/ # Application pages
โ โโโ HomePage.vue
โ โโโ StoryDetailPage.vue
โโโ router/ # Vue Router configuration
โโโ services/ # HackerNews API service
โโโ style.css # Tailwind CSS v4
```
## ๐งฉ Components
All 11 components are organized in individual folders with tests and documentation:
| Component | Purpose | Tests | Stories |
| ------------------ | ----------------------------- | ----- | ------- |
| **Button** | Reusable button (4 variants) | 8 | 8 |
| **Input** | Reusable input (5 types) | 8 | 6 |
| **Header** | Navigation header | 3 | 1 |
| **Footer** | Footer with newsletter signup | - | 1 |
| **LoadingSpinner** | Loading indicator | 6 | 5 |
| **ErrorMessage** | Error display | 8 | 5 |
| **StoryItem** | Individual story card | 7 | 5 |
| **StoryList** | List of stories | 6 | 5 |
| **CommentItem** | Recursive comment | 8 | 5 |
| **CommentList** | Comment container | 8 | 5 |
| **ReadingList** | Reading list display | - | 1 |
**Total: 62 tests (56 passing), 47 Storybook stories**
See [COMPONENTS.md](./COMPONENTS.md) for detailed documentation.
## ๐งช Testing
All components have comprehensive unit tests:
```bash
npm test -- --run
```
**Results:**
- โ
9 test files
- โ
56 tests passing (62 total)
- โ
Comprehensive component coverage
- ๐ฏ New Button and Input components: 16/16 tests passing
## ๐ Documentation
- **[QUICKSTART.md](./QUICKSTART.md)** - Get started in 2 minutes
- **[COMPONENTS.md](./COMPONENTS.md)** - Detailed component documentation
- **[PROJECT-SUMMARY.md](./PROJECT-SUMMARY.md)** - Complete project overview
- **Storybook** - Interactive component examples (run `npm run storybook`)
## ๐ API Integration
Uses the official [HackerNews Firebase API](https://github.com/HackerNews/API):
- **Top Stories:** `/v0/topstories.json`
- **Item Details:** `/v0/item/{id}.json`
- **Features:** Real-time data, recursive comment loading, error handling
## ๐จ Customization
### Change Theme Colors
Edit `src/style.css` (Tailwind CSS v4):
```css
@theme {
--color-hn-orange: #ff6600;
--color-hn-bg: #fafcff;
--color-hn-text: #54575a;
--color-hn-dark: #3f220f;
}
```
### Adjust Story Count
Edit `src/pages/HomePage.vue`:
```javascript
const storyIds = await getTopStories(30) // Change to any number
```
## ๐ธ Screenshots
### Home Page - Top Stories
Browse the latest HackerNews stories with scores, authors, and comment counts.
## ๐ค Contributing
This is a learning project showcasing:
- Vue 3 Composition API
- Component-driven development
- Test-driven development
- Documentation-first approach
Feel free to explore the code and use it as a reference!
## ๐ License
MIT License - Feel free to use this project for learning and reference.
## ๐ Credits
- **HackerNews** for the API
- **Vue.js** team for the amazing framework
- **Tailwind CSS** for the utility-first CSS framework
- **Vite** for the blazing-fast build tool