Scaffold Vite + React + TypeScript app in react-app/

react-app/.gitignore

@@ -0,0 +1,9 @@
+node_modules
+dist
+coverage
+*.local
+*.tsbuildinfo
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

react-app/.nvmrc

@@ -0,0 +1 @@
+20

react-app/.prettierignore

@@ -0,0 +1,7 @@
+dist
+coverage
+node_modules
+playwright-report
+test-results
+public
+package-lock.json

react-app/.prettierrc.json

@@ -0,0 +1,6 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 4,
+    "singleQuote": true,
+    "printWidth": 120
+}

react-app/README.md

@@ -0,0 +1,21 @@
+# React HN (migration target)
+
+React rewrite of the Angular app at the repo root. The Angular app stays untouched until cutover.
+
+Stack: Vite, React 19, TypeScript (strict), React Router, TanStack Query, Sass, ESLint + Prettier, Vitest + React Testing Library, Playwright.
+
+Requires Node 20 (`>=20.19`, see `.nvmrc`).
+
+```bash
+cd react-app
+npm ci
+npm run dev        # dev server on http://localhost:5173
+npm run lint       # eslint + prettier --check
+npm run typecheck
+npm test           # vitest
+npm run build      # output in react-app/dist
+npm run preview
+npm run e2e        # playwright (no specs yet)
+```
+
+`public/` holds the icons, images, `favicon.ico` and `manifest.json` copied from `src/` of the Angular app.

react-app/eslint.config.js

@@ -0,0 +1,26 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import prettier from 'eslint-config-prettier';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+    { ignores: ['dist', 'coverage', 'playwright-report', 'test-results'] },
+    {
+        extends: [js.configs.recommended, ...tseslint.configs.recommended, prettier],
+        files: ['**/*.{ts,tsx}'],
+        languageOptions: {
+            ecmaVersion: 2022,
+            globals: globals.browser,
+        },
+        plugins: {
+            'react-hooks': reactHooks,
+            'react-refresh': reactRefresh,
+        },
+        rules: {
+            ...reactHooks.configs.recommended.rules,
+            'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+        },
+    }
+);

react-app/index.html

@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="theme-color" content="#b92b27" />
+        <meta name="description" content="A Hacker News client built with React" />
+        <title>React HN</title>
+        <link rel="manifest" href="/manifest.json" />
+        <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+        <link rel="icon" type="image/png" href="/assets/icons/favicon-32x32.png" sizes="32x32" />
+        <link rel="icon" type="image/png" href="/assets/icons/favicon-16x16.png" sizes="16x16" />
+        <link rel="apple-touch-icon" sizes="180x180" href="/assets/icons/apple-touch-icon.png" />
+    </head>
+    <body>
+        <div id="root"></div>
+        <script type="module" src="/src/main.tsx"></script>
+    </body>
+</html>