COG-GTM · vibhaseshadri-cognition · Aug 6, 2026 · Aug 6, 2026 · Aug 6, 2026 · Aug 6, 2026
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -6,20 +6,35 @@ on:
     pull_request:
 
 jobs:
-    web:
-        name: Lint, test and build the React app
+    build:
+        name: Lint, test and build
         runs-on: ubuntu-latest
-        defaults:
-            run:
-                working-directory: web
         steps:
             - uses: actions/checkout@v4
             - uses: actions/setup-node@v4
               with:
                   node-version: 20
                   cache: npm
-                  cache-dependency-path: web/package-lock.json
             - run: npm ci
             - run: npm run lint
             - run: npm test
             - run: npm run build
+
+    e2e:
+        name: End-to-end tests
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v4
+            - uses: actions/setup-node@v4
+              with:
+                  node-version: 20
+                  cache: npm
+            - run: npm ci
+            - run: npx playwright install --with-deps chromium
+            - run: npm run test:e2e
+            - uses: actions/upload-artifact@v4
+              if: failure()
+              with:
+                  name: playwright-report
+                  path: playwright-report/
+                  retention-days: 7
diff --git a/.gitignore b/.gitignore
@@ -2,17 +2,18 @@
 
 # compiled output
 /dist
+/dev-dist
 /tmp
-/out-tsc
-# Only exists if Bazel was run
-/bazel-out
 
 # dependencies
 /node_modules
 
-# profiling files
-chrome-profiler-events.json
-speed-measure-plugin.json
+# tests
+/coverage
+/test-results
+/playwright-report
+/blob-report
+/playwright/.cache
 
 # IDEs and editors
 /.idea
