https://github.com/uwon0625/nxnews
angular app with asp.net webapi backend
https://github.com/uwon0625/nxnews
angular angular19 angularcli angularmaterial angulartest api automated-testing azure azure-devops azurestaticwebapp dotnet-core e2e-testing hackernews netsdk playwright-tests restful-api sdk8 swagger unittesting
Last synced: 28 days ago
JSON representation
angular app with asp.net webapi backend
- Host: GitHub
- URL: https://github.com/uwon0625/nxnews
- Owner: uwon0625
- Created: 2024-12-16T01:35:20.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-17T19:54:45.000Z (over 1 year ago)
- Last Synced: 2025-10-25T00:46:43.189Z (7 months ago)
- Topics: angular, angular19, angularcli, angularmaterial, angulartest, api, automated-testing, azure, azure-devops, azurestaticwebapp, dotnet-core, e2e-testing, hackernews, netsdk, playwright-tests, restful-api, sdk8, swagger, unittesting
- Language: C#
- Homepage:
- Size: 360 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: NewsApi.Tests/.runsettings
Awesome Lists containing this project
README
# Introduction
NtNews is a sample Angular v19 web app to pull stories from [Hacker News API](https://github.com/HackerNews/API) via dotnet(SDK v8) Restful API, deployed to Azure.
- Source repo: https://github.com/uwon0625/nxNews
- App link: https://brave-sea-0ef71fa1e.4.azurestaticapps.net
**Features**
- Pagination(with @angular/material/paginator)
- Caching
- Automated end-to-end testing (with Playwright)
- Integrated Unit Testing
# Screenshots
# Notes
Hacker News API is very flexible and gives different data fields for different types. This app only pulls for story type("type" : "story") and skip other type like comment, job, poll, etc. Furthermore, we only list the stories with a Url so our users can follow up the link to read more. When we need to fetch for more stories, we have to check each item to check its type, which means pagination and caching are important to keep the app up running.
For a quicker startup, we load latest 20 story ids from https://hacker-news.firebaseio.com/v0/newstories.json, then query each of the story by its id to get the title and Url at https://hacker-news.firebaseio.com/v0/item/{story-id}.json.
## How to use the app
To run it locally:
- clone it from https://github.com/uwon0625/nxNews.git,
- backend(Api):
- cd NewsApi
- dotnet clean && dotnet run (required by front end app)
- check it live at http://localhost:5175/News (or try swagger at http://localhost:5175/swagger/index.html)
- run tests:
- cd .. (repo root, like nxNews)
- dotnet test NewsApi.Tests
- front end(app)
- cd client-app
- npm cache clean --force && ng serve
- check it at http://localhost:4200/ (need above NewsApi running or no story is loaded)
- run end-to-end tests:
- npm run test:e2e:dev
- check result at http://localhost:9323/ (or "npx playwright show-report")
## What's next?
We will continue to make improvements for:
- refine the UX and styling
- adding more tests
- refactor to make the code better
- containerization for scalability
- persist some of the data locally(between cache and Hacker News API)
- authorization(with jwt) to make the app secure and meaningful to our users
- and more to come