A modern Angular application that provides a clean interface for browsing Hacker News stories.
This application fetches and displays stories from Hacker News, providing a user-friendly interface with search capabilities, pagination, and responsive design.
- Story Browsing: View a list of the latest Hacker News stories
- Search Functionality: Filter stories by keywords
- Pagination: Navigate through large sets of stories with ease
- Error Handling: Graceful error management with user notifications
- Frontend Framework: Angular 19 (Standalone Components)
- UI Components: Angular Material
- HTTP Communication: Angular HttpClient
- Reactive Programming: RxJS
- Styling: SCSS
- Node.js (v22.14.0)
- npm (v10.9.2)
- Clone the repository:
git clone https://github.com/aaa0109/hackernews-client.git
cd hackernews-client- Install dependencies:
npm install- Start the development server:
ng serve --host 127.0.0.1- Open your browser and navigate to
http://127.0.0.1:4200
- Browsing Stories: Stories are loaded automatically when you open the application
- Searching: Enter keywords in the search box and press Enter or click the search icon
- Pagination: Use the pagination controls at the bottom to navigate between pages
- Viewing Story Details: Click on a story title to open the original article in a new tab
The application connects to a Hacker News API endpoint defined in the environment configuration. The service layer handles all API communication and error handling.
- Components: Standalone Angular components with their own imports
- Services: API communication and business logic
- Models: TypeScript interfaces for type safety
- MainPageComponent: Container component that manages the application state
- StoryListComponent: Presentation component for displaying and interacting with stories
- HackernewsService: Service for API communication
The application uses Jasmine and Karma for unit testing. The test files are located alongside the components and services they test with a .spec.ts extension.
To execute the unit tests:
ng testThis will launch the Karma test runner and execute all tests in watch mode.
- main-page.component.spec.ts: Tests for the main page component
- story-list.component.spec.ts: Tests for the story list component
- hackernews.service.spec.ts: Tests for the API service
- Component Tests: Focus on component initialization, input/output bindings, and user interactions
- Service Tests: Verify API calls, response handling, and error management
- Integration Tests: Ensure components work together as expected