[tedfoley]

Summary

First step of the Angular → React migration (board ticket UNT78-1, plan step s1.1). Adds a standalone React app in react-app/, created fresh from master. The Angular 9 app at the repo root is not touched.

• Stack: Vite 7, React 19, TypeScript 5.9 strict (with noUncheckedIndexedAccess), React Router 7, TanStack Query 5, Sass, ESLint 9 (flat config, typescript-eslint, react-hooks, eslint-config-prettier), Prettier 3, Vitest 4 + React Testing Library (jsdom), and Playwright (installed, no specs yet). Node >=20.19; .nvmrc is 20.
• npm scripts: dev, build (tsc -b && vite build), preview, lint (eslint . && prettier --check .), typecheck, test (vitest run), e2e (playwright test --pass-with-no-tests, which builds and serves preview on :4173).
• Prettier: .prettierrc.json uses the root package.json settings (4 spaces, single quotes, width 120, es5 trailing commas).
• queryClient.ts: a createQueryClient() factory with networkMode: 'offlineFirst', a 24h gcTime and a 60s staleTime, so later steps can add offline reads and persistence.
• Routing: routes.tsx exports a RouteObject[]. For now it has one catch-all Placeholder route. The same array feeds createBrowserRouter in main.tsx and createMemoryRouter in tests.
• public/: holds copies of src/assets/**, src/favicon.ico and src/manifest.json, so later steps can reference /assets/....
• Vitest is pinned to ^4.1.11 because 3.x pulls in tinypool/@vitest/mocker versions with open advisories. npm audit reports 0 vulnerabilities.

There's no CI workflow for react-app/ yet. A separate ticket covers that.

Verification

I ran npm ci && npm run lint && npm run typecheck && npm test && npm run build in react-app/ and all of them pass (2 Vitest tests). npm run e2e exits 0 with no specs.

I served the production build with vite preview and opened it in headless Chrome. / and the deep link /news/1 both render the placeholder, /manifest.json returns 200, and there were no console errors or failed requests.

Earlier unmerged React migration PRs (e.g. #865–#878) were used only as reference. Per the board's baseline decision, this branch starts from master. Only one of these scaffolds should land.

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

---

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

[devin-ai-integration]

Devin Review found 1 potential issue.

[devin-ai-integration]

🟡 Installed app displays the Angular name

Installing React HN displays “Angular 2 HN” because the manifest's name and short_name retain the old branding.

Suggested change

	"name": "Angular 2 HN",
	"short_name": "Angular 2 HN",
	"name": "React HN",
	"short_name": "React HN",

---

Was this helpful? React with 👍 or 👎 to provide feedback.

[devin-ai-integration]

I'm leaving this as is on purpose. This ticket's scope is to copy manifest.json into react-app/public/ unchanged, so later steps can reference it. The installed-app name and branding belong to the separate "PWA manifest and offline service worker" step on the migration board, which will rewrite this file. The app's final name hasn't been decided yet, so I'm not renaming it here. Nothing is installable from react-app/ until that step ships a service worker.

[devin-ai-integration]

I tested this locally in Chrome, against the Vite dev server (:5173) and a fresh production build served by vite preview (:4173). Every requested check passed.

• The logo and favicon load, and the heading color is #b92b27.
• /, /news/1, /item/123 and /user/pg render the right pathname, both on direct load and after a hard refresh.
• /favicon.ico, /manifest.json and /assets/icons/android-chrome-192x192.png return 200.
• There were no console errors or failed requests across 248 responses.
• At a 390px viewport (Chrome emulation) the page stays centered with no horizontal overflow.

Production desktop, deep link after refresh	Production mobile, 390×844

Scope: only the React scaffold. The Angular app was not tested.