feature: migrate Angular 9 HN PWA to React + TypeScript on Vite

.eslintrc.cjs

@@ -0,0 +1,15 @@
+module.exports = {
+    root: true,
+    env: { browser: true, es2020: true },
+    extends: [
+        'eslint:recommended',
+        'plugin:@typescript-eslint/recommended',
+        'plugin:react-hooks/recommended',
+    ],
+    ignorePatterns: ['dist', 'dev-dist', '.eslintrc.cjs'],
+    parser: '@typescript-eslint/parser',
+    plugins: ['react-refresh'],
+    rules: {
+        'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+    },
+};

.gitignore

@@ -44,3 +44,6 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
+
+# Vite PWA dev output
+/dev-dist

.travis.yml

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

CONTRIBUTING.md

@@ -1,27 +1,24 @@
 # 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:
+4. `npm install`
+5. Run `npm run dev` and open `localhost:4200` in a browser
+6. Work your magic
+7. Run `npm run lint`, `npm test` and `npm run build` to make sure nothing is broken
+8. 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:
+  * `npm run preview` to serve the built app together with its generated service worker
+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!

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 and TypeScript
 </p>
 
 <p align="center">
@@ -23,7 +23,7 @@
 
 :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 PWA with a Workbox service worker generated by `vite-plugin-pwa`.
 
 <p align="center">
   <img src = "http://i.imgur.com/fzJzLFO.png" width=500>
@@ -43,11 +43,11 @@
 
 ## Offline Support
 
-This app uses [Workbox](https://workboxjs.org/) to generate a service worker as part of the build step to load quickly and work offline.
+This app uses [vite-plugin-pwa](https://vite-pwa-org.netlify.app/) (Workbox under the hood) to generate a service worker as part of the build step, so the app loads quickly and works offline.
 
 ## Manifest
 
-With Chromium based browsers for Android (Chrome, Opera, etc...), Angular 2 HN includes a Web App Manifest that allows you to install to your homescreen.
+With Chromium based browsers for Android (Chrome, Opera, etc...), React HN includes a Web App Manifest that allows you to install to your homescreen.
 
 <p align="center">
   <img src = "http://i.imgur.com/1RaaNkr.png">
@@ -71,18 +71,25 @@ More to come!
 
 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.
 
-## Build process
+## Stack
+
+* [React](https://react.dev/) 18 with TypeScript
+* [React Router](https://reactrouter.com/) for routing (feeds, item details, user profiles)
+* [Vite](https://vitejs.dev/) for the dev server and production build
+* [vite-plugin-pwa](https://vite-pwa-org.netlify.app/) for the service worker and offline support
+* [Vitest](https://vitest.dev/) + [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) for tests
+* SCSS for styling and theming
 
-Note: This project has been ejected (with AOT + production settings) in order to customize Webpack configurations.
+## Build process
 
  - 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` to start the Vite dev server on [localhost:4200](http://localhost:4200)
+ - `npm run build` to type-check and produce a production build in `dist/`
+ - `npm run preview` to serve the production build locally (this is the only way to exercise the service worker, which is disabled in development)
+ - `npm test` to run the unit tests, `npm run lint` to lint
 
-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)
+Data comes from the [node-hnapi](https://github.com/cheeaun/node-hnapi) REST API.
 
 ## Contributors