COG-GTM · devanshi-gpta · Jul 8, 2026 · Jul 8, 2026 · Jul 8, 2026 · Jul 8, 2026
diff --git a/.eslintrc.cjs b/.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', '.eslintrc.cjs', 'vite.config.ts'],
+    parser: '@typescript-eslint/parser',
+    plugins: ['react-refresh'],
+    rules: {
+        'react-refresh/only-export-components': 'off',
+    },
+};
diff --git a/.gitignore b/.gitignore
@@ -2,6 +2,7 @@
 
 # compiled output
 /dist
+/dev-dist
 /tmp
 /out-tsc
 # Only exists if Bazel was run

diff --git a/.travis.yml b/.travis.yml
@@ -1,16 +1,16 @@
 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 ci
   - npm run build
 
 after_success:

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, Vite and TypeScript
 </p>
 
 <p align="center">
@@ -43,7 +43,7 @@
 
 ## 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/) (backed by [Workbox](https://workboxjs.org/)) to generate a service worker as part of the build step to load quickly and work offline.
 
 ## Manifest
 
@@ -73,16 +73,16 @@ 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.
+This project uses [Vite](https://vitejs.dev/) with React and TypeScript.
 
  - 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 run the application with the Vite dev server
+ - `npm run build` to type-check and produce an optimized production build in the output directory (`dist/`)
+ - `npm run preview` to locally serve the production build
+ - `npm run lint` to run ESLint
 
-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)
+Note: The service worker is only generated for production builds. To test the PWA / offline support locally, run `npm run build` followed by `npm run preview`.
 
 ## Contributors
 

diff --git a/angular.json b/angular.json
diff --git a/browserslist b/browserslist
diff --git a/e2e/protractor.conf.js b/e2e/protractor.conf.js
diff --git a/e2e/src/app.e2e-spec.ts b/e2e/src/app.e2e-spec.ts
diff --git a/e2e/src/app.po.ts b/e2e/src/app.po.ts
diff --git a/e2e/tsconfig.json b/e2e/tsconfig.json
diff --git a/index.html b/index.html
@@ -0,0 +1,62 @@
+<!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, Vite and TypeScript"/>
+
+  <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, Vite and TypeScript">
+  <meta name="twitter:creator" content="@hdjirdeh">
+  <meta name="twitter:image" content="/assets/images/logo.svg">
+
+  <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.svg"/>
+  <meta property="og:description" content="A Hacker News client built with React, Vite and TypeScript"/>
+  <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="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>
+
+  <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>
+
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+</html>