@@ -32,14 +33,9 @@ speed-measure-plugin.json
 .history/*
 
 # misc
-/.sass-cache
-/connect.lock
-/coverage
-/libpeerconnection.log
 npm-debug.log
 yarn-error.log
-testem.log
-/typings
+*.local
 
 # System Files
 .DS_Store

diff --git a/.travis.yml b/.travis.yml
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -1,27 +1,27 @@
 # Contributing
 
 Thank you for your interest in contributing! Please feel free to put up a PR for any issue or feature request.
-Even if you have little to no experience with Angular, I'll be more than happy to help. :)
+Even if you have little to no experience with React, I'll be more than happy to help. :)
 
 ## Setup
 
 1. Fork the repo
 2. Clone your fork
 3. Make a branch for your feature or bug fix
-4. If you don't have Angular CLI installed: `npm install -g angular-cli@latest`
-5. `ng init`
-6. Type `n` for each file to not overwrite any file changes
-7. Run `npm start` and open `localhost:4200` in a browser
-8. Work your magic
-9. Run `npm run build` or `npm run static-serve` to kick off a production build and make sure nothing is broken
-10. To test service worker changes:
-  * `npm run build` to kick off a fresh build and update the `dist/` directory
-  * `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)
-11. Add yourself to the [contributor's list](https://github.com/hdjirdeh/angular2-hn#contributors) in the README!
-12. Commit your changes and reference the issue you're addressing (for example: `git commit -am 'Commit message. Closes #5'`)
-13. Push your branch to your fork
-14. Create a pull request from your branch on your fork to `master` on this repo
-15. Have your branch get merged in! :star2:
+4. `npm ci`
+5. `npm run dev` and open `localhost:5173` in a browser
+6. Work your magic
+7. Before pushing, make sure nothing is broken:
+   * `npm run lint`
+   * `npm test` (add or update Vitest/React Testing Library tests for your change)
+   * `npm run build`
+   * `npm run test:e2e` for the Playwright suite (run `npx playwright install chromium` once beforehand)
+8. To test service worker changes, run `npm run build` followed by `npm run preview` — the service worker is only
+   generated for production builds
+9. Add yourself to the [contributor's list](https://github.com/hdjirdeh/angular2-hn#contributors) in the README!
+10. Commit your changes and reference the issue you're addressing (for example: `git commit -am 'Commit message. Closes #5'`)
+11. Push your branch to your fork
+12. Create a pull request from your branch on your fork to `master` on this repo
+13. Have your branch get merged in! :star2:
 
 If you experience a problem at any point, please don't hesitate to file an issue or send me a message!
diff --git a/README.md b/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
 </p>
 
 <p align="center">
@@ -14,52 +14,80 @@
 
 <p align="center">
   <a href="/CONTRIBUTING.md"><img alt="PRs Welcome" src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg"></a>
-  <a href="https://travis-ci.org/housseindjirdeh/angular2-hn"><img alt="Build Status" src="https://travis-ci.org/housseindjirdeh/angular2-hn.svg?branch=master"></a>
+  <a href="https://github.com/COG-GTM/angular2-hn/actions/workflows/ci.yml"><img alt="Build Status" src="https://github.com/COG-GTM/angular2-hn/actions/workflows/ci.yml/badge.svg"></a>
 </p>
 
 ---
 
-## React migration (in progress)
-
-The app is being migrated from Angular to React 18 + TypeScript + Vite. The React app lives in [`web/`](/web) while the
-Angular app in `src/` stays buildable until parity is reached.
-
-```bash
-cd web
-npm ci
-npm run dev     # dev server on http://localhost:5173
-npm run lint
-npm test
-npm run build
-```
-
----
-
 :zap: **Fast:** Service Worker App Shell + Dynamic Content model to achieve faster load times with and without a network.
 
 :iphone: **Responsive:** Completely responsive UI that can be installed to your mobile home screen to provide a native feel.
 
-:rocket: **Progressive:** [Lighthouse](https://github.com/GoogleChrome/lighthouse) score of 87/100.
+:rocket: **Progressive:** installable, offline-capable PWA.
 
 <p align="center">
   <img src = "http://i.imgur.com/fzJzLFO.png" width=500>
 </p>
 
-## Mobile Preview
+## Stack
 
-<p align="center">
-  <img src = "http://i.imgur.com/ZloA1hn.gif">
-</p>
+The app was originally written in Angular and has been rewritten in React with no change in behaviour:
 
-## Laptop Preview
+| | |
+| --- | --- |
+| UI | React 18 + TypeScript |
+| Build / dev server | Vite 5 |
+| Routing | React Router v6 |
+| Styling | SCSS (three themes: Default, Night, Black (AMOLED)) |
+| Unit / component tests | Vitest + React Testing Library |
+| End-to-end tests | Playwright |
+| PWA | `vite-plugin-pwa` (Workbox) |
+| Data | [node-hnapi](https://github.com/cheeaun/node-hnapi) over native `fetch` |
 
-<p align="center">
-  <img src = "http://i.imgur.com/MrKHaln.gif">
-</p>
+## Getting started
 
-## Offline Support
+```bash
+npm ci
+npm run dev       # dev server on http://localhost:5173
+npm run build     # type-check and build to dist/
+npm run preview   # serve the production build (service worker included)
+```
+
+## Tests
 
-This app uses [Workbox](https://workboxjs.org/) to generate a service worker as part of the build step to load quickly and work offline.
+```bash
+npm run lint            # ESLint (with Prettier compatibility)
+npm test                # Vitest unit and component tests
+npm run test:coverage   # the same suite with a V8 coverage report
+npm run test:e2e        # Playwright end-to-end tests against the production build
+```
+
+The Playwright suite stubs the Hacker News API with fixtures (`e2e/fixtures.ts`) so it is deterministic and can run
+offline. CI (`.github/workflows/ci.yml`) runs lint, unit tests, the build and the e2e suite on every pull request.
+
+## Project layout
+
+```
+src/
+  api/            fetch-based Hacker News API client
+  components/     shared presentational components (Loader, ErrorMessage)
+  context/        SettingsContext (theme, font size, list spacing, link behaviour)
+  core/           app chrome: Header, Footer, Settings modal
+  feeds/          feed item row
+  item-details/   recursive comment tree
+  models/         TypeScript models (Story, Comment, User, PollResult, Settings)
+  pages/          routed pages: FeedPage, ItemDetailsPage, UserPage
+  styles/         SCSS themes and shared variables/mixins
+  utils/          pure helpers (formatCommentCount)
+  routes.tsx      route table mirroring the original Angular routes
+e2e/              Playwright specs and API fixtures
+```
+
+## Offline support
+
+`vite-plugin-pwa` generates a Workbox service worker at build time: the app shell is precached and every navigation
+falls back to `index.html`, while Hacker News API responses are served with a `NetworkFirst` strategy (24h expiry) so
+previously visited feeds and items keep working offline.
 
 ## Manifest
 
@@ -78,27 +106,26 @@ Current themes:
 * Night
 * Black (AMOLED)
 
-More to come!
+The theme follows `prefers-color-scheme` on first load and is then persisted to `localStorage`.
 
-## Areas of improvement
+## Mobile Preview
 
- - Realtime updating using the Firebase SDK (may need to add option to settings so service worker can still rely on REST endpoints)
- - Server side rendering
+<p align="center">
+  <img src = "http://i.imgur.com/ZloA1hn.gif">
+</p>
 
-Feel free to send me feedback on [twitter](https://twitter.com/hdjirdeh) or [file an issue](https://github.com/hdjirdeh/angular2-hn/issues/new)! Feature requests are always welcome.
+## Laptop Preview
 
-## Build process
+<p align="center">
+  <img src = "http://i.imgur.com/MrKHaln.gif">
+</p>
 
-Note: This project has been ejected (with AOT + production settings) in order to customize Webpack configurations.
+## Areas of improvement
 
- - 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/`)
+ - Realtime updating using the Firebase SDK (may need to add option to settings so the service worker can still rely on REST endpoints)
+ - Server side rendering
 
-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)
+Feel free to send me feedback on [twitter](https://twitter.com/hdjirdeh) or [file an issue](https://github.com/hdjirdeh/angular2-hn/issues/new)! Feature requests are always welcome.
 
 ## Contributors