COG-GTM · devanshi-gpta · Jul 7, 2026 · Jul 7, 2026 · Jul 7, 2026
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -0,0 +1,16 @@
+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 }],
+    '@typescript-eslint/no-explicit-any': 'off',
+  },
+};
diff --git a/.gitignore b/.gitignore
@@ -2,10 +2,9 @@
 
 # compiled output
 /dist
+/dev-dist
 /tmp
 /out-tsc
-# Only exists if Bazel was run
-/bazel-out
 
 # dependencies
 /node_modules

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, TypeScript and Vite
 </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 [Workbox](https://workboxjs.org/) (via [`vite-plugin-pwa`](https://vite-pwa-org.netlify.app/)) to generate a service worker as part of the build step to load quickly and work offline.
 
 ## Manifest
 
@@ -73,16 +73,17 @@ 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 is a React single-page app built with [Vite](https://vitejs.dev/) 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 start` (alias for `npm run dev`) to run the application with the Vite dev server
+ - `npm run build` to type-check and produce a production build in the output directory (`dist/`)
+ - `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 in a production build. To test the PWA / service worker locally:
+ - `npm run build`
+ - `npm run preview` to serve the production build (including the generated service worker) locally
 
 ## 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/src/index.html → index.html b/src/index.html → index.html
@@ -3,22 +3,21 @@
 <head>
   <meta charset="utf-8">
   <title>Angular 2 HN</title>
-  <base href="/">
 
-	<meta name="description" content="A Hacker News client built with Angular CLI, RxJS and Webpack"/>
+	<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 Angular CLI, RxJS and Webpack">
+	<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 Angular CLI, RxJS and Webpack"/>
+	<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"/>
 
@@ -33,7 +32,6 @@
   <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">
@@ -48,31 +46,17 @@
     #skip a {  position:absolute;  left:-10000px;  top:auto;  width:1px;  height:1px;  overflow:hidden;  }
     #skip a:focus {  position:static;  width:auto;  height:auto;  }
   </style>
-  <link rel="manifest" href="manifest.webmanifest">
-  <meta name="theme-color" content="#1976d2">
 </head>
 <body>
   <div id="skip"><a href="#content">skip to navigation</a></div>
-  <app-root></app-root>
+  <div id="root"></div>
 
-  <div class="app-loader" id="content">
-    <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>
 
-    <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>
-    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
-
-    ga('create', 'UA-66348622-3', 'auto');
-
-  </script>
+  <script type="module" src="/src/main.tsx"></script>
 </body>
 </html>