Upgrade to React 18, node 18, up deps, CRA => Vite, Add ADR

aleinin · Nov 3, 2023 · b09ef56 · b09ef56
1 parent e7e4b45
commit b09ef56
Show file tree

Hide file tree

Showing 35 changed files with 15,467 additions and 33,342 deletions.
diff --git a/adrs/ADR-1-ditch-cra-use-vite.md b/adrs/ADR-1-ditch-cra-use-vite.md
@@ -0,0 +1,26 @@
+## Date: 11/2/23
+
+## Decision: 
+
+Going forward goty-client will use Vite instead of create-react-app
+
+## Why not CRA? 
+create-react-app has fallen out of favor as the years have gone by. It's something that I shed no tears about. 
+
+I've always found CRA to be more in-the-way than helpful. I'd prefer to more directly build out apps. 
+
+I made an effort to use CRA as it was an industry standard when I first started building goty-client.
+
+However,
+
+* Less supported in 2023
+* Harder to maintain/configure due to abstractions
+* I personally dislike it and prefer Vite
+* Poor performance, bulky.
+
+## Why vite? 
+Why not Next.js, or something else?
+
+I chose Vite as, at the time of writing, its the best solution for a rather vanilla un-opinionated React tooling system. 
+
+While Next is great, it's quite opinionated and the benefits it does bring (SSR, and so on) don't particular benefit my use case. Also, with the framework being so opinionated, I suspect that it'll be harder to maintain overtime as Next's opinions change.
diff --git a/adrs/README.md b/adrs/README.md
@@ -0,0 +1,20 @@
+## What is an ADR?
+Architectural Decision Record
+
+https://en.wikipedia.org/wiki/Architectural_decision
+
+## Why ADRs?
+
+game-of-the-year is a project I've been working on in short bursts for many years. It first started as a google form back in 2016. 
+
+It has since grown into an app. Generally it receives a couple weeks of development in November before it goes live for the year then it remains untouched.
+
+With so much time passing, my philosophy often has changed as I've grown as a developer that year. This app has seen many changes
+
+* The frontend used to be Angular (now React)
+* The frontend used to use CRA, now it uses Vite
+* The backend used to be Java, now its Kotlin.
+* The backend used to harvest from IGDB and load into an Elasticsearch, now it queries IGDB directly.
+
+All these decisions had a reason, but as the years go on I forget. So, going forward i'm going to attempt to write -why- I made a decision so when I come back the next year, i can remind myself. 
+
diff --git a/goty-client/.eslintrc b/goty-client/.eslintrc
@@ -0,0 +1,16 @@
+{
+  "extends": [
+    "react-app",
+    "react-app/jest"
+  ],
+  "rules": {
+    "semi": [
+      "error",
+      "never"
+    ],
+    "quotes": [
+      "error",
+      "single"
+    ]
+  }
+}
diff --git a/goty-client/__mocks__/styleMock.js b/goty-client/__mocks__/styleMock.js
@@ -0,0 +1 @@
+module.exports = {}
diff --git a/goty-client/index.html b/goty-client/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Frontend for TMW discord's yearly Game of the Year vote"
+    />
+    <link rel="manifest" href="/manifest.json" />
+    <title>TMW GOTY</title>
+  </head>
+  <body id="goty-body">
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/goty-client/jest.config.js b/goty-client/jest.config.js
@@ -0,0 +1,11 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  "setupFilesAfterEnv": [
+    "<rootDir>/src/setupTests.ts"
+  ],
+  moduleNameMapper: {
+    '^.+\\.(css|less|sass|scss)$': '<rootDir>/__mocks__/styleMock.js'
+  }
+};