# 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