Project-Image-Uploader/README.dev.md

Development Setup

Schnellstart

Starten (Development Environment)

# Mit Script (empfohlen):
./dev.sh

# Oder manuell:
docker compose -f docker/dev/docker-compose.yml up -d

Zugriff

• Frontend: http://localhost:3000 (Hot Module Reloading aktiv)
• Backend: http://localhost:5001 (API)
• Slideshow: http://localhost:3000/slideshow
• Moderation: http://localhost:3000/moderation (Entwicklung: ohne Auth)

Logs verfolgen

# Alle Services:
docker compose -f docker/dev/docker-compose.yml logs -f

# Nur Frontend:
docker compose -f docker/dev/docker-compose.yml logs -f frontend-dev

# Nur Backend:
docker compose -f docker/dev/docker-compose.yml logs -f backend-dev

Entwicklung

Frontend-Entwicklung

• Code in frontend/src/ editieren → Hot Module Reload übernimmt Änderungen
• Volumes: Source-Code wird live in Container gemountet
• Container-Namen: image-uploader-frontend-dev

Wichtige Komponenten:

• Components/Pages/MultiUploadPage.js - Upload-Interface mit Consent-Management
• Components/ComponentUtils/MultiUpload/ConsentCheckboxes.js - GDPR-konforme Consent-UI
• Components/Pages/ModerationGroupsPage.js - Moderation mit Consent-Filtern
• services/reorderService.js - Drag-and-Drop Logik
• hooks/useImagePreloader.js - Slideshow-Preloading

Backend-Entwicklung

• Code in backend/src/ editieren → Nodemon übernimmt Änderungen automatisch
• Container-Namen: image-uploader-backend-dev
• Environment: NODE_ENV=development

Wichtige Module:

• repositories/GroupRepository.js - Consent-Management & CRUD
• repositories/SocialMediaRepository.js - Plattform- & Consent-Verwaltung
• routes/batchUpload.js - Upload mit Consent-Validierung
• database/DatabaseManager.js - Automatische Migrationen
• services/GroupCleanupService.js - 7-Tage-Cleanup-Logik

Datenbank-Entwicklung

Migrationen erstellen

# Neue Migration anlegen:
touch backend/src/database/migrations/XXX_description.sql

# Migrationen werden automatisch beim Backend-Start ausgeführt
# Manuell: docker compose -f docker/dev/docker-compose.yml restart backend-dev

Datenbank-Zugriff

# SQLite Shell:
docker compose -f docker/dev/docker-compose.yml exec backend-dev sqlite3 /usr/src/app/src/data/db/image_uploader.db

# Schnellabfragen:
docker compose -f docker/dev/docker-compose.yml exec backend-dev sqlite3 /usr/src/app/src/data/db/image_uploader.db "SELECT * FROM groups LIMIT 5;"

# Schema anzeigen:
docker compose -f docker/dev/docker-compose.yml exec backend-dev sqlite3 /usr/src/app/src/data/db/image_uploader.db ".schema"

Migrationen debuggen

# Migration-Status prüfen:
docker compose -f docker/dev/docker-compose.yml exec backend-dev sqlite3 /usr/src/app/src/data/db/image_uploader.db "SELECT * FROM schema_migrations;"

# Backend-Logs mit Migration-Output:
docker compose -f docker/dev/docker-compose.yml logs backend-dev | grep -i migration

Konfiguration anpassen

• Frontend: docker/dev/frontend/config/.env
• Backend: docker/dev/backend/config/.env
• Nginx: docker/dev/frontend/nginx.conf

Testing

Consent-System testen

# 1. Upload mit und ohne Workshop-Consent
# 2. Social Media Checkboxen testen (Facebook, Instagram, TikTok)
# 3. Moderation-Filter prüfen:
#    - Alle Gruppen
#    - Nur Werkstatt
#    - Facebook / Instagram / TikTok
# 4. Export-Funktion (CSV/JSON) testen

Cleanup-System testen

# Test-Script verwenden:
./tests/test-cleanup.sh

# Oder manuell:
# 1. Upload ohne Approval
# 2. Gruppe zurückdatieren (Script verwendet)
# 3. Preview: GET http://localhost:5001/api/admin/cleanup/preview
# 4. Trigger: POST http://localhost:5001/api/admin/cleanup/trigger
# 5. Log prüfen: GET http://localhost:5001/api/admin/deletion-log

