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 💕
A simple implementation of the Hackernews interface in Angular using the official Hackernews API. Project started out on 2021 and still haven't completed in 2023. The feature includes authentication via Firebase Auth and save any of the post to "read later" list.
The listing page for Top Stories, Ask Stories, Show Stories and Job Stories.
The page for an individual story with details and discussions.
The technologies and tools used in the project.
- Angular
- Sass
- TypeScript
- Jasmine/Karma
- Firebase
- Circle CI
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 Firebase.
graph LR
hn[Hackernews API] -- Stories --> Portal
Firebase -- Persistence --> Portal
The list of tools that are used for development.
- npm
npm install npm@latest -g
- Git
- firebase-tools
npm install -g firebase-tools
Installation is fairly straightforward. Just clone the repo and npm i && npm start
. For first timers, gather the newly created Firebase credentials and replace the credentials in .env.example
and save them in a new file named .env
.
- Clone the repo
git clone https://github.com/data-miner00/ng-hackernews.git
- Install Node dependencies
npm i
- Recommend to run tests to check if things are breaking
npm test
- Lint the Sass files
npm run lint:css
- Start local dev server
npm start
- Compile for production
npm run build
- Deployment
firebase deploy
- Implement carousel
- Add Pexels API for image
- Implement individual page
- Implement the favourite page
- Implement the watch later page
- Use mixin for repetead css
- Implement better footer
- Implement 404 page
- Enhance Login page and Register page (Phase I)
- Implement User Page
- Add upvote count to comment
- Implement random page
- Hydrate landing page
- Add linter
- Add formatter
- Achieve 85% code coverage
- Improve mobile responsiveness
- Use RxJs ShareReplay to cache results
See the open issues for a full list of proposed features (and known issues).
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!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature
) - Commit your Changes (
git commit -m 'Add some AmazingFeature'
) - Push to the Branch (
git push origin feature/AmazingFeature
) - Open a Pull Request
Distributed under the MIT License. See LICENSE
for more information.
List of resources that are helpful and would like to give credit to.