Version 5.0: Major change from CRA to Vite and TypeScript with Google Civic Info API Representatives replacement

.env.example

@@ -0,0 +1,17 @@
+# Copy this file to .env.local and fill in values.
+# Dev: use 1Password references (op:// URIs) and run with `op run --env-file=".env.local" pnpm dev`
+# Prod: values are injected via GitHub Secrets in the deploy workflow.
+
+# Google Civic Information API
+VITE_API_KEY=
+VITE_API_URL=https://www.googleapis.com/civicinfo/v2
+
+# Mapbox
+VITE_MAPBOX_API_ACCESS_TOKEN=
+
+# Open States API
+VITE_OPENSTATES_API_KEY=
+
+# Development: point to static test data files instead of live APIs
+# VITE_API_DEV_VOTER_INFO_URL=test_data/test_data.json
+# VITE_API_DEV_REPRESENTATIVES_URL=test_data/test_data_representatives.json

.github/copilot-instructions.md

@@ -0,0 +1,45 @@
+# YFPP Project Guidelines
+
+## Project Overview
+
+YFPP (Your Fucking Polling Place) is a static SPA hosted on GitHub Pages. It accepts a voter's registered address, queries the Google Civic Information API for upcoming election/polling data and the Open States API for representative data, and displays results with Mapbox directions. The site inserts the word "fucking" into polling place names via the `fucktify()` helper.
+
+## Code Style
+
+- **Language**: TypeScript (strict mode). All new files must be `.ts` or `.tsx`.
+- **React**: Functional components only. Hooks for all state and side effects. No class components.
+- **State management**: `useReducer` + React Context (existing pattern in `appReducer`). No external state libraries.
+- **Imports**: Use path aliases rooted at `src/` (e.g., `import helpers from 'helpers'`).
+- **Naming**: PascalCase for components and types, camelCase for functions/variables, UPPER_SNAKE_CASE for constants and action types.
+- **CSS**: SCSS modules colocated with components. Do not refactor existing styles unless explicitly requested by the project lead in a documented task or issue.
+
+## Architecture
+
+- `src/types/` — shared TypeScript type definitions (API responses, app state, actions)
+- `src/requests/` — API client functions (Google Civic, Open States, Mapbox)
+- `src/actions/` — reducer action handlers
+- `src/hooks/` — custom React hooks
+- `src/components/` — UI components, each in its own directory with colocated styles and tests
+- `src/helpers.ts` — utility functions (`fucktify`, `titlecase`, `concatStreetAddress`, etc.)
+
+## Build and Test
+
+- **Package manager**: pnpm (never npm or yarn)
+- **Build tool**: Vite
+- **Dev server**: `op run --env-file=".env.local" pnpm dev`
+- **Build**: `pnpm build`
+- **Unit/integration tests**: `pnpm test:unit` (Vitest + React Testing Library)
+- **E2E tests**: `pnpm test:e2e` (Playwright)
+- **Type check**: `pnpm tsc --noEmit`
+- **Lint**: `pnpm lint` (ESLint 9, flat config). Fix auto-fixable issues with `pnpm lint:fix`.
+- **Format**: `pnpm format:check` to verify, `pnpm format` to auto-format. Run lint and format checks before committing.
+
+## Conventions
+
+- **Environment variables**: Use `import.meta.env.VITE_*` (Vite convention). Never `process.env`.
+- **API keys**: Never commit secrets. Development uses 1Password CLI (`op run --env-file=".env.local"`) to inject secrets at runtime from 1Password references (`op://` URIs). Production builds use GitHub Secrets injected via GitHub Actions. Keys are in the client bundle (static SPA) — they must be restricted by domain/referrer in their respective dashboards.
+- **Error handling**: API failures must degrade gracefully. A failed representatives call must not block polling place results. If an API returns invalid data, log the error and display a user-friendly message indicating that some information may be missing. Dispatch granular errors per API call.
+- **No legacy libraries in new code**: No jQuery, lodash, moment.js, or prop-types. Use native JS/TS equivalents and TypeScript interfaces.
+- **Date handling**: Use `date-fns` instead of moment.js.
+- **Testing**: New code must include tests. Place test files alongside source files (`Component.test.tsx`). Use MSW for API mocking.
+- **Security**: Validate and sanitize all external data at system boundaries. Follow OWASP Top 10 guidelines. Use `encodeURIComponent` for URL parameters.

.github/workflows/codeql.yml

