Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bhattaraib58/hackernews-ui
Hacker UI made in React Hooks, Redux, Redux-Persist, Redux-Saga, and @reduxjs/toolkit
https://github.com/bhattaraib58/hackernews-ui
custom-hook react react-hook redux-persist redux-saga reduxjs-toolkit
Last synced: 11 days ago
JSON representation
Hacker UI made in React Hooks, Redux, Redux-Persist, Redux-Saga, and @reduxjs/toolkit
- Host: GitHub
- URL: https://github.com/bhattaraib58/hackernews-ui
- Owner: bhattaraib58
- Created: 2019-07-23T09:11:59.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T02:22:38.000Z (about 2 years ago)
- Last Synced: 2024-12-18T00:12:13.582Z (2 months ago)
- Topics: custom-hook, react, react-hook, redux-persist, redux-saga, reduxjs-toolkit
- Language: JavaScript
- Homepage: https://news-ycombinator.herokuapp.com/
- Size: 4.01 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
README
# Hackernews UI
Hackernews UI is an web application made in React.js using Hooks API. It is created with Redux, Redux-Persist, Redux-Saga, and @reduxjs/toolkit.
The whole project uses custom css without using any CSS Library.
## Setup
### Clone the repository
```bash
# Clone with SSH
$ git clone [email protected]:bhattaraib58/hackernews-ui.git
# Or with HTTPS
$ git clone https://github.com/bhattaraib58/hackernews-ui.git
```
## Prerequisites
- [Node.js v10](https://yarnpkg.com/en/docs/install)
- [Yarn v1](https://yarnpkg.com/en/docs/install)
- [NPM v6](https://docs.npmjs.com/getting-started/installing-node)
## File structure
```
src/
├── appConfig.js => represents app system wide configuration
├── assets/ => represents images and global styles
├── components/ => all react components
├── constants/ => constant data
├── services/ => http request services
└── utils/ => helper functions
```
#### Install dependencies
```bash
# Using npm
$ npm install
# Or using yarn
$ yarn
```
**Note:** This project uses yarn as main package manager.
### Practices Involved in development:
1. The app should uses react (use Hooks API and hook pattern).
- Building Your Own Hooks - https://reactjs.org/docs/hooks-custom.html
- React Redux Hooks API - https://react-redux.js.org/api/hooks
2. For css styling
We use CSS Modules in React to handle styling, use this guide for more info https://programmingwithmosh.com/react/css-modules-react/
## For Development
```bash
# Using npm
$ npm start
# Or using yarn
$ yarn start
```
Runs the app in the development mode.
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
## For Production Build
```bash
# Using npm
$ npm run build
$ npx serve -s build
# Or using yarn
$ yarn build
$ npx serve -s build
```
Builds the production optimized app to the `build` folder.
Your app is ready to be deployed!
## Contributing
Read our [CONTRIBUTING GUIDE](CONTRIBUTING.md) to learn about our development process, how to propose bugs and improvements.
## License
Licensed under [The License](LICENSE).