https://github.com/aadhar41/hacker-news
A modern React application for searching and browsing Hacker News stories with an intuitive interface. Search for articles, view story details, and navigate through results with smooth pagination.
https://github.com/aadhar41/hacker-news
css3 git github html5 nodejs npm react reactjs
Last synced: 14 days ago
JSON representation
A modern React application for searching and browsing Hacker News stories with an intuitive interface. Search for articles, view story details, and navigate through results with smooth pagination.
- Host: GitHub
- URL: https://github.com/aadhar41/hacker-news
- Owner: aadhar41
- License: mit
- Created: 2026-01-22T15:29:04.000Z (5 months ago)
- Default Branch: master
- Last Pushed: 2026-02-01T06:09:37.000Z (5 months ago)
- Last Synced: 2026-02-01T16:56:07.633Z (5 months ago)
- Topics: css3, git, github, html5, nodejs, npm, react, reactjs
- Language: JavaScript
- Homepage: https://hacker-news-article.netlify.app/
- Size: 531 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Hacker News Search Application
A modern React application for searching and browsing Hacker News stories with an intuitive interface. Search for articles, view story details, and navigate through results with smooth pagination.
## Features
- **Real-time Search**: Search for Hacker News stories by keyword with instant results
- **Story Details**: View article titles, authors, points, and comment counts at a glance
- **Pagination**: Navigate through search results with next/previous buttons
- **Loading States**: Visual feedback during data fetching for better UX
- **Responsive Design**: Clean and modern UI that works seamlessly across all devices
- **External Links**: Direct links to original articles and Hacker News discussions
## Technologies
- **React 18.2**: Modern React with hooks for building the user interface
- **Context API**: Global state management for efficient data sharing
- **Reducer Pattern**: Predictable state updates and action handling
- **Hacker News API**: Integration with Algolia's Hacker News search API
- **React Icons**: Beautiful icons for enhanced visual design
## Getting Started
### Prerequisites
- Node.js >= 14.x
- npm or yarn package manager
### Installation
1. Clone the repository:
```bash
git clone https://github.com/aadhar41/hacker-news.git
cd hacker-news
```
2. Install dependencies:
```bash
npm install
```
## Usage
Run the project locally:
```bash
# Start the development server
npm start
# Build for production
npm run build
# Run tests
npm test
```
The application will open at `http://localhost:3000`
## Architecture
This application follows modern React best practices:
- **Component-Based Architecture**: Modular components for SearchForm, Stories, and Buttons
- **Context API Pattern**: Centralized state management using React Context
- **Reducer Pattern**: Predictable state updates with actions and reducers
- **Custom Hooks**: `useGlobalContext` hook for accessing global state
- **API Integration**: Asynchronous data fetching with error handling
### Project Structure
```text
src/
├── App.js # Main application component
├── context.js # Context provider and custom hook
├── reducer.js # State reducer with action handlers
├── actions.js # Action type constants
├── SearchForm.js # Search input component
├── Stories.js # Story list display component
├── Buttons.js # Pagination controls
└── index.css # Global styles
```
## API
This application uses the [Hacker News Search API](https://hn.algolia.com/api) powered by Algolia.
## Contributing
Contributions are welcome! Please read [CONTRIBUTING.md](CONTRIBUTING.md) for more details.
## License
Distributed under the MIT License. See `LICENSE` for more information.
## Author
**Aadhar Gaur**
- [LinkedIn](https://www.linkedin.com/in/aadhar-gaur-php/)
- [GitHub](https://github.com/aadhar41)
## Acknowledgments
- [Hacker News](https://news.ycombinator.com/) for the content
- [Algolia](https://www.algolia.com/) for the search API