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
Last synced: 7 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 (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-10-22T06:37:46.000Z (almost 2 years ago)
- Last Synced: 2025-01-22T00:15:00.925Z (9 months ago)
- Language: JavaScript
- Homepage: https://hacker-news-api-react-app.vercel.app
- Size: 110 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
Building a Hacker News API React App with Vite, React, Chakra UI and various other web technologies.
Check out the live demo [here](https://hacker-news-api-react-app.vercel.app/).
# Features
### Home Screen
- [x] Search for stories, Search field on top
- [x] List of results below the search field
- [x] Entering a query in the search field will trigger a search request to the Hacker News Algolia API
- [x] Upon receiving the results from the API, the list of results will be populated
### Post detail screen
- [x] Upon clicking a search result, it takes the user to the post detail screen
- [x] Dedicated page to view searched posts in a beautiful UI
#### Post detail screen features
- [x] View post title
- [x] View post points
- [x] View post comments
## Approach & Technologies used
- Vite to create a React app
- Chakra UI for styling beautiful UI/UX
- Hacker News API to fetch data
- Axios to fetch data
- React Router to navigate between pages
- React Hooks to manage state
- Structured the project in a manner that it is easy to scale and maintain
- Separate dedicated section for tasks such as fetching data, styling, etc.
- DRY (Don't Repeat Yourself) approach to avoid repetition of code
- Implemented a modular architecture to make the code more readable and maintainable
- various other minor and minute details are taken care of to make the app more user friendly and easy to use as well as maintain and scale in the future