Project initialization

.env.example

@@ -0,0 +1 @@
+SESSION_SECRET="super-duper-s3cret"

.eslintrc.cjs

@@ -0,0 +1,141 @@
+/**
+ * This is intended to be a basic starting point for linting in the Grunge Stack.
+ * It relies on recommended configs out of the box for simplicity, but you can
+ * and should modify this configuration to best suit your team's needs.
+ */
+
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  root: true,
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  env: {
+    browser: true,
+    commonjs: true,
+    es6: true,
+  },
+
+  // Base config
+  extends: ["eslint:recommended"],
+
+  overrides: [
+    // React
+    {
+      files: ["**/*.{js,jsx,ts,tsx}"],
+      plugins: ["react", "jsx-a11y"],
+      extends: [
+        "plugin:react/recommended",
+        "plugin:react/jsx-runtime",
+        "plugin:react-hooks/recommended",
+        "plugin:jsx-a11y/recommended",
+        "prettier",
+      ],
+      settings: {
+        react: {
+          version: "detect",
+        },
+        formComponents: ["Form"],
+        linkComponents: [
+          { name: "Link", linkAttribute: "to" },
+          { name: "NavLink", linkAttribute: "to" },
+        ],
+      },
+      rules: {
+        "react/jsx-no-leaked-render": [
+          "warn",
+          { validStrategies: ["ternary"] },
+        ],
+      },
+    },
+
+    // Typescript
+    {
+      files: ["**/*.{ts,tsx}"],
+      plugins: ["@typescript-eslint", "import"],
+      parser: "@typescript-eslint/parser",
+      settings: {
+        "import/internal-regex": "^~/",
+        "import/resolver": {
+          node: {
+            extensions: [".ts", ".tsx"],
+          },
+          typescript: {
+            alwaysTryTypes: true,
+          },
+        },
+      },
+      extends: [
+        "plugin:@typescript-eslint/recommended",
+        "plugin:@typescript-eslint/stylistic",
+        "plugin:import/recommended",
+        "plugin:import/typescript",
+        "prettier",
+      ],
+      rules: {
+        "import/order": [
+          "error",
+          {
+            alphabetize: { caseInsensitive: true, order: "asc" },
+            groups: ["builtin", "external", "internal", "parent", "sibling"],
+            "newlines-between": "always",
+          },
+        ],
+      },
+    },
+
+    // Markdown
+    {
+      files: ["**/*.md"],
+      plugins: ["markdown"],
+      extends: ["plugin:markdown/recommended", "prettier"],
+    },
+
+    // Jest/Vitest
+    {
+      files: ["**/*.test.{js,jsx,ts,tsx}"],
+      plugins: ["jest", "jest-dom", "testing-library"],
+      extends: [
+        "plugin:jest/recommended",
+        "plugin:jest-dom/recommended",
+        "plugin:testing-library/react",
+        "prettier",
+      ],
+      env: {
+        "jest/globals": true,
+      },
+      settings: {
+        jest: {
+          // we're using vitest which has a very similar API to jest
+          // (so the linting plugins work nicely), but it means we have to explicitly
+          // set the jest version.
+          version: 28,
+        },
+      },
+    },
+
+    // Cypress
+    {
+      files: ["cypress/**/*.ts"],
+      plugins: ["cypress"],
+      extends: ["plugin:cypress/recommended", "prettier"],
+    },
+
+    // Node
+    {
+      files: [
+        ".eslintrc.js",
+        "plugin-remix.js",
+        "remix.config.js",
+        "mocks/**/*.js",
+      ],
+      env: {
+        node: true,
+      },
+    },
+  ],
+};

.github/workflows/deploy.yml

