feature: repurpose Hacker News PWA into a 4% cashback card UI on Angular 20

.github/workflows/ci.yml

@@ -0,0 +1,30 @@
+name: CI
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+      - run: npm ci
+      - run: npm run lint
+      - run: npm run test:ci
+      - run: npm run build
+      - run: npm run e2e:install
+      - run: npm run e2e
+        env:
+          CI: true
+      - uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: playwright-report
+          path: playwright-report
+          retention-days: 7

.gitignore

@@ -4,16 +4,11 @@
 /dist
 /tmp
 /out-tsc
-# Only exists if Bazel was run
-/bazel-out
+/.angular/cache
 
 # dependencies
 /node_modules
 
-# profiling files
-chrome-profiler-events.json
-speed-measure-plugin.json
-
 # IDEs and editors
 /.idea
 .project
@@ -41,6 +36,12 @@ yarn-error.log
 testem.log
 /typings
 
+# e2e
+/playwright-report
+/test-results
+/blob-report
+/playwright/.cache
+
 # System Files
 .DS_Store
 Thumbs.db

CONTRIBUTING.md

@@ -1,27 +1,27 @@
 # Contributing
 
 Thank you for your interest in contributing! Please feel free to put up a PR for any issue or feature request.
-Even if you have little to no experience with Angular, I'll be more than happy to help. :)
 
 ## Setup
 
