feature: Migrate Angular 9 HN PWA to React 18 + TypeScript (pixel-perfect, visual-regression verified)

.eslintrc.cjs

@@ -0,0 +1,34 @@
+/* eslint-env node */
+module.exports = {
+    root: true,
+    env: { browser: true, es2021: true, node: true },
+    extends: [
+        'eslint:recommended',
+        'plugin:@typescript-eslint/recommended',
+        'plugin:react-hooks/recommended',
+    ],
+    parser: '@typescript-eslint/parser',
+    parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+    plugins: ['@typescript-eslint', 'react-refresh'],
+    ignorePatterns: [
+        'dist',
+        'dev-dist',
+        'node_modules',
+        'playwright-report',
+        'test-results',
+        '.eslintrc.cjs',
+        'tests/visual-regression/__screenshots__',
+    ],
+    rules: {
+        'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+        '@typescript-eslint/no-explicit-any': 'error',
+    },
+    overrides: [
+        {
+            files: ['tests/**/*.ts'],
+            rules: {
+                '@typescript-eslint/no-empty-function': 'off',
+            },
+        },
+    ],
+};

.gitignore

@@ -44,3 +44,9 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
+
+# Playwright
+/test-results
+/playwright-report
+/blob-report
+/playwright/.cache

.travis.yml

@@ -1,16 +1,18 @@
 language: node_js
 node_js:
-  - "6.9"
+  - "20"
 
 branches:
   only:
     - master
 
 before_script:
   - npm install -g firebase-tools
-  - npm install -g @angular/cli
 
 script:
+  - npm run lint
+  - npm run typecheck
+  - npm test
   - npm run build
 
 after_success:

README.md

@@ -5,7 +5,7 @@
 </p>
 
 <p align="center">
-  A progressive Hacker News client built with Angular
+  A progressive Hacker News client built with React, TypeScript and Vite
 </p>
 
 <p align="center">
@@ -53,6 +53,28 @@ With Chromium based browsers for Android (Chrome, Opera, etc...), Angular 2 HN i
   <img src = "http://i.imgur.com/1RaaNkr.png">
 </p>
 
+## Tech Stack
+
+This app was migrated from Angular 9 to **React 18 + TypeScript** with pixel-perfect visual parity verified by Playwright visual regression tests.
+
+* **React 18** with functional components and hooks
+* **TypeScript** (strict mode)
+* **Vite** for dev server and production builds
+* **react-router-dom v6** for routing (with `React.lazy` code splitting for item/user pages)
+* **Sass (SCSS)** for the theme engine
+* **vite-plugin-pwa** (Workbox) for the service worker / app shell
+* **Vitest** + **@testing-library/react** for unit tests
+* **Playwright** for visual regression testing across every view, theme and viewport
+
+### Architecture
+
+* `src/models/` — TypeScript interfaces (`Story`, `Comment`, `User`, `PollResult`, `Settings`)
+* `src/hooks/useHackerNewsApi.ts` — async data functions + a generic `useApiFetch` hook
+* `src/contexts/SettingsContext.tsx` — app-wide settings (theme, font size, spacing, link behavior) persisted to `localStorage`
+* `src/components/` — shared, core (Header/Footer/Settings) and feed components
+* `src/pages/` — `FeedPage`, `ItemDetailPage`, `UserPage`
+* `src/styles/` — global SCSS and the theme mixin engine
+
 ## Themes
 
 Built in theme engine!
@@ -73,16 +95,20 @@ Feel free to send me feedback on [twitter](https://twitter.com/hdjirdeh) or [fil
 
 ## Build process
 
-Note: This project has been ejected (with AOT + production settings) in order to customize Webpack configurations.
-
  - Clone or download the repo
  - `npm install`
- - `npm start` to run the application with webpack-dev-server or `npm build` to kick off a fresh build and update the output directory (`dist/`)
+ - `npm run dev` (or `npm start`) to run the Vite dev server at `http://localhost:5173`
+ - `npm run build` to type-check and produce a fresh production build in the output directory (`dist/`)
+ - `npm run preview` to serve the production build (including the service worker) locally
+
+The service worker is generated by `vite-plugin-pwa` as part of `npm run build`, so offline behavior can be verified via `npm run preview`.
+
+## Testing
 
-Note: Any Service Worker changes will not be reflected when you run the application locally in development. To test service worker changes:
- - `npm build`
- - `npm run precache` to generate the service worker file
- - `npm run static-serve` to load the application along with the service worker asset using [live-server](https://github.com/tapio/live-server)
+ - `npm test` — run the Vitest unit test suite
+ - `npm run test:watch` — run unit tests in watch mode
+ - `npm run test:vr` — run the Playwright visual regression suite against the React app (compares against the Angular baseline screenshots)
+ - `npm run test:vr:baseline` — regenerate baseline screenshots
 
 ## Contributors