updated frontend

2026-04-01 22:01:36 +02:00
parent 91e48d2178
commit 3ee9c03b85
42 changed files with 1498 additions and 23 deletions
@@ -0,0 +1,104 @@
+# 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