Skip to content

Repository files navigation

Contributors Forks Stargazers Issues MIT License


The Hacker Times

An Angular implementation of Hackernews with NY Times vibes.
View Website »

Explore the docs · Report Bug · Request Feature

Table of Contents
  1. About The Project
  2. Getting Started
  3. Roadmap
  4. Contributing
  5. License
  6. Acknowledgments

I believe beautiful web apps can be made with Angular too 💕

About The Project

Landing Page

A simple implementation of the Hackernews interface in Angular using the official Hackernews API. Save your favourite posts or interesting topics to the read later lists that are stored entirely on your browser.

Stories List

The listing page for Top Stories, Ask Stories, Show Stories and Job Stories.

Story Page

The page for an individual story with details and discussions.

(back to top)

Built With

The technologies and tools used in the project.

  • Angular
  • Sass
  • TypeScript
  • Jasmine/Karma

(back to top)

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.

graph LR
    hn[Hackernews API] -- Stories --> Portal
    localStorage -- Persistence --> Portal
Loading

(back to top)

Getting Started

Prerequisites

The list of tools that are used for development.

  • npm
    npm install npm@latest -g
  • Git
  • firebase-tools
    npm install -g firebase-tools

Installation

Installation is fairly straightforward. Just clone the repo and npm i && npm start.

  1. Clone the repo
    git clone https://github.com/data-miner00/ng-hackernews.git
  2. Install Node dependencies
    npm i
  3. Recommend to run tests to check if things are breaking
    npm test
  4. Lint the Sass files
    npm run lint:css
  5. Start local dev server
    npm start
  6. Compile for production
    npm run build
  7. Deployment
    firebase logout
    firebase login
    firebase deploy

(back to top)

Roadmap

  • Add Pexels API for image
  • Use mixin for repeated css
  • Implement User Page
  • Add upvote count to comment
  • Add linter
  • Improve mobile responsiveness
  • Use RxJs ShareReplay to cache results

See the open issues for a full list of proposed features (and known issues).

(back to top)

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

(back to top)

License

Distributed under the MIT License. See LICENSE for more information.

(back to top)

Acknowledgments

List of resources that are helpful and would like to give credit to.

(back to top)

About

Hackernews implementation in Angular

Topics

Resources

Stars

2 stars

Watchers

1 watching

Forks

Used by

Contributors

Languages