Migrate Angular 9 to React 18 + TypeScript + Vite

[devanshi-gpta]

Summary

Full replacement of the Angular 9 application with a React 18 + TypeScript + Vite stack, preserving all existing functionality.

Architecture:

• Angular services → React hooks (useFeed, useItem, useUser) and context (SettingsProvider)
• @angular/router → react-router-dom v6 with createBrowserRouter; ItemDetails and User pages are React.lazy() loaded
• @angular/service-worker → vite-plugin-pwa with Workbox runtime caching for the HN API
• RxJS Observables + unfetch → plain fetch + async/await
• Angular pipes (CommentPipe) → utility function formatCommentCount()

Key mapping:

src/app/shared/services/hackernews-api.service.ts  →  src/hooks/useHackerNewsAPI.ts
src/app/shared/services/settings.service.ts        →  src/context/SettingsContext.tsx
src/app/app.component.ts                           →  src/App.tsx (+ usePageTracking hook for GA)
src/app/feeds/feed/feed.component.ts               →  src/pages/Feed.tsx
src/app/item-details/item-details.component.ts     →  src/pages/ItemDetails.tsx
src/app/user/user.component.ts                     →  src/pages/User.tsx

Preserved:

• All three themes (default/night/AMOLED black) via the same SCSS theme mixin engine
• localStorage persistence for settings (theme, font size, spacing, open-in-new-tab)
• prefers-color-scheme: dark media query listener
• Google Analytics page tracking on route changes
• PWA manifest with all icon sizes, Workbox service worker
• Mobile/laptop responsive layouts with the same breakpoints

Testing: 15 tests across 4 suites (Feed, ItemDetails, User, SettingsContext) using Vitest + React Testing Library.

Removed: All Angular deps (@angular/*, rxjs, zone.js, unfetch, karma, jasmine, protractor, codelyzer, tslint), Angular config files, and e2e/ directory.

Link to Devin session: https://app.devin.ai/sessions/3db76cb4948b4000a384a2b988e7747e
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

[devin-ai-integration]

E2E Test Results — Angular 9 → React 18 Migration

Ran the migrated React app locally (npm run dev at localhost:5173) and tested all primary user flows end-to-end in the browser.

Test Results (5/5 passed)

Test	Result
News feed loads with stories, metadata, and pagination (start=31 on page 2)	passed
Item details render nested comments with working collapse/expand [-]/[+] toggles	passed
Theme switching (Night/Default) applies correct CSS class and persists via localStorage across refresh	passed
Jobs feed shows YC header text, no points/comments on job items	passed
User profile shows error state (skull graphic + message) when upstream API is down	passed

Show/Ask feed routing

• /show/1 loads "Show HN:" stories correctly
• /ask/1 loads "Ask HN:" stories correctly
• Navigation between feeds works via header nav links

Known Issue: User Profile API

The upstream HN API at node-hnapi.herokuapp.com/user/<id> currently returns errors for all user requests (Cannot GET /user/<id>). This is not caused by the migration — the external API endpoint is down. The error handling path (skull graphic + "Could not load user" message) works correctly.

Screenshots

News Feed (Default theme):

Error State (User Profile):

Devin Session