[devin-ai-integration]

Summary

This PR is the complete Angular 9 → React + TypeScript migration. It adds a standalone Vite PWA in react-app/ and leaves the Angular app in src/ untouched. Phase 0 (foundation) landed here first. The five parallel workstreams were then merged into this branch:

Workstream	PR	What
A – shell + theming	#879	core/Header, Footer, Settings; Default / Night / AMOLED themes, persisted to the same localStorage keys as Angular
B – feeds	#880	feeds/Feed + Item: all 5 feeds, pagination, title-size/spacing settings
C – item + comments	#882	item-details/ItemDetails + recursive Comment (collapse keeps the DOM via hidden), polls
D – user	#881	user/User (HNPWA API, because node-hnapi /user returns 404)
E – PWA / deploy	#883	vite-plugin-pwa (generateSW, NetworkFirst API caches, SPA navigateFallback), a cleanup worker at the old /ngsw-worker.js URL that retires the Angular SW, firebase.json → react-app/dist, .travis.yml → .github/workflows/react-app.yml

Stack: Vite 7, React 19, React Router 7, TanStack Query 5, Sass, Vitest + Testing Library, Playwright, ESLint 9, and Prettier (settings copied from the root package.json).

Phase 0 foundation:

• shared/models/*: the Angular model classes become interfaces with the same fields.
• HackerNewsAPIService → shared/services/hackernews-api.ts: Promise + AbortSignal, wrapped by the useFeed / useItem / useUser hooks. Poll options load with Promise.allSettled, so one failed option no longer breaks the whole item.
• SettingsService → SettingsProvider + useSettings().
• The comment pipe → formatCommentCount.
• sanitizeHtml: an allowlist sanitizer, because React doesn't sanitize innerHTML the way Angular did.
• app.routes.ts → router/routes.tsx:

  /                                   -> /news/1
  /{news,newest,show,ask,jobs}/:page  handle: { feedType }
  /item/:id, /user/:id                lazy()
  

Deliberately dropped: the Google Analytics UA snippet. Universal Analytics was shut down in 2023.

Tests (Phase 2)

• Unit tests: npm test runs 126 Vitest + Testing Library tests in 14 files. The Angular app had no Karma specs to port; the Protractor spec only checked the page title and console errors.
• e2e: npm run e2e runs 12 Playwright tests against the production build. 36/36 passed with --repeat-each=3.
  • e2e/app.spec.ts (mocked API) covers: the / redirect, all feed nav links, pagination numbering from 31, item page sanitizing and nested comments, a user profile and the unknown-user error, theme persistence across reloads, and no console errors (the check ported from the Protractor spec).
  • e2e/offline.spec.ts covers: first visit then offline reload, offline deep links, and the Angular SW → React SW upgrade.
• CI: the GitHub Actions check and e2e jobs are green on this PR. deploy runs only on pushes to master when a FIREBASE_SERVICE_ACCOUNT or FIREBASE_TOKEN secret exists.

Lighthouse (Lighthouse 12, vite preview, /news/1, live API, integrated build):

	Perf	A11y	Best practices	SEO	FCP	LCP	TBT	CLS
React, mobile	100	96	100	100	0.8 s	0.9 s	20 ms	0
React, desktop	100	96	100	100	0.4 s	0.4 s	0 ms	0
Angular ng build --prod, mobile (from #883)	97–98	100	100	92	~1.5 s	~1.5 s	155–200 ms	0

The accessibility score of 96 comes from link-in-text-block: the mobile .comment-number link is red on grey with no underline. The markup and colours are copied unchanged from the Angular item.component. I left it as is to keep visual parity.

Link to Devin session: https://devin-gtm.devinenterprise.com/sessions/7cf5168b5db44e91b8292c4e209d4584
Open in Devin Desktop: https://devin-gtm.devinenterprise.com/desktop/session/7cf5168b5db44e91b8292c4e209d4584?variant=devin
Requested by: @ishita-cog

---

Note

Devin errored when opening this Pull Request as ishita-cog.
As a fallback, Devin opened this PR as itself.

---

Devin Review

Status	Commit
⚪ Not started	—

Run Devin Review

---

[devin-ai-integration]

I'll fix CI failures and address comments from users with write access. I'll skip comments containing "(aside)".

• Disable automatic comment, CI, and merge conflict monitoring