-1. Fork the repo
-2. Clone your fork
-3. Make a branch for your feature or bug fix
-4. If you don't have Angular CLI installed: `npm install -g angular-cli@latest`
-5. `ng init`
-6. Type `n` for each file to not overwrite any file changes
-7. Run `npm start` and open `localhost:4200` in a browser
-8. Work your magic
-9. Run `npm run build` or `npm run static-serve` to kick off a production build and make sure nothing is broken
-10. To test service worker changes:
-  * `npm run build` to kick off a fresh build and update the `dist/` directory
-  * `npm run precache` to generate the service worker file
-  * `npm run static-serve` to load the application along with the service worker asset using [live-server](https://github.com/tapio/live-server)
-11. Add yourself to the [contributor's list](https://github.com/hdjirdeh/angular2-hn#contributors) in the README!
-12. Commit your changes and reference the issue you're addressing (for example: `git commit -am 'Commit message. Closes #5'`)
-13. Push your branch to your fork
-14. Create a pull request from your branch on your fork to `master` on this repo
-15. Have your branch get merged in! :star2:
+1. Fork the repo and clone your fork
+2. Make a branch for your feature or bug fix
+3. `npm install`
+4. `npm start` and open `localhost:4200` in a browser
+5. Work your magic
+6. Before pushing, run:
+   - `npm run lint`
+   - `npm test`
+   - `npm run e2e` (first time: `npm run e2e:install`)
+   - `npm run build`
+7. Commit your changes and reference the issue you're addressing (for example: `git commit -am 'Commit message. Closes #5'`)
+8. Push your branch to your fork and open a pull request against `master`
 
-If you experience a problem at any point, please don't hesitate to file an issue or send me a message!
+## Notes
+
+- Feature views live under `src/app/<feature>/` and are lazy loaded from `src/app/app.routes.ts`.
+- All cashback data flows through `src/app/shared/services/cashback-api.service.ts`; keep new data access there.
+- The 4% rate comes from `CASHBACK_RATE` in `src/app/shared/data/mock-cashback-data.ts` — never hard-code it elsewhere.
+- Service worker changes are only active in production builds (`npm run build`, then serve `dist/vantage-cashback/browser`).
+
+If you experience a problem at any point, please don't hesitate to file an issue.

README.md

@@ -1,102 +1,77 @@
 <p align="center">
-  <a href="https://angular2-hn.firebaseapp.com">
-    <img alt="Angular 2 HN" title="Angular 2 HN" src="http://i.imgur.com/J303pQ4.png" width="150">
-  </a>
+  <img alt="Vantage 4% Cash Card" title="Vantage 4% Cash Card" src="public/assets/images/logo.svg" width="120">
 </p>
 
 <p align="center">
-  A progressive Hacker News client built with Angular
-</p>
-
-<p align="center">
-  <a href="https://angular2-hn.firebaseapp.com">View App</a>
-</p>
-
-<p align="center">
-  <a href="/CONTRIBUTING.md"><img alt="PRs Welcome" src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg"></a>
-  <a href="https://travis-ci.org/housseindjirdeh/angular2-hn"><img alt="Build Status" src="https://travis-ci.org/housseindjirdeh/angular2-hn.svg?branch=master"></a>
+  A progressive web app for the <strong>Vantage 4% cash back card</strong> — balances, transactions and rewards.
 </p>
 
 ---
 
-:zap: **Fast:** Service Worker App Shell + Dynamic Content model to achieve faster load times with and without a network.
+:zap: **Fast:** Angular 20 standalone components with lazy-loaded feature routes and a service worker app shell.
 
-:iphone: **Responsive:** Completely responsive UI that can be installed to your mobile home screen to provide a native feel.
+:iphone: **Responsive:** Installable UI that works on phones and desktops.
 
-:rocket: **Progressive:** [Lighthouse](https://github.com/GoogleChrome/lighthouse) score of 87/100.
+:moneybag: **4% on everything:** every purchase earns a flat 4% back — the rate is applied in exactly one place and surfaced across the dashboard, transactions and rewards views.
 
-<p align="center">
-  <img src = "http://i.imgur.com/fzJzLFO.png" width=500>
-</p>
+## Features
 
-## Mobile Preview
+| Route            | What it shows                                                                        |
+| ---------------- | ------------------------------------------------------------------------------------ |
+| `/dashboard`     | 4% cash back headline, cash back earned, balances and recent transactions              |
+| `/transactions`  | Every transaction with the 4% cash back it earned, filterable by spend category        |
+| `/transactions/:id` | A single transaction and how its cash back was calculated                           |
+| `/rewards`       | Cash back broken down by category, plus redeemed vs. available balances                |
+| `/account`       | Card accounts, credit utilization and display preferences (themes, masking amounts)    |
 
-<p align="center">
-  <img src = "http://i.imgur.com/ZloA1hn.gif">
-</p>
+## Stack
 
-## Laptop Preview
+- **Angular 20** — standalone components, signals, `input()`/`computed()`, lazy routes
+- **HttpClient** — via `provideHttpClient(withFetch())`
+- **`@angular/service-worker`** — PWA/offline support (`ngsw-config.json`)
+- **ESLint** (`angular-eslint`) — replaced TSLint/codelyzer
+- **Karma + Jasmine** — unit tests
+- **Playwright** — end-to-end tests (replaced Protractor)
+- **SCSS theme engine** — Default / Night / Black (AMOLED)
 
-<p align="center">
-  <img src = "http://i.imgur.com/MrKHaln.gif">
-</p>
+## Data
 
-## Offline Support
+There is no cashback backend yet, so [`CashbackApiService`](src/app/shared/services/cashback-api.service.ts) serves
+in-memory fixtures from [`mock-cashback-data.ts`](src/app/shared/data/mock-cashback-data.ts). Set
+`environment.apiBaseUrl` to a real API origin and the same methods (`fetchCardAccounts()`, `fetchTransactions()`,
+`fetchRewardsSummary()`, `fetchCashbackRate()`) issue `HttpClient` requests instead — no caller changes needed.
 
-This app uses [Workbox](https://workboxjs.org/) to generate a service worker as part of the build step to load quickly and work offline.
+Cash back is derived from the single `CASHBACK_RATE = 0.04` constant, so the ledger, the per-transaction amounts and
+the rewards breakdown can never disagree.
 
-## Manifest
+## Development
 
-With Chromium based browsers for Android (Chrome, Opera, etc...), Angular 2 HN includes a Web App Manifest that allows you to install to your homescreen.
+```bash
+npm install
+npm start          # dev server on http://localhost:4200
+npm run build      # production build into dist/vantage-cashback
+npm run lint       # ESLint
+npm test           # Karma + Jasmine unit tests
+npm run e2e:install && npm run e2e   # Playwright end-to-end tests
+```
 
-<p align="center">
-  <img src = "http://i.imgur.com/1RaaNkr.png">
-</p>
-
-## Themes
-
-Built in theme engine!
-
-Current themes:
-* Default
-* Night
-* Black (AMOLED)
+Regenerate the PWA icons after changing the brand mark with `python3 scripts/generate-icons.py`.
 
-More to come!
+Service worker behaviour is only enabled in production builds; serve `dist/vantage-cashback/browser` with any static
+server to exercise it.
 
-## Areas of improvement
-
- - Realtime updating using the Firebase SDK (may need to add option to settings so service worker can still rely on REST endpoints)
- - Server side rendering
-
-Feel free to send me feedback on [twitter](https://twitter.com/hdjirdeh) or [file an issue](https://github.com/hdjirdeh/angular2-hn/issues/new)! Feature requests are always welcome.
-
-## Build process
-
-Note: This project has been ejected (with AOT + production settings) in order to customize Webpack configurations.
+## Themes
 
- - Clone or download the repo
- - `npm install`
- - `npm start` to run the application with webpack-dev-server or `npm build` to kick off a fresh build and update the output directory (`dist/`)
+Built-in theme engine with Default, Night and Black (AMOLED). Themes, font size, list spacing and amount masking are
+managed by `SettingsService` and persisted to `localStorage`.
 
-Note: Any Service Worker changes will not be reflected when you run the application locally in development. To test service worker changes:
- - `npm build`
- - `npm run precache` to generate the service worker file
- - `npm run static-serve` to load the application along with the service worker asset using [live-server](https://github.com/tapio/live-server)
+## Deployment
 
-## Contributors
+`npm run build` then `firebase deploy` — hosting serves `dist/vantage-cashback/browser` with SPA rewrites
+(see [`firebase.json`](firebase.json)). CI runs lint, unit tests, e2e and a production build on every push and pull
+request (see [`.github/workflows/ci.yml`](.github/workflows/ci.yml)).
 
-A million thanks to some awesome people :)
+## Credits
 
-* [Ashwin Sureshkumar](https://github.com/ashwin-sureshkumar)
-* [Mateusz](https://github.com/mateuszwitkowski)
-* [Jordi Collell](https://github.com/jordic)
-* [Ben Brooks](https://github.com/bbrks)
-* [Zach Berger](https://github.com/zachberger)
-* [blAck PR](https://github.com/blackpr)
-* [Bram Borggreve](https://github.com/beeman)
-* [Antonio Indrianjafy](https://github.com/Antogin)
-* [Addy Osmani](https://github.com/addyosmani)
-* [Majid Hajian](https://github.com/mhadaily)
-* [Jeff Cross](https://github.com/jeffbcross)
-* [Minko Gechev](https://github.com/mgechev)
+This project began as [angular2-hn](https://github.com/hdjirdeh/angular2-hn), a Hacker News PWA by Houssein Djirdeh and
+contributors, and was repurposed into a credit card cash back experience.