@@ -0,0 +1,99 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: "CodeQL Advanced"
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+  schedule:
+    - cron: '44 22 * * 2'
+
+jobs:
+  analyze:
+    name: Analyze (${{ matrix.language }})
+    # Runner size impacts CodeQL analysis time. To learn more, please see:
+    #   - https://gh.io/recommended-hardware-resources-for-running-codeql
+    #   - https://gh.io/supported-runners-and-hardware-resources
+    #   - https://gh.io/using-larger-runners (GitHub.com only)
+    # Consider using larger runners or machines with greater resources for possible analysis time improvements.
+    runs-on: ${{ (matrix.language == 'swift' && 'macos-latest') || 'ubuntu-latest' }}
+    permissions:
+      # required for all workflows
+      security-events: write
+
+      # required to fetch internal or private CodeQL packs
+      packages: read
+
+      # only required for workflows in private repositories
+      actions: read
+      contents: read
+
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+        - language: javascript-typescript
+          build-mode: none
+        # CodeQL supports the following values keywords for 'language': 'actions', 'c-cpp', 'csharp', 'go', 'java-kotlin', 'javascript-typescript', 'python', 'ruby', 'rust', 'swift'
+        # Use `c-cpp` to analyze code written in C, C++ or both
+        # Use 'java-kotlin' to analyze code written in Java, Kotlin or both
+        # Use 'javascript-typescript' to analyze code written in JavaScript, TypeScript or both
+        # To learn more about changing the languages that are analyzed or customizing the build mode for your analysis,
+        # see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/customizing-your-advanced-setup-for-code-scanning.
+        # If you are analyzing a compiled language, you can modify the 'build-mode' for that language to customize how
+        # your codebase is analyzed, see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/codeql-code-scanning-for-compiled-languages
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+
+    # Add any setup steps before running the `github/codeql-action/init` action.
+    # This includes steps like installing compilers or runtimes (`actions/setup-node`
+    # or others). This is typically only required for manual builds.
+    # - name: Setup runtime (example)
+    #   uses: actions/setup-example@v1
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v4
+      with:
+        languages: ${{ matrix.language }}
+        build-mode: ${{ matrix.build-mode }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file.
+        # Prefix the list here with "+" to use these queries and those in the config file.
+
+        # For more details on CodeQL's query packs, refer to: https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
+        # queries: security-extended,security-and-quality
+
+    # If the analyze step fails for one of the languages you are analyzing with
+    # "We were unable to automatically build your code", modify the matrix above
+    # to set the build mode to "manual" for that language. Then modify this step
+    # to build your code.
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
+    - name: Run manual build steps
+      if: matrix.build-mode == 'manual'
+      shell: bash
+      run: |
+        echo 'If you are using a "manual" build mode for one or more of the' \
+          'languages you are analyzing, replace this with the commands to build' \
+          'your code, for example:'
+        echo '  make bootstrap'
+        echo '  make release'
+        exit 1
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v4
+      with:
+        category: "/language:${{matrix.language}}"

.github/workflows/deploy.yml

@@ -0,0 +1,55 @@
+name: Deploy to GitHub Pages
+
+on:
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 11
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: pnpm
+
+      - run: pnpm install --frozen-lockfile
+
+      - run: pnpm tsc --noEmit
+
+      - run: pnpm lint
+
+      - run: pnpm build
+        env:
+          VITE_API_KEY: ${{ secrets.VITE_API_KEY }}
+          VITE_API_URL: https://www.googleapis.com/civicinfo/v2
+          VITE_MAPBOX_API_ACCESS_TOKEN: ${{ secrets.VITE_MAPBOX_API_ACCESS_TOKEN }}
+          VITE_OPENSTATES_API_KEY: ${{ secrets.VITE_OPENSTATES_API_KEY }}
+
+      - uses: actions/upload-pages-artifact@v3
+        with:
+          path: build
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -5,21 +5,26 @@
 
 # testing
 /coverage
+/test-results/
+/playwright-report/
 
 # production
 /build
 
 # misc
 .DS_Store
 .env.local
+.env.production
 .env.development.local
 .env.test.local
 .env.production.local
 
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
 
 \.vscode/
 .env
 package-lock.json
+.pnpm-store/

.node-version

@@ -0,0 +1 @@
+22

.npmrc

@@ -0,0 +1,2 @@
+engine-strict=true
+auto-install-peers=true

.prettierrc

@@ -1,7 +1,9 @@
 {
-  "trailingComma": "es5",
-  "tabWidth": 4,
-  "semi": true,
-  "singleQuote": true,
-  "prettier.printWidth": 120
+    "singleQuote": true,
+    "tabWidth": 4,
+    "trailingComma": "all",
+    "printWidth": 100,
+    "semi": true,
+    "bracketSpacing": true,
+    "arrowParens": "avoid"
 }