API-Tests

# Consent-Endpoints:
curl http://localhost:5001/api/social-media/platforms
curl http://localhost:5001/api/groups/by-consent?workshopConsent=true
curl http://localhost:5001/api/admin/consents/export

# Upload testen (mit Consents):
curl -X POST http://localhost:5001/api/upload-batch \
  -F "images=@test.jpg" \
  -F "year=2025" \
  -F "title=Test" \
  -F "name=Developer" \
  -F 'consents={"workshopConsent":true,"socialMediaConsents":[{"platformId":1,"consented":true}]}'

Container-Management

# Status anzeigen:
docker compose -f docker/dev/docker-compose.yml ps

# Container neustarten:
docker compose -f docker/dev/docker-compose.yml restart

# Container neu bauen (nach Package-Updates):
docker compose -f docker/dev/docker-compose.yml build --no-cache

# Stoppen:
docker compose -f docker/dev/docker-compose.yml down

# Mit Volumes löschen (ACHTUNG: Löscht Datenbank!):
docker compose -f docker/dev/docker-compose.yml down -v

Shell-Zugriff

# Frontend Container:
docker compose -f docker/dev/docker-compose.yml exec frontend-dev bash

# Backend Container:
docker compose -f docker/dev/docker-compose.yml exec backend-dev bash

# Datenbank-Shell:
docker compose -f docker/dev/docker-compose.yml exec backend-dev sqlite3 /usr/src/app/src/data/db/image_uploader.db

Debugging

Backend Debugging

# Live-Logs:
docker compose -f docker/dev/docker-compose.yml logs -f backend-dev

# Nodemon Restart:
# → Änderungen in backend/src/** werden automatisch erkannt

# Fehlerhafte Migration fixen:
# 1. Migration-Eintrag löschen:
docker compose -f docker/dev/docker-compose.yml exec backend-dev sqlite3 /usr/src/app/src/data/db/image_uploader.db "DELETE FROM schema_migrations WHERE migration_name='XXX.sql';"
# 2. Backend neustarten:
docker compose -f docker/dev/docker-compose.yml restart backend-dev

Frontend Debugging

# React DevTools im Browser verwenden
# Network Tab für API-Calls prüfen
# Console für Fehler checken

# Nginx-Reload (bei Konfig-Änderungen):
docker compose -f docker/dev/docker-compose.yml exec frontend-dev nginx -s reload

Datenbank-Backup & Restore

# Backup:
docker cp image-uploader-backend-dev:/usr/src/app/src/data/db/image_uploader.db ./backup.db

# Restore:
docker cp ./backup.db image-uploader-backend-dev:/usr/src/app/src/data/db/image_uploader.db
docker compose -f docker/dev/docker-compose.yml restart backend-dev

Häufige Probleme

"Migration failed" Fehler

Problem: Inline-Kommentare in SQL-Statements
Lösung: DatabaseManager entfernt diese automatisch (seit Commit 8e62475)

"No such column: display_in_workshop"

Problem: Migration 005 nicht ausgeführt
Lösung: Backend neu starten oder manuell Migration ausführen

Port 3000 bereits belegt

Problem: Anderer Prozess nutzt Port 3000
Lösung:

lsof -ti:3000 | xargs kill -9
# Oder Port in docker/dev/docker-compose.yml ändern

Consent-Filter zeigt nichts

Problem: display_in_workshop fehlt in groupFormatter
Lösung: Bereits gefixt (Commit f049c47)

Git Workflow

# Feature Branch erstellen:
git checkout -b feature/my-feature

# Änderungen committen:
git add .
git commit -m "feat: Add new feature"

# Vor Merge: Code testen!
# - Upload-Flow mit Consents
# - Moderation mit Filtern
# - Slideshow-Funktionalität
# - Cleanup-System

# Push:
git push origin feature/my-feature

Nützliche Befehle

# Alle Container-IDs:
docker ps -a

# Speicherplatz prüfen:
docker system df

# Ungenutztes aufräumen:
docker system prune -a

# Logs durchsuchen:
docker compose -f docker/dev/docker-compose.yml logs | grep ERROR

# Performance-Monitoring:
docker stats