Implement a web UI (#4)

* Update README * Begin to tie threads together. * Work in progress... * Start to really flesh out the front-end + test + etc. * Fix tests * Get started button * Put this aside for the moment.
front-seat · Dec 4, 2023 · 9c69ec5 · 9c69ec5
1 parent ba86ce7
commit 9c69ec5
Show file tree

Hide file tree

Showing 25 changed files with 1,367 additions and 62 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -33,6 +33,8 @@ jobs:
           source .venv/bin/activate
           pre-commit run --all
           deactivate
+      - name: Run frontend tests
+        run: npm run test-ci
       - name: Run python tests
         run: |
           source .venv/bin/activate

diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
@@ -1,4 +1,21 @@
 repos:
+  # Run `npm run lint`
+  - repo: local
+    hooks:
+      - id: jslint
+        name: jslint
+        entry: npm run lint
+        language: system
+        files: \.(ts|tsx|js|jsx)$
+
+  - repo: local
+    hooks:
+      - id: tsc
+        name: tsc
+        entry: npm run type-check
+        language: system
+        pass_filenames: false
+
   - repo: https://github.com/psf/black
     rev: 23.11.0
     hooks:

diff --git a/README.md b/README.md
@@ -12,3 +12,23 @@ Details on the FEC data schema: https://www.fec.gov/campaign-finance-data/contri
 We're using `python 3.12`. Modern Macs have `clang >= 15.x` (mine has `17.0.4`).
 
 Alas, a transitive dependency (`multidict`) is currently broken in this environment and, also, does not ship binary wheels. Here's my solution: https://github.com/aio-libs/multidict/pull/877#issuecomment-1812948387
+
+### Running locally
+
+You'll need the sqlite databases, of course (ask Dave).
+
+Then, you'll need to install the dependencies:
+
+```
+npm install
+CFLAGS="-Wno-error=int-conversion" pip install -r requirements.txt
+pip install -r requirements-dev.txt
+```
+
+Then, you'll need to run both the Vite front-end server AND the python+litestar backend server:
+
+```
+./scripts/run.sh
+```
+
+Pop open http://localhost:2222/ and you should see the app.
diff --git a/index.html b/index.html
@@ -1,13 +1,21 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Team Against Trump</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link
+    href="https://fonts.googleapis.com/css2?family=DM+Mono:ital@0;1&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,700;1,9..40,400;1,9..40,700&family=DM+Serif+Display:ital@0;1&display=swap"
+    rel="stylesheet">
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>