Project-Image-Uploader/TODO.md
matthias.lotz a0d74f795a feat: Complete frontend refactoring and development environment setup
Major Frontend Refactoring:
- Replace ImagePreviewGallery with unified ImageGallery/ImageGalleryCard components
  - Support 4 display modes: group, moderation, preview, single-image
  - Add hidePreview prop to conditionally hide group preview images
  - Unified grid layout with responsive 3/2/1 column design

- Remove 15+ legacy files and components
  - Delete UploadedImagePage, SocialMedia components, old upload components
  - Remove unused CSS files (GroupCard.css, Image.css/scss)
  - Clean up /upload/:image_url route from App.js

- Fix image preview functionality in MultiUploadPage
  - Convert File objects to blob URLs with URL.createObjectURL()
  - Add proper memory cleanup with URL.revokeObjectURL()

- Improve page navigation and layout
  - Fix GroupsOverviewPage to route to /groups/:groupId detail page
  - Adjust PublicGroupImagesPage spacing and layout
  - Fix ModerationGroupsPage duplicate stats section

CSS Refactoring:
- Rename GroupCard.css → ImageGallery.css with updated class names
- Maintain backward compatibility with legacy class names
- Fix grid stretching with fixed 3-column layout

Development Environment:
- Add docker-compose.override.yml for local development
- Create Dockerfile.dev with hot-reload support
- Add start-dev.sh and nginx.dev.conf
- Update README.dev.md with development setup instructions

Production Build:
- Fix frontend/Dockerfile multi-stage build (as → AS)
- Update prod.sh to explicitly use docker-compose.yml (ignore override)
- Resolve node:18-alpine image corruption issue
- Backend Dockerfile improvements for Node 14 compatibility

Documentation:
- Update TODO.md marking completed frontend tasks
- Clean up docs/images directory
- Update README.md with current project status

All changes tested and verified in both development and production environments.
2025-10-27 22:22:52 +01:00

2.6 KiB

TODO / Offene Punkte

Diese Datei listet die noch offenen Arbeiten, die ich im Projekt verfolge. Ich pflege sie, sobald ich Aufgaben erledige.

Anstehende Aufgaben

Frontend

  • Code Cleanup & Refactoring
    • Überprüfung der Komponentenstruktur
    • Entfernen ungenutzter Dateien
    • Vereinheitlichung der ImageGallery Komponente:
      • ImagePreviewGallery und 'GroupCard' zusammenführen
        • Die neue Komponente soll ImageGallery heißen. Sie besteht aus einem Grid aus "GroupCard" die GroupCard soll zukünfig ImageGalleryCardheißen.
        • Die neue Komponente ImageGallery soll so aussehen wir die GroupCard im Grid -> siehe Pages/ModerationGroupPage.js und Pages/GroupOverviewPage.js und auch die gleichen Funktionalitäten besitzen.
      • Klärung SimpleMultiDropzone vs. MultiImageUploadDropzone (MultiImageUploadDropzone wurde gelösch, SimpleMultiDropzone umbenannt in MultiImageDropzone)
  • Persistentes Reordering: Drag-and-drop in ImagePreviewGallery + Backend-Endpunkt

Zusätzliche Funktionen

Backend

[x] Erweiterung der API um die Funktion bestehende Daten zu editieren/aktualisieren [ ] Integration eines Benachrichtigungssystems (E-Mail, Push-Benachrichtigungen) wenn eine neue Slideshow hochgeladen wurde [ ] Implementierung eines Logging-Systems zur Nachverfolgung von Änderungen und Aktivitäten

Frontend

[x] Erweiterung der Benutzeroberfläche um eine Editierfunktion für bestehende Einträge in ModerationPage.js [x] In der angezeigten Gruppen soll statt Bilder ansehen Gruppe editieren stehen [x] Diese bestehende Ansicht (Bilder ansehen) soll als eigene Seite implementiert werden

🚀 Deployment-Überlegungen

Speicher-Management

  • Komprimierung: Automatische Bildkomprimierung für große Dateien

Sicherheit

  • File-Type Validation: Nur erlaubte Bildformate
  • Virus-Scanning: Optional für Produktionsumgebung

📈 Erweiterungs-Möglichkeiten (Zukunft)

Erweiterte Features

  • Benutzer-Accounts: Upload-Gruppen Benutzern zuordnen
  • Export: Slideshow als Video oder PDF exportieren

Admin-Features

  • Bulk-Operations: Mehrere Gruppen gleichzeitig verwalten (zum Beispiel löschen)

🎯 Erfolgskriterien

Must-Have

  • Mobile-Kompatibilität

Nice-to-Have

  • 🎨 Drag & Drop Reihenfolge ändern
  • 📊 Upload-Progress mit Details
  • 🖼️ Thumbnail-Navigation in Slideshow
  • 🔄 Batch-Operations (alle entfernen, etc.)

Future Features

  • 👤 User-Management
  • 🏷️ Tagging-System
  • 📤 Export-Funktionen
  • 🎵 Audio-Integration