Project-Image-Uploader/CHANGELOG.md

Changelog

[Unreleased] - Branch: upgrade/deps-react-node-20251028

🎯 Major Framework Upgrades (October 2025)

Backend

• ✅ Node.js: Upgraded from Node 14 → Node 24
  • Updated backend/Dockerfile to use node:24 base image
  • Verified sqlite3 compatibility and DB initialization
  • Backend server runs successfully on port 5000

Frontend

• ✅ React: Upgraded from React 17 → React 18.3.1

  • Updated react and react-dom to ^18.3.1
  • Migrated root rendering API from ReactDOM.render() to createRoot() in src/index.js
  • Updated react-scripts to 5.0.1

• ✅ React Router: Migrated from v5 → v6.28.0 (installed v6.30.1 in dev)

  • Replaced <Switch> with <Routes>
  • Updated route definitions to use element prop instead of component
  • Migrated navigation hooks: useHistory() → useNavigate()
  • Updated all <Route> paths and nested routing logic

• ✅ Material-UI (MUI): Migrated from v4 → v5.14.0

  • Installed @mui/material, @mui/icons-material, @emotion/react, @emotion/styled
  • Migrated component imports from @material-ui/* to @mui/*
  • Removed @mui/styles after completing component migration
  • Converted styling from makeStyles to sx prop for components:
    • UploadProgress.js
    • DescriptionInput.js
    • MultiImageDropzone.js
    • MultiUploadPage.js
    • SlideshowPage.js
    • GroupsOverviewPage.js
    • Other components using MUI v5 styled/sx patterns

Dependencies & Cleanup

• ✅ Lottie Animation: Replaced react-lottie with lottie-react (v2.4.0)

  • Removed peer dependency conflict with older React versions
  • Updated Loading.js component to use new API

• ✅ Removed --legacy-peer-deps from frontend/Dockerfile

  • Clean dependency resolution without legacy flag
  • All packages now have compatible peer dependencies

• ✅ ESLint Fixes: Cleaned up lint warnings across migrated files

  • Removed unused imports and handlers
  • Production build compiles successfully without warnings

Development Environment

• ✅ Dev Overlay: Created docker-compose.override.yml and frontend/Dockerfile.dev

  • Development setup with live reload (HMR) for frontend
  • CRA dev server proxied through nginx on port 3000
  • Backend runs with nodemon for auto-reload
  • Bind mounts for source code (./frontend and ./backend)
  • Separate node_modules volumes to avoid host/container conflicts

• ✅ Dev Container: Fixed compilation issues

  • Node 18.20.8 in frontend-dev container
  • react-router-dom@6.30.1 installed correctly
  • CRA dev server compiles successfully

Maintenance

• ✅ Browserslist DB: Updated to version 1.0.30001751

  • Resolved "caniuse-lite is outdated" warning

• ✅ PostCSS Deprecation Warning: Documented as known/harmless

  • Warning originates from react-scripts 5.0.1 transitive dependencies (postcss@8.5.6)
  • No action required - will be resolved in future react-scripts updates

<EFBFBD> Security Audit Results

Frontend Dependencies (as of 29. Oktober 2025):

• 21 vulnerabilities detected: 9 moderate, 11 high, 1 critical
• Critical/High severity issues:
  • axios (<=0.30.1): CSRF, SSRF, DoS vulnerabilities
  • follow-redirects: Information exposure, improper URL handling
  • ansi-regex, decode-uri-component: ReDoS vulnerabilities
• Moderate severity:
  • @babel/runtime-corejs3: Inefficient RegExp complexity
  • webpack-dev-server: Source code exposure (dev-only)
  • highlight.js: Various security issues
• Resolution: Most issues can be addressed with npm audit fix. Critical packages (axios, follow-redirects) should be updated in a separate security PR.

Backend Dependencies (as of 29. Oktober 2025):

• 27 vulnerabilities detected: 4 low, 9 moderate, 13 high, 1 critical
• Critical/High severity issues:
  • send/serve-static: Template injection leading to XSS
  • Various transitive dependencies with known vulnerabilities
• Resolution: Run npm audit fix to address most issues. Critical packages should be updated manually in a follow-up security PR.

Recommendation: Create a separate PR for security updates after this upgrade is merged to avoid mixing framework upgrades with dependency patches.

<EFBFBD>📝 Documentation

• Created docs/UPGRADE_PLAN-upgrade-deps-react-node-20251028.md with phase-by-phase plan
• Created .github/ISSUES/upgrade-deps-react-node-20251028.md (issue/PR template)
• This CHANGELOG documents all completed work

🔧 Configuration Changes

• backend/Dockerfile: Node 14 → Node 24
• frontend/Dockerfile: Removed --legacy-peer-deps, uses clean npm install
• frontend/Dockerfile.dev: New dev image with Node 18, nginx + CRA dev server
• docker-compose.override.yml: Dev environment configuration
• frontend/package.json: Updated all major framework versions
• frontend/src/index.js: React 18 createRoot API
• Multiple component files: MUI v5 migration (sx/styled)

⚠️ Known Issues / Notes

• PostCSS deprecation warning from react-scripts 5.0.1 is harmless (no fix available)
• Git push to remote blocked by SSH permission (local commits ready)

🚀 Next Steps (Pending)

• Integration smoke tests (upload, download, slideshow)
• Push branch to remote and open PR
• Security audit (npm audit, CVE validation)
• Verify production builds in CI
• Merge PR after QA approval

---

Development Commands

Production Build & Run

# Build and run production containers
docker compose -f docker-compose.yml up --build -d

# Or use prod.sh script
./prod.sh

Development Mode (with live reload)

# Start dev environment with HMR
docker compose -f docker-compose.yml -f docker-compose.override.yml up --build -d

# Frontend available at: http://localhost:3000
# Backend available at: http://localhost:5000

# Tail logs
docker logs -f image-uploader-frontend-dev
docker logs -f image-uploader-backend-dev

# Stop dev environment
docker compose -f docker-compose.yml -f docker-compose.override.yml down

Update Dependencies

# Update browserslist database
docker exec image-uploader-frontend-dev npx update-browserslist-db@latest

# Install new packages (in dev container)
docker exec image-uploader-frontend-dev npm install <package-name>

# Rebuild containers after package.json changes
docker compose -f docker-compose.yml -f docker-compose.override.yml up --build -d