COG-GTM · devanshi-gpta · Jul 7, 2026 · 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': 'warn',
+  },
+};
diff --git a/.gitignore b/.gitignore
@@ -44,3 +44,7 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
+node_modules
+dev-dist
+tsconfig.tsbuildinfo
+tsconfig.node.tsbuildinfo
diff --git a/.travis.yml b/.travis.yml
@@ -1,14 +1,13 @@
 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 build

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">
@@ -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/) (Workbox under the hood) to generate a service worker as part of the build step to load quickly and work offline.
 
 ## Manifest
 
@@ -73,16 +73,18 @@ 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 built with [React](https://react.dev/) + [TypeScript](https://www.typescriptlang.org/) + [Vite](https://vitejs.dev/), and uses [react-router-dom](https://reactrouter.com/) for routing and [vite-plugin-pwa](https://vite-pwa-org.netlify.app/) for offline support.
 
  - 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
+ - `npm run build` to produce a production build in the output directory (`dist/`)
+ - `npm run preview` to locally preview the production build (service worker included)
+ - `npm run lint` to run ESLint and `npm run typecheck` to run the TypeScript compiler
 
-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 by `npm run build`. To test offline/service-worker behavior locally, run `npm run build` followed by `npm run preview`.
+
+Deployment: `npm run build` outputs to `dist/`, which is served by Firebase Hosting (see `firebase.json`).
 
 ## Contributors
 

diff --git a/angular.json b/angular.json
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,77 @@
+<!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, 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 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 React, TypeScript and Vite"/>
+	<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="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">
+  <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>
+
+  <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>
+  </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>