https://github.com/hemants1703/hacker-news-api-react-app
Hacker News App that displays search results from the Hacker News Algolia API
https://github.com/hemants1703/hacker-news-api-react-app
api api-rest hacker-news react react-router reactjs vite vitejs
Last synced: 2 months ago
JSON representation
Hacker News App that displays search results from the Hacker News Algolia API
- Host: GitHub
- URL: https://github.com/hemants1703/hacker-news-api-react-app
- Owner: hemants1703
- Created: 2023-10-21T09:52:00.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-03-23T19:21:26.000Z (over 1 year ago)
- Last Synced: 2025-06-03T14:42:28.157Z (about 1 year ago)
- Topics: api, api-rest, hacker-news, react, react-router, reactjs, vite, vitejs
- Language: JavaScript
- Homepage: https://hn-explorer.hemantsharma.tech/
- Size: 112 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Hacker News API React App
[](https://reactjs.org/)
[](https://vitejs.dev/)
[](https://chakra-ui.com/)
[](https://opensource.org/licenses/MIT)
A modern, responsive Hacker News client built with React, Vite, and Chakra UI. Search and browse Hacker News stories with a clean, intuitive interface.
## 🚀 Live Demo
Check out the live demo [here](https://hacker-news-api-react-app.vercel.app/)
## ✨ Features
### Home Screen
- 🔍 Search for stories with a prominent search field
- 📋 View search results in a clean, organized list
- ⚡ Real-time search results using the Hacker News Algolia API
- 🎨 Sleek UI with responsive design
### Post Detail Screen
- 📰 View comprehensive post details
- 👍 See points/votes for each post
- 💬 Browse all comments with nested threading
- 👤 View author information with links to profiles
## 🛠️ Technologies Used
- **[Vite](https://vitejs.dev/)** - Fast, modern frontend build tool
- **[React](https://reactjs.org/)** - UI component library
- **[Chakra UI](https://chakra-ui.com/)** - Component library for beautiful UI/UX
- **[Hacker News API](https://github.com/HackerNews/API)** - Data source
- **[Axios](https://axios-http.com/)** - HTTP client for API requests
- **[React Router](https://reactrouter.com/)** - For navigation between pages
- **[React Hooks](https://reactjs.org/docs/hooks-intro.html)** - For state management
## 📋 Development Approach
- Modular architecture for maintainability and code organization
- Separate services for data fetching logic
- Consistent theme using Chakra UI's theming system
- DRY (Don't Repeat Yourself) approach to reduce code duplication
- Responsive design that works on mobile, tablet, and desktop
- Optimized for performance with efficient rendering
## 🚀 Getting Started
### Prerequisites
- Node.js (v14 or higher)
- npm or yarn
### Installation
1. Clone the repository:
```bash
git clone https://github.com/hemants1703/hacker-news-API-react-app.git
cd hacker-news-API-react-app
```
2. Install dependencies:
```bash
pnpm install
```
3. Start the development server:
```bash
pnpm run dev
```
4. Open [http://localhost:3000](http://localhost:3000) in your browser
## Contributing
Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## Connect with Me 🤝
If you have any questions or just want to chat, feel free to reach out to me!
[](https://www.linkedin.com/in/hemants1703/)
## 📝 License
This project is open source and available under the [MIT License](https://opensource.org/licenses/MIT).