COG-GTM · charityquinn-cognition · Aug 28, 2026 · Aug 28, 2026
diff --git a/react-app/.gitignore b/react-app/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/react-app/.prettierignore b/react-app/.prettierignore
@@ -0,0 +1,4 @@
+dist
+node_modules
+public
+package-lock.json
diff --git a/react-app/.prettierrc.json b/react-app/.prettierrc.json
@@ -0,0 +1,6 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 4,
+    "singleQuote": true,
+    "printWidth": 120
+}
diff --git a/react-app/README.md b/react-app/README.md
@@ -0,0 +1,24 @@
+# react-app
+
+React + TypeScript + Vite rewrite of the Hacker News client. It lives alongside the Angular app
+(`../src`) while the migration is in progress; the Angular sources are removed in the final PR of
+the migration series, at which point this app moves to the repository root.
+
+## Scripts
+
+Run from this directory (`react-app/`), it has its own `package.json` and `node_modules`:
+
+```bash
+npm install
+npm run dev          # dev server on http://localhost:5173
+npm run build        # type-check + production build into dist/
+npm run lint         # ESLint
+npm run format       # Prettier (settings match the Angular app's prettier config)
+```
+
+## Styles and assets
+
+`src/styles/` holds the global stylesheet and theme partials ported from `../src/styles.scss` and
+`../src/app/shared/scss/`. Deprecated Sass APIs (`@import`, `darken()`, `/` division) were replaced
+with their `@use` / `sass:color` / `sass:math` equivalents so the stylesheet compiles warning-free
+with modern dart-sass. Icons, images, `favicon.ico` and `manifest.json` are copied into `public/`.
diff --git a/react-app/eslint.config.js b/react-app/eslint.config.js
@@ -0,0 +1,25 @@
+import js from '@eslint/js';
+import prettier from 'eslint-config-prettier';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import { globalIgnores } from 'eslint/config';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config([
+    globalIgnores(['dist']),
+    {
+        files: ['**/*.{ts,tsx}'],
+        extends: [
+            js.configs.recommended,
+            tseslint.configs.recommended,
+            reactHooks.configs.flat['recommended-latest'],
+            reactRefresh.configs.vite,
+            prettier,
+        ],
+        languageOptions: {
+            ecmaVersion: 2020,
+            globals: globals.browser,
+        },
+    },
+]);
diff --git a/react-app/index.html b/react-app/index.html
@@ -0,0 +1,79 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <title>Angular 2 HN</title>
+
+        <meta name="description" content="A Hacker News client built with React, TypeScript and Vite" />
+
+        <meta name="twitter:card" content="summary" />
+        <meta name="twitter:site" content="@hdjirdeh" />
+        <meta name="twitter:title" content="Angular 2 HN" />
+        <meta name="twitter:description" content="A Hacker News client built with React, TypeScript and Vite" />
+        <meta name="twitter:creator" content="@hdjirdeh" />
+        <meta name="twitter:image" content="/assets/images/logo-loading.png" />
+
+        <meta property="og:title" content="Angular 2 HN" />
+        <meta property="og:type" content="website" />
+        <meta property="og:url" content="https://angular2-hn.firebaseapp.com/" />
+        <meta property="og:image" content="/assets/images/logo-loading.png" />
+        <meta property="og:description" content="A Hacker News client built with React, TypeScript and Vite" />
+        <meta property="og:site_name" content="Angular 2 HN" />
+        <meta property="fb:admins" content="10202985971279760" />
+
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+        <meta name="theme-color" content="#b92b27" />
+
+        <meta name="msapplication-TileColor" content="#b92b27" />
+        <meta name="msapplication-TileImage" content="/assets/icons/mstile-150x150.png" />
+        <meta name="msapplication-config" content="/assets/icons/browserconfig.xml" />
+
+        <meta name="apple-mobile-web-app-capable" content="yes" />
+        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+
+        <link rel="manifest" href="/manifest.json" />
+        <link rel="mask-icon" href="/assets/icons/safari-pinned-tab.svg" color="#b92b27" />
+
+        <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" />
+        <link rel="apple-touch-icon" sizes="120x120" href="/assets/icons/apple-touch-icon-120x120.png" />
+        <link rel="apple-touch-icon" sizes="152x152" href="/assets/icons/apple-touch-icon-152x152.png" />
+        <link rel="apple-touch-icon" sizes="180x180" href="/assets/icons/apple-touch-icon-180x180.png" />
+
+        <style>
+            #skip a {
+                position: absolute;
+                left: -10000px;
+                top: auto;
+                width: 1px;
+                height: 1px;
+                overflow: hidden;
+            }
+            #skip a:focus {
+                position: static;
+                width: auto;
+                height: auto;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="skip"><a href="#content">skip to navigation</a></div>
+        <div id="root"></div>
+
+        <div class="app-loader">
+            <img class="logo" src="/assets/images/logo.svg" alt="Logo" />
+
+            <noscript>
+                <h4 style="font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica">
+                    Sorry, JavaScript needs to be enabled in order to run this application.
+                </h4>
+            </noscript>
+        </div>
+
+        <script type="module" src="/src/main.tsx"></script>
+    </body>
+</html>