@@ -0,0 +1,161 @@
+name: 🚀 Deploy
+
+on:
+  push:
+    branches:
+      - main
+      - dev
+  pull_request:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+permissions:
+  actions: write
+  contents: read
+
+defaults:
+  run:
+    shell: bash
+
+jobs:
+  lint:
+    name: ⬣ ESLint
+    runs-on: ubuntu-latest
+    steps:
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v4
+
+      - name: ⎔ Setup node
+        uses: actions/setup-node@v4
+        with:
+          cache: npm
+          cache-dependency-path: ./package.json
+          node-version: 18
+
+      - name: 📥 Install deps
+        run: npm install
+
+      - name: 🔬 Lint
+        run: npm run lint
+
+  typecheck:
+    name: ʦ TypeScript
+    runs-on: ubuntu-latest
+    steps:
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v4
+
+      - name: ⎔ Setup node
+        uses: actions/setup-node@v4
+        with:
+          cache: npm
+          cache-dependency-path: ./package.json
+          node-version: 18
+
+      - name: 📥 Install deps
+        run: npm install
+
+      - name: 🔎 Type check
+        run: npm run typecheck --if-present
+
+  vitest:
+    name: ⚡ Vitest
+    runs-on: ubuntu-latest
+    steps:
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v4
+
+      - name: ⎔ Setup node
+        uses: actions/setup-node@v4
+        with:
+          cache: npm
+          cache-dependency-path: ./package.json
+          node-version: 18
+
+      - name: 📥 Install deps
+        run: npm install
+
+      - name: ⚡ Run vitest
+        run: npm run test -- --coverage
+
+  cypress:
+    name: ⚫️ Cypress
+    runs-on: ubuntu-latest
+    steps:
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v4
+
+      - name: 🏄 Copy test env vars
+        run: cp .env.example .env
+
+      - name: ⎔ Setup node
+        uses: actions/setup-node@v4
+        with:
+          cache: npm
+          cache-dependency-path: ./package.json
+          node-version: 18
+
+      - name: 📥 Install deps
+        run: npm install
+
+      - name: 🏗 Build
+        run: npm run build
+
+      - name: 🌳 Cypress run
+        uses: cypress-io/github-action@v6
+        with:
+          start: npm run dev
+          wait-on: "http://localhost:8811"
+        env:
+          PORT: "8811"
+
+  deploy:
+    needs: [lint, typecheck, vitest, cypress]
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v4
+
+      - name: ⎔ Setup node
+        uses: actions/setup-node@v4
+        with:
+          cache: npm
+          cache-dependency-path: ./package.json
+          node-version: 18
+
+      - name: 👀 Env
+        run: |
+          echo "Event name: ${{ github.event_name }}"
+          echo "Git ref:    ${{ github.ref }}"
+          echo "GH actor:   ${{ github.actor }}"
+          echo "SHA:        ${{ github.sha }}"
+          VER=`node --version`; echo "Node ver:   $VER"
+          VER=`npm --version`; echo "npm ver:    $VER"
+
+      - name: 📥 Install deps
+        run: npm install
+
+      - name: 🏗 Build
+        run: npm run build
+
+      - name: 🛠 Install Arc
+        run: npm i -g @architect/architect
+
+      - name: 🚀 Staging Deploy
+        if: github.ref == 'refs/heads/dev'
+        run: arc deploy --staging --prune
+        env:
+          CI: true
+          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+
+      - name: 🚀 Production Deploy
+        if: github.ref == 'refs/heads/main'
+        run: arc deploy --production --prune
+        env:
+          CI: true
+          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}

.gitignore

@@ -0,0 +1,14 @@
+node_modules
+
+/public/build
+/server/index.mjs
+/server/index.mjs.map
+/server/metafile.*
+/server/version.txt
+preferences.arc
+sam.json
+sam.yaml
+.env
+
+/cypress/screenshots
+/cypress/videos

.gitpod.yml

@@ -0,0 +1,41 @@
+# This configuration file was automatically generated by Gitpod.
+# Please adjust to your needs (see https://www.gitpod.io/docs/introduction/learn-gitpod/gitpod-yaml)
+# and commit this file to your remote git repository to share the goodness with others.
+
+# Learn more from ready-to-use templates: https://www.gitpod.io/docs/introduction/getting-started/quickstart
+
+tasks:
+  - name: Restore .env file
+    # https://www.gitpod.io/guides/automate-env-files-with-gitpod-environment-variables
+    # After making changes to .env, run this line to persist it to $DOTENV
+    #    gp env DOTENV="$(base64 .env | tr -d '\n')"
+    command: |
+      if [ -f .env ]; then
+        # If this workspace already has a .env, don't override it
+        # Local changes survive a workspace being opened and closed
+        # but they will not persist between separate workspaces for the same repo
+        echo "Found .env in workspace"
+      else
+        if [ -z "${DOTENV}" ]; then
+          # There is no $DOTENV from a previous workspace
+          # Default to the example .env
+          echo "Setting example .env"
+          cp .env.example .env 
+        else
+          # Environment variables set this way are shared between all your workspaces for this repo
+          # The lines below will read $DOTENV and print a .env file
+          echo "Restoring .env from Gitpod"
+          echo "${DOTENV}" | base64 -d > .env
+        fi
+      fi
+
+  - name: App
+    init: npm install && npm run build
+    command: npm run dev
+
+vscode:
+  extensions:
+    - ms-azuretools.vscode-docker
+    - esbenp.prettier-vscode
+    - dbaeumer.vscode-eslint
+    - bradlc.vscode-tailwindcss

.prettierignore

@@ -0,0 +1,10 @@
+node_modules
+
+/server/index.js
+/public/build
+preferences.arc
+sam.json
+sam.yaml
+.env
+
+/app/styles/tailwind.css