move off of cra to vite

.editorconfig

@@ -5,7 +5,6 @@ charset = utf-8
 end_of_line = lf
 insert_final_newline = true
 trim_trailing_whitespace = true
-
-[*.{ts,tsx,js,json}]
 indent_style = space
 indent_size = 2
+max_line_length = 80

.env

@@ -1 +1 @@
-REACT_APP_GOOGLE_CLIENT_ID=706375540729-sqnnig7o0d0uqmvav0h8nh8aft6l55u3.apps.googleusercontent.com
+VITE_GOOGLE_CLIENT_ID=706375540729-sqnnig7o0d0uqmvav0h8nh8aft6l55u3.apps.googleusercontent.com

.github/workflows/autodeploy.yml

@@ -3,27 +3,26 @@ name: Autodeploy branch
 on:
   push:
     branches:
-     - deploy
+      - deploy
 
 jobs:
   build:
-
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v3
-    - name: Install node
-      uses: actions/setup-node@v3
-      with:
-        node-version: 18
-    - name: Install node dependencies
-      run: npm install
-    - name: Run build
-      run: npm run build
-    - name: Archive build artifacts
-      uses: actions/upload-artifact@v4
-      with:
-        name: built-site
-        path: |
-          build
-          !build/latest.json
+      - uses: actions/checkout@v3
+      - name: Install node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - name: Install node dependencies
+        run: npm install
+      - name: Run build
+        run: npm run build
+      - name: Archive build artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: built-site
+          path: |
+            build
+            !build/latest.json

.github/workflows/ci.yml

@@ -20,31 +20,29 @@ jobs:
     name: Prettier
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
-    - name: Install node
-      uses: actions/setup-node@v4
-      with:
-        node-version: ${{ env.node-version }}
-        cache: 'npm'
-    - name: Install node dependencies
-      run: npm install
-    - name: Run Prettier
-      run: npm run ci-prettier
+      - uses: actions/checkout@v4
+      - name: Install node
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.node-version }}
+          cache: "npm"
+      - name: Install node dependencies
+        run: npm install
+      - name: Run Prettier
+        run: npm run ci-prettier
   build:
     name: Build
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
-    - name: Install node
-      uses: actions/setup-node@v4
-      with:
-        node-version: ${{ env.node-version }}
-        cache: 'npm'
-    - name: Install node dependencies
-      run: npm install
-    - name: Run ESLint
-      run: npm run ci-eslint
-    - name: Run tsc
-      run: npx -p typescript@latest tsc
-    - name: Run build
-      run: npm run build
+      - uses: actions/checkout@v4
+      - name: Install node
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.node-version }}
+          cache: "npm"
+      - name: Install node dependencies
+        run: npm install
+      - name: Run ESLint
+        run: npm run ci-eslint
+      - name: Run build
+        run: npm run build

.gitignore

@@ -1,3 +1,29 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+
 # artifacts
 scrapers/catalog.json
 scrapers/fireroad.json
@@ -6,13 +32,5 @@ public/latest.json
 # python
 __pycache__
 
-# node
-/node_modules
-/build
-
+# deploy script
 deploy.sh
-
-.idea
-
-# MacOS is stupid
-.DS_Store

README.md

@@ -24,7 +24,7 @@ To spin up the site, we need two steps:
 
 (1) We need to update the backend to get the data. `cd scrapers` then run `python update.py`.
 
-(2) We then can update the frontend, via running `npm start`. This will open a browser tab that updates live as you edit code.
+(2) We then can update the frontend, via running `npm run dev`. This will start a developer server. Open a browser tab to [`http://localhost:5173/`](http://localhost:5173/), which will update live as you edit code.
 
 If this is the **first time** you're spinning up the website, the two steps have to be taken in order: step (1), and then step (2). If not followed, you'll see a blank frontend.
 
@@ -54,16 +54,16 @@ See `deploy/README.md` for more info.
 
 ### Architecture
 
-*I want to change...*
+_I want to change..._
 
-- *...the data available to Hydrant.*
+- _...the data available to Hydrant._
   - The entry point is `scrapers/update.py`.
   - This goes through `src/components/App.tsx`, which looks for the data.
   - The exit point is through the constructor of `State` in `src/lib/state.ts`.
-- *...the way Hydrant behaves.*
+- _...the way Hydrant behaves._
   - The entry point is `src/lib/state.ts`.
   - The exit point is through `src/components/App.tsx`, which constructs `hydrant` and passes it down.
-- *...the way Hydrant looks.*
+- _...the way Hydrant looks._
   - The entry point is `src/components/App.tsx`.
   - We use [Chakra UI](https://chakra-ui.com/) as our component library. Avoid writing CSS.
 

eslint.config.js

@@ -0,0 +1,45 @@
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
+import eslintConfigPrettier from "eslint-config-prettier";
+
+export default tseslint.config(
+  { ignores: ["dist"] },
+  {
+    extends: [
+      js.configs.recommended,
+      ...tseslint.configs.recommended,
+      eslintConfigPrettier,
+    ],
+    files: ["**/*.{ts,tsx}"],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      "react-refresh/only-export-components": [
+        "warn",
+        { allowConstantExport: true },
+      ],
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        {
+          args: "all",
+          argsIgnorePattern: "^_",
+          caughtErrors: "all",
+          caughtErrorsIgnorePattern: "^_",
+          destructuredArrayIgnorePattern: "^_",
+          varsIgnorePattern: "^_",
+          ignoreRestSiblings: true,
+        },
+      ],
+    },
+  },
+);

index.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <title>Hydrant</title>
+    <meta charset="UTF-8" />
+    <meta
+      name="description"
+      content="Hydrant is a class planner for MIT students."
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- <script defer src="https://apis.google.com/js/client.js"></script> -->
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>