+ ↓
+5. Browser requests image → 404 (see flow above)
+```
+
+---
+
+## 🎯 Root Causes Summary
+
+1. **Missing Image Assets**: Frontend and database were set up with specific image filenames, but those image files were never added to the filesystem.
+
+2. **Incomplete Initial Setup**: The website structure has placeholder image references in:
+ - HTML files (home.html, portfolio.html)
+ - Database product records
+ - But corresponding image files weren't created
+
+3. **Development vs Production Gap**: The application expects a complete asset library that doesn't exist yet.
+
+---
+
+## 🛠️ Solutions & Fixes
+
+### **FIX #1: Create Symbolic Links to Existing Images**
+
+**Approach:** Map missing filenames to existing similar images as temporary placeholders.
+
+**Implementation:**
+
+```bash
+# Create missing images using existing ones as placeholders
+cd /media/pts/Website/SkyArtShop/website/assets/images/
+
+# Home page images
+ln -s hero-craft.jpg hero-image.jpg
+ln -s craft-supplies.jpg inspiration.jpg
+ln -s products/placeholder.jpg placeholder.jpg
+
+# Product-specific images
+cd products/
+ln -s product-1.jpg stickers-1.jpg
+ln -s product-2.jpg washi-1.jpg
+ln -s product-3.jpg journal-1.jpg
+ln -s product-4.jpg stamps-1.jpg
+ln -s product-1.jpg stickers-2.jpg
+ln -s product-2.jpg washi-2.jpg
+ln -s product-3.jpg paper-1.jpg
+ln -s product-4.jpg markers-1.jpg
+```
+
+**Benefits:**
+
+- ✅ Eliminates 404 errors immediately
+- ✅ No code changes required
+- ✅ Preserves image references in database
+- ✅ Easy to replace with real images later
+
+---
+
+### **FIX #2: Reduce 404 Logging Noise**
+
+**Approach:** Modify notFoundHandler to suppress static asset 404 warnings.
+
+**Current Code (middleware/errorHandler.js):**
+
+```javascript
+const notFoundHandler = (req, res) => {
+ logger.warn("Route not found", {
+ path: req.path,
+ method: req.method,
+ ip: req.ip,
+ });
+
+ res.status(404).json({
+ success: false,
+ message: "Route not found",
+ path: req.path,
+ });
+};
+```
+
+**Improved Code:**
+
+```javascript
+const notFoundHandler = (req, res) => {
+ // Only log API route 404s, not static assets
+ const isStaticAsset = req.path.match(/\.(jpg|jpeg|png|gif|svg|css|js|ico|webp|woff|woff2|ttf|eot)$/i);
+
+ if (!isStaticAsset) {
+ logger.warn("Route not found", {
+ path: req.path,
+ method: req.method,
+ ip: req.ip,
+ });
+ } else {
+ // Log static asset 404s at debug level for troubleshooting
+ logger.debug("Static asset not found", {
+ path: req.path,
+ method: req.method,
+ });
+ }
+
+ res.status(404).json({
+ success: false,
+ message: "Route not found",
+ path: req.path,
+ });
+};
+```
+
+**Benefits:**
+
+- ✅ Cleaner logs - focus on real routing errors
+- ✅ Static asset 404s still logged at debug level if needed
+- ✅ Easier to identify genuine application issues
+
+---
+
+### **FIX #3: Add Fallback Image Middleware**
+
+**Approach:** Automatically serve placeholder for missing product images.
+
+**New Middleware (add to server.js):**
+
+```javascript
+// Fallback for missing product images
+app.use('/assets/images/products', (req, res, next) => {
+ const imagePath = path.join(baseDir, 'assets', 'images', 'products', req.path);
+
+ // Check if requested image exists
+ if (require('fs').existsSync(imagePath)) {
+ return next(); // File exists, let express.static handle it
+ }
+
+ // File doesn't exist, serve placeholder
+ const placeholderPath = path.join(baseDir, 'assets', 'images', 'products', 'placeholder.jpg');
+ res.sendFile(placeholderPath);
+});
+
+app.use("/assets", express.static(path.join(baseDir, "assets")));
+```
+
+**Benefits:**
+
+- ✅ Automatic fallback - no broken images
+- ✅ Works even if symlinks aren't created
+- ✅ Better user experience
+- ✅ No database updates required
+
+---
+
+### **FIX #4: Database Cleanup Query (Optional)**
+
+**Approach:** Update database to use existing generic images.
+
+**SQL Query:**
+
+```sql
+-- Update all products with missing images to use generic placeholders
+UPDATE products
+SET imageurl = CASE
+ WHEN category = 'Stickers' THEN '/assets/images/stickers.jpg'
+ WHEN category = 'Washi Tape' THEN '/assets/images/washi-tape.jpg'
+ WHEN category = 'Journals' THEN '/assets/images/journals.jpg'
+ ELSE '/assets/images/products/placeholder.jpg'
+END
+WHERE imageurl LIKE '/assets/images/products/%';
+```
+
+**Benefits:**
+
+- ✅ Uses more relevant category images
+- ✅ Matches existing assets
+- ✅ Better visual consistency
+
+---
+
+## 🛡️ Safeguards to Prevent Recurrence
+
+### **1. Image Validation Middleware**
+
+Add validation when products are created/updated:
+
+```javascript
+// In routes/admin.js - Product creation/update
+const validateProductImage = (req, res, next) => {
+ const { imageurl } = req.body;
+
+ if (imageurl && !imageurl.startsWith('/uploads/')) {
+ // Only validate non-uploaded images
+ const imagePath = path.join(baseDir, imageurl.replace(/^\//, ''));
+
+ if (!fs.existsSync(imagePath)) {
+ logger.warn('Product image does not exist', { imageurl });
+ // Set to placeholder instead of rejecting
+ req.body.imageurl = '/assets/images/products/placeholder.jpg';
+ }
+ }
+
+ next();
+};
+```
+
+### **2. Health Check Enhancement**
+
+Add image asset health to /health endpoint:
+
+```javascript
+app.get("/health", async (req, res) => {
+ const dbHealth = await healthCheck();
+
+ // Check critical images exist
+ const criticalImages = [
+ '/assets/images/hero-image.jpg',
+ '/assets/images/products/placeholder.jpg'
+ ];
+
+ const missingImages = criticalImages.filter(img => {
+ const imagePath = path.join(baseDir, img);
+ return !fs.existsSync(imagePath);
+ });
+
+ res.status(200).json({
+ status: dbHealth.healthy && missingImages.length === 0 ? "ok" : "degraded",
+ timestamp: new Date().toISOString(),
+ uptime: process.uptime(),
+ database: dbHealth,
+ assets: {
+ healthy: missingImages.length === 0,
+ missingCritical: missingImages
+ },
+ memory: {
+ used: Math.round(process.memoryUsage().heapUsed / 1024 / 1024),
+ total: Math.round(process.memoryUsage().heapTotal / 1024 / 1024),
+ },
+ });
+});
+```
+
+### **3. Pre-deployment Image Check Script**
+
+Create validation script:
+
+```bash
+#!/bin/bash
+# check-assets.sh - Validate all referenced images exist
+
+echo "🔍 Checking static assets..."
+
+# Check HTML image references
+echo "Checking HTML files..."
+grep -roh 'src="[^"]*\.\(jpg\|png\|gif\|svg\)' website/public/*.html | \
+ sed 's/src="//g' | \
+ while read img; do
+ if [ ! -f "website${img}" ]; then
+ echo "❌ Missing: website${img}"
+ fi
+ done
+
+# Check database image references
+echo "Checking database products..."
+psql -U skyartapp -d skyartshop -t -c "SELECT DISTINCT imageurl FROM products WHERE imageurl != '';" | \
+ while read img; do
+ img=$(echo $img | xargs) # trim whitespace
+ if [ ! -f "website${img}" ]; then
+ echo "❌ Missing: website${img}"
+ fi
+ done
+
+echo "✅ Asset check complete"
+```
+
+### **4. Logging Configuration**
+
+Update Winston logger to use separate log levels:
+
+```javascript
+// In config/logger.js
+const logger = winston.createLogger({
+ level: process.env.LOG_LEVEL || 'info', // Set to 'debug' for static asset 404s
+ format: winston.format.combine(
+ winston.format.timestamp({ format: 'YYYY-MM-DD HH:mm:ss' }),
+ winston.format.errors({ stack: true }),
+ winston.format.json()
+ ),
+ defaultMeta: { service: 'skyartshop' },
+ transports: [
+ new winston.transports.File({
+ filename: 'logs/error.log',
+ level: 'error'
+ }),
+ new winston.transports.File({
+ filename: 'logs/combined.log',
+ level: 'info' // Won't include debug messages
+ }),
+ new winston.transports.File({
+ filename: 'logs/debug.log',
+ level: 'debug' // Separate file for debug (including static 404s)
+ }),
+ ],
+});
+```
+
+---
+
+## 📊 Impact Assessment
+
+### Before Fixes
+
+- ❌ 50+ 404 warnings per page load
+- ❌ Broken images on frontend
+- ❌ Polluted logs
+- ❌ Poor user experience
+
+### After Fixes
+
+- ✅ 0 static asset 404s
+- ✅ All images display correctly
+- ✅ Clean, readable logs
+- ✅ Professional appearance
+- ✅ Automatic fallbacks prevent future issues
+
+---
+
+## 🚀 Implementation Priority
+
+### **Immediate (Do Now)**
+
+1. ✅ Create symbolic links for missing images (FIX #1)
+2. ✅ Update notFoundHandler to reduce log noise (FIX #2)
+
+### **Short-term (Next Session)**
+
+3. ⏳ Add fallback image middleware (FIX #3)
+2. ⏳ Enhance health check with asset validation
+
+### **Long-term (Future Enhancement)**
+
+5. ⏳ Create asset validation script
+2. ⏳ Add image validation on product create/update
+3. ⏳ Replace placeholder images with real product photos
+
+---
+
+## 📝 Conclusion
+
+**Root Cause:** Application was deployed with incomplete static asset library. Frontend and database reference specific image files that don't exist in the filesystem.
+
+**Primary Fix:** Create symbolic links mapping missing filenames to existing similar images. This eliminates 404 errors without requiring code or database changes.
+
+**Secondary Fix:** Improve 404 logging to distinguish between API routing errors (important) and static asset 404s (less critical).
+
+**Prevention:** Add middleware fallbacks, validation, and health checks to catch missing assets before they impact users.
+
+**Status:** Ready to implement fixes immediately.
diff --git a/docs/DESIGN_PREVIEW.md b/docs/DESIGN_PREVIEW.md
new file mode 100644
index 0000000..75de4b8
--- /dev/null
+++ b/docs/DESIGN_PREVIEW.md
@@ -0,0 +1,399 @@
+# Visual Design Preview - Modern Ecommerce Redesign
+
+## Color Palette
+
+### Primary Colors
+
+```
+Primary Red: #FF6B6B ████████ (Coral red - energy, urgency)
+Primary Light: #FF8E8E ████████ (Hover states)
+Primary Dark: #FF4949 ████████ (Active states)
+
+Secondary: #4ECDC4 ████████ (Turquoise - trust)
+Secondary Light: #71D7D0 ████████
+Secondary Dark: #2BB3A9 ████████
+
+Accent: #FFE66D ████████ (Yellow - attention)
+```
+
+### Neutral Grays
+
+```
+Gray 50: #F9FAFB ▓▓▓▓▓▓▓▓ (Lightest background)
+Gray 100: #F3F4F6 ▓▓▓▓▓▓▓▓
+Gray 200: #E5E7EB ▓▓▓▓▓▓▓▓ (Borders)
+Gray 300: #D1D5DB ▓▓▓▓▓▓▓▓
+Gray 400: #9CA3AF ▓▓▓▓▓▓▓▓ (Muted text)
+Gray 500: #6B7280 ▓▓▓▓▓▓▓▓ (Secondary text)
+Gray 600: #4B5563 ▓▓▓▓▓▓▓▓
+Gray 700: #374151 ▓▓▓▓▓▓▓▓ (Primary text)
+Gray 800: #1F2937 ▓▓▓▓▓▓▓▓
+Gray 900: #111827 ▓▓▓▓▓▓▓▓ (Darkest)
+```
+
+### Status Colors
+
+```
+Success: #10B981 ████████ (Green)
+Warning: #F59E0B ████████ (Orange)
+Error: #EF4444 ████████ (Red)
+Info: #3B82F6 ████████ (Blue)
+```
+
+## Typography
+
+### Font Families
+
+- **Headings:** Poppins (600, 700, 800 weights)
+- **Body:** Inter (400, 500, 600, 700 weights)
+
+### Font Scale
+
+```
+4xl - 40px - Page Titles (h1)
+3xl - 32px - Section Headings (h2)
+2xl - 24px - Subsections (h3)
+xl - 20px - Card Titles (h4)
+lg - 18px - Emphasized Text
+base- 16px - Body Text
+sm - 14px - Secondary Text
+xs - 12px - Labels, Captions
+```
+
+## Spacing System (8px Base)
+
+```
+xs - 8px - Tight spacing (button padding, small gaps)
+sm - 16px - Standard spacing (between elements)
+md - 24px - Medium spacing (section padding)
+lg - 32px - Large spacing (container padding)
+xl - 48px - Extra large (between sections)
+2xl - 64px - Section dividers
+3xl - 96px - Major sections
+```
+
+## Component Preview
+
+### Buttons
+
+```
+┌─────────────────────────┐
+│ PRIMARY BUTTON │ ← Red background, white text
+└─────────────────────────┘
+
+┌─────────────────────────┐
+│ SECONDARY BUTTON │ ← Turquoise background
+└─────────────────────────┘
+
+┌─────────────────────────┐
+│ OUTLINE BUTTON │ ← Transparent, red border
+└─────────────────────────┘
+
+ Ghost Button ← Transparent, subtle hover
+```
+
+### Product Card
+
+```
+┌──────────────────────────────────────┐
+│ ╔════════════════════════════════╗ │
+│ ║ ║ │
+│ ║ [Product Image] ║ │ ← Zoom on hover
+│ ║ ║ │
+│ ║ ♡ 👁 ║ │ ← Floating actions
+│ ╚════════════════════════════════╝ │
+│ │
+│ Product Name │
+│ Short description text here... │
+│ │
+│ ★★★★☆ (4.5) │ ← Ratings
+│ │
+│ $29.99 [Add to Cart] │
+└──────────────────────────────────────┘
+```
+
+### Navigation Bar
+
+```
+════════════════════════════════════════════════════════════════
+ ⚡ Free Shipping on Orders Over $50 | Shop Now
+════════════════════════════════════════════════════════════════
+
+ 🎨 Sky Art Shop [Search products...] ♡ 🛒 👤 ☰
+
+ Home Shop Portfolio About Blog Contact
+────────────────────────────────────────────────────────────────
+```
+
+### Product Grid Layout
+
+```
+Desktop (4 columns):
+┌───────┐ ┌───────┐ ┌───────┐ ┌───────┐
+│Product│ │Product│ │Product│ │Product│
+└───────┘ └───────┘ └───────┘ └───────┘
+
+Tablet (3 columns):
+┌───────┐ ┌───────┐ ┌───────┐
+│Product│ │Product│ │Product│
+└───────┘ └───────┘ └───────┘
+
+Mobile (1 column):
+┌─────────────────┐
+│ Product │
+└─────────────────┘
+```
+
+## Shop Page Layout
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│ NAVIGATION BAR (Sticky) │
+├─────────────────────────────────────────────────────────────┤
+│ │
+│ SHOP HERO │
+│ Shop All Products │
+│ Discover unique art pieces and supplies │
+│ │
+├─────────────────────────────────────────────────────────────┤
+│ [All] [Paintings] [Prints] [Sculptures] [Digital] [Supplies]│ ← Scrolling chips
+├─────────────────────────────────────────────────────────────┤
+│ │
+│ ┌──────────┬──────────────────────────────────────────┐ │
+│ │ FILTERS │ PRODUCT GRID │ │
+│ │ │ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │ │
+│ │ Price │ │ │ │ │ │ │ │ │ │ │
+│ │ Range │ └────┘ └────┘ └────┘ └────┘ │ │
+│ │ │ │ │
+│ │ Avail. │ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │ │
+│ │ [x] In │ │ │ │ │ │ │ │ │ │ │
+│ │ [ ] Out │ └────┘ └────┘ └────┘ └────┘ │ │
+│ │ │ │ │
+│ │ Sort By │ [1] [2] [3] [4] [Next] │ │
+│ │ ▼ │ │ │
+│ └──────────┴──────────────────────────────────────────┘ │
+│ │
+├─────────────────────────────────────────────────────────────┤
+│ FOOTER │
+│ Sky Art Shop Shop About Customer Service │
+│ Description Links Links Links │
+│ │
+│ © 2025 Sky Art Shop. All rights reserved. │
+└─────────────────────────────────────────────────────────────┘
+```
+
+## Hover Effects & Animations
+
+### Product Card Hover
+
+```
+Normal: Hover:
+┌──────────┐ ┌──────────┐
+│ Image │ → │ Image+5% │ ← Zoom
+│ │ │ ♡ 👁 │ ← Buttons appear
+└──────────┘ └──────────┘
+ + Shadow increases
+```
+
+### Button Hover
+
+```
+Normal → Hover:
+- Background darkens 10%
+- Transform: translateY(-1px)
+- Shadow increases
+- Transition: 150ms
+```
+
+### Category Chip Active
+
+```
+Inactive: Active:
+┌─────────┐ ┌─────────┐
+│ Paintings│ → │Paintings│
+└─────────┘ └─────────┘
+Gray bg Red bg
+Gray text White text
+```
+
+## Shadow Levels
+
+```
+sm: ▁ - Subtle card border
+md: ▂ - Default card elevation
+lg: ▃ - Hover state
+xl: ▄ - Dropdown/modal
+2xl: █ - Dramatic emphasis
+```
+
+## Border Radius
+
+```
+sm: ┌─┐ 6px - Buttons, inputs
+md: ┌──┐ 8px - Cards
+lg: ┌───┐12px - Large cards
+xl: ┌────┐16px- Modal
+2xl: ┌─────┐24px- Hero sections
+full: ● 9999px- Circular (badges, icons)
+```
+
+## Responsive Breakpoints
+
+```
+Mobile: 320px ═══════════════
+Mobile L: 640px ═══════════════════════════
+Tablet: 768px ════════════════════════════════════
+Desktop: 1024px ══════════════════════════════════════════════
+Desktop L: 1280px ═══════════════════════════════════════════════════
+Wide: 1536px+ ════════════════════════════════════════════════════════
+```
+
+## Badge Variations
+
+```
+NEW [Bold yellow background, dark text]
+SALE [Red background, white text, -20%]
+BESTSELLER [Green background, white text]
+LOW STOCK [Orange background, white text]
+```
+
+## Form Elements
+
+```
+Input Field:
+┌──────────────────────────────────┐
+│ [Icon] Enter text here... │
+└──────────────────────────────────┘
+
+Focused:
+┌══════════════════════════════════┐ ← Blue border
+│ [Icon] Enter text here... │ ← 3px shadow
+└══════════════════════════════════┘
+
+Select Dropdown:
+┌──────────────────────────────┬─┐
+│ Featured │▼│
+└──────────────────────────────┴─┘
+
+Checkbox:
+☐ Out of Stock → ☑ In Stock
+```
+
+## Z-Index Layers
+
+```
+Base: 0 - Regular content
+Dropdown: 1000 - Category/filter dropdowns
+Sticky: 1020 - Sticky navigation
+Fixed: 1030 - Fixed elements
+Backdrop: 1040 - Modal overlay
+Modal: 1050 - Modal dialogs
+Popover: 1060 - Tooltips/popovers
+Tooltip: 1070 - Highest priority tooltips
+```
+
+## Comparison: Old vs New
+
+### Navigation
+
+```
+OLD: Simple purple gradient navbar
+ Basic links, minimal styling
+
+NEW: Multi-tier professional navigation
+ Top banner + main nav + links
+ Search bar, action icons, dropdowns
+ Sticky positioning, mobile menu
+```
+
+### Product Cards
+
+```
+OLD: Basic image + text + price
+ Simple hover effect
+ No interactions
+
+NEW: Advanced ecommerce card
+ Hover zoom, floating actions
+ Badges, ratings, animations
+ Quick add-to-cart button
+```
+
+### Colors
+
+```
+OLD: Purple #6A3A9C theme
+ Pink accents
+ Dark backgrounds
+
+NEW: Coral Red #FF6B6B primary
+ Turquoise secondary
+ Clean white backgrounds
+ Professional gray scale
+```
+
+### Spacing
+
+```
+OLD: Random pixel values
+ Inconsistent gaps
+ Mixed units
+
+NEW: 8px grid system
+ CSS variables
+ Consistent throughout
+ Harmonious rhythm
+```
+
+## Mobile Experience
+
+```
+Phone View (375px):
+┌──────────────────┐
+│ 🎨 Sky 🛒 ☰ │ ← Compact nav
+├──────────────────┤
+│ │
+│ Hero Banner │
+│ │
+├──────────────────┤
+│ [Chip][Chip]→ │ ← Scrollable
+├──────────────────┤
+│ [🔍 Filters] │ ← Drawer button
+├──────────────────┤
+│ ┌────────────┐ │
+│ │ Product │ │ ← 1 column
+│ └────────────┘ │
+│ ┌────────────┐ │
+│ │ Product │ │
+│ └────────────┘ │
+└──────────────────┘
+```
+
+## Performance Metrics
+
+### CSS Size
+
+- design-system.css: ~10 KB
+- modern-nav.css: ~8 KB
+- modern-shop.css: ~8 KB
+- **Total:** 26 KB (minified will be ~15 KB)
+
+### Load Times (Target)
+
+- First Paint: < 1s
+- Interactive: < 2s
+- Full Load: < 3s
+
+## Accessibility Features
+
+- ✅ Keyboard navigation
+- ✅ Focus visible states
+- ✅ ARIA labels
+- ✅ Semantic HTML
+- ✅ Color contrast WCAG AA
+- ✅ Screen reader friendly
+- ✅ Touch targets 44x44px+
+
+---
+
+**Ready to view:**