chore(angular-react): Migrate Angular 9 HN PWA to React 18 + TypeScript + Vite

[devin-ai-integration]

Summary

Migrates the Angular 9 Hacker News PWA to React 18 + TypeScript + Vite, preserving all user-facing behavior: the same URL structure, the three-theme engine, the Hacker News API data contracts, and PWA/offline support. The app now lives in react-app/. The Angular source has been removed in this PR (cleanup phase) after the React app was verified running locally against the live API.

Build, lint and type-check all pass with zero errors:

react-app$ npm run build   # tsc -b && vite build  -> OK (sw.js + manifest generated)
react-app$ npm run lint    # eslint .              -> 0 problems
react-app$ npm run typecheck  # tsc -b --noEmit    -> 0 errors

Architecture mapping (Angular → React)

Angular	React
HackerNewsAPIService (RxJS Observable + lazyFetch)	src/services/hackernewsApi.ts — fetch/async-await + AbortController; keeps the unfetch fallback and the same https://node-hnapi.herokuapp.com base URL and endpoints
SettingsService (DI singleton + matchMedia)	src/context/SettingsContext.tsx — React Context with localStorage persistence and prefers-color-scheme listener
app.component + router-outlet	src/App.tsx — <Routes> + theme class + GA pageview on location change
core/header, core/footer, core/settings	src/components/Header.tsx, Footer.tsx, Settings.tsx
feeds/feed, feeds/item (+ comment)	src/components/Feed.tsx, Item.tsx, ItemDetails.tsx, Comment.tsx (recursive)
lazy item/user NgModules	React.lazy + <Suspense> for ItemDetails/User
loading / error states	src/components/Loader.tsx, ErrorMessage.tsx
shared/models/*	src/models/index.ts
component .scss + shared/scss themes	src/**/*.scss (ported 1:1; :host >>> rewritten to class scoping)
ngsw-config.json (Workbox)	vite-plugin-pwa (generateSW) in vite.config.ts — app-shell precache + runtime caching for /assets/ and the HN API
index.html (GA, theme-color, app-loader SVG, skip-link, manifest/icons)	react-app/index.html (ported verbatim)

Routes preserved (React Router v6)

/ → redirect /news/1; /news/:page, /newest/:page, /show/:page, /ask/:page, /jobs/:page; /item/:id; /user/:id. Pipe equivalents (timeAgo, domain, points) reimplemented as plain TS.

Theming

All three themes work and persist via localStorage: Default, Night, Black (AMOLED), plus auto-switch to Night on prefers-color-scheme: dark.

PWA status

vite-plugin-pwa generates sw.js + manifest.webmanifest during build (precaches 33 entries / ~308 KiB app shell; runtime caching mirrors the old ngsw-config.json).

CI/CD

• .travis.yml now runs cd react-app && npm ci && npm run lint && npm run build on Node 18 and deploys via firebase deploy.
• firebase.json public changed dist → react-app/dist (SPA rewrites unchanged).

Verification

Ran npm run dev and exercised the app against the live API:

• News feed loads 30 stories with titles/points/users/comments.
• Item detail renders the nested comment tree; [-]/[+] collapse toggles work.
• All 3 themes switch live from the Settings panel.
• Jobs feed renders the YC job-header.
• /user/:id shows the error UI — note the upstream node-hnapi /user endpoint currently 404s for all users (including pg), so this matches the original Angular app's behavior and is not a migration regression.

Screenshots

News feed (Default theme):

Item detail with nested comments:

Night theme:

Black (AMOLED) theme:

Settings panel (theme/links/font/spacing):

Jobs feed:

Link to Devin session: https://app.devin.ai/sessions/20a1c7bc50864105bfaedd552aef24f8
Requested by: @lburgers

---

Devin Review

Status	Commit
🟢 Reviewed	97f0e22

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment, CI, and merge conflict monitoring

[staging-devin-ai-integration]

Devin Review found 1 new potential issue.

⚠️ 1 issue in files not directly in the diff

⚠️ CONTRIBUTING.md not updated after Angular-to-React migration, rendering all setup instructions non-functional (CONTRIBUTING.md:4-20)

The PR removes the root package.json, Angular CLI configuration, and all Angular source code, but does not update CONTRIBUTING.md. Steps 4–10 in CONTRIBUTING.md are now completely broken: step 4 tells contributors to install Angular CLI, step 5 says to run ng init, step 7 says npm start and localhost:4200, step 9 says npm run build at the root—none of these commands work anymore. The README was updated with the new react-app/ workflow (Vite dev server, npm run dev on port 5173, etc.), but CONTRIBUTING.md was not.

Debug

Playground

[devin-ai-integration]

Devin Review found 0 new potential issues.

View 5 additional findings in Devin Review.

[staging-devin-ai-integration]

Devin Review found 0 new potential issues.

Debug

Playground