Migrate from Angular 9 to React (Vite + TypeScript)

[devanshi-gpta]

Summary

Full rewrite of this Hacker News PWA from Angular 9 → React 18 + Vite + TypeScript, preserving feature parity, UI/UX, the SCSS theme system, and PWA/offline support. All @angular/*, rxjs, and zone.js are removed; the app now builds with Vite and routes with React Router.

Tooling swap:

• Build: Angular CLI (angular.json, karma, protractor, tslint, polyfills, zone.js) → Vite (vite.config.ts, @vitejs/plugin-react, eslint). src/app/* moved up to src/.
• PWA: @angular/service-worker → vite-plugin-pwa (Workbox), keeping the manifest/icons and adding NetworkFirst runtime caching for the HN API.
• Styling: existing SCSS theme partials reused as-is under src/shared/scss/; per-component .scss kept as global styles (theme class lives on the app wrapper), with @import paths rebased and Angular-only :host >>> selectors dropped.

Architecture mapping:

• Services → hooks/modules: HackernewsApiService (RxJS Observable + unfetch) → src/shared/api.ts using fetch and Promises — fetchFeed, fetchItemContent (keeps the poll-aggregation logic via Promise.all), fetchPollContent, fetchUser. Error strings like "Could not load ... stories." preserved.
• SettingsService → React Context: src/context/SettingsContext.tsx stores theme/openLinkInNewTab/titleFontSize/listSpacing/showSettings, persists to localStorage, and subscribes to matchMedia('(prefers-color-scheme: dark)'). Actions: setTheme, toggleOpenLinksInNewTab, setFont, setSpacing, toggleSettings.
• Router: app.routes.ts → src/router.tsx (createBrowserRouter). Five feed routes (news/newest/show/ask/jobs with :page) render a shared <Feed feedType=... />; / redirects to /news/1; item/:id and user/:id are React.lazy + Suspense.
• Pipe → helper: comment.pipe.ts → commentCount(n) in src/shared/comment-count.ts.
• Models: Story/Comment/User/Settings/PollResult/FeedType ported as interfaces (Story gains optional content?/text? used by the item-detail template).

Components (all Angular templates → JSX functional components; *ngIf→&&/ternary, *ngFor→.map, routerLink→Link/NavLink, [innerHTML]→dangerouslySetInnerHTML, [ngStyle]→style, (click)→onClick, Location.back()→useNavigate(-1)):

• App shell (theme wrapper + Header/<Outlet/>/Footer), Header + SettingsPanel, Footer, Feed, Item, ItemDetails, recursive CommentItem (local useState collapse, [deleted] fallback), UserProfile, plus shared Loader/ErrorMessage.

Verification

• npm run build (tsc --noEmit && vite build) and npm run lint pass cleanly on the integrated branch.
• Runtime smoke test (Playwright against the dev server): news feed (30 items), ask feed, jobs header, item detail with nested comments, and settings popup + live theme switch (night class applied to the wrapper) all render correctly.
• Note: the HN API host (node-hnapi.herokuapp.com) currently returns 404 for /user/:id, so user-profile pages surface the "Could not load user" error. This is a pre-existing limitation of the external API — the original Angular app called the identical endpoint — not a regression from this migration.

This branch integrates four component-porting sub-PRs (#436 Header/Settings, #438 Feed/Item, #439 ItemDetails/Comment, #437 User) that merged into it.

Link to Devin session: https://app.devin.ai/sessions/845284a06aca4b92b7d770d6e99e55b0
Requested by: @devanshi-gpta

---

Devin Review

Status	Commit
⚪ Not started	—

Run Devin Review

[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