hobbyhimmel/Project-Image-Uploader
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
1.2.1
Project-Image-Uploader/README.dev.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

1.6 KiB
Raw Permalink Blame History

Dev: Schnellstart

Kurz und knapp — so startest und nutzt du die lokale Dev‑Umgebung mit HMR (nginx als Proxy vor dem CRA dev server):

Voraussetzungen

  • Docker & Docker Compose (Docker Compose Plugin)

Starten (Dev)

  1. Build & Start (daemon):
docker compose up --build -d image-uploader-frontend
  1. Logs verfolgen:
docker compose logs -f image-uploader-frontend
  1. Browser öffnen: http://localhost:3000 (HMR aktiv)

Ändern & Testen

  • Dateien editieren im frontend/src/... → HMR übernimmt Änderungen sofort.
  • Wenn du nginx‑Konfiguration anpassen willst, editiere frontend/conf/conf.d/default.conf (Dev‑Variante wird beim Containerstart benutzt). Nach Änderung: nginx reload ohne Neustart:
docker compose exec image-uploader-frontend nginx -s reload

Probleme mit node_modules

  • Wenn du ein host‑seitiges frontend/node_modules hast, lösche es (konsistenter ist der container‑verwaltete Volume):
rm -rf frontend/node_modules

Danach docker compose up --build -d image-uploader-frontend erneut ausführen.

Stoppen

docker compose down

Hinweis

  • Diese Dev‑Konfiguration läuft lokal mit erweiterten Rechten (nur für Entwicklung). Produktions‑Images/Configs bleiben unverändert.

Build and start: docker compose up --build -d image-uploader-frontend

Tail logs: docker compose logs -f image-uploader-frontend

Reload nginx (after editing conf in container): docker compose exec image-uploader-frontend nginx -s reload

docker compose exec image-uploader-frontend nginx -s reload docker compose down