https://github.com/data-miner00/ng-hackernews
Hackernews implementation in Angular
https://github.com/data-miner00/ng-hackernews
angular circleci hackernews
Last synced: 3 months ago
JSON representation
Hackernews implementation in Angular
- Host: GitHub
- URL: https://github.com/data-miner00/ng-hackernews
- Owner: data-miner00
- License: mit
- Created: 2021-12-14T13:15:55.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-07-26T22:44:22.000Z (over 1 year ago)
- Last Synced: 2025-02-01T22:51:05.807Z (about 1 year ago)
- Topics: angular, circleci, hackernews
- Language: TypeScript
- Homepage: https://hn.mumk.dev
- Size: 4.04 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[![Contributors][contributors-shield]][contributors-url]
[![Forks][forks-shield]][forks-url]
[![Stargazers][stars-shield]][stars-url]
[![Issues][issues-shield]][issues-url]
[![MIT License][license-shield]][license-url]
The Hacker Times
An Angular implementation of Hackernews with NY Times vibes.
View Website »
Explore the docs
·
Report Bug
·
Request Feature
Table of Contents
> I believe beautiful web apps can be made with Angular too 💕
## About The Project
A simple implementation of the Hackernews interface in Angular using the official [Hackernews API](https://github.com/HackerNews/API). Save your favourite posts or interesting topics to the read later lists that are stored entirely on your browser.
The listing page for **Top Stories**, **Ask Stories**, **Show Stories** and **Job Stories**.
The page for an individual story with details and discussions.
### Built With
The technologies and tools used in the project.
- Angular
- Sass
- TypeScript
- Jasmine/Karma
### Design
There are not much design considerations when it comes to this project and hence very straightforward and simple. The portal itself consumes the data from Hackernews API and persistence via localStorage.
```mermaid
graph LR
hn[Hackernews API] -- Stories --> Portal
localStorage -- Persistence --> Portal
```
## Getting Started
### Prerequisites
The list of tools that are used for development.
- npm
```sh
npm install npm@latest -g
```
- [Git](https://git-scm.com/downloads)
- firebase-tools
```sh
npm install -g firebase-tools
```
### Installation
Installation is fairly straightforward. Just clone the repo and `npm i && npm start`.
1. Clone the repo
```sh
git clone https://github.com/data-miner00/ng-hackernews.git
```
2. Install Node dependencies
```sh
npm i
```
3. Recommend to run tests to check if things are breaking
```sh
npm test
```
4. Lint the Sass files
```sh
npm run lint:css
```
5. Start local dev server
```sh
npm start
```
6. Compile for production
```sh
npm run build
```
7. Deployment
```sh
firebase deploy
```
## Roadmap
- [ ] Add Pexels API for image
- [ ] Use mixin for repeated css
- [ ] Implement User Page
- [ ] Add upvote count to comment
- [ ] Implement random page
- [ ] Add linter
- [ ] Improve mobile responsiveness
- [ ] Use RxJs ShareReplay to **cache results**
See the [open issues](https://github.com/data-miner00/ng-hackernews/issues) for a full list of proposed features (and known issues).
## Contributing
> I am bad at design, please help if you can design it better!
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
Don't forget to give the project a star! Thanks again!
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
## License
Distributed under the MIT License. See `LICENSE` for more information.
## Acknowledgments
List of resources that are helpful and would like to give credit to.
- [Using Different Layout Frames For Different Routes In Angular](https://javascript.plainenglish.io/using-different-layout-frames-for-different-routes-in-angular-d96ed096c633)
- [How to Unit Test an HTTP Service in Angular](https://braydoncoyer.dev/blog/how-to-unit-test-an-http-service-in-angular)
- [unit-testing for values set async in ngOnInit() function of an angular component](https://stackoverflow.com/questions/44294960/unit-testing-for-values-set-async-in-ngoninit-function-of-an-angular-component)
- [Angular migration helper](https://update.angular.io/)
- [Angular Best Practices](https://app.pluralsight.com/library/courses/best-angular-practices/table-of-contents)
[contributors-shield]: https://img.shields.io/github/contributors/data-miner00/ng-hackernews.svg?style=for-the-badge
[contributors-url]: https://github.com/data-miner00/ng-hackernews/graphs/contributors
[forks-shield]: https://img.shields.io/github/forks/data-miner00/ng-hackernews.svg?style=for-the-badge
[forks-url]: https://github.com/data-miner00/ng-hackernews/network/members
[stars-shield]: https://img.shields.io/github/stars/data-miner00/ng-hackernews.svg?style=for-the-badge
[stars-url]: https://github.com/data-miner00/ng-hackernews/stargazers
[issues-shield]: https://img.shields.io/github/issues/data-miner00/ng-hackernews.svg?style=for-the-badge
[issues-url]: https://github.com/data-miner00/ng-hackernews/issues
[license-shield]: https://img.shields.io/github/license/data-miner00/ng-hackernews.svg?style=for-the-badge
[license-url]: https://github.com/data-miner00/ng-hackernews/blob/master/LICENSE
[product-screenshot]: images/screenshot.png