Project-Image-Uploader/CHANGELOG.md

Changelog

[Unreleased] - Branch: feature/PreloadImage

🚀 Slideshow Optimization (November 2025)

Features

• ✅ Image Preloading: Intelligent preloading of next 2-3 images

  • Custom hook useImagePreloader.js for background image loading
  • Eliminates visible loading delays during slideshow transitions
  • Cache management with LRU strategy (max 10 images)
  • 3-second timeout for slow connections with graceful fallback

• ✅ Chronological Sorting: Groups now display in chronological order

  • Primary sort: Year (ascending, oldest first)
  • Secondary sort: Upload date (ascending)
  • Sequential group transitions instead of random
  • Consistent viewing experience across sessions

Technical Details

• Frontend Changes:
  • New file: frontend/src/hooks/useImagePreloader.js
  • Modified: frontend/src/Components/Pages/SlideshowPage.js
  • Removed random shuffle algorithm
  • Added predictive image loading with Image() API
  • Debug logging in development mode

Bug Fixes

• 🐛 Fixed: Duplicate image display issue in slideshow (network latency)
• 🐛 Fixed: Flickering transitions between images
• 🐛 Fixed: Loading delays visible to users on slower connections

Performance

• ⚡ 0ms load time for pre-cached images (vs. 200-1500ms before)
• ⚡ Seamless transitions with no visual artifacts
• ⚡ Better UX on production servers with slower internet

---

[Unreleased] - Branch: feature/DeleteUnprovedGroups

✨ Automatic Cleanup Feature (November 2025)

Backend

• ✅ Database Schema: New deletion_log table for audit trail

  • Columns: group_id, year, image_count, upload_date, deleted_at, deletion_reason, total_file_size
  • Performance indexes: idx_groups_cleanup, idx_groups_approved, idx_deletion_log_deleted_at
  • Automatic schema migration on server startup

• ✅ Services: New cleanup orchestration layer

  • GroupCleanupService.js - Core cleanup logic with 7-day threshold
  • SchedulerService.js - Cron job scheduler (daily at 10:00 AM Europe/Berlin)
  • Complete file deletion: originals + preview images
  • Comprehensive logging with statistics

• ✅ Repositories: Extended data access layer

  • DeletionLogRepository.js - CRUD operations for deletion history
  • GroupRepository.js - New methods:
    • findUnapprovedGroupsOlderThan() - Query old unapproved groups
    • getGroupStatistics() - Gather metadata before deletion
    • deleteGroupCompletely() - Transactional deletion with CASCADE

• ✅ API Endpoints: Admin API routes (/api/admin/*)

  • GET /deletion-log?limit=N - Recent deletions with pagination
  • GET /deletion-log/all - Complete deletion history
  • GET /deletion-log/stats - Statistics with formatted file sizes
  • POST /cleanup/trigger - Manual cleanup trigger (testing)
  • GET /cleanup/preview - Dry-run preview of deletions

• ✅ Dependencies: Added node-cron@3.0.3 for scheduled tasks

Frontend

• ✅ Components: New deletion log display

  • DeletionLogSection.js - Statistics cards + history table
  • Statistics: Total groups/images deleted, storage freed
  • Table: Group ID, year, image count, timestamps, reason, file size
  • Toggle: "Last 10" / "All" entries with dynamic loading

• ✅ Moderation Page: Integrated cleanup features

  • Countdown Widget: Shows "⏰ X Tage bis Löschung" on pending groups
  • Approval Feedback: SweetAlert2 success/error notifications
  • Deletion Log: Integrated at bottom of moderation interface
  • Visual indicators for pending vs. approved status

• ✅ Dependencies: Added sweetalert2 for user feedback

Infrastructure

• ✅ Nginx Configuration: Updated routes for admin API
  • Dev + Prod configs updated
  • /api/admin proxy to backend (no separate auth - protected by /moderation access)
  • Proper request forwarding with headers

Testing

• ✅ Test Tools: Comprehensive testing utilities
  • tests/test-cleanup.sh - Interactive bash test script
  • backend/src/scripts/test-cleanup.js - Node.js test alternative
  • Features: Backdate groups, preview cleanup, trigger manually, view logs
  • tests/TESTING-CLEANUP.md - Complete testing guide with 6 scenarios

Documentation

• ✅ README.md: Updated with automatic cleanup features
• ✅ TESTING-CLEANUP.md: Comprehensive testing guide
• ✅ Code Comments: Detailed inline documentation

---

[Unreleased] - Branch: feature/ImageDescription

✨ Image Descriptions Feature (November 2025)

Backend

• ✅ Database Migration: Added image_description column to images table (TEXT, nullable)

  • Automatic migration on server startup
  • Index created for performance optimization
  • Backward compatible with existing images

• ✅ Repository Layer: Extended GroupRepository.js with description methods

  • updateImageDescription() - Update single image description
  • updateBatchImageDescriptions() - Batch update multiple descriptions
  • Validation: Max 200 characters enforced
  • createGroup() now accepts imageDescription field

• ✅ API Endpoints: New REST endpoints for description management

  • PATCH /groups/:groupId/images/:imageId - Update single description
  • PATCH /groups/:groupId/images/batch-description - Batch update
  • Server-side validation (200 char limit)
  • Error handling and detailed responses

• ✅ Upload Integration: Batch upload now supports descriptions

  • POST /api/upload/batch accepts descriptions array
  • Descriptions matched to images by filename
  • Automatic truncation if exceeding limit

Frontend

• ✅ Core Components: Enhanced ImageGalleryCard and ImageGallery

  • Edit Mode: Toggle button to activate description editing
  • Textarea: Multi-line input with character counter (0/200)
  • Validation: Real-time character limit enforcement
  • Placeholder: Original filename shown as hint
  • Display Mode: Italicized description display when not editing

• ✅ Upload Flow: Extended MultiUploadPage.js

  • Edit mode for adding descriptions during upload
  • State management for descriptions per image
  • Descriptions sent to backend with upload
  • Clean up on form reset

• ✅ Moderation: Enhanced ModerationGroupImagesPage.js

  • Edit mode for existing group images
  • Load descriptions from server
  • Batch update API integration
  • Save button with success feedback
  • Optimistic UI updates

• ✅ Slideshow: Display descriptions during presentation

  • Centered overlay below image
  • Semi-transparent background with blur effect
  • Responsive sizing (80% max width)
  • Conditional rendering (only if description exists)

• ✅ Public View: Show descriptions in PublicGroupImagesPage.js

  • Display in single-image gallery mode
  • Italicized style for visual distinction
  • No edit functionality (read-only)

Styling

• ✅ CSS Additions: New styles for edit mode and descriptions
  • .image-description-edit - Edit textarea container
  • .image-description-edit textarea - Input field styles
  • .char-counter - Character counter with limit warning
  • .image-description-display - Read-only description display
  • Responsive design for mobile devices

Testing & Quality

• ✅ All phases implemented and committed
• ⏳ Integration testing pending
• ⏳ User acceptance testing pending

---

[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