GKNB_MSTM071/Frontend/1 het/backend/images/README.md

Product Images Directory

This directory contains product images for the webstore backend.

Image Requirements

The following 17 placeholder images are required for the seed data to display properly:

Shoes (4 images)

• street-runner.jpg - 18,990 HUF
• trail-edge.jpg - 24,990 HUF
• urban-sprint.jpg - 22,990 HUF
• classic-comfort.jpg - 16,990 HUF

Bags (4 images)

• urban-tote.jpg - 14,990 HUF
• backpack-pro.jpg - 19,990 HUF
• crossbody.jpg - 9,990 HUF
• duffle.jpg - 24,990 HUF

Accessories (4 images)

• classic-cap.jpg - 6,990 HUF
• silk-scarf.jpg - 12,990 HUF
• leather-belt.jpg - 8,990 HUF
• watch-straps.jpg - 4,990 HUF

Clothing (3 images)

• cotton-tshirt.jpg - 7,990 HUF
• denim-jacket.jpg - 29,990 HUF
• yoga-leggings.jpg - 11,990 HUF

Electronics (2 images)

• earbuds.jpg - 17,990 HUF
• usb-hub.jpg - 5,990 HUF

Directory Structure

images/
├── [17 product placeholder images]
├── uploads/                    (auto-created by multer)
│   └── [user-uploaded images]
├── production.compose.yml      (production docker-compose)
├── .production.env            (production environment variables)
└── run-student-production.bat  (production start script)

Image Specifications

Recommended specifications for product images:

• Format: JPEG or PNG
• Dimensions: 400-600px width, 300-600px height
• File size: < 500KB per image
• Color space: RGB or RGBA

Uploads Directory

The uploads/ directory is automatically created by the multer middleware when the backend starts. This directory stores images uploaded by users through the frontend.

Important notes:

• Images are stored with timestamps: 1717123456789-product-name.jpg
• Served via: GET /images/uploads/{filename}
• Max file size: 5MB per upload
• Only image MIME types allowed

Production Build

When building for production with build-production-images.bat:

1. ✓ Placeholder images are automatically generated (if ImageMagick or PowerShell available)
2. ✓ Seeding runs automatically when containers start
3. ✓ Upload directory is created on first run

Database Seeding

The database automatically seeds with:

• 5 categories: Shoes, Bags, Accessories, Clothing, Electronics
• 16 products: 2-4 per category with placeholder images
• 3 test users: admin@test.com, john@test.com, jane@test.com

Customization

To use custom product images:

1. Development: Replace placeholder images in this directory
2. Production: Include custom images in the images/ directory before building
3. After deployment: Use the API to upload images via POST /api/shop/products/{id}/image

Troubleshooting

Images not displaying in frontend

• Ensure images are placed in the correct directory
• Check file names match exactly (case-sensitive on Linux/Mac)
• Verify express.static is configured in src/Api/app.js
• Check console for 404 errors

Upload fails

• Check file is an image (JPEG, PNG, WebP, GIF, etc.)
• Verify file size < 5MB
• Ensure uploads/ directory exists and is writable

Seeding without images

• Seed will complete successfully even without images
• Products will have null imageUrl values
• Frontend can display placeholder or error images