Monorepo Overview - Webyes Auditor

What’s in the Monorepo

The frontend is a pnpm workspace monorepo with two deployable apps and two shared packages.

apps/full-suite

Main auditing dashboard — accessibility, performance, SEO, uptime, RUM, billing, and team management. Runs on port 5173.

apps/a11y

Standalone accessibility-only SaaS app with simplified onboarding. Runs on port 5174.

packages/common

Shared React UI library — components, hooks, types, utilities, and icons consumed by both apps.

packages/focus-order

@webyes/focus-order — published dual ESM/CJS library that visualises keyboard focus order in web pages.

Root-level files:

File	Purpose
`package.json`	Workspace root — scripts, dev tooling, engines
`pnpm-workspace.yaml`	Declares `apps/` and `packages/` as workspaces
`.husky/`	Git hooks — runs lint-staged on every commit
`commitlint.config.mjs`	Enforces Conventional Commits
`.prettierrc.json`	Prettier config (double quotes by default)
`eslint.config.js`	Flat ESLint config for the whole repo

Package Manager: pnpm Workspaces

pnpm v9.15.2 — Node ≥ 20.14.0 required. The root package.json exposes shorthand scripts to run commands scoped to a specific workspace:

Script	Equivalent to
`pnpm suite <cmd>`	`pnpm --filter full-suite <cmd>`
`pnpm a11y <cmd>`	`pnpm --filter a11y <cmd>`
`pnpm common <cmd>`	`pnpm --filter common <cmd>`
`pnpm focus-order <cmd>`	`pnpm --filter @webyes/focus-order <cmd>`

pnpm suite dev        # Start full-suite dev server
pnpm a11y build       # Build the a11y app
pnpm common build     # Build the common package
pnpm clean            # Remove all node_modules

Code Quality Tooling

ESLint 9.27.0 (flat config)

Run: pnpm lint from repo rootPlugins enabled:

typescript-eslint — TypeScript-aware linting
eslint-plugin-react + eslint-plugin-react-hooks — React rules
eslint-plugin-react-refresh — Fast Refresh compatibility
eslint-plugin-prettier — Prettier as an ESLint rule

Prettier 3.5.3

Run: pnpm format from repo rootConfig lives in .prettierrc.json at the repo root. Default: double quotes, consistent indentation.

Husky + lint-staged (pre-commit)

Every git commit automatically triggers:

eslint --fix on all staged **/*.{js,ts,tsx} files
prettier --write on all other staged files

The hook is defined in .husky/pre-commit and configured via lint-staged in the root package.json.

Commitlint (Conventional Commits)

Every commit message must follow the format:

<type>(<optional scope>): <subject>

Valid types: feat · fix · docs · style · refactor · test · chore · perf

git commit -m "feat: add scan history pagination"   # ✅
git commit -m "fixed stuff"                          # ❌ rejected

How Packages Are Shared

Apps reference shared packages via the pnpm workspace protocol — no build or publish step needed during development:

{
  "dependencies": {
    "common": "workspace:*",
    "@webyes/focus-order": "workspace:*"
  }
}

pnpm symlinks these automatically. Changes in packages/common are immediately reflected in both apps.

Build Pipeline

Each app is built with Vite 7 + SWC:

pnpm suite build    # TypeScript check → Vite build → apps/full-suite/dist/
pnpm a11y build     # TypeScript check → Vite build → apps/a11y/dist/

The @tanstack/router-vite-plugin runs automatically during every build and dev session:

Scan routes folder

Reads all files inside src/routes/ and derives the URL structure from the file names.

Generate route tree

Writes src/routeTree.gen.ts — never edit this file manually, it is always overwritten.

Enable code splitting

Routes ending in .lazy.tsx are split into separate JS chunks, loaded only when visited.

TypeScript Setup

App / Package	Target	Strict	Path Alias
`full-suite`	ES2020	✅	`@/` → `./src/`
`a11y`	ES2020	✅	`@/` → `./src/`
`focus-order`	ES2022	✅	None

Each app has its own tsconfig.json. The packages/common package is consumed directly from source — no separate compile step during development.

Environment Variables

Each app has its own .env (gitignored) and .env.sample (committed).

All variables must be prefixed with VITE_ to be accessible in the browser. Unprefixed variables are undefined at runtime.

const API_URL = import.meta.env.VITE_API_URL   // ✅ works
const SECRET  = import.meta.env.SECRET_KEY     // ❌ always undefined

See the full variable lists for each app:

​What’s in the Monorepo

apps/full-suite

apps/a11y

packages/common

packages/focus-order

​Package Manager: pnpm Workspaces

​Code Quality Tooling

​How Packages Are Shared

​Build Pipeline

​TypeScript Setup

​Environment Variables

What’s in the Monorepo

Package Manager: pnpm Workspaces

Code Quality Tooling

How Packages Are Shared

Build Pipeline

TypeScript Setup

Environment Variables