feature: Migrate Angular 9 HN PWA to Create React App + TypeScript

[devin-ai-integration]

Summary

Ports the Angular 9 Hacker News PWA to a new Create React App + TypeScript project in react-app/, leaving the original Angular source untouched for reference. Stack: CRA TS template, react-router-dom v6, sass, CRA's built-in Jest + React Testing Library.

The Angular pieces map to React as follows:

• Models (src/models/): the Angular model classes become plain TS interfaces, carried over unchanged. Story gains optional content?/text? (the Angular template already read these off the API response even though the class omitted them — required now under strict TS).
• API (src/api/hackerNews.ts): HackerNewsAPIService (RxJS Observable + unfetch) becomes async functions over fetch targeting https://node-hnapi.herokuapp.com, each accepting an optional AbortController signal. The nested RxJS poll subscriptions in fetchItemContent are rewritten with Promise.all:

  if (story.type === 'poll') {
    story.poll_votes_count = 0;
    const results = await Promise.all(
      Array.from({ length: story.poll.length }, (_, i) =>
        fetchPollContent(story.id + i + 1, signal)));   // ids story.id+1 .. story.id+n
    results.forEach((r, i) => { story.poll[i] = r; story.poll_votes_count += r.points; });
  }

• Settings (src/context/SettingsProvider.tsx): SettingsService becomes a SettingsContext + provider. State initializes from localStorage; the matchMedia('(prefers-color-scheme: dark)') subscription + initTheme logic moves into a useEffect with cleanup; toggleSettings/toggleOpenLinksInNewTab/setTheme/setFont/setSpacing update state and persist to localStorage.
• Routing (App.tsx): rebuilt with react-router-dom v6 — a <Feed feedType=... /> per feed at /:feedType/:page, / → /news/1 via <Navigate>, and /item/:id + /user/:id via React.lazy() + <Suspense>. App.tsx is the layout shell (settings.theme wrapper, <Header/>, routed outlet, <Footer/>) and converts the GA pageview logic into a useEffect on useLocation().
• Components: Header/Footer/Settings (context-driven, Angular [checked]/(change) → controlled checked/onChange), shared Loader/ErrorMessage, Feed (useParams page, effect keyed on [feedType, pageNum], <Link> Prev/More gated on listStart !== 1 / items.length === 30), Item (hasUrl derived value, [ngStyle] → inline style, conditional target/rel), ItemDetails (goBack → useNavigate()(-1), [innerHTML] → dangerouslySetInnerHTML, poll bar width inline), recursive Comment (collapse via useState, deleted branch), and User. Angular's comment pipe becomes formatComments(count).
• Styles: shared/scss/ + per-component .scss copied to src/styles/ and colocated files; :host, >>>, ::ng-deep rewritten as plain selectors; deprecated Sass / division replaced with equivalents for Dart Sass compatibility. styles.scss globals → src/index.scss.
• PWA: ServiceWorkerModule replaced with CRA's serviceWorkerRegistration.register() + a Workbox service-worker.ts; the GA snippet lives in public/index.html.

Tests

Jest + RTL, mocking fetch (and matchMedia/scrollTo polyfilled in setupTests.ts):

• hackerNews.ts: fetchFeed URL + parsed stories; fetchItemContent poll accumulation/population; fetchUser parsing.
• formatComments: "discuss" / "1 comment" / "N comments".
• SettingsContext: setters update state + write localStorage; theme initializes from localStorage.
• Feed: loader → items, error on rejection, Prev/More visibility by page + item count.
• Comment: nested recursion, collapse toggle, deleted branch.
• Item: hasUrl (external vs internal link) and new-tab target/rel when openLinkInNewTab is set.

Verification

Run from react-app/ (Node 20):

• npx tsc --noEmit — clean
• npm run lint — clean
• CI=true npm test — 6 suites, 19 tests passing
• npm run build — compiles successfully (service worker emitted)

Link to Devin session: https://app.devin.ai/sessions/38b93608d6844a8ea9f01300fe753510
Requested by: @vibhaseshadri-cognition

---

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]

End-to-end test results

Ran the migrated CRA app locally (npm run dev, http://localhost:3000) against the live node-hnapi API and exercised the golden-path flows in the browser.

• ✅ Root redirect / → /news/1 renders real HN stories
• ✅ Feed switching via header nav (/ask/1 shows distinct Ask HN posts)
• ✅ "More ›" pagination → /newest/2, list numbered from 31, Prev + More links appear
• ✅ Item detail + nested comments render; [-]→[+] collapse hides a thread
• ⚠️ User profile — happy-path UNTESTED (not a regression): upstream node-hnapi /user/:id returns 404 for all users (verified simonw + jonstaab). Same endpoint the original Angular app used, so it's a pre-existing upstream API limitation. The app correctly routes and renders its ErrorMessage.
• ✅ Settings: Night theme visibly recolors the app (light → dark)
• ✅ Settings persistence — Night theme survives a full page reload (localStorage)

Settings / theme toggle (before → after)

Default	Night

Item detail + comment collapse

Expanded → first comment collapsed ([-]→[+]):

Pagination + user error UI

Page 2 numbered from 31:

User profile error (upstream /user 404):

Full recording of the session:

Devin session: https://app.devin.ai/sessions/38b93608d6844a8ea9f01300fe753510