PlansDependency Upgrades

Dependency Upgrade Plan

Upgrade all frontend and backend dependencies to latest stable versions.

Goal

Routine maintenance to stay current with dependencies. Aggressive approach: upgrade everything, fix what breaks.

Testing Strategy

Solid E2E test coverage with Playwright provides safety net for validating changes.

Batches

Batch 0: Backend Updates

Update backend/requirements.in:

PackageCurrentTarget
fastapi0.115.120.128.0
pydantic2.11.42.12.5
uvicorn0.34.20.40.0
google-cloud-storage2.16.03.7.0
pillow11.2.112.0.0

Steps:

  1. Update versions in requirements.in
  2. Run pip-compile requirements.in
  3. Run pip install -r requirements.txt
  4. Start backend, verify it runs
  5. Run backend tests if available

Breaking changes:

  • google-cloud-storage v3: Check for API changes in bucket/blob operations
  • pillow v12: Minor API changes, mostly additive

Batch 1: Frontend Safe Updates

Update frontend/package.json (minor/patch versions within semver):

PackageCurrentTarget
react19.1.019.2.3
react-dom19.1.019.2.3
typescript5.8.35.9.3
next-auth4.24.114.24.13
autoprefixer10.4.2110.4.23
postcss8.5.38.5.6
cookie1.0.21.1.1
react-infinite-scroll-component6.1.06.1.1
@types/react19.1.419.2.7
@types/react-dom19.1.519.2.3
@tailwindcss/forms0.5.100.5.11
@tailwindcss/typography0.5.160.5.19

Steps:

  1. Update versions in package.json
  2. Run npm install
  3. Run npm run build
  4. Run npm run test:e2e

Breaking changes: None expected.

Batch 2: TipTap Ecosystem

Major version upgrade from v2 to v3:

PackageCurrentTarget
@tiptap/react2.12.03.14.0
@tiptap/starter-kit2.12.03.14.0
@tiptap/extension-image2.12.03.14.0
@tiptap/extension-link2.12.03.14.0
@mantine/tiptap7.17.78.3.10

Steps:

  1. Update all TipTap packages together (they must match)
  2. Run npm install
  3. Run npm run build - fix any TypeScript errors
  4. Run npm run test:e2e
  5. Manually test rich text editor functionality

Breaking changes:

Batch 3: ESLint Ecosystem

Major config format change (eslintrc → flat config):

PackageCurrentTarget
eslint8.57.19.39.2
@typescript-eslint/parser6.21.08.51.0
@typescript-eslint/eslint-plugin6.21.08.51.0
eslint-config-next15.3.216.1.1
postcss-import15.1.016.1.1
postcss-nested6.2.07.0.2

Steps:

  1. Update packages in package.json
  2. Run npm install
  3. Convert .eslintrc.* to eslint.config.js (flat config format)
  4. Run npm run lint - fix any new errors
  5. Run npm run build

Breaking changes:

Batch 4: Tailwind v4

Major rewrite of Tailwind CSS:

PackageCurrentTarget
tailwindcss3.4.174.1.18

Steps:

  1. Update tailwindcss in package.json
  2. Run npm install
  3. Migrate tailwind.config.js to new format
  4. Update postcss.config.js if needed
  5. Run npm run build - fix any CSS issues
  6. Run npm run test:e2e
  7. Visual review of UI

Breaking changes:

Batch 5: Next.js 16

Framework upgrade:

PackageCurrentTarget
next15.3.216.1.1

Steps:

  1. Update next in package.json
  2. Run npm install
  3. Run npm run build - fix any errors
  4. Run npm run test:e2e
  5. Test dev server: npm run dev

Breaking changes:

  • Check for router changes
  • Middleware API changes
  • Review Next.js 16 release notes

Process Per Batch

  1. Update dependency versions
  2. Install dependencies
  3. Build check (catch compilation errors)
  4. Run tests (E2E for frontend, unit for backend)
  5. Fix breaking changes as needed
  6. Commit with message: chore: upgrade [batch name] dependencies

Rollback Strategy

Each batch is a separate commit. If a batch causes issues in production:

  1. git revert <commit-hash>
  2. Redeploy

Success Criteria

  • All dependencies at latest stable versions
  • npm run build passes
  • npm run test:e2e passes
  • Backend starts and responds to requests
  • No visual regressions in UI
Engagement SystemShared Logging Package